/* ============================================================
   SFC STUDENT DASHBOARD — UI v1 (sidebar + weekly card + stats + orders)
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────── */
.sfc-dash-page { background: #F1F8F5; padding: 32px; min-height: 100vh; }
.sfc-dash-layout { display: flex; align-items: flex-start; gap: 24px; max-width: 1320px; margin: 0 auto; }
.sfc-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ── Sidebar ────────────────────────────────────────────── */
.sfc-sidebar { width: 264px; flex-shrink: 0; background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; display: flex; flex-direction: column; align-self: flex-start; position: sticky; top: 24px; }

.sfc-sidebar-profile { text-align: center; padding-bottom: 20px; border-bottom: 1px solid rgba(193, 200, 195, 0.3); margin-bottom: 16px; }
.sfc-sidebar-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; border: 3px solid #E8F5EE; }
.sfc-sidebar-name { font-size: 15px; font-weight: 700; color: #0D3D2D; margin: 0 0 2px; line-height: 1.3; }
.sfc-sidebar-email { font-size: 12px; color: #717974; margin: 0; word-break: break-word; }

.sfc-sidebar-nav ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-sidebar-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #414844; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background 0.15s, color 0.15s; }
.sfc-sidebar-nav li a svg,
.sfc-sidebar-nav li a img,
.sfc-sidebar-nav li a iconify-icon { width: 18px; height: 18px; flex-shrink: 0; font-size: 18px; }
.sfc-sidebar-nav li a:hover { background: rgba(238, 245, 242, 0.8); color: #0D3D2D; }
.sfc-sidebar-nav li.sfc-active a { background: rgba(47, 191, 113, 0.15); color: #0D3D2D; font-weight: 700; }
.sfc-sidebar-nav li.sfc-active a:hover { background: rgba(47, 191, 113, 0.15); color: #0D3D2D; }

.sfc-sidebar-divider { height: 1px; background: rgba(193, 200, 195, 0.3); margin: 12px 0; }

.sfc-sidebar-bottom { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(193, 200, 195, 0.3); display: flex; flex-direction: column; gap: 10px; }
.sfc-sidebar-instructor-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; border-radius: 9999px; padding: 12px 16px; transition: background 0.15s; }
.sfc-sidebar-instructor-btn:hover { background: #0a2e1f; color: #fff !important; }
.sfc-sidebar-help-link { display: flex; align-items: center; gap: 10px; color: #717974 !important; font-size: 13px; font-weight: 600; text-decoration: none !important; padding: 8px 14px; }
.sfc-sidebar-help-link svg, .sfc-sidebar-help-link img { width: 16px; height: 16px; }
.sfc-sidebar-help-link:hover { color: #0D3D2D !important; }

/* ── Weekly Schedule Card (desktop only) ───────────────────── */
.sfc-weekly-card { position: relative; background: #0D3D2D; border-radius: 24px; padding: 28px 32px; overflow: hidden; color: #fff; }
.sfc-weekly-card-bg { position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(29, 185, 104, 0.35), transparent 55%); pointer-events: none; }
.sfc-weekly-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sfc-weekly-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.sfc-weekly-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin: 0; }
.sfc-weekly-month-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; padding: 8px 16px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }

.sfc-week-days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 20px; }
.sfc-day-card { position: relative; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 14px 8px; text-align: center; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sfc-day-card.sfc-today { background: #1DB968; border-color: #1DB968; }
.sfc-today-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #fff; color: #0D3D2D; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.sfc-day-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.sfc-day-card.sfc-today .sfc-day-label { color: rgba(255, 255, 255, 0.85); }
.sfc-day-num { font-size: 18px; font-weight: 700; color: #fff; }
.sfc-day-icons { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 14px; }
.sfc-day-icons iconify-icon { font-size: 13px; color: rgba(255, 255, 255, 0.85); }

.sfc-week-legend { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sfc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); }
.sfc-legend-item iconify-icon { font-size: 14px; color: #1DB968; }

/* ── Dashboard Greeting ─────────────────────────────────── */
.sfc-dash-greet { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #0D3D2D; }
.sfc-dash-greet-sub { margin: 0 0 18px; font-size: 13px; color: #6B6B65; }

/* ── Desktop/Mobile-only visibility helpers ────────────────── */
/* Must match the dashboard mobile-shell breakpoint (<=991px, see below) —
   this was previously stuck at 767px, so the weekly-schedule card kept
   showing (and "Lanjutkan Belajar"/greeting stayed hidden) throughout the
   768-991px tablet range even though the off-canvas shell was active there. */
.sfc-mobile-only { display: none; }
@media (max-width: 991px) {
    .sfc-desktop-only { display: none !important; }
    .sfc-mobile-only { display: block; }
}

/* ── Continue Learning (Lanjutkan Belajar) ─────────────────── */
.sfc-continue-list { display: flex; flex-direction: column; gap: 12px; padding: 0 24px 24px; }
.sfc-continue-card { display: flex; align-items: center; gap: 14px; background: #F8FAF9; border: 1px solid #EEF2F0; border-radius: 16px; padding: 12px; text-decoration: none !important; transition: border-color 0.15s, background 0.15s; }
.sfc-continue-card:hover { background: #F1F8F5; border-color: rgba(47, 191, 113, 0.3); }
.sfc-continue-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #E8F5EE; }
.sfc-continue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfc-continue-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sfc-continue-thumb-placeholder iconify-icon { font-size: 24px; color: #2FBF71; }
.sfc-continue-body { flex: 1; min-width: 0; }
.sfc-continue-title { font-size: 13.5px; font-weight: 700; color: #0D3D2D; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-continue-meta { font-size: 11.5px; color: #717974; margin: 0 0 8px; }
.sfc-continue-percent { flex-shrink: 0; font-size: 13px; font-weight: 800; color: #18A167; }

/* ── Stat Cards ─────────────────────────────────────────── */
.sfc-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sfc-stat-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sfc-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #717974; }
.sfc-stat-row { display: flex; align-items: center; justify-content: space-between; }
.sfc-stat-num { font-size: 32px; font-weight: 800; color: #0D3D2D; line-height: 1; }
.sfc-stat-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: #E8F5EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sfc-stat-icon-wrap iconify-icon { font-size: 20px; color: #006D39; }
.sfc-stat-sublabel { font-size: 12px; color: #9CA3AF; font-weight: 500; }

/* ── Order History Card (dashboard home) ───────────────── */
.sfc-order-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; }
.sfc-order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sfc-order-card-title { font-size: 16px; font-weight: 700; color: #0D3D2D; margin: 0 0 2px; }
.sfc-order-card-subtitle { font-size: 12.5px; color: #9CA3AF; margin: 0; }
.sfc-view-all-btn { display: inline-flex; align-items: center; gap: 6px; color: #006D39 !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.sfc-view-all-btn:hover { color: #0D3D2D !important; }

.sfc-order-table { width: 100%; border-collapse: collapse; }
.sfc-order-table thead th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #9CA3AF; padding: 0 12px 12px; border-bottom: 1px solid #F3F4F6; white-space: nowrap; }
.sfc-order-table tbody td { padding: 14px 12px; font-size: 13px; color: #374151; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.sfc-order-table tbody tr:last-child td { border-bottom: none; }
.sfc-order-invoice-link { color: #0D3D2D !important; font-weight: 700; text-decoration: none !important; }
.sfc-order-invoice-link:hover { color: #006D39 !important; }

.sfc-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; }
.sfc-status-badge.completed { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-status-badge.processing { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.sfc-status-badge.declined { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.sfc-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }

.sfc-order-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid #F3F4F6; }
.sfc-order-showing { font-size: 12px; color: #9CA3AF; }

/* ── Dashboard Responsive ───────────────────────────────── */
@media (max-width: 1199px) {
    .sfc-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .sfc-dash-page { padding: 20px; }
    .sfc-dash-layout { flex-direction: column; }
    .sfc-week-days { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    .sfc-dash-page { padding: 14px; }
    .sfc-weekly-card { padding: 20px; }
    .sfc-stats-row { grid-template-columns: 1fr; }
    .sfc-week-days { grid-template-columns: repeat(3, 1fr); }
    .sfc-order-table { display: block; overflow-x: auto; }
}

/* ── Dashboard Mobile Shell (hidden sidebar + bottom nav) ──
   Uses the same <=991px breakpoint as the pre-existing shared
   .sfc-sidebar-close-btn / .sfc-sidebar-backdrop rules (defined
   earlier for the learning-player curriculum drawer) so this
   dashboard drawer and those shared components agree on when the
   sidebar is "off-canvas" vs. inline. Mismatched breakpoints here
   previously left the sidebar in its 264px desktop card layout
   (with a stray floating close button) across the whole tablet
   range (768-991px), instead of collapsing into the drawer. */
.sfc-dash-topbar { display: none; }
@media (max-width: 991px) {
    .sfc-dash-page--mobile-shell { padding: 0; background: #F1F8F5; overflow-x: hidden; }
    /* .sfc-dash-layout's base rule sets align-items:flex-start (needed on desktop so the
       sticky sidebar doesn't stretch to the main column's height). Once flex-direction
       becomes column here, flex-start applies to the CROSS axis instead — i.e. width —
       so .sfc-dash-main was shrinking to fit its own content instead of filling the
       screen, leaving a visible gap of page background down the right edge under every
       card. Force stretch + an explicit 100% width to actually fill the column. */
    .sfc-dash-page--mobile-shell .sfc-dash-layout { padding: 16px 14px 88px; margin: 0; max-width: none; align-items: stretch; }
    .sfc-dash-page--mobile-shell .sfc-dash-main { min-width: 0; width: 100%; }

    /* Sticky mobile topbar */
    .sfc-dash-topbar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 0; z-index: 40; background: #fff;
        padding: 14px 16px; border-bottom: 1px solid #EEF2F0;
    }
    .sfc-dash-hamburger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #EEF2F0; background: #F8FAF9; font-size: 18px; color: #0D3D2D; }
    .sfc-dash-topbar-title { font-size: 15px; font-weight: 700; color: #0D3D2D; }
    .sfc-dash-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #E8F5EE; }

    /* Sidebar becomes an off-canvas drawer */
    .sfc-dash-page--mobile-shell .sfc-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 300px;
        /* Must beat the shared .sfc-sidebar-backdrop's z-index:1040 (defined earlier for
           the learning-player drawer) — otherwise the backdrop sits visually on top of
           this drawer and silently swallows every click meant for its links/buttons. */
        z-index: 1050; border-radius: 0; transform: translateX(-100%); transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .sfc-dash-page--mobile-shell .sfc-sidebar.show { transform: translateX(0); }

    /* Bottom tab bar */
    .sfc-dash-bottomnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        display: flex; background: #fff; border-top: 1px solid #EEF2F0;
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    }
    .sfc-dash-navbtn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: none; border: none; text-decoration: none !important;
        font-size: 10px; font-weight: 700; color: #9CA3AF; padding: 4px 2px;
    }
    .sfc-dash-navbtn iconify-icon { font-size: 20px; }
    .sfc-dash-navbtn.sfc-active { color: #18A167; }

    /* "Lainnya" bottom sheet */
    .sfc-dash-sheet {
        /* Same reasoning as the drawer above: must clear the shared backdrop's z-index:1040. */
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060;
        background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0, 43, 22, 0.12);
        padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(100%); transition: transform 0.25s ease; max-height: 75vh; overflow-y: auto;
    }
    .sfc-dash-sheet.show { transform: translateY(0); }
    .sfc-dash-sheet-handle { width: 36px; height: 4px; border-radius: 9999px; background: #E5E7EB; margin: 0 auto 14px; }
    .sfc-dash-sheet-list { display: flex; flex-direction: column; gap: 2px; }
    .sfc-dash-sheet-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #414844; font-size: 14px; font-weight: 600; text-decoration: none !important; }
    .sfc-dash-sheet-item svg, .sfc-dash-sheet-item img, .sfc-dash-sheet-item iconify-icon { width: 18px; height: 18px; flex-shrink: 0; font-size: 18px; }
    .sfc-dash-sheet-item:active, .sfc-dash-sheet-item:hover { background: #F1F8F5; color: #0D3D2D; }
    .sfc-dash-sheet-item--danger { color: #DC2626; }
    .sfc-dash-sheet-divider { height: 1px; background: #EEF2F0; margin: 8px 6px; }
}
@media (min-width: 992px) {
    .sfc-dash-bottomnav, .sfc-dash-sheet { display: none !important; }
}

/* On the dashboard mobile shell, act like a standalone app: hide the
   marketing site's own header + floating scroll-to-top button so
   sfc-dash-topbar is the only header on screen (matches the mockup). */
@media (max-width: 991px) {
    body:has(.sfc-dash-page--mobile-shell) #sticky-header,
    body:has(.sfc-dash-page--mobile-shell) .tg-header__top,
    body:has(.sfc-dash-page--mobile-shell) .scroll__top {
        display: none !important;
    }
    body:has(.sfc-dash-page--mobile-shell) { overflow-x: hidden; }
    .sfc-dash-page--mobile-shell * { box-sizing: border-box; }
    .sfc-dash-page--mobile-shell .sfc-order-card,
    .sfc-dash-page--mobile-shell .sfc-stats-row,
    .sfc-dash-page--mobile-shell .sfc-continue-card { max-width: 100%; }

    /* Remove the tinted scrim behind the dashboard drawer/sheet — the shared
       .sfc-sidebar-backdrop (reused from the learning-player drawer) fills
       with rgba(13,61,45,.5), which read as a stray green layer over the
       dashboard content while the sidebar/"Lainnya" sheet was open. */
    body:has(.sfc-dash-page--mobile-shell) .sfc-sidebar-backdrop { background: transparent; }

    /* Stat cards: 2-column grid on mobile, matching the mockup (overrides the older 1-col rule below).
       min-width:0 is required on grid items here — without it, a grid item's default
       min-width:auto refuses to shrink below its content's intrinsic size, which was
       silently forcing the 2nd column (and page) wider than the viewport and clipping
       text like "BOOTCAMP"/"AKSES CLASS REPLAY" at the screen edge instead of wrapping it. */
    .sfc-dash-page--mobile-shell .sfc-stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .sfc-dash-page--mobile-shell .sfc-stat-card { min-width: 0; padding: 14px; }
    .sfc-dash-page--mobile-shell .sfc-stat-label,
    .sfc-dash-page--mobile-shell .sfc-continue-title,
    .sfc-dash-page--mobile-shell .sfc-dash-greet,
    .sfc-dash-page--mobile-shell .sfc-dash-greet-sub { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
    .sfc-dash-page--mobile-shell .sfc-stat-row { flex-wrap: wrap; gap: 8px; }

    /* Reclaim width lost to fixed 24px paddings (card + inline style stacking on top of
       each other) that were sized for a wide desktop card, not a ~340px phone screen. */
    .sfc-dash-page--mobile-shell .sfc-order-card { padding: 16px; }
    .sfc-dash-page--mobile-shell .sfc-order-card .sfc-stats-row { padding: 0 !important; }
    .sfc-dash-page--mobile-shell .sfc-continue-list { padding: 0; }

    /* "Lanjutkan Belajar" — flat section (no surrounding card chrome), matching the
       approved mobile mockup exactly instead of reusing the desktop "big card" look. */
    .sfc-dash-page--mobile-shell .sfc-continue-section {
        background: none; box-shadow: none; padding: 0; border: none; margin-bottom: 0;
    }
    .sfc-dash-page--mobile-shell .sfc-continue-section .sfc-order-card-header {
        align-items: center; margin-bottom: 12px;
    }
    .sfc-dash-page--mobile-shell .sfc-continue-section .sfc-order-card-subtitle { display: none; }
    .sfc-dash-page--mobile-shell .sfc-continue-section .sfc-order-card-title { font-size: 14.5px; margin: 0; }
    .sfc-dash-page--mobile-shell .sfc-continue-section .sfc-view-all-btn { font-size: 12.5px; gap: 0; }
    .sfc-dash-page--mobile-shell .sfc-continue-section .sfc-view-all-btn iconify-icon { display: none; }
    .sfc-dash-page--mobile-shell .sfc-continue-list { gap: 10px; }
    .sfc-dash-page--mobile-shell .sfc-continue-card {
        background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px; gap: 12px;
    }
    .sfc-dash-page--mobile-shell .sfc-continue-thumb { width: 52px; height: 52px; border-radius: 10px; }
    .sfc-dash-page--mobile-shell .sfc-continue-thumb-placeholder { background: linear-gradient(135deg, #0D3D2D, #18A167); }
    .sfc-dash-page--mobile-shell .sfc-continue-thumb-placeholder iconify-icon { display: none; }
    .sfc-dash-page--mobile-shell .sfc-continue-card .sfc-progress-bar-bg { display: none; }
    .sfc-dash-page--mobile-shell .sfc-continue-meta { margin: 3px 0 0; }
    .sfc-dash-page--mobile-shell .sfc-continue-percent {
        font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
        background: #E8F5EE; color: #18A167; white-space: nowrap;
    }
}
@media (max-width: 380px) {
    .sfc-dash-page--mobile-shell .sfc-stat-label { font-size: 10px; letter-spacing: 0.06em; }
    .sfc-dash-page--mobile-shell .sfc-stat-card { padding: 12px; }
    .sfc-dash-page--mobile-shell .sfc-stat-icon-wrap { width: 36px; height: 36px; }
    .sfc-dash-page--mobile-shell .sfc-stat-icon-wrap iconify-icon { font-size: 16px; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Shared Page Header (all sub-pages)
   ============================================================ */
.sfc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 0; flex-wrap: wrap; }
.sfc-page-title { font-size: 24px; font-weight: 800; color: #0D3D2D; margin: 0 0 6px; }
.sfc-page-subtitle { font-size: 13px; color: #717974; margin: 0; }
.sfc-header-btn-group { display: flex; align-items: center; gap: 10px; }
.sfc-filter-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 18px; font-size: 13px; font-weight: 600; color: #414844 !important; text-decoration: none !important; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.sfc-filter-btn:hover { border-color: #9CA3AF; color: #111827; }
.sfc-filter-btn.active { border-color: #0D3D2D; color: #0D3D2D; background: rgba(238, 245, 242, 0.6); }
.sfc-filter-btn iconify-icon { font-size: 16px; }

/* ── Filter dropdown (shared, dipakai di semua halaman list) ───── */
.sfc-filter-dropdown { position: relative; }
.sfc-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 43, 22, 0.15); border: 1px solid #F3F4F6; padding: 8px; min-width: 210px; z-index: 50; display: none; flex-direction: column; gap: 2px; }
.sfc-filter-panel.show { display: flex; }
.sfc-filter-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; padding: 8px 10px 4px; }
.sfc-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #414844 !important; text-decoration: none !important; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.sfc-filter-option:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-filter-option.active { background: #0D3D2D; color: #fff !important; }
.sfc-filter-option .sfc-filter-option-check { font-size: 14px; opacity: 0; }
.sfc-filter-option.active .sfc-filter-option-check { opacity: 1; }

/* ============================================================
   SFC STUDENT DASHBOARD — Learning Series (Enrolled Courses)
   ============================================================ */
.sfc-course-list-wrap { --sfc-card-h: 285px; padding-right: 6px; margin-top: -16px; }
.sfc-course-list-wrap.sfc-scrollable { overflow-y: auto; }
.sfc-course-list-wrap::-webkit-scrollbar { width: 6px; }
.sfc-course-list-wrap::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 9999px; }
.sfc-course-list-wrap::-webkit-scrollbar-track { background: transparent; }
.sfc-course-list { display: flex; flex-direction: column; gap: 20px; }
.sfc-course-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; color: #9CA3AF; font-size: 13px; opacity: 0; transition: opacity 0.15s; }
#sfc-course-load-sentinel.sfc-loading-active .sfc-course-loading { opacity: 1; }
.sfc-course-card { background: #fff; border-radius: 24px; border: 1px solid #E5E7EB; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 1024px; height: var(--sfc-card-h, 285px); min-height: 230px; }

.sfc-course-thumb { flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 16 / 9; background: rgba(47, 191, 113, 0.15); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.sfc-course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfc-course-thumb-placeholder { width: 100%; height: 100%; background: #CBD5E1; display: flex; align-items: center; justify-content: center; }
.sfc-course-thumb-placeholder iconify-icon { font-size: 34px; color: #fff; }

.sfc-course-body { padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; justify-content: center; }
.sfc-course-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; color: #fff; }
.sfc-course-badge.running { background: #14532D; }
.sfc-course-badge.register { background: #0F3D2C; }
.sfc-course-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6B7280; white-space: nowrap; }

.sfc-course-body .sfc-course-title { font-size: 20px; font-weight: 800; color: #1B3A2D; text-decoration: none !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
.sfc-course-body .sfc-course-title:hover { color: #006D39; }

.sfc-course-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-instructor { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0F7B4F; font-weight: 500; }
.sfc-course-instructor iconify-icon { color: #6B7280; font-size: 15px; }
.sfc-course-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #1B3A2D; font-weight: 700; }
.sfc-course-rating iconify-icon { color: #F5A623; font-size: 14px; }

.sfc-course-body .sfc-progress-wrap,
.sfc-bc-progress-wrap { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; min-width: 0; width: 100%; gap: 8px; }
.sfc-course-body .sfc-progress-label,
.sfc-bc-body .sfc-progress-label { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #9CA3AF; }
.sfc-course-body .sfc-progress-label span:last-child,
.sfc-bc-body .sfc-progress-label span:last-child { color: #1B3A2D; }
.sfc-course-body .sfc-progress-bar-bg,
.sfc-bc-body .sfc-progress-bar-bg { width: 100%; height: 5px; background: #E5E7EB; border-radius: 9999px; overflow: hidden; }
.sfc-course-body .sfc-progress-bar-fill,
.sfc-bc-body .sfc-progress-bar-fill { height: 100%; background: #1DB968; border-radius: 9999px; }

.sfc-course-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.sfc-course-stats { display: flex; align-items: center; gap: 10px; }
.sfc-course-stat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.sfc-course-stat-item iconify-icon { font-size: 15px; }
.sfc-course-stat-dot { width: 3px; height: 3px; border-radius: 50%; background: #D1D5DB; }
.sfc-mulai-btn { display: inline-flex; align-items: center; gap: 8px; background: #0F3D2C; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; padding: 12px 26px; border-radius: 9999px; white-space: nowrap; transition: background 0.15s; }
.sfc-mulai-btn:hover { background: #0a2e1f; }

.sfc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 24px; color: #9CA3AF; background: #fff; border-radius: 20px; }
.sfc-empty-state iconify-icon { font-size: 40px; color: #D1D5DB; }
.sfc-empty-state p { margin: 0; font-size: 14px; }

@media (max-width: 767px) {
    .sfc-course-card { flex-direction: column; height: auto; }
    .sfc-course-thumb { width: 100%; height: 200px; }

    .sfc-course-title-eyebrow { font-size: 11px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }

    /* "X Selesai" pushed to the far right, away from "X Materi" */
    .sfc-course-stats { width: 100%; justify-content: space-between; }
    .sfc-course-stat-dot { display: none; }

    /* Full-width "Mulai Belajar" button, stacked below the stats row */
    .sfc-course-bottom { flex-direction: column; align-items: stretch; }
    .sfc-mulai-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Bootcamp (grid card, vertikal)
   Class di-scope khusus (.sfc-bc-grid ...) supaya tidak bentrok
   dengan .sfc-bc-card milik halaman publik /bootcamp.
   ============================================================ */
.sfc-bc-grid-wrap { padding-right: 6px; }
.sfc-bc-grid-wrap.sfc-scrollable { overflow-y: auto; }
.sfc-bc-grid-wrap::-webkit-scrollbar { width: 6px; }
.sfc-bc-grid-wrap::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 9999px; }
.sfc-bc-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.sfc-bc-grid-wrap .sfc-bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.sfc-bc-grid-wrap .sfc-bc-card { background: #fff; border-radius: 20px; border: 1px solid #E5E7EB; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 0; transition: none; }
.sfc-bc-grid-wrap .sfc-bc-card:hover { box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); border-color: #E5E7EB; }

.sfc-bc-thumb { position: relative; width: 100%; height: 220px; flex-shrink: 0; background: #E9EEF5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sfc-bc-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sfc-bc-thumb-placeholder { width: 64px; height: 64px; border-radius: 50%; background: #CBD5E1; display: flex; align-items: center; justify-content: center; }
.sfc-bc-thumb-placeholder iconify-icon { font-size: 26px; color: #fff; }

.sfc-bc-thumb .sfc-bc-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; color: #fff; }
.sfc-bc-thumb .sfc-bc-badge.running { background: #14532D; }
.sfc-bc-thumb .sfc-bc-badge.register { background: #12182B; }

.sfc-bc-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.sfc-bc-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6B7280; flex-shrink: 0; }
.sfc-bc-date iconify-icon { font-size: 14px; }

a.sfc-bc-title,
span.sfc-bc-title { font-size: 19px; font-weight: 800; color: #1B3A2D; text-decoration: none !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
a.sfc-bc-title:hover { color: #006D39; }

.sfc-bc-instructor { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0F7B4F; font-weight: 500; flex-shrink: 0; }
.sfc-bc-instructor iconify-icon { color: #6B7280; font-size: 15px; }

.sfc-bc-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #1B3A2D; font-weight: 700; flex-shrink: 0; }
.sfc-bc-rating iconify-icon { font-size: 14px; }
.sfc-bc-rating span { margin-left: 4px; }

.sfc-bc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; flex-shrink: 0; }
.sfc-bc-stats { display: flex; align-items: center; gap: 14px; }
.sfc-bc-stat-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.sfc-bc-stat-item iconify-icon { font-size: 15px; }

@media (max-width: 1199px) {
    .sfc-bc-grid-wrap .sfc-bc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .sfc-bc-grid-wrap .sfc-bc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Ulasan (Reviews)
   ============================================================ */
.sfc-review-layout { display: flex; align-items: flex-start; gap: 24px; }
.sfc-review-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.sfc-review-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ── Summary card (dark) ─────────────────────────────────── */
.sfc-review-summary-card { background: #0D3D2D; border-radius: 20px; padding: 24px; color: #fff; }
.sfc-review-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sfc-review-summary-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.sfc-review-summary-count { font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.sfc-review-summary-total { font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 18px; }
.sfc-review-summary-divider { height: 1px; background: rgba(255,255,255,0.15); margin-bottom: 18px; }
.sfc-review-summary-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600; }

/* ── Filter status box ───────────────────────────────────── */
.sfc-review-filter-box { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.sfc-review-filter-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #9CA3AF; margin: 0 0 6px; }
.sfc-review-filter-pill { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; color: #414844 !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background 0.15s; }
.sfc-review-filter-pill:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-review-filter-pill span { font-size: 11.5px; font-weight: 700; color: #9CA3AF; background: #F3F4F6; border-radius: 9999px; padding: 2px 9px; }
.sfc-review-filter-pill.active { background: #0D3D2D; color: #fff !important; }
.sfc-review-filter-pill.active span { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ── Right header (title + search) ───────────────────────── */
.sfc-review-right-header { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sfc-review-right-title { font-size: 17px; font-weight: 800; color: #1B3A2D; margin: 0; }
.sfc-review-search-wrap { display: flex; align-items: center; gap: 8px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 9999px; padding: 9px 16px; width: 260px; }
.sfc-review-search-input { border: none; background: transparent; outline: none; font-size: 13px; color: #374151; width: 100%; }
.sfc-review-search-input::placeholder { color: #9CA3AF; }

/* ── Review item list ─────────────────────────────────────── */
.sfc-review-list { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-review-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; flex-wrap: wrap; }
.sfc-review-item:last-child { border-bottom: none; }
.sfc-review-item-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sfc-review-item-title-wrap { display: flex; align-items: baseline; gap: 8px; }
.sfc-review-item-num { font-size: 12px; font-weight: 700; color: #9CA3AF; flex-shrink: 0; }
.sfc-review-item-title { font-size: 15px; font-weight: 700; color: #1B3A2D; }
.sfc-review-item-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9CA3AF; flex-wrap: wrap; }
.sfc-review-meta-dot { color: #D1D5DB; }
.sfc-review-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.sfc-review-status-badge.approved { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-review-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }
.sfc-review-stars { display: flex; align-items: center; gap: 2px; }

.sfc-review-item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sfc-review-lihat-btn { display: inline-flex; align-items: center; gap: 6px; background: #0D3D2D; color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; padding: 9px 18px; border-radius: 9999px; transition: background 0.15s; }
.sfc-review-lihat-btn:hover { background: #0a2e1f; }
.sfc-review-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: #FEF2F2; color: #DC2626 !important; text-decoration: none !important; transition: background 0.15s; cursor: pointer; }
.sfc-review-delete-btn:hover { background: #FEE2E2; }

/* ── Pagination ───────────────────────────────────────────── */
.sfc-review-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 4px 0; }
.sfc-review-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-review-pagination-btns { display: flex; align-items: center; gap: 6px; }
.sfc-review-page-btn,
.sfc-review-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; font-size: 13px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.15s; }
.sfc-review-page-btn:hover:not(:disabled),
.sfc-review-page-num:hover { border-color: #9CA3AF; color: #111827; }
.sfc-review-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sfc-review-page-num.active { background: #0D3D2D; border-color: #0D3D2D; color: #fff; }
.sfc-review-page-ellipsis { color: #9CA3AF; padding: 0 4px; }

@media (max-width: 991px) {
    .sfc-review-layout { flex-direction: column; }
    .sfc-review-left { width: 100%; flex-direction: row; }
    .sfc-review-summary-card,
    .sfc-review-filter-box { flex: 1; min-width: 0; }
}
@media (max-width: 575px) {
    .sfc-review-left { flex-direction: column; }
    .sfc-review-search-wrap { width: 100%; }
    .sfc-review-item { flex-direction: column; align-items: flex-start; }
    .sfc-review-item-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Percobaan Quiz (Quiz Attempts)
   ============================================================ */
.sfc-quiz-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-quiz-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; flex-wrap: wrap; }
.sfc-quiz-card-title { font-size: 16px; font-weight: 800; color: #1B3A2D; margin: 0; }
.sfc-quiz-count-badge { font-size: 11.5px; font-weight: 700; color: #6B7280; background: #F3F4F6; border-radius: 9999px; padding: 5px 14px; white-space: nowrap; }

.sfc-quiz-list { display: flex; flex-direction: column; }
.sfc-quiz-item { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #F3F4F6; }
.sfc-quiz-item:last-child,
.sfc-quiz-item.sfc-quiz-item-last { border-bottom: none; }

.sfc-quiz-num-badge { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #E8F5EE; color: #006D39; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.sfc-quiz-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sfc-quiz-title { font-size: 15px; font-weight: 700; color: #1B3A2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-quiz-desc { font-size: 12.5px; color: #6B7280; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-quiz-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.sfc-quiz-meta-icon { font-size: 13px; color: #9CA3AF; }
.sfc-quiz-date { font-size: 12px; color: #9CA3AF; }
.sfc-quiz-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.sfc-quiz-status-badge.pass { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-quiz-status-badge.fail { background: rgba(220, 38, 38, 0.1); color: #DC2626; }

.sfc-quiz-right { flex-shrink: 0; display: flex; align-items: center; gap: 20px; }
.sfc-quiz-score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 130px; }
.sfc-quiz-score-row { display: flex; align-items: baseline; gap: 3px; }
.sfc-quiz-score-num { font-size: 18px; font-weight: 800; color: #1B3A2D; }
.sfc-quiz-score-total { font-size: 12px; color: #9CA3AF; font-weight: 600; }
.sfc-quiz-progress-bg { width: 100%; height: 5px; background: #E5E7EB; border-radius: 9999px; overflow: hidden; }
.sfc-quiz-progress-fill { height: 100%; background: #1DB968; border-radius: 9999px; }
.sfc-quiz-lihat-btn { display: inline-flex; align-items: center; gap: 6px; background: #0D3D2D; color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; padding: 9px 18px; border-radius: 9999px; white-space: nowrap; transition: background 0.15s; }
.sfc-quiz-lihat-btn:hover { background: #0a2e1f; }

.sfc-quiz-empty { display: flex; align-items: center; justify-content: center; padding: 48px 24px; color: #9CA3AF; font-size: 14px; }

.sfc-quiz-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid #F3F4F6; }
.sfc-quiz-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-quiz-pagination-btns { display: flex; align-items: center; gap: 6px; }

@media (max-width: 575px) {
    .sfc-quiz-item { flex-wrap: wrap; }
    .sfc-quiz-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Riwayat Pesanan (Order List)
   ============================================================ */
.sfc-order-list-wrap { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }
.sfc-order-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #F3F4F6; }
.sfc-order-row:last-child { border-bottom: none; }
.sfc-order-row-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #E8F5EE; color: #006D39; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sfc-order-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sfc-order-row-invoice { font-size: 14.5px; font-weight: 700; color: #1B3A2D; text-decoration: none !important; }
.sfc-order-row-invoice:hover { color: #006D39; }
.sfc-order-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9CA3AF; flex-wrap: wrap; }
.sfc-order-row-dot { color: #D1D5DB; }
.sfc-order-row-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.sfc-order-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.sfc-order-status-badge.completed { background: rgba(29, 185, 104, 0.12); color: #1DB968; }
.sfc-order-status-badge.processing { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.sfc-order-status-badge.declined { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
.sfc-order-status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #B45309; }

.sfc-order-eye-link { width: 34px; height: 34px; border-radius: 9999px; background: #F3F4F6; color: #6B7280; display: flex; align-items: center; justify-content: center; text-decoration: none !important; transition: background 0.15s, color 0.15s; }
.sfc-order-eye-link:hover { background: #E5E7EB; color: #111827; }
.sfc-order-empty { padding: 48px 24px; text-align: center; color: #9CA3AF; }

.sfc-order-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.sfc-order-showing { font-size: 12.5px; color: #9CA3AF; }
.sfc-order-pagination-btns { display: flex; align-items: center; gap: 6px; }
.sfc-order-page-arrow,
.sfc-order-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; font-size: 13px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.15s; }
.sfc-order-page-arrow:hover:not(:disabled),
.sfc-order-page-num:hover { border-color: #9CA3AF; color: #111827; }
.sfc-order-page-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.sfc-order-page-num.active { background: #0D3D2D; border-color: #0D3D2D; color: #fff; }
.sfc-order-page-ellipsis { color: #9CA3AF; padding: 0 4px; }

@media (max-width: 575px) {
    .sfc-order-row { flex-wrap: wrap; }
    .sfc-order-row-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Detail Pesanan (Invoice)
   ============================================================ */
.sfc-invoice-back { display: inline-flex; align-items: center; gap: 8px; color: #414844 !important; font-size: 14px; font-weight: 600; text-decoration: none !important; margin-bottom: 16px; transition: color 0.15s; }
.sfc-invoice-back:hover { color: #0D3D2D !important; }

.sfc-invoice-card { position: relative; background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; padding: 32px 36px 28px; }

.sfc-invoice-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; margin-bottom: 28px; }
.sfc-invoice-header-title { font-size: 20px; font-weight: 800; color: #1B3A2D; margin: 0; }

.sfc-invoice-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.sfc-invoice-faktur-title { font-size: 32px; font-weight: 800; color: #1B3A2D; margin: 0 0 18px; }
.sfc-invoice-field { margin-bottom: 14px; }
.sfc-invoice-field:last-child { margin-bottom: 0; }
.sfc-invoice-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; margin-bottom: 4px; }
.sfc-invoice-label-spaced { margin-top: 16px; }
.sfc-invoice-value { font-size: 15px; font-weight: 700; color: #1B3A2D; }

.sfc-invoice-billed-name { font-size: 15px; font-weight: 700; color: #1B3A2D; margin: 2px 0 6px; }
.sfc-invoice-billed-line { font-size: 13.5px; color: #414844; margin: 0 0 2px; line-height: 1.6; }

.sfc-invoice-status-value { font-size: 14px; font-weight: 700; font-style: italic; margin: 2px 0 0; }
.sfc-invoice-status-value.completed { color: #1DB968; }
.sfc-invoice-status-value.declined { color: #DC2626; }
.sfc-invoice-status-value.pending { color: #B45309; }

.sfc-invoice-summary-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #9CA3AF; margin: 0 0 12px; }

.sfc-invoice-table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid #F3F4F6; margin-bottom: 20px; }
.sfc-invoice-table { width: 100%; border-collapse: collapse; }
.sfc-invoice-table thead tr { background: #F5F7F9; }
.sfc-invoice-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #6B7280; padding: 14px 20px; }
.sfc-invoice-th-num { width: 48px; }
.sfc-invoice-th-price { text-align: right; }
.sfc-invoice-table td { padding: 18px 20px; border-top: 1px solid #F3F4F6; vertical-align: top; font-size: 13.5px; color: #414844; }
.sfc-invoice-td-num { color: #9CA3AF; font-weight: 600; }
.sfc-invoice-item-title { font-size: 14.5px; font-weight: 700; color: #1B3A2D; margin-bottom: 3px; }
.sfc-invoice-item-sub { font-size: 12.5px; color: #9CA3AF; }
.sfc-invoice-instructor-name { font-size: 13.5px; font-weight: 600; color: #1B3A2D; }
.sfc-invoice-instructor-email { font-size: 12px; color: #9CA3AF; }
.sfc-invoice-price { text-align: right; font-weight: 700; color: #1B3A2D; white-space: nowrap; }

.sfc-invoice-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; width: 320px; max-width: 100%; }
.sfc-invoice-total-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; color: #414844; }
.sfc-invoice-total-divider { width: 100%; height: 1px; background: #E5E7EB; margin: 4px 0; }
.sfc-invoice-total-grand { font-size: 17px; font-weight: 800; color: #1B3A2D; }

.sfc-invoice-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; margin-top: 8px; border-top: 1px solid #F3F4F6; }
.sfc-invoice-thanks { font-size: 13.5px; font-style: italic; color: #6B7280; margin: 0; }
.sfc-invoice-print-btn { display: inline-flex; align-items: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; padding: 12px 22px; border-radius: 12px; white-space: nowrap; transition: background 0.15s; }
.sfc-invoice-print-btn:hover { background: #0a2e1f; }
.sfc-invoice-footer-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sfc-invoice-pay-btn { display: inline-flex; align-items: center; gap: 8px; background: #2FBF71; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; padding: 12px 22px; border-radius: 12px; white-space: nowrap; transition: background 0.15s; }
.sfc-invoice-pay-btn:hover { background: #26A560; }

.sfc-invoice-accent-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #0D3D2D 0%, #1DB968 100%); }

@media (max-width: 991px) {
    .sfc-invoice-top { grid-template-columns: 1fr 1fr; }
    .sfc-invoice-faktur-col { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .sfc-invoice-card { padding: 24px 18px 22px; }
    .sfc-invoice-top { grid-template-columns: 1fr; }
    .sfc-invoice-totals { width: 100%; }
    .sfc-invoice-table-wrap { overflow-x: auto; }
    .sfc-invoice-table { min-width: 520px; }
    .sfc-invoice-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SFC STUDENT DASHBOARD — Pengaturan Profil (Profile Settings)
   ============================================================ */
.sfc-profile-layout { display: flex; align-items: flex-start; gap: 24px; }

/* ── Left tab nav ───────────────────────────────────────── */
.sfc-profile-nav { width: 220px; flex-shrink: 0; background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sfc-profile-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: none; background: transparent; color: #414844; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.sfc-profile-nav-item iconify-icon { font-size: 17px; flex-shrink: 0; }
.sfc-profile-nav-item:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-profile-nav-item.active { background: #0D3D2D; color: #fff; }

/* ── Right content ─────────────────────────────────────── */
.sfc-profile-right { flex: 1; min-width: 0; }
.sfc-profile-pane { display: none; }
.sfc-profile-pane.active { display: block; }
.sfc-profile-right-card { background: #fff; border-radius: 20px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; }

/* ── Cover + avatar ─────────────────────────────────────── */
.sfc-profile-cover-section { position: relative; }
.sfc-profile-banner { height: 160px; background-size: cover; background-position: center; background-color: #E8F5EE; position: relative; }
.sfc-edit-cover-btn { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; background: rgba(13, 61, 45, 0.85); color: #fff; border: none; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 9999px; cursor: pointer; transition: background 0.15s; }
.sfc-edit-cover-btn:hover { background: #0D3D2D; }

.sfc-avatar-wrap { position: absolute; left: 32px; bottom: -36px; width: 88px; height: 88px; }
.sfc-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #E8F5EE; display: block; }
.sfc-avatar-edit-btn { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #0D3D2D; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: background 0.15s; }
.sfc-avatar-edit-btn:hover { background: #0a2e1f; }

/* ── Form body ──────────────────────────────────────────── */
.sfc-profile-form-body { padding: 52px 32px 32px; }
.sfc-form-body-plain { padding: 32px; }

.sfc-form-group { margin-bottom: 18px; }
.sfc-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sfc-form-row .sfc-form-group { flex: 1; min-width: 200px; }
.sfc-form-label { display: block; font-size: 12.5px; font-weight: 700; color: #1B3A2D; margin-bottom: 7px; }
.sfc-required { color: #DC2626; }

.sfc-form-input,
.sfc-form-textarea,
.sfc-form-select { width: 100%; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: #374151; outline: none; font-family: inherit; transition: border-color 0.15s; background: #fff; }
.sfc-form-input:focus,
.sfc-form-textarea:focus,
.sfc-form-select:focus { border-color: #0D3D2D; }
.sfc-form-input::placeholder,
.sfc-form-textarea::placeholder { color: #9CA3AF; }
.sfc-form-textarea { resize: vertical; min-height: 90px; }

.sfc-input-icon-wrap { position: relative; }
.sfc-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 15px; }
.sfc-input-has-icon { padding-left: 38px; }

.sfc-select-wrap { position: relative; }
.sfc-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.sfc-select-wrap select:disabled { background: #F3F4F6; color: #9CA3AF; cursor: not-allowed; }
.sfc-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 13px; pointer-events: none; }

.sfc-form-submit-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.sfc-submit-btn { display: inline-flex; align-items: center; gap: 8px; background: #0D3D2D; color: #fff !important; font-size: 13.5px; font-weight: 700; padding: 12px 24px; border-radius: 9999px; border: none; cursor: pointer; transition: background 0.15s; }
.sfc-submit-btn:hover { background: #0a2e1f; }

@media (max-width: 991px) {
    /* align-items:flex-start (set on .sfc-profile-layout for the desktop row layout, so
       the sticky-height sidebar nav doesn't stretch) applies to the CROSS axis instead
       once flex-direction becomes column here — i.e. width, not height. Without this
       override, .sfc-profile-right (and every tab card inside it: Biografi/Kata
       Sandi/Sosial/etc.) shrinks to fit its own content instead of filling the screen,
       leaving a gap on the side instead of a full-width card. */
    .sfc-profile-layout { flex-direction: column; align-items: stretch; }
    .sfc-profile-right { width: 100%; }
    /* overflow-x:auto with no scrollbar/fade affordance meant every tab past the fold
       (e.g. "Sosial") got abruptly sliced at the viewport edge mid-scroll, reading as a
       rendering bug rather than "scroll for more". Add the same fade-mask + hidden-
       scrollbar treatment already used for .sfc-tab-nav elsewhere, plus breathing room
       so the last item never sits flush against the edge. */
    .sfc-profile-nav {
        width: 100%; flex-direction: row; overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; -ms-overflow-style: none;
        mask-image: linear-gradient(to right, black 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
        padding-right: 24px;
    }
    .sfc-profile-nav::-webkit-scrollbar { display: none; }
    .sfc-profile-nav-item { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 575px) {
    .sfc-profile-form-body { padding: 48px 18px 24px; }
    .sfc-form-body-plain { padding: 20px; }
    .sfc-avatar-wrap { left: 18px; }
}