/* ========== GLOBAL ========== */
.rsjm-wrap {
    max-width: 1200px;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

.rsjm-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.rsjm-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* ========== TABLE ========== */
.rsjm-table {
    width: 100%;
    border-collapse: collapse;
}

.rsjm-table th {
    background: #f4f6f8;
    text-align: left;
    padding: 12px;
    font-weight: 600;
}

.rsjm-table td {
    padding: 12px;
    border-top: 1px solid #eee;
}

.rsjm-table tr:hover {
    background: #fafafa;
}

/* ========== BUTTONS ========== */
.rsjm-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.rsjm-btn-primary {
    background: #2271b1;
    color: #fff;
}

.rsjm-btn-success {
    background: #2fb344;
    color: #fff;
}

.rsjm-btn-danger {
    background: #d63638;
    color: #fff;
}

.rsjm-btn-light {
    background: #f0f0f1;
    color: #000;
}

/* ========== FORM ========== */
.rsjm-field {
    margin-bottom: 15px;
}

.rsjm-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.rsjm-field input,
.rsjm-field select,
.rsjm-field textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* ========== STATUS BADGES ========== */
.rsjm-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.rsjm-badge-pending {
    background: #fff4e5;
    color: #b45309;
}

.rsjm-badge-in_progress {
    background: #e0f2fe;
    color: #0369a1;
}

.rsjm-badge-completed {
    background: #dcfce7;
    color: #15803d;
}

/* ========== MOBILE ========== */
@media(max-width: 768px) {
    .rsjm-table,
    .rsjm-table thead {
        display: none;
    }

    .rsjm-table tr {
        display: block;
        margin-bottom: 15px;
        background: #fff;
        padding: 15px;
        border-radius: 10px;
    }

    .rsjm-table td {
        display: block;
        padding: 6px 0;
    }
}

/* ========== PRINT ========== */
@media print {
    .rsjm-btn, .rsjm-no-print {
        display: none !important;
    }
}


/* ITEM CARD GRID */
.rsjm-item-card {
    margin-bottom: 15px;
}

.rsjm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.rsjm-full {
    grid-column: 1 / -1;
}

/* MOBILE */
@media(max-width: 768px) {
    .rsjm-grid {
        grid-template-columns: 1fr;
    }

    .rsjm-btn {
        width: 100%;
    }
}

/* SELECT BEAUTIFY */
.rsjm-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                      linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
                         calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
}


.rsjm-table input {
    max-width: 90px;
}


/* TABS */

.rsjm-tabs{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.rsjm-tab-btn{
    padding:8px 16px;
    border:none;
    border-radius:6px;
    background:#f0f0f1;
    cursor:pointer;
    font-weight:600;
}

.rsjm-tab-btn.active{
    background:#2271b1;
    color:#fff;
}

.rsjm-tab-content{
    display:none;
}

.rsjm-tab-content.active{
    display:block;
}


/* ==============================
   PAYMENT SUMMARY CARD
============================== */

.rsjm-summary-card{
    background:#fff;
    border-radius:12px;
    padding:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    margin-top:20px;
    max-width:450px;
}

.rsjm-summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    font-size:15px;
    border-bottom:1px solid #f0f0f1;
}

.rsjm-summary-row:last-child{
    border-bottom:none;
}

.rsjm-summary-row span{
    color:#555;
    font-weight:500;
}

.rsjm-summary-row strong{
    font-size:16px;
}

/* Colors */

.rsjm-summary-row.total strong{
    color:#111;
}

.rsjm-summary-row.advance strong{
    color:#2563eb;
}

.rsjm-summary-row.paid strong{
    color:#16a34a;
}

.rsjm-summary-row.pending strong{
    color:#dc2626;
    font-size:18px;
}

/* Mobile */
@media(max-width:600px){
    .rsjm-summary-card{
        max-width:100%;
    }
}



/* =========================
   PREMIUM PAYMENT SUMMARY
========================= */

.rsjm-premium-summary{
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    max-width:550px;
    margin-top:25px;
}

/* Big Total */
.rsjm-big-total{
    text-align:center;
    margin-bottom:20px;
}

.rsjm-big-total span{
    color:#777;
    font-size:14px;
}

.rsjm-big-total h2{
    margin:5px 0 0;
    font-size:28px;
    color:#111;
}

/* Progress */
.rsjm-progress-wrapper{
    margin-bottom:20px;
}

.rsjm-progress-bar{
    height:10px;
    background:#f1f5f9;
    border-radius:50px;
    overflow:hidden;
}

.rsjm-progress-fill{
    height:100%;
    background:linear-gradient(90deg,#16a34a,#22c55e);
    transition:width .4s ease;
}

.rsjm-progress-label{
    margin-top:6px;
    font-size:13px;
    text-align:right;
    color:#555;
}

/* Breakdown grid */
.rsjm-breakdown-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.rsjm-break-item{
    background:#f9fafb;
    padding:14px;
    border-radius:12px;
    text-align:center;
}

.rsjm-break-item span{
    display:block;
    font-size:13px;
    color:#666;
}

.rsjm-break-item strong{
    display:block;
    margin-top:4px;
    font-size:16px;
}

/* Colors */
.rsjm-break-item.advance strong{
    color:#2563eb;
}

.rsjm-break-item.paid strong{
    color:#16a34a;
}

.rsjm-break-item.pending strong{
    color:#dc2626;
}

/* Mobile */
@media(max-width:600px){
    .rsjm-breakdown-grid{
        grid-template-columns:1fr;
    }
}



/* =======================
   SaaS Dashboard
======================= */

.rsjm-dashboard h1{
    margin-bottom:25px;
}

.rsjm-kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.rsjm-kpi-card{
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.rsjm-kpi-card span{
    color:#777;
    font-size:14px;
}

.rsjm-kpi-card h2{
    margin:10px 0 0;
    font-size:24px;
}

.rsjm-kpi-card.green{border-left:5px solid #16a34a;}
.rsjm-kpi-card.orange{border-left:5px solid #f59e0b;}
.rsjm-kpi-card.blue{border-left:5px solid #3b82f6;}

.rsjm-chart-card{
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    margin-bottom:25px;
}


/* Leaderboard */
.rsjm-leaderboard{
    margin-top:15px;
}

.rsjm-leader-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border-bottom:1px solid #eee;
}

.rsjm-leader-item:last-child{
    border-bottom:none;
}

.rsjm-leader-item .rank{
    font-weight:700;
    color:#3b82f6;
}

.rsjm-leader-item .amount{
    font-weight:600;
    color:#16a34a;
}


/* Alert Card */
.rsjm-alert-card{
    background:#fee2e2;
    color:#991b1b;
    padding:15px;
    border-radius:12px;
    margin-bottom:20px;
    font-weight:600;
}

.rsjm-heat-item{
    display:flex;
    justify-content:space-between;
    padding:10px;
    background:#fee2e2;
    margin-bottom:8px;
    border-radius:8px;
}


body.rsjm-dark{
    background:#111;
    color:#eee;
}

body.rsjm-dark .rsjm-kpi-card,
body.rsjm-dark .rsjm-chart-card{
    background:#1f1f1f;
    color:#eee;
}

.rsjm-dark-btn{
    margin-bottom:20px;
    padding:8px 14px;
    border:none;
    border-radius:8px;
    background:#3b82f6;
    color:#fff;
    cursor:pointer;
}

.rsjm-heat-item-link{
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}

.rsjm-heat-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
    border-radius:12px;
    background:#fee2e2;
    color:#991b1b;
    transition:all .2s ease;
}

.rsjm-heat-item:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    background:#fecaca;
}

.rsjm-heat-item strong{
    font-size:15px;
}

.rsjm-heat-item small{
    display:block;
    font-size:12px;
    opacity:.7;
}


.rsjm-status{
    padding:4px 8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
}

.rsjm-status-pending{background:#fef3c7;color:#92400e;}
.rsjm-status-partial{background:#fee2e2;color:#991b1b;}
.rsjm-status-completed{background:#dcfce7;color:#166534;}
.rsjm-status-ready{background:#e0f2fe;color:#075985;}
.rsjm-status-in_progress{background:#ede9fe;color:#5b21b6;}

.button-danger{
    background:#dc2626 !important;
    color:#fff !important;
}