/* ==========================================================================
   1. CORE DESIGN LAYOUT (FRONTEND WIZARD & GLOBAL SETUP)
   ========================================================================== */
#spmb-wizard-container, .wrap .spmb-admin-card-grid, .wrap .spmb-admin-settings-grid {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
#spmb-wizard-container {
    max-width: 650px; margin: 30px auto; padding: 30px; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
}
#spmb-wizard-container h3 {
    text-align: center; color: #1e293b; margin: 0 0 25px 0; font-size: 22px; font-weight: 700;
}
.spmb-form-group, .spmb-admin-field-group {
    margin-bottom: 18px; display: flex; flex-direction: column; flex: 1; box-sizing: border-box;
}
.spmb-form-group label, .spmb-admin-field-group label {
    font-weight: 600; font-size: 14px; color: #334155; margin-bottom: 6px;
}

/* Input, Select, & Textarea Controls */
#spmb-wizard-container input[type="text"], #spmb-wizard-container input[type="date"],
#spmb-wizard-container input[type="tel"], #spmb-wizard-container select, #spmb-wizard-container textarea,
.spmb-settings-card input[type="text"], .spmb-settings-card input[type="number"],
.spmb-settings-card input[type="date"], .spmb-settings-card textarea {
    width: 100% !important; padding: 12px !important; border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important; background-color: #ffffff !important; color: #0f172a !important;
    font-size: 15px !important; box-sizing: border-box !important; transition: all 0.2s;
}
#spmb-wizard-container input:focus, #spmb-wizard-container select:focus, #spmb-wizard-container textarea:focus,
.spmb-settings-card input:focus, .spmb-settings-card textarea:focus {
    border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; outline: none !important;
}

/* Boxes & Alerts Block */
.spmb-upload-box, .spmb-invoice-alert {
    padding: 15px; border-radius: 8px; margin-bottom: 18px; box-sizing: border-box;
}
.spmb-upload-box { background: #f8fafc; border: 1px dashed #cbd5e1; }
.spmb-invoice-alert { background: #fff8e7; border-left: 4px solid #f59e0b; color: #78350f; margin-bottom: 25px; }
#area-pemberitahuan {
    background: #f1f5f9; padding: 15px; border-left: 4px solid #64748b; margin-bottom: 25px;
    font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: #334155; border-radius: 4px;
}
#box-file-respon {
    background: #f0fdf4; color: #166534; padding: 20px; border-left: 4px solid #16a34a; border-radius: 8px; margin-bottom: 25px; font-size: 15px; line-height: 1.6; white-space: pre-wrap;
}
#err-usia { color: #dc2626; font-size: 13px; display: none; margin-top: 6px; font-weight: 600; }

/* Buttons global layout */
#spmb-wizard-container button[type="submit"] {
    width: 100%; padding: 14px; color: #ffffff; border: none; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; transition: background 0.2s; box-sizing: border-box;
}
#btn-submit-step1 { background: #2563eb; } #btn-submit-step1:hover { background: #1d4ed8; }
#btn-submit-step2 { background: #16a34a; } #btn-submit-step2:hover { background: #15803d; }
#spmb-wizard-container button:disabled { background: #94a3b8 !important; cursor: not-allowed; }

/* ==========================================================================
   2. BACKEND CARD MANAGEMENT & GRID SYSTEM (REKAP & CONFIGS)
   ========================================================================== */
.spmb-admin-card-grid, .spmb-admin-settings-grid {
    display: grid; gap: 20px; margin-top: 25px; box-sizing: border-box;
}
.spmb-admin-card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.spmb-admin-settings-grid { grid-template-columns: 1fr; }

.spmb-admin-card, .spmb-settings-card {
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-sizing: border-box; overflow: hidden;
}
.spmb-admin-card { display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; }
.spmb-admin-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }

/* Headers & Footers Layout */
.spmb-card-header, .spmb-settings-card-header {
    padding: 12px 15px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between;
}
.spmb-settings-card-header { justify-content: flex-start; gap: 15px; }
.spmb-settings-card-title { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.spmb-card-date { font-size: 11px; color: #64748b; }
.spmb-card-body { padding: 15px; flex-grow: 1; }
.spmb-card-title { margin: 0 0 12px 0; color: #0f172a; font-size: 16px; font-weight: bold; }
.spmb-card-footer { padding: 12px; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* Rows Info inside Cards */
.spmb-card-row { font-size: 12px; margin-bottom: 6px; color: #334155; }
.spmb-card-row strong { color: #64748b; display: inline-block; width: 90px; }

/* Status Badges & Colors */
.spmb-badge { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; color: #fff; }
.spmb-badge-kb { background: #ec4899; } .spmb-badge-ra { background: #8b5cf6; }
.spmb-badge-sd { background: #3b82f6; } .spmb-badge-smp { background: #10b981; }

.spmb-status-badge { font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.status-default { color: #64748b; background: #f1f5f9; }
.status-verifikasi { color: #b45309; background: #fef3c7; }
.status-sah { color: #15803d; background: #dcfce7; }
.status-ditolak { color: #b91c1c; background: #fee2e2; }

/* Action Links, Badges and Sections */
.spmb-file-links, .spmb-validation-actions, .spmb-admin-field-row { display: flex; gap: 6px; flex-wrap: wrap; }
.spmb-admin-field-row { gap: 15px; }
.spmb-btn-file, .spmb-btn-unpaid, .spmb-btn-approve, .spmb-btn-reject {
    flex: 1; text-align: center; padding: 5px; font-size: 11px; text-decoration: none; border-radius: 4px; font-weight: bold; transition: all 0.2s;
}
.spmb-btn-file { background: #fff; color: #334155; border: 1px solid #cbd5e1; font-weight: 500; }
.spmb-btn-file:hover { background: #f8fafc; }
.spmb-btn-file.spmb-btn-has-paid { background: #16a34a; color: #fff; border-color: #16a34a; }
.spmb-btn-file.spmb-btn-has-paid:hover { background: #15803d; }
.spmb-btn-unpaid { background: #fef2f2; color: #991b1b; border: 1px solid #fee2e2; font-weight: 500; flex: 1.5; }
.spmb-btn-approve { background: #e6f4ea; color: #137333; }
.spmb-btn-reject { background: #fce8e6; color: #c5221f; }
.spmb-btn-approve:hover, .spmb-btn-reject:hover { opacity: 0.85; }
.spmb-validation-actions { border-top: 1px dashed #cbd5e1; padding-top: 8px; margin-top: 5px; }

/* Admin Inner Settings Box Elements */
.spmb-custom-labels-section { background: #f8fafc; padding: 12px; border-radius: 6px; border: 1px solid #e2e8f0; margin-top: 15px; margin-bottom: 15px; }
.spmb-custom-labels-section h4 { margin: 0 0 10px 0; font-size: 13px; color: #1e293b; font-weight: bold; border-left: 3px solid #2563eb; padding-left: 6px; }
.spmb-empty-state { grid-column: 1 / -1; background: #fff; border: 1px dashed #cbd5e1; padding: 30px; text-align: center; color: #64748b; border-radius: 8px; }

/* ==========================================================================
   3. RESPONSIVE MEDIA QUERIES (MOBILE OPTIMIZATION BREAKPOINTS)
   ========================================================================= */
@media screen and (max-width: 768px) {
    #spmb-wizard-container, .wrap { padding: 15px; margin: 15px auto; }
    #spmb-wizard-container h3 { font-size: 18px; }
    .spmb-admin-card-grid { grid-template-columns: 1fr; }
    .spmb-admin-field-row { flex-direction: column; gap: 0; }
}
@media screen and (max-width: 480px) {
    #spmb-wizard-container input[type="text"], #spmb-wizard-container input[type="date"],
    #spmb-wizard-container input[type="tel"], #spmb-wizard-container select, #spmb-wizard-container textarea { font-size: 14px !important; padding: 10px !important; }
    #spmb-wizard-container button[type="submit"] { font-size: 14px; padding: 11px; }
    .spmb-file-links, .spmb-validation-actions { flex-direction: column; gap: 5px; }
}


/* ========================================================================== 
   4. ADMIN REKAP TABLE — WordPress list-table style
   ========================================================================== */
.spmb-admin-wrap .spmb-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0 26px; }
.spmb-admin-wrap .spmb-stat-card { background:#fff; border:1px solid #dcdcde; border-left:4px solid #2271b1; padding:16px 18px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.spmb-admin-wrap .spmb-stat-card strong { font-size:30px; line-height:1.2; color:#1d2327; }
.spmb-admin-wrap .spmb-stat-card span { color:#646970; font-size:12px; }
.spmb-admin-wrap .spmb-stat-card .spmb-stat-label { color:#1d2327; font-size:13px; font-weight:600; }
.spmb-admin-wrap .spmb-stat-card.is-success { border-left-color:#00a32a; }
.spmb-admin-wrap .spmb-stat-card.is-pending { border-left-color:#dba617; }
.spmb-admin-wrap .spmb-stat-card.is-failed { border-left-color:#d63638; }
.spmb-admin-wrap .spmb-section-heading { margin:24px 0 12px; }
.spmb-unit-summary-wrap { overflow-x:auto; margin-bottom:24px; }
.spmb-unit-summary { min-width:600px; }
.spmb-unit-summary td:not(:first-child), .spmb-unit-summary th:not(:first-child) { text-align:right; }
.spmb-list-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.spmb-list-filters input[type="search"] { min-width:240px; }
.spmb-list-count { color:#646970; margin:10px 0; }
.spmb-table-wrap { overflow-x:auto; }
.spmb-pendaftar-table { min-width:900px; }
.spmb-pendaftar-table th { font-weight:600; }
.spmb-pendaftar-table .spmb-toggle-detail { text-align:left; cursor:pointer; }
.spmb-pendaftar-table .spmb-toggle-detail:hover { color:#135e96; }
.spmb-pendaftar-table .row-actions { color:#646970; }
.spmb-pendaftar-table .spmb-detail-row > td { padding:0 !important; background:#f6f7f7; }
.spmb-detail-panel { padding:20px 24px; border-left:3px solid #2271b1; }
.spmb-detail-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.spmb-detail-heading h3 { margin:0 0 16px; font-size:16px; }
.spmb-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 22px; margin:0 0 20px; }
.spmb-detail-grid div { min-width:0; }
.spmb-detail-grid dt { font-size:12px; color:#646970; margin-bottom:4px; }
.spmb-detail-grid dd { margin:0; color:#1d2327; overflow-wrap:anywhere; }
.spmb-detail-grid .spmb-detail-full { grid-column:1/-1; }
.spmb-detail-section { border-top:1px solid #dcdcde; padding-top:14px; margin-top:14px; }
.spmb-detail-section h4 { margin:0 0 10px; }
.spmb-document-actions, .spmb-verification-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.spmb-document-missing { display:inline-block; padding:6px 9px; color:#646970; background:#fff; border:1px solid #dcdcde; border-radius:3px; font-size:12px; }
.spmb-status-pill { display:inline-block; padding:3px 8px; border-radius:3px; font-size:12px; font-weight:600; white-space:nowrap; }
.spmb-status-pill.is-success { color:#116329; background:#edfaef; }
.spmb-status-pill.is-pending { color:#805b00; background:#fcf0c5; }
.spmb-status-pill.is-failed { color:#8a2424; background:#fcf0f1; }
@media screen and (max-width: 1100px) { .spmb-admin-wrap .spmb-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media screen and (max-width: 782px) { .spmb-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .spmb-list-filters { align-items:stretch; } .spmb-list-filters input[type="search"], .spmb-list-filters select { width:100%; max-width:none; } }
@media screen and (max-width: 480px) { .spmb-admin-wrap .spmb-stat-grid { grid-template-columns:1fr; } .spmb-detail-grid { grid-template-columns:1fr; } .spmb-detail-grid .spmb-detail-full { grid-column:auto; } .spmb-detail-panel { padding:14px; } }


/* 5. Dashboard SPMB — recap cards, detail columns, responsive row actions */
.spmb-admin-wrap .spmb-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.spmb-admin-wrap .spmb-stat-card { position:relative; display:flex; flex-direction:row; align-items:center; gap:14px; min-height:118px; padding:20px; border:1px solid #dcdcde; border-left:0; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.spmb-admin-wrap .spmb-stat-card::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:0 4px 4px 0; background:#2271b1; }
.spmb-admin-wrap .spmb-stat-card.is-success::before { background:#00a32a; }
.spmb-admin-wrap .spmb-stat-card.is-pending::before { background:#dba617; }
.spmb-admin-wrap .spmb-stat-card.is-failed::before { background:#d63638; }
.spmb-stat-icon { display:flex; flex:0 0 48px; width:48px; height:48px; align-items:center; justify-content:center; border-radius:12px; background:#edf4fb; color:#2271b1; }
.spmb-stat-icon .dashicons { width:26px; height:26px; font-size:26px; }
.spmb-stat-card.is-success .spmb-stat-icon { background:#edfaef; color:#16803c; }
.spmb-stat-card.is-pending .spmb-stat-icon { background:#fcf0c5; color:#946c00; }
.spmb-stat-card.is-failed .spmb-stat-icon { background:#fcf0f1; color:#b32d2e; }
.spmb-stat-content { display:flex; flex-direction:column; min-width:0; gap:5px; }
.spmb-admin-wrap .spmb-stat-card .spmb-stat-content strong { font-size:30px; letter-spacing:-.5px; }
.spmb-detail-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.spmb-detail-group { min-width:0; padding:16px; background:#fff; border:1px solid #e2e4e7; border-radius:8px; }
.spmb-detail-group h4 { display:flex; align-items:center; gap:7px; margin:0 0 14px; color:#1d2327; }
.spmb-detail-group h4 .dashicons, .spmb-detail-section h4 .dashicons { color:#646970; }
.spmb-detail-group .spmb-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
.spmb-detail-group .spmb-detail-full { grid-column:1/-1; }
.spmb-row-action-wrap { display:flex; align-items:center; gap:6px; }
.spmb-action-menu-toggle { display:none !important; min-width:36px !important; min-height:34px !important; justify-content:center; align-items:center; padding:0 6px !important; }
.spmb-action-menu-toggle .dashicons { font-size:20px; width:20px; height:20px; }
.spmb-pendaftar-table .spmb-detail-row[hidden] { display:none !important; }
.spmb-verification-form button { min-height:36px; }
@media screen and (max-width:1100px) { .spmb-admin-wrap .spmb-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:782px) {
 .spmb-action-desktop { display:none !important; }
 .spmb-action-menu-toggle { display:inline-flex !important; }
 .spmb-detail-columns { grid-template-columns:1fr; }
 .spmb-detail-group .spmb-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .spmb-row-action-wrap { justify-content:flex-start; }
}
@media screen and (max-width:480px) {
 .spmb-admin-wrap .spmb-stat-grid { grid-template-columns:1fr; }
 .spmb-admin-wrap .spmb-stat-card { min-height:100px; padding:16px; }
 .spmb-detail-group { padding:12px; }
 .spmb-detail-group .spmb-detail-grid { grid-template-columns:1fr; }
 .spmb-detail-group .spmb-detail-full { grid-column:auto; }
 .spmb-document-actions .button, .spmb-verification-form .button { width:100%; text-align:center; }
}

.spmb-unit-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 26px; }
.spmb-unit-card { min-width:0; padding:18px; border:1px solid #dcdcde; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.035); }
.spmb-unit-card-heading { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #f0f0f1; }
.spmb-unit-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border-radius:10px; background:#edf4fb; color:#2271b1; }
.spmb-unit-icon .dashicons { font-size:23px; width:23px; height:23px; }
.spmb-unit-card-heading h3 { margin:0 0 4px; font-size:14px; }
.spmb-unit-card-heading div > span { color:#646970; font-size:12px; }
.spmb-unit-total { display:flex; align-items:baseline; gap:8px; padding:14px 0; }
.spmb-unit-total strong { font-size:27px; line-height:1.2; color:#1d2327; }
.spmb-unit-total span { color:#646970; font-size:12px; }
.spmb-unit-card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.spmb-unit-card-metrics > div { display:flex; flex-direction:column; gap:5px; min-width:0; padding:10px; border-radius:7px; background:#f6f7f7; }
.spmb-unit-card-metrics span { font-size:11px; color:#646970; }
.spmb-unit-card-metrics strong { font-size:17px; color:#1d2327; }
.spmb-unit-card-metrics .is-success { background:#edfaef; }
.spmb-unit-card-metrics .is-pending { background:#fcf0c5; }
.spmb-unit-card-metrics .is-failed { background:#fcf0f1; }
.spmb-unit-empty { padding:22px; background:#fff; border:1px dashed #c3c4c7; border-radius:8px; color:#646970; }
@media screen and (max-width:782px) { .spmb-unit-card-grid { grid-template-columns:1fr; } }
@media screen and (max-width:480px) { .spmb-unit-card { padding:14px; } .spmb-unit-card-metrics { gap:5px; } .spmb-unit-card-metrics > div { padding:8px 6px; } .spmb-unit-card-metrics span { font-size:10px; } .spmb-unit-card-metrics strong { font-size:15px; } }

.spmb-admin-wrap .spmb-stat-card .spmb-stat-icon { color:#2271b1; }
.spmb-admin-wrap .spmb-stat-card .spmb-stat-icon .dashicons { width:26px; height:26px; font-size:26px; line-height:26px; }
.spmb-admin-wrap .spmb-stat-card.is-success .spmb-stat-icon { color:#16803c; }
.spmb-admin-wrap .spmb-stat-card.is-pending .spmb-stat-icon { color:#946c00; }
.spmb-admin-wrap .spmb-stat-card.is-failed .spmb-stat-icon { color:#b32d2e; }