/* ==========================================================
   RMM Journey — WordPress admin plugin styles
   Brand: Deep Green #0E4D45, Emerald #0F766E, Gold #C9A227
   ========================================================== */

/* Sembunyikan chrome WP admin */
#wpcontent { padding-left: 0 !important; }
#wpbody-content .wrap { margin: 0 !important; padding: 0 !important; }
#wpfooter { display: none; }

#rmm-app {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #f7f8fa;
        color: #1f2937;
        min-height: calc(100vh - 32px);
        font-size: 14px;
        line-height: 1.5;
}

#rmm-app *, #rmm-app *::before, #rmm-app *::after { box-sizing: border-box; }

/* ============== LAYOUT ============== */
.rmm-layout {
        display: flex;
        min-height: calc(100vh - 32px - 60px); /* minus admin bar + header */
}

.rmm-header {
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 32px;
        z-index: 100;
}
/* Portal /app (frontend) tidak punya admin bar WordPress → header menempel di atas */
.rmm-frontend .rmm-header { top: 0; }
.rmm-header-brand { display: flex; align-items: center; gap: 12px; }
.rmm-header-logo {
        width: 40px; height: 40px; border-radius: 8px;
        background: #0E4D45; color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px; font-weight: 600;
}
.rmm-header-title strong { color: #0E4D45; font-size: 15px; font-weight: 600; }
.rmm-header-title small { color: #9ca3af; font-size: 11px; display: block; }
.rmm-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rmm-user-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: #0F766E; color: white;
        display: flex; align-items: center; justify-content: center;
        font-weight: 500; font-size: 13px;
}
.rmm-user-info b { display: block; }
.rmm-user-info small { color: #9ca3af; }

/* ============== SIDEBAR ============== */
.rmm-sidebar {
        width: 240px;
        background: #fff;
        border-right: 1px solid #e5e7eb;
        padding: 16px 12px;
        flex-shrink: 0;
}
.rmm-nav { list-style: none; padding: 0; margin: 0; }
.rmm-nav-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        color: #4b5563; text-decoration: none;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 2px;
        transition: background 0.15s;
}
.rmm-nav-item:hover { background: #f3f4f6; color: #1f2937; }
.rmm-nav-item.active {
        background: rgba(14, 77, 69, 0.08);
        color: #0E4D45;
        font-weight: 500;
}
.rmm-nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.rmm-nav-icon .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 18px; color: inherit; }
.rmm-nav-external { margin-left: auto; opacity: 0.4; font-size: 11px; }

/* ===== Sidebar menu bergrup (accordion) ===== */
.rmm-nav-group { list-style: none; }
.rmm-nav-grouphead {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: transparent; border: none; cursor: pointer;
	padding: 10px 12px; border-radius: 8px; color: #374151;
	font-size: 13.5px; font-weight: 700; font-family: inherit; text-align: left;
	transition: background .15s;
}
.rmm-nav-grouphead:hover { background: #f3f4f6; }
.rmm-nav-grouplabel { flex: 1; }
.rmm-nav-caret { margin-left: auto; font-size: 16px; width: 16px; height: 16px; line-height: 16px; opacity: .5; transition: transform .2s; flex-shrink: 0; }
.rmm-nav-group.open > .rmm-nav-grouphead .rmm-nav-caret { transform: rotate(180deg); }
.rmm-nav-group.open > .rmm-nav-grouphead { color: var(--rmm-primary, #0E4D45); }

.rmm-nav-sub {
	list-style: none; margin: 2px 0 4px; padding: 0;
	max-height: 0; overflow: hidden; transition: max-height .28s ease;
}
.rmm-nav-group.open > .rmm-nav-sub { max-height: 640px; }
.rmm-nav-subitem { padding-left: 30px !important; font-size: 13.5px; }
.rmm-nav-subitem .rmm-nav-icon .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }

/* Saat sidebar diciutkan (desktop): tampilkan ikon grup saja, sub-menu disembunyikan */
#rmm-app.rmm-collapsed .rmm-nav-grouplabel,
#rmm-app.rmm-collapsed .rmm-nav-caret { display: none; }
#rmm-app.rmm-collapsed .rmm-nav-grouphead { justify-content: center; padding: 10px 0; position: relative; }
#rmm-app.rmm-collapsed .rmm-nav-sub { max-height: 0 !important; overflow: hidden; }
#rmm-app.rmm-collapsed .rmm-nav-group.open > .rmm-nav-sub { max-height: 0 !important; }
/* Tooltip nama grup saat hover (collapsed) */
#rmm-app.rmm-collapsed .rmm-nav-grouphead:hover::after {
        content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
        background: #111827; color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 100; pointer-events: none;
}

/* Collapse menu */
.rmm-collapse-btn {
        background: transparent; border: 1px solid #e5e7eb; border-radius: 8px;
        width: 34px; height: 34px; cursor: pointer; color: #4b5563;
        display: inline-flex; align-items: center; justify-content: center; margin-right: 6px;
        flex-shrink: 0; transition: background .15s;
}
.rmm-collapse-btn:hover { background: #f3f4f6; }
.rmm-collapse-btn .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 20px; }
#rmm-app.rmm-collapsed .rmm-sidebar { width: 62px; padding: 16px 8px; }
#rmm-app.rmm-collapsed .rmm-nav-item { justify-content: center; padding: 10px 0; }
#rmm-app.rmm-collapsed .rmm-nav-item > span:not(.rmm-nav-icon) { display: none; }
#rmm-app.rmm-collapsed .rmm-nav-external { display: none; }
#rmm-app.rmm-collapsed .rmm-nav-item { position: relative; }
#rmm-app.rmm-collapsed .rmm-nav-item:hover::after {
        content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
        background: #111827; color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 100; pointer-events: none;
}

/* ===== Mobile: sidebar jadi drawer geser ===== */
.rmm-nav-backdrop { display: none; }
@media (max-width: 768px) {
        /* Tombol ciutkan diubah fungsi jadi buka/tutup drawer */
        .rmm-layout { position: relative; display: block; }
        .rmm-sidebar {
                position: fixed;
                top: 0; left: 0; bottom: 0;
                width: 260px !important;
                padding: 16px 12px !important;
                z-index: 10000;
                transform: translateX(-100%);
                transition: transform .25s ease;
                box-shadow: 0 0 40px rgba(0,0,0,.18);
                overflow-y: auto;
        }
        /* Saat kelas 'rmm-mobile-open' pada #rmm-app, drawer muncul */
        #rmm-app.rmm-mobile-open .rmm-sidebar { transform: translateX(0); }
        /* Backdrop gelap */
        #rmm-app.rmm-mobile-open .rmm-nav-backdrop {
                display: block; position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 9999;
        }
        /* Di HP, abaikan mode collapsed desktop: selalu tampilkan label & sub penuh */
        #rmm-app.rmm-collapsed .rmm-sidebar { width: 260px !important; padding: 16px 12px !important; }
        #rmm-app.rmm-collapsed .rmm-nav-item { justify-content: flex-start; padding: 10px 12px; }
        #rmm-app.rmm-collapsed .rmm-nav-item > span:not(.rmm-nav-icon) { display: inline; }
        #rmm-app.rmm-collapsed .rmm-nav-grouplabel,
        #rmm-app.rmm-collapsed .rmm-nav-caret { display: inline; }
        #rmm-app.rmm-collapsed .rmm-nav-grouphead { justify-content: flex-start; padding: 10px 12px; }
        #rmm-app.rmm-collapsed .rmm-nav-group.open > .rmm-nav-sub { max-height: 640px !important; }
        /* Konten mengisi penuh lebar layar (sidebar keluar dari flow) */
        .rmm-main {
                width: 100% !important;
                max-width: 100% !important;
                padding: 18px 16px !important;
        }
        .rmm-header { padding: 10px 14px; gap: 8px; position: static; top: auto; }
        /* Header ringkas di HP: sembunyikan tagline & role, perkecil */
        .rmm-header-title small { display: none; }
        .rmm-header-title strong { font-size: 13px; line-height: 1.2; }
        .rmm-header-logo { width: 34px; height: 34px; font-size: 16px; }
        .rmm-user-info small { display: none; }
        .rmm-user-info b { font-size: 12.5px; }
        .rmm-user-avatar { width: 32px; height: 32px; }
        .rmm-header-brand { gap: 8px; min-width: 0; }
        .rmm-header-brand .rmm-header-title { min-width: 0; overflow: hidden; }
        .rmm-header-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
        /* Ikon tombol menu jadi hamburger, selalu tampil di HP */
        .rmm-collapse-btn { display: inline-flex !important; }
        /* Cegah elemen lebar (KPI grid, tabel) mendorong layout melebihi layar */
        .rmm-kpi-grid { grid-template-columns: 1fr !important; }
        .rmm-chart-grid { grid-template-columns: 1fr !important; }
        .rmm-stats-grid { grid-template-columns: 1fr !important; }
        .rmm-two-col { grid-template-columns: 1fr !important; display: block !important; }
        .rmm-two-col > div { margin-bottom: 16px; }
        .rmm-table-wrap { max-width: 100%; }
}

/* ============== MAIN ============== */
.rmm-main {
        flex: 1;
        min-width: 0;
        padding: 24px;
        overflow-x: auto;
}

/* ============== NOTICE ============== */
.rmm-notice {
        background: #ecfdf5;
        border: 1px solid #10b981;
        color: #065f46;
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 13px;
}
.rmm-notice-error {
        background: #fee2e2;
        border-color: #E10600;
        color: #991b1b;
}

/* ============== CARDS ============== */
.rmm-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.rmm-card + .rmm-card { margin-top: 16px; }
.rmm-card-title {
        font-size: 15px; font-weight: 600; color: #111827;
        margin: 0 0 16px;
        display: flex; align-items: center; gap: 8px;
}
.rmm-card-title.rmm-title-between { justify-content: space-between; }

/* ============== BUTTONS ============== */
.rmm-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px; font-weight: 500;
        cursor: pointer; text-decoration: none;
        border: 1px solid transparent;
        transition: all 0.15s;
        line-height: 1.2;
}
.rmm-btn-primary { background: #0E4D45; color: white; }
.rmm-btn-primary:hover { background: #0F766E; color: white; }
.rmm-btn-secondary { background: white; color: #0E4D45; border-color: rgba(14, 77, 69, 0.3); }
.rmm-btn-secondary:hover { background: rgba(14, 77, 69, 0.05); color: #0E4D45; }
.rmm-btn-danger { background: #E10600; color: white; }
.rmm-btn-danger:hover { background: #b91c1c; color: white; }
.rmm-btn-gold { background: #C9A227; color: white; }
.rmm-btn-ghost { background: transparent; color: #6b7280; }
.rmm-btn-ghost:hover { background: #f3f4f6; color: #374151; }
.rmm-btn-sm { padding: 5px 10px; font-size: 12px; }

/* ============== FORMS ============== */
.rmm-field { margin-bottom: 14px; }
.rmm-label {
        display: block;
        font-size: 12px; font-weight: 500; color: #374151;
        margin-bottom: 5px;
}
.rmm-input, .rmm-select, .rmm-textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 13px;
        font-family: inherit;
        background: white;
        color: #111827;
}
.rmm-input:focus, .rmm-select:focus, .rmm-textarea:focus {
        outline: none;
        border-color: #0F766E;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}
.rmm-textarea { min-height: 80px; resize: vertical; }
.rmm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 768px) { .rmm-form-grid { grid-template-columns: 1fr; } }
.rmm-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; }

/* ============== TABLES ============== */
.rmm-table-wrap {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
}
.rmm-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
}
.rmm-table th {
        background: #f9fafb;
        text-align: left;
        padding: 10px 14px;
        font-weight: 500; font-size: 11px;
        color: #6b7280; text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e5e7eb;
}
.rmm-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #f3f4f6;
}
.rmm-table tbody tr:hover { background: #f9fafb; }
.rmm-table tbody tr:last-child td { border-bottom: none; }

/* ============== BADGES ============== */
.rmm-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px; font-weight: 500;
        background: #f3f4f6; color: #374151;
}
.rmm-badge-status {
        color: white;
}

/* ============== STAT CARDS ============== */
.rmm-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
        margin-bottom: 20px;
}
.rmm-stat {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 18px;
}
.rmm-stat-label { color: #6b7280; font-size: 12px; margin-bottom: 6px; }
.rmm-stat-value { font-size: 26px; font-weight: 700; color: #111827; line-height: 1; }
.rmm-stat-icon { float: right; font-size: 22px; opacity: 0.4; }

/* Kartu KPI yang bisa diklik */
a.rmm-stat-link {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
        cursor: pointer;
}
a.rmm-stat-link:hover {
        transform: translateY(-2px);
        border-color: #0E4D45;
        box-shadow: 0 6px 18px rgba(14, 77, 69, 0.12);
}
a.rmm-stat-link:hover .rmm-stat-icon { opacity: 0.7; }
a.rmm-stat-link:hover .rmm-stat-value { color: #0E4D45; }

/* ============== TIMELINE ============== */
.rmm-timeline { padding: 8px 0; }
.rmm-timeline-item {
        position: relative;
        padding-left: 32px;
        padding-bottom: 16px;
        border-left: 2px solid #e5e7eb;
        margin-left: 8px;
}
.rmm-timeline-item:last-child { border-left-color: transparent; }
.rmm-timeline-dot {
        position: absolute;
        left: -8px; top: 2px;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: white; border: 2px solid #d1d5db;
}
.rmm-timeline-item.done .rmm-timeline-dot { background: #10b981; border-color: #10b981; }
.rmm-timeline-item.current .rmm-timeline-dot { background: #C9A227; border-color: #C9A227; }
.rmm-timeline-item.current .rmm-timeline-dot::after {
        content: ''; position: absolute; inset: -4px; border-radius: 50%;
        border: 2px solid rgba(201, 162, 39, 0.4);
        animation: rmm-pulse 1.6s ease-in-out infinite;
}
@keyframes rmm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.25); } }
.rmm-timeline-content { font-size: 13px; }
.rmm-timeline-content b { color: #111827; }
.rmm-timeline-content small { display: block; color: #9ca3af; margin-top: 2px; }

/* ============== TABS ============== */
.rmm-tabs {
        display: flex; gap: 4px;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 20px;
}
.rmm-tab {
        padding: 10px 16px;
        color: #6b7280;
        text-decoration: none;
        font-size: 13px; font-weight: 500;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
}
.rmm-tab:hover { color: #0E4D45; }
.rmm-tab.active {
        color: #0E4D45;
        border-bottom-color: #0E4D45;
}

/* ============== FILTERS BAR ============== */
.rmm-filters {
        display: flex; gap: 8px; align-items: center;
        background: white; padding: 12px;
        border: 1px solid #e5e7eb; border-radius: 12px;
        margin-bottom: 16px; flex-wrap: wrap;
}
.rmm-filters .rmm-input,
.rmm-filters .rmm-select { max-width: 200px; }

/* ============== PAGE HEADER ============== */
.rmm-page-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap; gap: 12px;
}
.rmm-page-header h1 { margin: 0; font-size: 22px; color: #111827; }
.rmm-page-header .actions { display: flex; gap: 8px; }

/* ============== MODAL ============== */
.rmm-modal-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        display: none;
        align-items: center; justify-content: center;
        z-index: 100000;
}
.rmm-modal-backdrop.open { display: flex; }
.rmm-modal {
        background: white; border-radius: 12px;
        max-width: 600px; width: 95%;
        max-height: 90vh; overflow-y: auto;
        padding: 24px;
}
.rmm-modal h3 { margin: 0 0 16px; font-size: 16px; color: #111827; }

/* ============== EMPTY ============== */
.rmm-empty { text-align: center; padding: 48px 16px; color: #6b7280; font-size: 13px; }
.rmm-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }

/* ============== PRINT ============== */
@media print {
        #wpadminbar, .rmm-sidebar, .rmm-header, .rmm-btn { display: none !important; }
        .rmm-main { padding: 0 !important; }
        .rmm-card { border: none !important; box-shadow: none !important; }
}

/* ============== 2-COL LAYOUT ============== */
.rmm-two-col {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 16px;
}
@media (max-width: 1024px) { .rmm-two-col { grid-template-columns: 1fr; } }

/* Progress bar */
.rmm-progress {
        background: #e5e7eb;
        border-radius: 999px;
        height: 8px;
        overflow: hidden;
        margin-top: 4px;
}
.rmm-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #0F766E, #C9A227);
        border-radius: 999px;
        transition: width 0.3s;
}

/* Notification dot */
.rmm-notif-item {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px;
        background: #fef3c7;
        border-left: 3px solid #C9A227;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 13px;
}
.rmm-notif-item.red { background: #fee2e2; border-left-color: #E10600; }
.rmm-notif-item.blue { background: #dbeafe; border-left-color: #3b82f6; }

/* ============== WHATSAPP BUTTON ============== */
.rmm-btn-wa {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
        cursor: pointer; text-decoration: none; border: 1px solid transparent;
        background: #25D366; color: white;
        transition: all 0.15s; line-height: 1.2;
}
.rmm-btn-wa:hover { background: #1ebe5d; color: white; }
.rmm-wa-fu-link {
        color: #25D366; font-size: 11px; font-weight: 500; text-decoration: none;
}
.rmm-wa-fu-link:hover { text-decoration: underline; }

/* ===== Agen / Mitra & Keuangan ===== */
.rmm-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rmm-detail-table td { padding: 7px 0; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.rmm-detail-table td:first-child { color: #6b7280; width: 42%; }
.rmm-detail-table td:last-child { text-align: right; }
.rmm-detail-table tr:last-child td { border-bottom: none; }

.rmm-col-full { grid-column: 1 / -1; }
.rmm-checkbox-inline {
        display: flex; align-items: center; gap: 8px;
        font-size: 13px; color: #374151; grid-column: 1 / -1;
}
.rmm-checkbox-inline input { width: auto; margin: 0; }

/* Form-grid dengan label membungkus input (dipakai form agen) */
.rmm-form-grid > label {
        display: flex; flex-direction: column; gap: 5px;
        font-size: 13px; font-weight: 500; color: #374151;
}
.rmm-form-grid > label input:not([type=checkbox]),
.rmm-form-grid > label select,
.rmm-form-grid > label textarea {
        width: 100%; padding: 9px 11px; border: 1px solid #d1d5db;
        border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.rmm-form-grid > label input:focus,
.rmm-form-grid > label select:focus,
.rmm-form-grid > label textarea:focus {
        outline: none; border-color: #0E4D45; box-shadow: 0 0 0 3px rgba(14,77,69,.12);
}

/* ===== HTML editor (deskripsi paket) ===== */
.rmm-html-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.rmm-html-tab { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px 6px 0 0; padding: 6px 14px; font-size: 12px; cursor: pointer; }
.rmm-html-tab.active { background: #0E4D45; color: #fff; border-color: #0E4D45; }
.rmm-html-preview { border: 1px solid #d1d5db; border-radius: 8px; padding: 16px; min-height: 120px; background: #fff; }
.rmm-html-preview img { max-width: 100%; height: auto; }

/* ===== Galeri editor ===== */
.rmm-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rmm-gallery-thumb { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
.rmm-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rmm-gallery-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(220,38,38,.9); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }

/* ===== Panduan / Guide ===== */
html { scroll-behavior: smooth; }
.rmm-guide { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.rmm-guide-nav { position: sticky; top: 80px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 100px); }
.rmm-guide-search { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 9px; font-size: 13px; box-sizing: border-box; }
.rmm-guide-search:focus { outline: none; border-color: #0E4D45; box-shadow: 0 0 0 3px rgba(14,77,69,.08); }
.rmm-guide-nav-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.rmm-guide-nav-list::-webkit-scrollbar { width: 6px; }
.rmm-guide-nav-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 20px; }
.rmm-guide-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: #374151; text-decoration: none; font-size: 13px; transition: background .12s, color .12s; border-left: 3px solid transparent; }
.rmm-guide-nav a:hover { background: #f3f4f6; color: #0E4D45; }
.rmm-guide-nav a.active { background: #ecfdf5; color: #0E4D45; font-weight: 600; border-left-color: #0E4D45; }
.rmm-guide-nav a.hide { display: none; }
.rmm-guide-body { display: flex; flex-direction: column; gap: 14px; }
.rmm-guide-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0; scroll-margin-top: 80px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.rmm-guide-card:hover { box-shadow: 0 4px 16px -8px rgba(7,42,38,.18); }
.rmm-guide-card.hide { display: none; }
details.rmm-guide-card[open] { border-color: #cdeede; }
details.rmm-guide-card > summary { list-style: none; cursor: pointer; padding: 16px 22px; color: #0E4D45; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; transition: background .12s; }
details.rmm-guide-card > summary::-webkit-details-marker { display: none; }
details.rmm-guide-card > summary::after { content: '⌄'; font-size: 20px; line-height: 1; color: #9ca3af; transition: transform .18s; flex-shrink: 0; }
details.rmm-guide-card[open] > summary::after { transform: rotate(180deg); color: #0E4D45; }
details.rmm-guide-card > summary:hover { background: #f9fafb; }
details.rmm-guide-card[open] > summary { border-bottom: 1px solid #eef0f2; background: #fafffe; }
details.rmm-guide-card > *:not(summary) { padding-left: 26px; padding-right: 26px; }
details.rmm-guide-card > *:not(summary):first-of-type { padding-top: 18px; }
details.rmm-guide-card > *:not(summary):last-child { padding-bottom: 22px; margin-bottom: 0; }
.rmm-guide-card h3 { margin: 20px 0 8px; color: #0E4D45; font-size: 15px; font-weight: 700; padding-bottom: 6px; border-bottom: 1px dashed #eef2f6; }
.rmm-guide-card p { color: #374151; font-size: 14px; line-height: 1.7; margin: 8px 0; }
.rmm-guide-card ul, .rmm-guide-card ol { color: #374151; font-size: 14px; line-height: 1.8; padding-left: 46px; margin: 8px 0; }
details.rmm-guide-card > ul, details.rmm-guide-card > ol { padding-left: 46px; }
.rmm-guide-card li { margin: 3px 0; }
.rmm-guide-card code { background: #f3f4f6; color: #0E4D45; padding: 2px 7px; border-radius: 5px; font-size: 12.5px; word-break: break-all; }
.rmm-guide-card a { color: #0E4D45; text-decoration: underline; font-weight: 500; word-break: break-word; }
.rmm-guide-card a:hover { color: #C9A227; }
.rmm-guide-empty { text-align: center; color: #9ca3af; padding: 40px; font-size: 14px; display: none; }
@media (max-width: 860px) {
	.rmm-guide { grid-template-columns: 1fr; }
	.rmm-guide-nav { position: static; max-height: none; }
	.rmm-guide-nav-list { flex-direction: row; flex-wrap: wrap; }
	.rmm-guide-nav a { font-size: 12px; padding: 6px 10px; }
}

/* Modul Pembelajaran (dashboard agen) */
.rmm-learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rmm-learn-item { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.rmm-learn-video { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.rmm-learn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rmm-learn-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.rmm-learn-type { font-size: 11px; color: #9ca3af; margin-bottom: 4px; }
.rmm-learn-title { font-weight: 600; color: #111827; font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.rmm-learn-desc { font-size: 13px; color: #6b7280; line-height: 1.5; }
.rmm-learn-item .rmm-btn { align-self: flex-start; margin-top: auto; }

/* ===== Portal Agen: layout sidebar + konten ===== */
.rmm-agent-shell { display: flex; gap: 24px; padding: 24px; max-width: 1200px; margin: 0 auto; align-items: flex-start; }
.rmm-agent-nav { width: 240px; flex-shrink: 0; position: sticky; top: 24px; }
.rmm-agent-content { flex: 1; min-width: 0; }
.rmm-agent-brand { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 12px; }
.rmm-agent-avatar { width: 44px; height: 44px; border-radius: 50%; background: #0E4D45; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.rmm-agent-name { font-weight: 700; color: #111827; font-size: 15px; line-height: 1.2; }
.rmm-agent-code { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.rmm-agent-nav-desktop { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rmm-agent-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; text-decoration: none; color: #374151; font-size: 14px; font-weight: 500; transition: background .12s, color .12s; }
.rmm-agent-nav-item:hover { background: #f3f4f6; }
.rmm-agent-nav-item.active { background: #ecfdf5; color: #0E4D45; font-weight: 600; }
.rmm-agent-nav-ic { font-size: 17px; width: 22px; text-align: center; }
.rmm-agent-nav-mobile { display: none; }

@media (max-width: 820px) {
	.rmm-agent-shell { flex-direction: column; gap: 16px; padding: 16px; }
	.rmm-agent-nav { width: 100%; position: static; }
	.rmm-agent-nav-desktop { display: none; }
	.rmm-agent-nav-mobile { display: block; position: relative; }
	.rmm-agent-nav-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 600; color: #0E4D45; cursor: pointer; }
	.rmm-agent-nav-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; z-index: 50; }
	.rmm-agent-nav-menu.open { display: block; }
	.rmm-agent-nav-menu a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: #374151; font-size: 14px; }
	.rmm-agent-nav-menu a:hover { background: #f3f4f6; }
	.rmm-agent-nav-menu a.active { background: #ecfdf5; color: #0E4D45; font-weight: 600; }
}

/* ============== FEATURE TOUR ============== */
.rmm-tour-overlay { position: fixed; inset: 0; z-index: 99999; display: none; background: rgba(17, 24, 39, 0.55); }
.rmm-tour-spotlight { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(17,24,39,0.55); background: transparent; pointer-events: none; transition: all .25s ease; border: 2px solid #C9A227; }
.rmm-tour-tip { position: absolute; width: 320px; max-width: calc(100vw - 24px); background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 18px; z-index: 100000; }
.rmm-tour-tip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rmm-tour-step-count { font-size: 12px; color: #9ca3af; font-weight: 600; }
.rmm-tour-skip { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 12px; text-decoration: underline; }
.rmm-tour-title { margin: 0 0 6px; font-size: 16px; color: #0E4D45; }
.rmm-tour-text { margin: 0 0 14px; font-size: 13px; color: #4b5563; line-height: 1.55; }
.rmm-tour-nav { display: flex; justify-content: space-between; gap: 8px; }
.rmm-tour-nav button { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.rmm-tour-prev { background: #f3f4f6; color: #4b5563; }
.rmm-tour-next { background: #0E4D45; color: #fff; }
.rmm-tour-start { cursor: pointer; }

/* Collapse menu — portal agen */
.rmm-agent-collapse-btn { margin-right: 4px; }
.rmm-agent-brand { position: relative; }
.rmm-agent-collapsed .rmm-agent-nav { width: 68px; }
.rmm-agent-collapsed .rmm-agent-brand-text { display: none; }
.rmm-agent-collapsed .rmm-agent-nav-label { display: none; }
.rmm-agent-collapsed .rmm-agent-nav-item { justify-content: center; position: relative; }
.rmm-agent-collapsed .rmm-agent-nav-item:hover::after {
        content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
        background: #111827; color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 100; pointer-events: none;
}
@media (max-width: 820px) {
        .rmm-agent-collapse-btn { display: none; }
        .rmm-agent-collapsed .rmm-agent-nav { width: 100%; }
        .rmm-agent-collapsed .rmm-agent-brand-text { display: block; }
}

/* Changelog di panduan */
.rmm-changelog { display: flex; flex-direction: column; gap: 14px; }
.rmm-changelog-item { border-left: 3px solid #0E4D45; padding: 4px 0 4px 14px; }
.rmm-changelog-ver { font-weight: 700; color: #0E4D45; font-size: 14px; margin-bottom: 4px; }
.rmm-changelog-item ul { margin: 0; padding-left: 18px; }
.rmm-changelog-item li { font-size: 13px; color: #4b5563; margin-bottom: 2px; }

/* ===== KPI & Chart blocks (multi-menu) ===== */
.rmm-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
@media (max-width:900px){ .rmm-kpi-grid { grid-template-columns:repeat(2,1fr); } }
.rmm-kpi { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; }
.rmm-kpi .rmm-kpi-label { font-size:12px; color:#64748b; font-weight:600; }
.rmm-kpi .rmm-kpi-value { font-size:26px; font-weight:800; line-height:1.1; margin-top:6px; color:#0f172a; }
.rmm-kpi .rmm-kpi-sub { font-size:11.5px; color:#94a3b8; margin-top:3px; }
.rmm-kpi .rmm-kpi-ic { position:absolute; top:14px; right:14px; font-size:20px; opacity:.35; }
.rmm-kpi.accent-green { border-left:3px solid #0E4D45; }
.rmm-kpi.accent-gold  { border-left:3px solid #C9A24B; }
.rmm-kpi.accent-blue  { border-left:3px solid #1e40af; }
.rmm-kpi.accent-red   { border-left:3px solid #dc2626; }
.rmm-chart-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:20px; }
@media (max-width:900px){ .rmm-chart-grid { grid-template-columns:1fr; } }
.rmm-chart-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:18px; }
.rmm-chart-card h3 { font-size:14px; font-weight:700; margin:0 0 12px; color:#334155; }
.rmm-chart-card .rmm-chart-wrap { position:relative; height:260px; }
.rmm-chart-card.wide { grid-column:1 / -1; }

/* ===== Banner lisensi (mode read-only) ===== */
.rmm-license-banner {
        display: flex; align-items: flex-start; gap: 12px;
        background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #d97706;
        border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
        font-size: 13px; color: #92400e; line-height: 1.55;
}
.rmm-license-banner .rmm-license-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
.rmm-license-banner a { color: #b45309; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.rmm-license-banner b { color: #78350f; }

/* ===== Alert (jurnal & akun) ===== */
.rmm-alert { padding:11px 15px; border-radius:10px; font-size:13.5px; }
.rmm-alert-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.rmm-alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }

/* ===== File Viewer Modal (bukti transfer & dokumen) ===== */
.rmm-fv-backdrop {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(6, 22, 20, .72); backdrop-filter: blur(3px);
	display: none; align-items: center; justify-content: center; padding: 24px;
}
.rmm-fv-backdrop.open { display: flex; }
.rmm-fv-box {
	background: #fff; border-radius: 14px; overflow: hidden;
	width: min(1000px, 96vw); height: min(90vh, 900px);
	display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.rmm-fv-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; flex-shrink: 0;
}
.rmm-fv-title { font-weight: 700; color: #0E4D45; font-size: 14px; }
.rmm-fv-actions { display: flex; align-items: center; gap: 6px; }
.rmm-fv-actions a, .rmm-fv-close {
	font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
	text-decoration: none; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #334155;
}
.rmm-fv-actions a:hover, .rmm-fv-close:hover { background: #0E4D45; color: #fff; border-color: #0E4D45; }
.rmm-fv-close { font-size: 15px; line-height: 1; padding: 6px 11px; }
.rmm-fv-body {
	flex: 1; overflow: auto; background: #1e293b;
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.rmm-fv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.rmm-fv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 640px) {
	.rmm-fv-backdrop { padding: 10px; }
	.rmm-fv-box { height: 92vh; width: 98vw; }
	.rmm-fv-actions a { padding: 6px 9px; }
}

/* ===== KPI cards yang bisa diklik ===== */
a.rmm-kpi-link { text-decoration: none; color: inherit; display: block; transition: transform .12s, box-shadow .12s; cursor: pointer; }
a.rmm-kpi-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(7,42,38,.28); }
a.rmm-kpi-link:hover .rmm-kpi-go { opacity: 1; transform: translateX(2px); }
.rmm-kpi-go { font-size: 12px; color: #9ca3af; opacity: 0; transition: opacity .15s, transform .15s; margin-left: 2px; }

/* ===== Kolom aksi tabel yang tetap terlihat (sticky kanan) ===== */
.rmm-table th.rmm-col-actions,
.rmm-table td.rmm-col-actions {
        position: sticky;
        right: 0;
        background: #fff;
        box-shadow: -6px 0 10px -8px rgba(0,0,0,.15);
        z-index: 1;
}
.rmm-table th.rmm-col-actions { background: #f9fafb; }

/* Emoji: render sebagai teks native, cegah tampil sebagai gambar rusak (Twemoji) */
img.emoji, img.wp-smiley {
	display: inline !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .05em 0 .1em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}