/* =========================================================
   SIM Sekolah - Modern SaaS & Ergonomic UI Theme
   Warna --primary/--secondary di-override per-halaman lewat
   inline <style> di layout_top.php / login.php / index.php
   berdasarkan pengaturan admin (lihat admin/pengaturan.php).
   ========================================================= */

@import url('fonts.css');

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --primary-subtle: rgba(79, 70, 229, 0.08);
    --secondary: #0ea5e9;
    --secondary-light: #f0f9ff;
    --success: #10b981;
    --success-light: #ecfdf5;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --info: #06b6d4;
    --info-light: #ecfeff;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --bg: #f8fafc;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-subtle: #f1f5f9;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 22px;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.06);
    --shadow: 0 4px 16px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 8px 24px -4px rgba(16, 24, 40, 0.1), 0 3px 8px -2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 16px 36px -6px rgba(16, 24, 40, 0.14), 0 6px 12px -3px rgba(16, 24, 40, 0.06);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.28);
    --sidebar-w: 268px;
    --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html {
    font-size: calc(15px * var(--ui-font-scale, 1));
}

body {
    background: var(--ui-bg, var(--bg, #f8fafc));
    color: var(--ui-text, var(--text, #0f172a));
    font-family: var(--ui-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    line-height: 1.5;
}

/* UI Radius Classes */
body.ui-radius-compact { --radius: 8px !important; --radius-sm: 6px !important; --radius-lg: 12px !important; }
body.ui-radius-rounded { --radius: 16px !important; --radius-sm: 10px !important; --radius-lg: 20px !important; }
body.ui-radius-soft { --radius: 22px !important; --radius-sm: 14px !important; --radius-lg: 28px !important; }
body.ui-radius-pill { --radius: 30px !important; --radius-sm: 18px !important; --radius-lg: 9999px !important; }

/* Dynamic Hero Banner */
.dashboard-hero {
    background: linear-gradient(135deg, var(--primary, #1e40af) 0%, var(--primary-dark, #1d4ed8) 45%, var(--secondary, #2563eb) 100%) !important;
    border-radius: var(--radius, 18px);
    padding: 1.35rem 1.65rem;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(30, 64, 175, 0.2);
    position: relative;
    overflow: hidden;
}

/* UI Gaya Themes */
body.ui-style-kartun .card {
    border: 2px solid #e0e7ff !important;
    border-radius: 22px !important;
    box-shadow: 0 6px 0 #ede9fe, 0 10px 20px rgba(124, 58, 237, 0.08) !important;
}
body.ui-style-kartun .btn { border-radius: 999px !important; font-weight: 800 !important; }
body.ui-style-kartun .dashboard-hero { border-radius: 26px !important; box-shadow: 0 8px 0 rgba(0,0,0,0.12), 0 14px 28px rgba(124, 58, 237, 0.25) !important; }

body.ui-style-classic-modern .card {
    border: 1.5px solid #e7e5e4 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(41, 37, 36, 0.04) !important;
}
body.ui-style-classic-modern .card-header { border-bottom: 2px solid #d6d3d1 !important; font-family: var(--ui-font, 'Outfit', serif); }

body.ui-style-high-contrast { font-weight: 550; }
body.ui-style-high-contrast .card { border: 2px solid #0f172a !important; box-shadow: 0 4px 0 #0f172a !important; }
body.ui-style-high-contrast .card-header { border-bottom: 2px solid #0f172a !important; font-weight: 800 !important; }
body.ui-style-high-contrast .table thead th { border-bottom: 2.5px solid #0f172a !important; color: #000000 !important; font-weight: 800 !important; }
body.ui-style-high-contrast .btn { border: 2px solid #0f172a !important; font-weight: 800 !important; }

a { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------
   Modern Slim Scrollbar
--------------------------------------------------------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; transition: var(--transition); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------------------------------------------------------
   Entrance Animations & Keyframes
--------------------------------------------------------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { opacity: 0.85; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-in { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-in.d1 { animation-delay: 0.05s; }
.animate-in.d2 { animation-delay: 0.1s; }
.animate-in.d3 { animation-delay: 0.15s; }
.animate-in.d4 { animation-delay: 0.2s; }
.animate-in.d5 { animation-delay: 0.25s; }

/* ---------------------------------------------------------
   Modern Top Navbar (Royal Blue Gradient & Crisp Typography)
--------------------------------------------------------- */
.app-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-left: 0 !important;
    z-index: 1040 !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 80%, #0284c7 100%) !important;
    padding: 0 clamp(0.75rem, 1.25vw, 1.5rem) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.app-navbar .brand-wrap { display: flex; align-items: center; gap: 0.75rem; color: #ffffff; }
.app-navbar .brand-logo,
.mobile-brand .brand-logo {
    width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.28); flex-shrink: 0;
    color: #ffffff;
}
.app-navbar .brand-logo img,
.mobile-brand .brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.mobile-brand { display: flex; align-items: center; gap: 0.6rem; color: #ffffff !important; font-weight: 800; letter-spacing: -0.01em; }
.mobile-brand strong { color: #ffffff !important; }

#sidebarToggle,
#sidebarDesktopToggle {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition, all 0.2s ease);
}
#sidebarToggle:hover,
#sidebarDesktopToggle:hover,
#sidebarToggle:focus,
#sidebarDesktopToggle:focus,
#sidebarToggle:active,
#sidebarDesktopToggle:active {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: scale(1.03);
    outline: none !important;
    box-shadow: none !important;
}
#sidebarToggle i,
#sidebarDesktopToggle i {
    color: #ffffff !important;
}

.topbar-greeting { display: flex; flex-direction: column; justify-content: center; color: #ffffff; line-height: normal; gap: 2px; }
.topbar-greeting-title { font-weight: 800; font-size: 0.92rem; letter-spacing: -0.015em; color: #ffffff !important; line-height: 1.25; margin: 0; }
.topbar-greeting-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82) !important; font-weight: 500; line-height: 1.2; margin: 0; }

.navbar-user { display: flex; align-items: center; gap: 0.75rem; }
.period-pill {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    font-size: 0.76rem; font-weight: 700;
    padding: 0.35rem 0.8rem; border-radius: var(--radius-full, 9999px);
    transition: var(--transition, all 0.2s ease);
}
.period-pill:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}
.period-pill * { color: #ffffff !important; }
.period-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399 !important; animation: pulseDot 2s infinite ease-in-out; }

.topbar-notification {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: var(--transition, all 0.2s ease);
}
.topbar-notification:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.topbar-profile {
    display: flex; align-items: center; gap: 0.6rem;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    padding: 0.28rem 0.75rem 0.28rem 0.32rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    transition: var(--transition, all 0.2s ease);
}
.topbar-profile:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.topbar-profile .avatar {
    width: 34px; height: 34px; border-radius: 50%;
}
.topbar-profile img.avatar {
    object-fit: cover;
    display: inline-block;
}
.topbar-profile div.avatar {
    background: #ffffff !important;
    color: #1e40af !important;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.86rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.topbar-profile .avatar.d-none,
.topbar-profile div.avatar.d-none,
.topbar-profile .avatar[style*="display: none"],
.topbar-profile .avatar[style*="display:none"],
.topbar-profile [style*="display: none"],
.topbar-profile [style*="display:none"] {
    display: none !important;
}
.topbar-profile span { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-profile strong { font-size: 0.82rem; font-weight: 700; color: #ffffff !important; }
.topbar-profile small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; }

.btn-logout {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--radius-sm, 8px); padding: 0.42rem 0.85rem; font-weight: 600; font-size: 0.82rem;
    display: inline-flex; align-items: center; gap: 0.4rem; transition: var(--transition, all 0.2s ease);
}
.btn-logout * { color: #ffffff !important; }
.btn-logout:hover,
.btn-logout:focus,
.btn-logout:active {
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.btn-logout:hover *,
.btn-logout:focus *,
.btn-logout:active * { color: #ffffff !important; }

/* ---------------------------------------------------------
   Modern Dynamic Sidebar
--------------------------------------------------------- */
.app-shell { display: flex; align-items: flex-start; margin-top: 58px !important; min-height: calc(100vh - 58px) !important; }
.sidebar, .app-sidebar {
    width: var(--sidebar-w, 240px);
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    background: var(--ui-sidebar, linear-gradient(168deg, #1d4ed8 0%, #2563eb 45%, #1e40af 100%)) !important;
    border-right: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: width 0.25s ease, margin-left 0.25s ease !important;
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.12);
    z-index: 1040 !important;
    color: var(--ui-menu-text, #ffffff) !important;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 0.2rem;
    background: transparent !important;
}
.sidebar-brand-logo {
    width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.22);
    color: #ffffff; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.sidebar-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-copy strong { font-size: 0.95rem; font-weight: 800; color: #ffffff !important; letter-spacing: -0.01em; }
.sidebar-brand-copy span { font-size: 0.67rem; color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; }

.sidebar-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar small.px-2 {
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.69rem;
    color: rgba(255, 255, 255, 0.82) !important; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.4rem 0.15rem;
}
.sidebar .nav { gap: 0.12rem !important; }
.sidebar .nav-link {
    color: var(--ui-menu-text, #ffffff) !important; border-radius: 9px; padding: 0.38rem 0.65rem; font-weight: 600;
    font-size: 0.835rem; display: flex; align-items: center; gap: 0.55rem; transition: var(--transition);
    position: relative; border: 1px solid transparent; line-height: 1.3;
}
.sidebar .nav-link i { font-size: 0.96rem; width: 20px; text-align: center; color: var(--ui-menu-text, #ffffff) !important; opacity: 0.9; transition: var(--transition); flex-shrink: 0; }
.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.22);
    transform: translateX(2px);
}
.sidebar .nav-link:hover i { color: #ffffff !important; opacity: 1; }
.sidebar .nav-link.active {
    background: #ffffff !important;
    color: var(--ui-menu-active, var(--primary, #1d4ed8)) !important; font-weight: 750 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
    border-color: transparent;
}
.sidebar .nav-link.active i { color: var(--ui-menu-active, var(--primary, #1d4ed8)) !important; opacity: 1; }

.sidebar-group { margin: 0.18rem 0 !important; }
.sidebar-group details { margin-bottom: 0.12rem; }
.sidebar-group summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0.6rem; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important; font-weight: 800; font-size: 0.73rem; letter-spacing: 0.035em;
    transition: var(--transition);
}
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.sidebar-group summary span { display: flex; align-items: center; gap: 0.45rem; color: #ffffff !important; font-weight: 800 !important; }
.sidebar-group summary span i { color: #ffffff !important; font-size: 0.88rem; }
.sidebar-group summary .group-chevron { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82) !important; transition: transform 0.2s ease; }
.sidebar-group details[open] > summary .group-chevron { transform: rotate(180deg); color: #ffffff !important; }
.sidebar-subnav {
    list-style: none; padding: 0.15rem 0 0.15rem 0.45rem; margin: 0.15rem 0 0.22rem 0.6rem;
    border-left: 2px solid rgba(255, 255, 255, 0.28) !important; display: flex; flex-direction: column; gap: 0.1rem;
}
.sidebar-subnav .nav-link {
    padding: 0.32rem 0.55rem; font-size: 0.815rem; font-weight: 600; color: rgba(255, 255, 255, 0.92) !important;
}
.sidebar-subnav .nav-link i { font-size: 0.88rem; color: rgba(255, 255, 255, 0.85) !important; }
.sidebar-subnav .nav-link:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.16) !important; }
.sidebar-subnav .nav-link.active { background: #ffffff !important; color: var(--ui-menu-active, var(--primary, #1d4ed8)) !important; font-weight: 750 !important; }
.sidebar-subnav .nav-link.active i { color: var(--ui-menu-active, var(--primary, #1d4ed8)) !important; }


@media (max-width: 991.98px) {
    .sidebar {
        position: fixed !important; left: 0 !important; top: 58px !important; z-index: 1038 !important; height: calc(100vh - 58px) !important;
        transform: translateX(-105%); box-shadow: var(--shadow-lg);
    }
    .sidebar.show { transform: translateX(0) !important; }
    .sidebar-overlay {
        display: none; position: fixed !important; inset: 58px 0 0 0 !important; top: 58px !important; background: rgba(15, 23, 42, 0.5);
        z-index: 1035 !important; backdrop-filter: blur(4px);
    }
    .sidebar-overlay.show { display: block !important; animation: fadeIn 0.2s ease; }
}

/* ---------------------------------------------------------
   Main Content Workspace
--------------------------------------------------------- */
main.app-main {
    flex-grow: 1; padding: 1.6rem 1.8rem 2.5rem; min-width: 0;
    background: var(--ui-bg, var(--bg, #f8fafc));
}

/* ---------------------------------------------------------
   Modern Cards, Stats, Buttons & Forms
--------------------------------------------------------- */
.card {
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); background: var(--surface);
    transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    background: var(--surface) !important; border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius) var(--radius) 0 0 !important; font-weight: 700;
    font-size: 0.94rem; color: var(--text); padding: 0.95rem 1.25rem;
}
.card-body { padding: 1.25rem; }

.card-stat {
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    position: relative; background: var(--surface); box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.card-stat::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
}
.card-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-stat .stat-num { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.025em; color: var(--text); line-height: 1.2; margin-top: 0.2rem; }
.card-stat .stat-icon {
    width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: var(--primary-light); color: var(--primary);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12); flex-shrink: 0;
}

.btn {
    border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem;
    padding: 0.55rem 1.15rem; transition: var(--transition); position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none; color: #fff; box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.35);
}
.btn-primary:hover {
    filter: brightness(1.06); transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.45); color: #fff;
}
.btn-light {
    border: 1px solid var(--border); background: var(--surface, #ffffff); color: var(--text);
}
.btn-light:hover {
    background: var(--surface-hover); border-color: var(--border, #cbd5e1); color: var(--text); transform: translateY(-1px);
}

.btn-outline-secondary {
    border: 1px solid var(--btn-outline-sec-border, #64748b);
    background: var(--btn-outline-sec-bg, #ffffff);
    color: var(--btn-outline-sec-text, #475569);
}
.btn-outline-secondary:hover {
    background: var(--btn-outline-sec-hover-bg, #475569);
    border-color: var(--btn-outline-sec-border, #475569);
    color: var(--btn-outline-sec-hover-text, #ffffff);
    transform: translateY(-1px);
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.2s ease-in-out;
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--primary, #1e40af) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-1px);
}
.btn-outline-light:hover *,
.btn-outline-light:focus *,
.btn-outline-light:active * {
    color: var(--primary, #1e40af) !important;
}

.table-responsive { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface, #fff); box-shadow: var(--shadow-xs); }
.table { margin-bottom: 0; }
.table thead { background: var(--dg-thead-bg, #f8fafc); }
.table thead th {
    border-bottom: 2px solid var(--border, #e2e8f0); font-weight: 700; font-size: 0.76rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--dg-thead-text, #475569); padding: 0.85rem 1rem;
}
.table td { vertical-align: middle; padding: 0.82rem 1rem; font-size: 0.88rem; color: var(--dg-tbody-text, #334155); border-bottom: 1px solid var(--dg-tbody-border, #f1f5f9); }
.table-hover tbody tr { transition: var(--transition); }
.table-hover tbody tr:hover { background: rgba(79, 70, 229, 0.03) !important; }

.badge { 
    border-radius: var(--radius-full); 
    font-weight: 700; 
    font-size: 0.74rem; 
    padding: 0.38em 0.8em; 
    letter-spacing: 0.015em; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}
.badge-hadir, .badge.bg-success:not(.badge-soft-success):not([class*="bg-opacity"]):not([class*="text-success"]) { background: #10b981 !important; color: #ffffff !important; }
.badge-tidak_hadir, .badge.bg-danger:not(.badge-soft-danger):not([class*="bg-opacity"]):not([class*="text-danger"]) { background: #ef4444 !important; color: #ffffff !important; }
.badge-izin, .badge.bg-warning:not(.badge-soft-warning):not([class*="bg-opacity"]):not([class*="text-warning"]) { background: #f59e0b !important; color: #ffffff !important; }

/* Soft & Subtle Badges with Guaranteed High Contrast */
.badge-soft-primary, .badge.bg-primary.bg-opacity-10, .badge.bg-primary.bg-opacity-15 { background-color: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.badge-soft-success, .badge.bg-success.bg-opacity-10, .badge.bg-success.bg-opacity-15, .badge.bg-success[class*="text-success"] { background-color: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.badge-soft-danger, .badge.bg-danger.bg-opacity-10, .badge.bg-danger.bg-opacity-15, .badge.bg-danger[class*="text-danger"] { background-color: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.badge-soft-warning, .badge.bg-warning.bg-opacity-10, .badge.bg-warning.bg-opacity-15, .badge.bg-warning.bg-opacity-20, .badge.bg-warning[class*="text-warning"] { background-color: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.badge-soft-info, .badge.bg-info.bg-opacity-10, .badge.bg-info.bg-opacity-15 { background-color: #ecfeff !important; color: #0e7490 !important; border: 1px solid #a5f3fc !important; }
.badge-soft-secondary, .badge.bg-secondary.bg-opacity-10, .badge.bg-secondary.bg-opacity-15 { background-color: #f8fafc !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
.badge-purple, .badge.bg-purple, .badge-indigo, .badge.bg-indigo { background-color: #6366f1 !important; color: #ffffff !important; }
.badge-soft-purple, .badge.bg-purple.bg-opacity-10, .badge.bg-purple.bg-opacity-15, .badge-soft-indigo, .badge.bg-indigo.bg-opacity-10 { background-color: #eef2ff !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; }
.bg-purple, .bg-indigo { background-color: #6366f1 !important; }
.text-purple, .text-indigo { color: #6366f1 !important; }
.border-purple, .border-indigo { border-color: #6366f1 !important; }


.form-control, .form-select {
    border-radius: var(--radius-sm); border: 1.5px solid #e2e8f0; padding: 0.58rem 0.9rem;
    font-size: 0.88rem; transition: var(--transition); background-color: #fff; color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3.5px rgba(79, 70, 229, 0.12); outline: none;
}
input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
    border: 0;
    border-right: 1px solid #bfdbfe;
    margin-right: 0.85rem;
    padding: 0.52rem 1rem;
    transition: all 0.2s ease;
}
input[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover::file-selector-button,
input[type="file"]::file-selector-button:hover,
.form-control[type="file"]::file-selector-button:hover {
    background: #dbeafe;
    color: #1e40af;
}
.input-group-text {
    border-radius: var(--radius-sm); border: 1.5px solid #e2e8f0; background: #f8fafc;
    color: #64748b; font-size: 0.88rem;
}

.alert {
    border-radius: var(--radius-sm); border: 1px solid transparent; box-shadow: var(--shadow-sm);
    padding: 0.9rem 1.15rem; font-size: 0.88rem;
}
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }

/* ---------------------------------------------------------
   Modern Login Page & Backdrop
--------------------------------------------------------- */
.login-body {
    background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
                linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
    min-height: 100vh; position: relative; overflow-x: hidden;
}
.login-backdrop-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.login-backdrop-shapes .shape {
    position: absolute; border-radius: 50%; filter: blur(75px); opacity: 0.45;
}
.login-backdrop-shapes .shape-1 { width: 380px; height: 380px; background: var(--primary); top: -100px; left: -100px; animation: floatY 8s ease-in-out infinite; }
.login-backdrop-shapes .shape-2 { width: 320px; height: 320px; background: var(--secondary); bottom: -80px; right: -80px; animation: floatY 10s ease-in-out infinite reverse; }
.login-backdrop-shapes .shape-3 { width: 240px; height: 240px; background: #8b5cf6; top: 40%; right: 15%; animation: floatY 9s ease-in-out infinite; }

.login-card {
    width: 440px; max-width: 92vw; border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-lg) !important; background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important; position: relative; z-index: 2;
}
.login-logo-wrapper { display: inline-block; position: relative; }
.login-logo {
    width: 76px; height: 76px; border-radius: 22px; margin: 0 auto;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: var(--primary); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.22);
    border: 2px solid #fff;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.input-group-modern .input-group-text { background: #f8fafc; border-right: none; }
.input-group-modern .form-control { border-left: none; }
.input-group-modern .form-control:focus { border-color: #e2e8f0; }
.input-group-modern:focus-within {
    border-radius: var(--radius-sm); box-shadow: 0 0 0 3.5px rgba(79, 70, 229, 0.14);
}
.input-group-modern:focus-within .input-group-text,
.input-group-modern:focus-within .form-control,
.input-group-modern:focus-within .btn { border-color: var(--primary) !important; }

.btn-login-submit {
    border-radius: var(--radius-sm); padding: 0.72rem; font-size: 0.95rem; font-weight: 700;
}


/* ---------------------------------------------------------
   Public dashboard navbar CTA
--------------------------------------------------------- */
.public-navbar .btn-primary { box-shadow: 0 8px 18px -6px rgba(0,0,0,.25); }

/* Progress / mini chart bar */
.mini-bar { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; }
.mini-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 1s ease; }

/* =========================================================
   DASHBOARD PUBLIK - MODE KIOSK/TV
   Ditampilkan sepanjang hari di monitor sekolah: tema gelap,
   tipografi besar, rotasi otomatis antar panel, ticker info,
   dan carousel foto guru yang bergerak sendiri.
   ========================================================= */
html:has(.tv-body) { height: 100%; }
.tv-body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: var(--tv-bg, #eef2fa);
    color: var(--tv-text, #1e293b);
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}
.tv-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 24px;
    position: relative;
    isolation: isolate;
    background: var(--tv-bg, #eef2fa);
}

/* Blob ambient di latar belakang - animasi ringan, bisa dimatikan dari Pengaturan */
.tv-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.tv-blob.b1 {
    width: 420px; height: 420px; top: -140px; left: -90px;
    background: radial-gradient(circle, var(--primary), transparent 70%);
    animation: tvBlobDrift1 26s ease-in-out infinite;
}
.tv-blob.b2 {
    width: 380px; height: 380px; bottom: -150px; right: -70px;
    background: radial-gradient(circle, var(--secondary), transparent 70%);
    animation: tvBlobDrift2 32s ease-in-out infinite;
}
@keyframes tvBlobDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, 45px) scale(1.15); }
}
@keyframes tvBlobDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-55px, -35px) scale(1.1); }
}
.tv-header, .tv-ticker-wrap, .tv-main { position: relative; z-index: 1; }

/* Header */
.tv-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.tv-header .brand-wrap { display: flex; align-items: center; gap: .8rem; }
.tv-header .tv-logo {
    width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 10%, transparent);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tv-text) 8%, transparent); flex-shrink: 0; font-size: 1.35rem; color: var(--primary);
}
.tv-header .tv-logo img { width: 100%; height: 100%; object-fit: cover; }
.tv-header .tv-brand-text { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--tv-text); }
.tv-header .brand-sub { font-size: .75rem; color: color-mix(in srgb, var(--tv-text) 60%, transparent); font-weight: 500; }
.tv-header-right { display: flex; align-items: center; gap: 18px; }
.tv-datetime { text-align: right; }
.tv-clock {
    font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tv-text);
    line-height: 1; letter-spacing: .02em;
}
.tv-date { font-size: .75rem; color: color-mix(in srgb, var(--tv-text) 60%, transparent); margin-top: 2px; }
.tv-live-badge {
    display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 3px;
    font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--success);
}
.tv-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: tvLiveDot 1.8s ease-in-out infinite; }
@keyframes tvLiveDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    50% { opacity: .55; box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
.tv-theme-toggle {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--tv-text) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--tv-text) 12%, transparent); color: color-mix(in srgb, var(--tv-text) 75%, transparent); display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.15rem; transition: var(--transition); flex-shrink: 0; cursor: pointer; text-decoration: none;
}
.tv-theme-toggle:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); transform: scale(1.06); }
.tv-login-btn {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--tv-text) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--tv-text) 12%, transparent); color: color-mix(in srgb, var(--tv-text) 75%, transparent); display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; transition: var(--transition); flex-shrink: 0;
}
.tv-login-btn:hover { background: var(--primary); color: #fff; transform: scale(1.06); }

/* Ticker informasi */
.tv-ticker-wrap {
    display: flex; align-items: center; height: 40px; flex-shrink: 0;
    background: var(--tv-panel); border: 1px solid color-mix(in srgb, var(--tv-text) 10%, transparent);
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.tv-ticker-label {
    display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; flex-shrink: 0;
    background: linear-gradient(120deg, var(--primary), var(--secondary));
    color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.tv-ticker-label i { animation: floatY 2.6s ease-in-out infinite; }
.tv-ticker-viewport { overflow: hidden; flex: 1; height: 100%; position: relative; }
.tv-ticker-track { display: flex; align-items: center; height: 100%; white-space: nowrap; will-change: transform; }
.tv-ticker-item { padding: 0 2.2rem; font-size: .88rem; font-weight: 600; color: var(--tv-text); position: relative; }
.tv-ticker-item::after { content: '\2022'; position: absolute; right: 0; color: var(--secondary); }
.tv-marquee-x-run { animation-name: tvMarqueeX; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes tvMarqueeX { from { transform: translateX(0); } to { transform: translateX(var(--marquee-distance, -50%)); } }

/* KPI strip - kartu ringkas dengan mini grafik (donut kehadiran + sparkline tren 7 hari) */
.tv-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; flex-shrink: 0; }
.tv-kpi-card {
    background: var(--tv-panel); border: 1px solid color-mix(in srgb, var(--tv-text) 9%, transparent);
    border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.05);
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 78px;
    position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.tv-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(15,23,42,.12); }
.tv-static .tv-kpi-card:hover { transform: none; }
.tv-kpi-icon {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
}
.tv-kpi-chart { width: 54px; height: 54px; position: relative; flex-shrink: 0; }
.tv-kpi-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .68rem; color: var(--tv-text); }
.tv-kpi-info { min-width: 0; z-index: 1; }
.tv-kpi-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: color-mix(in srgb, var(--tv-text) 55%, transparent); white-space: nowrap; }
.tv-kpi-value { font-size: 1.45rem; font-weight: 800; color: var(--tv-text); line-height: 1.2; }
.tv-kpi-value .tv-kpi-sub { font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--tv-text) 45%, transparent); }
.tv-kpi-spark { position: absolute; right: 0; bottom: 0; left: 0; height: 34px; opacity: .5; pointer-events: none; }

/* Leaderboard 10 Siswa Terbaik */
.tv-leaderboard { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.tv-lb-row { display: flex; align-items: center; gap: 10px; }
.tv-lb-rank {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; background: color-mix(in srgb, var(--tv-text) 8%, transparent); color: var(--tv-text);
}
.tv-lb-medal { color: #fff; font-size: .72rem; }
.tv-lb-gold { background: linear-gradient(150deg, #fbbf24, #d97706); }
.tv-lb-silver { background: linear-gradient(150deg, #cbd5e1, #94a3b8); }
.tv-lb-bronze { background: linear-gradient(150deg, #d97a4a, #a8532c); }
.tv-lb-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--primary), var(--secondary));
}
.tv-lb-info { flex: 1; min-width: 0; }
.tv-lb-name { font-size: .74rem; font-weight: 600; color: var(--tv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.tv-lb-poin { font-size: .82rem; font-weight: 800; flex-shrink: 0; width: 34px; text-align: right; }

/* Kartu baris generik (Jadwal Guru, Prestasi, Pelanggaran) - gaya sama dengan leaderboard */
.tv-card-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.tv-card-row { display: flex; align-items: center; gap: 10px; }
.tv-card-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; color: #fff;
}
.tv-card-avatar.av-guru { background: linear-gradient(150deg, var(--primary), var(--secondary)); }
.tv-card-avatar.av-prestasi { background: linear-gradient(150deg, #22c55e, #16a34a); }
.tv-card-avatar.av-pelanggaran { background: linear-gradient(150deg, #f87171, #e11d48); }
.tv-card-info { flex: 1; min-width: 0; }
.tv-card-title { font-size: .74rem; font-weight: 600; color: var(--tv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.tv-card-sub { font-size: .65rem; color: color-mix(in srgb, var(--tv-text) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-card-side { flex-shrink: 0; }
.tv-card-side .badge { font-size: .6rem; }

/* Layout utama */
.tv-main { flex: 1; display: grid; grid-template-columns: 1fr 350px; gap: 16px; min-height: 0; }
.tv-stage-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tv-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 100%; }
.tv-panel-grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.tv-panel {
    background: var(--tv-panel); border: 1px solid color-mix(in srgb, var(--tv-text) 9%, transparent); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
    display: flex; flex-direction: column; overflow: hidden; min-height: 0;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tv-panel-head {
    padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--tv-text); display: flex; align-items: center;
    gap: 7px; border-bottom: 1px solid color-mix(in srgb, var(--tv-text) 9%, transparent);
    background: color-mix(in srgb, var(--tv-text) 3%, var(--tv-panel)); flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-panel-head-flex { justify-content: space-between; }
.tv-panel-head i { color: var(--secondary); flex-shrink: 0; }
.tv-jam-active { font-weight: 600; color: var(--primary); font-size: .72rem; }

/* Tombol navigasi jam pelajaran (ganti dropdown kelas) */
.tv-jam-nav {
    display: flex; gap: 5px; padding: 6px 10px; flex-shrink: 0; overflow-x: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--tv-text) 8%, transparent);
}
.tv-jam-nav::-webkit-scrollbar { height: 4px; }
.tv-jam-btn {
    flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700;
    background: color-mix(in srgb, var(--tv-text) 6%, transparent); color: var(--tv-text);
    border: 1px solid transparent; transition: var(--transition); text-decoration: none;
}
.tv-jam-btn:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.tv-jam-btn.active {
    background: linear-gradient(120deg, var(--primary), var(--secondary)); color: #fff;
    box-shadow: 0 4px 10px -3px rgba(79,70,229,.5);
}
.tv-jam-btn.tv-jam-istirahat { font-size: .78rem; opacity: .75; }
.tv-jam-btn.tv-jam-istirahat.active { opacity: 1; }
.tv-count { margin-left: auto; background: var(--primary); color: #fff; font-size: .62rem; padding: 1px 9px; border-radius: 20px; font-weight: 700; flex-shrink: 0; }
.tv-count.tv-pulse { animation: tvCountPulse 2.4s ease-in-out infinite; }
@keyframes tvCountPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); }
}
.tv-panel-body { display: flex; flex-direction: column; overflow: hidden; padding: 6px 8px 6px; min-height: 0; position: relative; }
.tv-select-form select {
    background: var(--tv-panel); color: var(--tv-text); border: 1px solid color-mix(in srgb, var(--tv-text) 18%, transparent);
    font-size: .68rem; padding: 2px 8px; max-width: 110px;
}
.tv-select-form select option { color: #1e293b; }

.tv-table { color: var(--tv-text); font-size: .95em; }
.tv-table thead th {
    color: color-mix(in srgb, var(--tv-text) 60%, transparent); font-size: .58rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid color-mix(in srgb, var(--tv-text) 10%, transparent); font-weight: 700; position: sticky; top: 0; background: var(--tv-panel);
    padding: .3rem .5rem;
}
.tv-table td { border-color: color-mix(in srgb, var(--tv-text) 7%, transparent); font-size: .72rem; vertical-align: middle; padding: .28rem .5rem; }
.tv-table tbody tr:hover { background: color-mix(in srgb, var(--tv-text) 4%, transparent); }
.tv-table .badge { font-size: .6rem; }
.tv-table .jadwal-cell-hadir { background: rgba(22,163,74,.13) !important; }
.tv-table .jadwal-cell-tidak_hadir { background: rgba(225,29,72,.13) !important; }
.tv-table .jadwal-cell-izin { background: rgba(245,158,11,.15) !important; }
.tv-muted { color: color-mix(in srgb, var(--tv-text) 48%, transparent); }
.tv-empty { color: color-mix(in srgb, var(--tv-text) 48%, transparent); padding: 16px 6px; margin: 0; font-size: .78rem; }

/* Auto-scroll vertikal untuk daftar panel (jalan bolak-balik otomatis) */
.tv-panel-body[data-autoscroll] { overflow: hidden; }
.tv-panel-body[data-autoscroll] > table,
.tv-panel-body[data-autoscroll] > p { will-change: transform; }

/* Sidebar: kegiatan + carousel guru */
.tv-sidebar { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.tv-side-panel {
    background: var(--tv-panel); border: 1px solid color-mix(in srgb, var(--tv-text) 9%, transparent); border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
    display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0;
}
.tv-side-title {
    padding: 10px 16px; font-weight: 700; color: var(--tv-text); font-size: .82rem; display: flex; align-items: center;
    gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--tv-text) 9%, transparent);
    background: color-mix(in srgb, var(--tv-text) 3%, var(--tv-panel)); flex-shrink: 0;
}
.tv-side-title i { color: var(--secondary); }

.tv-kegiatan-list { flex: 1; overflow: hidden; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.tv-kegiatan-item {
    display: flex; gap: 10px; background: color-mix(in srgb, var(--tv-text) 3%, var(--tv-panel));
    border: 1px solid color-mix(in srgb, var(--tv-text) 6%, transparent); border-radius: 12px; padding: 8px 10px;
}
.tv-kegiatan-date {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(150deg, var(--primary), var(--secondary));
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1.05;
}
.tv-kegiatan-date .d { font-size: .92rem; }
.tv-kegiatan-date .m { font-size: .56rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.tv-kegiatan-info { min-width: 0; }
.tv-kegiatan-judul { font-weight: 700; font-size: .78rem; color: var(--tv-text); }
.tv-kegiatan-lokasi { font-size: .65rem; color: color-mix(in srgb, var(--tv-text) 60%, transparent); margin-top: 1px; }
.tv-kegiatan-isi { font-size: .68rem; color: color-mix(in srgb, var(--tv-text) 75%, transparent); margin-top: 2px; }

.tv-guru-panel { flex: 1.1; }
.tv-guru-viewport { flex: 1; overflow: hidden; position: relative; padding: 12px 16px; }
.tv-guru-viewport::before, .tv-guru-viewport::after {
    content: ''; position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none;
}
.tv-guru-viewport::before { top: 0; background: linear-gradient(180deg, var(--tv-panel), transparent); }
.tv-guru-viewport::after { bottom: 0; background: linear-gradient(0deg, var(--tv-panel), transparent); }
.tv-guru-track { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.tv-marquee-y-run { animation-name: tvMarqueeY; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes tvMarqueeY { from { transform: translateY(0); } to { transform: translateY(var(--marquee-distance-y, -50%)); } }
.tv-guru-item { display: flex; align-items: center; gap: 12px; }
.tv-guru-photo {
    width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--tv-text) 8%, transparent); box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.tv-guru-photo img { width: 100%; height: 100%; object-fit: cover; }
.tv-guru-name { font-weight: 600; font-size: .8rem; color: var(--tv-text); }

/* Animasi ringan bisa dimatikan lewat Pengaturan (tombol "Animasi Dashboard") */
.tv-static .animate-in { animation: none !important; opacity: 1 !important; transform: none !important; }
.tv-static .tv-blob { display: none; }
.tv-static .tv-count.tv-pulse { animation: none !important; }
.tv-static .tv-live-dot { animation: none !important; }
.tv-static .tv-ticker-label i { animation: none !important; }
.tv-panel:hover, .tv-side-panel:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(15,23,42,.12); }
.tv-static .tv-panel:hover, .tv-static .tv-side-panel:hover { transform: none; }

/* Public dashboard motion polish — 510_14_27 */
.tv-body:not(.tv-static) .tv-header { animation: publicHeaderIn .65s cubic-bezier(.22,1,.36,1) both; }
.tv-body:not(.tv-static) .tv-ticker-wrap { animation: publicReveal .65s .08s cubic-bezier(.22,1,.36,1) both; }
.tv-body:not(.tv-static) .tv-kpi-card { animation: publicCardIn .6s cubic-bezier(.22,1,.36,1) both; }
.tv-body:not(.tv-static) .tv-kpi-card:nth-child(1){animation-delay:.12s}
.tv-body:not(.tv-static) .tv-kpi-card:nth-child(2){animation-delay:.18s}
.tv-body:not(.tv-static) .tv-kpi-card:nth-child(3){animation-delay:.24s}
.tv-body:not(.tv-static) .tv-kpi-card:nth-child(4){animation-delay:.30s}
.tv-body:not(.tv-static) .tv-panel { animation: publicPanelIn .7s cubic-bezier(.22,1,.36,1) both; }
.tv-body:not(.tv-static) .tv-panel:nth-child(1){animation-delay:.18s}
.tv-body:not(.tv-static) .tv-panel:nth-child(2){animation-delay:.24s}
.tv-body:not(.tv-static) .tv-panel:nth-child(3){animation-delay:.30s}
.tv-body:not(.tv-static) .tv-panel:nth-child(4){animation-delay:.36s}
.tv-body:not(.tv-static) .tv-panel:nth-child(5){animation-delay:.42s}
.tv-body:not(.tv-static) .tv-panel:nth-child(6){animation-delay:.48s}
.tv-body:not(.tv-static) .tv-side-panel { animation: publicSideIn .7s .3s cubic-bezier(.22,1,.36,1) both; }
.tv-body:not(.tv-static) .tv-kpi-card:hover { transform: translateY(-4px) scale(1.012); }
.tv-body:not(.tv-static) .tv-panel:hover,
.tv-body:not(.tv-static) .tv-side-panel:hover { transform: translateY(-3px); }
.tv-body:not(.tv-static) .tv-ticker-label { position:relative; overflow:hidden; }
.tv-body:not(.tv-static) .tv-ticker-label::after { content:''; position:absolute; top:0; bottom:0; width:42px; left:-60px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); animation:tickerShine 3.8s ease-in-out infinite; }
.tv-body:not(.tv-static) .tv-ticker-label i { animation: tickerIconBounce 2.2s ease-in-out infinite; }
.tv-body:not(.tv-static) .tv-live-dot { animation: tvLiveDot 1.8s ease-in-out infinite, liveGlow 2.2s ease-in-out infinite; }
.tv-body:not(.tv-static) .tv-blob.b1 { animation: tvBlobDrift1 12s ease-in-out infinite, blobPulse 7s ease-in-out infinite; }
.tv-body:not(.tv-static) .tv-blob.b2 { animation: tvBlobDrift2 15s ease-in-out infinite, blobPulse 9s ease-in-out infinite reverse; }
@keyframes publicHeaderIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
@keyframes publicReveal { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes publicCardIn { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }
@keyframes publicPanelIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes publicSideIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }
@keyframes tickerShine { 0%,45%{left:-60px} 70%,100%{left:calc(100% + 60px)} }
@keyframes tickerIconBounce { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(-5deg)} }
@keyframes liveGlow { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.28)} 50%{box-shadow:0 0 0 5px rgba(22,163,74,0)} }
@keyframes blobPulse { 0%,100%{opacity:.42} 50%{opacity:.62} }

/* Responsif untuk layar kecil / tablet (kios biasanya layar besar, ini fallback) */
@media (max-width: 991px) {
    .tv-body { height: auto; overflow: auto; }
    .tv-shell { height: auto; min-height: 100vh; }
    .tv-main { grid-template-columns: 1fr; }
    .tv-panel-grid { grid-template-columns: 1fr; }
    .tv-panel-grid-6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(220px, auto)); }
    .tv-sidebar { flex-direction: column; }
    .tv-clock { font-size: 1.6rem; }
    .tv-kpi-strip { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   MODUL SURAT: halaman cetak (kop otomatis + isi template per jenis surat)
   ===================================================================== */
.surat-page {
    width: 210mm;
    min-height: 297mm;
    max-width: 100%;
    padding: 20mm 18mm;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    line-height: 1.6;
}
.kop-surat { padding-bottom: 6px; }
.kop-logo { width: 70px; height: 70px; object-fit: contain; }
.kop-nama-sekolah { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.kop-alamat { font-size: .85rem; }
.kop-garis { border: none; border-top: 3px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; height: 4px; margin: 4px 0 20px; }
.surat-isi { font-size: 1rem; }
.surat-isi table { width: 100%; }
.surat-isi td { padding: 2px 4px; vertical-align: top; }
.surat-isi p { margin-bottom: 12px; }

@media print {
    body { background: #fff !important; }
    .app-navbar, .sidebar, .app-sidebar, .sidebar-overlay, .d-print-none { display: none !important; }
    .app-shell, .app-main, main.app-main { margin-top: 0 !important; padding-top: 0 !important; margin-left: 0 !important; width: 100% !important; }
    .surat-page { box-shadow: none !important; margin: 0 !important; width: auto; min-height: 0; }
    @page { size: A4; margin: 0; }
}

/* Sidebar grouped navigation (compact & pure white on royal blue) */
.sidebar-group { list-style: none; margin: 0.18rem 0 !important; }
.sidebar-group details { border-radius: 8px; overflow: hidden; }
.sidebar-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 0.73rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.035em;
    user-select: none;
    transition: var(--transition);
}
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary > span { display: flex; align-items: center; gap: 0.45rem; color: #ffffff !important; font-weight: 800 !important; }
.sidebar-group summary > span > i { width: 18px; text-align: center; font-size: 0.88rem; color: #ffffff !important; }
.sidebar-group .group-chevron { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82) !important; transition: transform 0.2s ease; }
.sidebar-group details[open] .group-chevron { transform: rotate(180deg); color: #ffffff !important; }
.sidebar-group summary:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.sidebar-subnav { list-style: none; padding: 0.15rem 0 0.15rem 0.45rem !important; margin: 0.15rem 0 0.2rem 0.55rem !important; border-left: 2px solid rgba(255, 255, 255, 0.28) !important; display: flex; flex-direction: column; gap: 0.1rem !important; }
.sidebar-subnav .nav-link { margin: 0 !important; padding: 0.32rem 0.55rem !important; font-size: 0.815rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.92) !important; }
.sidebar-subnav .nav-link i { font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.85) !important; }
.sidebar-subnav .nav-link:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.16) !important; }
.sidebar-subnav .nav-link.active { background: #ffffff !important; color: #1d4ed8 !important; font-weight: 750 !important; }
.sidebar-subnav .nav-link.active i { color: #1d4ed8 !important; }

/* =========================================================
   510_14_20 - Role-aware Guru navigation UX
   ========================================================= */
.sidebar-group-role { margin-top: .35rem !important; }
.sidebar-group-role summary {
    position: relative;
    min-height: 38px;
    padding: .4rem .6rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
.sidebar-group-role summary > span:first-child { gap: .45rem; color: #ffffff !important; font-weight: 800 !important; }
.sidebar-group-role summary > span:first-child > i { font-size: .88rem; color: #ffffff !important; }
.sidebar-role-badge {
    margin-left: auto;
    margin-right: .15rem;
    padding: .18rem .45rem;
    border-radius: 999px;
    font-size: .58rem;
    line-height: 1;
    letter-spacing: .06em;
    font-weight: 800;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.sidebar-group-role details[open] > summary { margin-bottom: .2rem; }
.sidebar-group-role .sidebar-subnav {
    padding: .15rem .25rem .25rem .35rem;
    border-left: 2px solid rgba(255, 255, 255, 0.28) !important;
    margin-left: .65rem;
}
.sidebar-group-role .sidebar-subnav .nav-link { padding-left: .78rem; }
.sidebar-group-wali summary,
.sidebar-group-bk summary,
.sidebar-group-piket summary { color: #ffffff !important; }
.sidebar-group-role summary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
body.ui-themed .sidebar-group-role summary { color: #ffffff !important; }
body.ui-themed .sidebar-group-wali summary,
body.ui-themed .sidebar-group-bk summary,
body.ui-themed .sidebar-group-piket summary { color: #ffffff !important; }
@media (max-width: 768px) {
    .sidebar-group-role { margin-top: .55rem; }
    .sidebar-group-role summary { min-height: 44px; }
    .sidebar-group-role .sidebar-subnav { margin-left: .65rem; }
}

/* =========================================================
   510_14_8 - Responsive UI/UX Optimization
   Fokus: dashboard Admin/Guru/Siswa/TU pada laptop & HP.
   Tidak mengubah struktur data; hanya presentasi/interaksi.
========================================================= */
:root { --nav-h: 58px; --content-max: 1600px; }

html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body { overflow-x: hidden; }
.app-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    max-height: var(--nav-h) !important;
    margin-left: 0 !important;
    z-index: 1040 !important;
    box-sizing: border-box !important;
}
.app-shell { margin-top: var(--nav-h) !important; min-height: calc(100vh - var(--nav-h)) !important; }
.sidebar, .app-sidebar { min-height: calc(100vh - var(--nav-h)) !important; height: calc(100vh - var(--nav-h)) !important; top: var(--nav-h) !important; }
main.app-main { width: 100%; max-width: var(--content-max); }

/* Better hierarchy and touch targets */
.app-main .card-header { padding: .9rem 1.1rem; }
.app-main .card-body { min-width: 0; }
.app-main .btn { min-height: 38px; }
.app-main .btn-sm { min-height: 34px; }
.app-main .form-control,
.app-main .form-select,
.app-main .input-group-text { min-height: 42px; }
.app-main .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }

/* Dashboard cards feel lighter and consistent */
.app-main .card-stat { min-height: 112px; }
.app-main .card-stat .stat-num { line-height: 1.05; margin-top: .25rem; }
.app-main .card-stat .text-muted { line-height: 1.3; }
.app-main .card-header > i:first-child { margin-right: .35rem; }

/* Prevent charts from creating horizontal overflow */
.app-main canvas { max-width: 100%; }

/* Quick actions wrap cleanly on narrow screens */
.app-main .card-body.d-flex.flex-wrap { align-items: stretch; }

/* Mobile-first navigation refinements */
@media (max-width: 991.98px) {
    :root { --nav-h: 58px; }
    .app-navbar { padding: 0 .75rem !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; }
    .app-navbar .brand-logo { width: 36px; height: 36px; border-radius: 10px; }
    .app-navbar .brand-text { font-size: .92rem; }
    #sidebarToggle { width: 36px; height: 36px; border-radius: 9px; }
    .navbar-user { gap: .4rem; }
    .navbar-user .avatar { width: 34px; height: 34px; }
    .btn-logout { min-height: 34px; padding: .35rem .65rem; }
    .sidebar, .app-sidebar { top: var(--nav-h) !important; height: calc(100vh - var(--nav-h)) !important; min-height: 0; width: min(88vw, 300px); padding: .8rem .7rem; }
    .sidebar-overlay { inset: var(--nav-h) 0 0 0 !important; top: var(--nav-h) !important; }
    main.app-main { padding: 1rem; }
}

@media (max-width: 767.98px) {
    main.app-main { padding: .8rem; }
    .welcome-banner { padding: 1.15rem 1.1rem; border-radius: 14px; margin-bottom: 1rem !important; }
    .welcome-banner h4 { font-size: 1.05rem; }
    .welcome-banner p { font-size: .78rem; }
    .welcome-banner .btn { width: 100%; justify-content: center; }

    .app-main .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .app-main .card { border-radius: 13px; }
    .app-main .card-header { padding: .78rem .9rem; font-size: .88rem; }
    .app-main .card-body { padding: .9rem; }
    .app-main .card-stat { min-height: 96px; padding: .85rem !important; }
    .app-main .card-stat .stat-num { font-size: 1.45rem; }
    .app-main .card-stat .stat-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
    .app-main .card-stat .text-muted { font-size: .72rem !important; }

    /* Make action buttons easy to tap without creating a giant stack */
    .app-main .card-body.d-flex.flex-wrap .btn { flex: 1 1 auto; }

    /* Tables remain usable: horizontal scroll rather than squeezed columns */
    .app-main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .app-main .table { min-width: 640px; font-size: .8rem; }
    .app-main .table td, .app-main .table th { padding: .62rem .7rem; }

    /* Forms on phones */
    .app-main .row > [class*="col-"] .form-label { font-size: .78rem; font-weight: 700; }
    .app-main .input-group > .btn { white-space: nowrap; }

    /* Internal dashboard information widget */
    .dashboard-info-widget { margin-bottom: 1rem; }
    .dashboard-info-ticker { height: 40px; border-radius: 10px; }
    .dashboard-info-ticker-label { padding: 0 .7rem; font-size: .68rem; }
    .dashboard-info-ticker-label span { display: none; }
    .dashboard-info-ticker-item { padding: 0 1.15rem; font-size: .74rem; }
    .dashboard-kegiatan-card { margin-top: .7rem; border-radius: 11px; }
    .dashboard-kegiatan-head { padding: .7rem .8rem; }
    .dashboard-kegiatan-title { font-size: .82rem; }
    .dashboard-kegiatan-list { grid-template-columns: 1fr; }
    .dashboard-kegiatan-item { padding: .75rem .8rem; gap: .65rem; }
    .dashboard-kegiatan-date { width: 44px; height: 44px; }
    .dashboard-kegiatan-judul { font-size: .8rem; }
    .dashboard-kegiatan-lokasi, .dashboard-kegiatan-isi { font-size: .7rem; }
}

@media (max-width: 420px) {
    .app-navbar .brand-text { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-main { font-size: .9rem; }
    .app-main .card-stat .stat-num { font-size: 1.3rem; }
    .app-main .card-stat .stat-icon { width: 34px; height: 34px; }
    .app-main .btn { font-size: .8rem; }
}

/* =========================================================
   510_14_9 - Mobile Dashboard & Sidebar Hardening
   Fokus: HP 360-430px, drawer sidebar, touch scrolling,
   topbar compact, cards/forms/tables tanpa horizontal overflow.
========================================================= */
.sidebar {
    height: calc(100vh - var(--nav-h));
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    align-self: flex-start;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: #c7cbe8; border-radius: 20px; }
.sidebar { scrollbar-width: thin; scrollbar-color: #c7cbe8 transparent; }
.sidebar nav, .sidebar > ul { min-height: max-content; }

@media (max-width: 991.98px) {
    body.sidebar-open { overflow: hidden; }
    .sidebar {
        height: calc(100dvh - var(--nav-h));
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1.5rem;
        box-shadow: 12px 0 32px rgba(15,23,42,.18);
    }
    .sidebar .nav-link { min-height: 44px; padding: .68rem .78rem; }
    .sidebar-group summary { min-height: 44px; padding: .68rem .75rem; }
    .sidebar-overlay {
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }
    main.app-main { min-width: 0; overflow-x: hidden; }
}

@media (max-width: 767.98px) {
    .app-navbar {
        padding: .5rem .65rem;
        gap: .5rem;
    }
    .app-navbar > .d-flex:first-child { min-width: 0; flex: 1 1 auto; }
    .app-navbar .brand-wrap { min-width: 0; gap: .5rem; }
    .app-navbar .brand-text {
        min-width: 0; max-width: min(44vw, 180px);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: .88rem;
    }
    .app-navbar .brand-logo { width: 34px; height: 34px; border-radius: 9px; }
    #sidebarToggle { flex: 0 0 36px; }
    .navbar-user { flex: 0 0 auto; min-width: 0; }
    .navbar-user .avatar { width: 34px; height: 34px; font-size: .82rem; }
    .btn-logout { min-height: 36px; padding: .35rem .6rem; white-space: nowrap; }

    main.app-main { padding: .75rem; }
    .app-main > .row { margin-left: -.375rem; margin-right: -.375rem; }
    .app-main > .row > * { padding-left: .375rem; padding-right: .375rem; }
    .app-main .card-header { display: flex; align-items: center; gap: .4rem; }
    .app-main .card-header > * { min-width: 0; }
    .app-main .card-header .btn,
    .app-main .card-header .btn-group { margin-left: auto; flex-shrink: 0; }

    /* Dashboard stat cards: two columns where possible, one on very small screens. */
    .app-main .card-stat { min-height: 92px; }
    .app-main .card-stat .stat-num { font-size: 1.35rem; }
    .app-main .card-stat .stat-label,
    .app-main .card-stat .text-muted { overflow-wrap: anywhere; }

    /* Forms: stack naturally and avoid tiny controls. */
    .app-main .input-group { flex-wrap: nowrap; max-width: 100%; }
    .app-main .input-group > .form-control,
    .app-main .input-group > .form-select { min-width: 0; }
    .app-main .form-control, .app-main .form-select { font-size: .9rem; }

    /* Tables: allow deliberate horizontal swipe inside the table only. */
    .app-main .table-responsive {
        width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-gutter: auto;
    }
    .app-main .table { margin-bottom: 0; }

    /* Common action rows become usable grids instead of long horizontal lines. */
    .app-main .d-flex.flex-wrap.gap-2 > .btn {
        flex: 1 1 150px;
    }
}

@media (max-width: 420px) {
    .app-navbar .brand-text { max-width: 34vw; }
    .navbar-user .avatar { display: none; }
    .btn-logout { padding-left: .55rem; padding-right: .55rem; }
    main.app-main { padding: .65rem; }
    .app-main .card-body { padding: .8rem; }
    .app-main .card-header { padding: .72rem .8rem; }
    .app-main .card-stat { min-height: 88px; padding: .75rem !important; }
    .app-main .card-stat .stat-num { font-size: 1.22rem; }
    .app-main .btn { min-height: 40px; }
}

@media (max-width: 360px) {
    .app-navbar .brand-text { max-width: 30vw; }
    .app-main .card-stat { min-height: 84px; }
    .app-main .card-stat .stat-num { font-size: 1.12rem; }
}

/* Respect reduced-motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* =========================================================
   510_14_10 - Mobile Dashboard Tables & Sidebar Scroll Fix
   Mobile dashboard tables become readable stacked cards instead
   of forcing the whole page beyond the viewport. Sidebar gets a
   dedicated touch-scroll container on every role.
========================================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.sidebar > ul {
    flex: 0 0 auto;
    width: 100%;
    min-height: max-content;
    overflow: visible;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Never let a dashboard table itself create page-level overflow. */
.dashboard-table-mobile {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    /* Convert dashboard tables into compact, full-width information cards. */
    .dashboard-table-mobile {
        display: block;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        border-collapse: separate;
        border-spacing: 0;
    }
    .dashboard-table-mobile thead {
        display: none;
    }
    .dashboard-table-mobile tbody {
        display: block;
        width: 100%;
    }
    .dashboard-table-mobile tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 .7rem;
        padding: .35rem 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(15,23,42,.045);
        overflow: hidden;
    }
    .dashboard-table-mobile tbody tr:last-child {
        margin-bottom: 0;
    }
    .dashboard-table-mobile tbody td {
        display: grid;
        grid-template-columns: minmax(72px, 31%) minmax(0, 1fr);
        align-items: start;
        gap: .6rem;
        width: 100%;
        min-width: 0;
        padding: .48rem .75rem;
        border: 0 !important;
        text-align: left;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .dashboard-table-mobile tbody td::before {
        content: attr(data-label);
        min-width: 0;
        color: var(--text-muted);
        font-size: .68rem;
        line-height: 1.35;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .035em;
    }
    .dashboard-table-mobile tbody td > * {
        min-width: 0;
        max-width: 100%;
    }
    .dashboard-table-mobile tbody td .btn {
        white-space: normal;
        max-width: 100%;
    }
    .dashboard-table-mobile tbody tr.mobile-table-empty,
    .dashboard-table-mobile tbody tr.mobile-table-empty td {
        display: block;
        text-align: center;
    }
    .dashboard-table-mobile tbody tr.mobile-table-empty td::before {
        content: none;
    }

    /* If a cell contains several actions, let them wrap naturally. */
    .dashboard-table-mobile .btn + .btn {
        margin-left: .25rem;
        margin-top: .25rem;
    }

    /* The sidebar must remain independently scrollable while the drawer is open. */
    body.sidebar-open .sidebar {
        overflow-y: scroll;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }
    .sidebar-overlay {
        touch-action: none;
    }
}

@media (max-width: 420px) {
    .dashboard-table-mobile tbody td {
        grid-template-columns: minmax(64px, 29%) minmax(0, 1fr);
        gap: .45rem;
        padding: .44rem .65rem;
        font-size: .79rem;
    }
    .dashboard-table-mobile tbody td::before {
        font-size: .64rem;
    }
}


/* =========================================================
   510_14_11 - Role Dashboard UI/UX
   Quick actions, role-aware hero, responsive cards and mobile-first layout.
========================================================= */
.dashboard-hero{
    position:relative; overflow:hidden; border:0; border-radius:20px;
    padding:1.25rem 1.35rem; margin-bottom:1rem;
    color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary));
    box-shadow:0 10px 28px rgba(15,23,42,.12);
}
.dashboard-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-90px;background:rgba(255,255,255,.09)}
.dashboard-hero-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dashboard-hero h4{font-weight:800;letter-spacing:-.02em}
.dashboard-hero p{opacity:.9}
.dashboard-hero .btn{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;transition:all .2s ease-in-out}
.dashboard-hero .btn:hover,.dashboard-hero .btn:focus,.dashboard-hero .btn:active{background:#fff !important;color:var(--primary, #1e40af) !important;border-color:#fff !important;box-shadow:0 4px 14px rgba(0,0,0,.16) !important;transform:translateY(-1px)}
.dashboard-hero .btn:hover *,.dashboard-hero .btn:focus *,.dashboard-hero .btn:active *{color:var(--primary, #1e40af) !important}
.dashboard-hero .btn.text-white:hover,.dashboard-hero .btn.text-white:focus,.dashboard-hero .btn.text-white:active{color:var(--primary, #1e40af) !important}
.dashboard-hero .btn.text-white:hover *,.dashboard-hero .btn.text-white:focus *,.dashboard-hero .btn.text-white:active *{color:var(--primary, #1e40af) !important}
.dashboard-section-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:1rem 0 .65rem}
.dashboard-section-title h6{margin:0;font-weight:800;color:#334155;letter-spacing:.01em}
.dashboard-section-title span{font-size:.75rem;color:#94a3b8}
.quick-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.quick-action-card{position:relative;display:flex;align-items:center;gap:.75rem;min-height:78px;padding:.8rem .9rem;border:1px solid rgba(15,23,42,.08);border-radius:15px;background:#fff;color:#334155;text-decoration:none;box-shadow:0 4px 14px rgba(15,23,42,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.quick-action-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.09);border-color:color-mix(in srgb,var(--primary) 28%,#fff);color:var(--primary)}
.quick-action-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 42px;background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);font-size:1.1rem}
.quick-action-card.urgent{border-color:rgba(225,29,72,.25);background:linear-gradient(180deg,#fff,#fff8fa)}
.quick-action-card.urgent .quick-action-icon{background:#ffe4e9;color:#e11d48}
.quick-action-title{font-weight:800;font-size:.84rem;line-height:1.15}
.quick-action-sub{font-size:.7rem;color:#94a3b8;margin-top:.22rem;line-height:1.2}
.quick-action-arrow{margin-left:auto;color:#cbd5e1;font-size:.9rem}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.dashboard-stat-grid .card-stat{margin:0!important}
.dashboard-table-card{overflow:hidden}
.dashboard-table-card .card-body{min-width:0}
.dashboard-info-widget{margin-bottom:1rem}
.dashboard-info-ticker{border-radius:14px}
.dashboard-kegiatan-card{border-radius:14px}
@media(max-width:991.98px){
    .quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767.98px){
    .dashboard-hero{padding:1rem;border-radius:16px}
    .dashboard-hero-content{align-items:flex-start}
    .dashboard-hero-actions{display:none}
    .dashboard-hero h4{font-size:1.05rem}
    .dashboard-hero p{font-size:.78rem}
    .dashboard-section-title{margin-top:.85rem}
    .quick-action-grid{gap:.55rem}
    .quick-action-card{min-height:72px;padding:.68rem .7rem;border-radius:13px}
    .quick-action-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px}
    .quick-action-title{font-size:.78rem}
    .quick-action-sub{font-size:.65rem}
    .dashboard-stat-grid{gap:.55rem}
    .dashboard-stat-grid .card-stat{min-height:88px}
}
@media(max-width:390px){
    .quick-action-card{gap:.5rem;padding:.6rem}
    .quick-action-icon{width:34px;height:34px;flex-basis:34px;font-size:.95rem}
    .quick-action-title{font-size:.72rem}
    .quick-action-sub{display:none}
}

/* =========================================================
   ADMIN-CONTROLLED UI THEME (510_14_12)
   Semua nilai berasal dari Pengaturan Tampilan admin.
========================================================= */
body.ui-themed {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font), 'Segoe UI', system-ui, sans-serif;
    font-size: calc(1rem * var(--ui-font-scale));
}
body.ui-themed .text-muted { color: var(--ui-text-muted) !important; }
body.ui-themed .app-navbar {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 80%, #0284c7 100%) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    animation: none;
}
body.ui-themed .sidebar {
    background: linear-gradient(168deg, #1d4ed8 0%, #2563eb 45%, #1e40af 100%) !important;
    border-right: 0 !important;
    color: #ffffff !important;
}
body.ui-themed .sidebar .nav-link { color: #ffffff !important; font-weight: 600 !important; }
body.ui-themed .sidebar .nav-link i { color: rgba(255, 255, 255, 0.95) !important; font-size: 0.94rem; }
body.ui-themed .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; }
body.ui-themed .sidebar .nav-link:hover i { color: #ffffff !important; }
body.ui-themed .sidebar .nav-link.active {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}
body.ui-themed .sidebar .nav-link.active i { color: #1d4ed8 !important; }
body.ui-themed .sidebar-group summary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}
body.ui-themed .sidebar-group summary span { color: #ffffff !important; font-weight: 800 !important; }
body.ui-themed .sidebar-group summary span i { color: #ffffff !important; }
body.ui-themed .card,
body.ui-themed .card-stat,
body.ui-themed .quick-action-card { background: var(--ui-surface); color: var(--ui-text); }
body.ui-themed .card-header { background: var(--ui-surface) !important; color: var(--ui-text); }
body.ui-themed .form-control,
body.ui-themed .form-select,
body.ui-themed .input-group-text { background-color: var(--ui-surface); color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-text) 14%, transparent); }
body.ui-themed .quick-action-grid > .quick-action-card:nth-child(1) { background: var(--ui-card-1); }
body.ui-themed .quick-action-grid > .quick-action-card:nth-child(2) { background: var(--ui-card-2); }
body.ui-themed .quick-action-grid > .quick-action-card:nth-child(3) { background: var(--ui-card-3); }
body.ui-themed .quick-action-grid > .quick-action-card:nth-child(4) { background: var(--ui-card-4); }
body.ui-themed .card-stat:nth-child(1) { --card-tint: var(--ui-card-1); }
body.ui-themed .card-stat:nth-child(2) { --card-tint: var(--ui-card-2); }
body.ui-themed .card-stat:nth-child(3) { --card-tint: var(--ui-card-3); }
body.ui-themed .card-stat:nth-child(4) { --card-tint: var(--ui-card-4); }
body.ui-themed .card-stat { background: color-mix(in srgb, var(--card-tint, var(--ui-surface)) 45%, var(--ui-surface)); }
body.ui-themed .btn-primary { background: var(--ui-menu-active); border-color: var(--ui-menu-active); }
body.ui-themed .welcome-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--ui-navbar) 92%, #000 8%), var(--secondary)); }
body.ui-themed .app-main { color: var(--ui-text); }

/* Gaya tampilan */
body.ui-style-classic-modern .card,
body.ui-style-classic-modern .quick-action-card { border-radius: 10px; box-shadow: 0 3px 12px rgba(30,41,59,.08); }
body.ui-style-classic-modern .app-navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }
body.ui-style-classic-modern .sidebar .nav-link.active { border-radius: 8px; }
body.ui-style-kartun .card,
body.ui-style-kartun .quick-action-card { border: 2px solid color-mix(in srgb, var(--ui-menu-active) 22%, var(--ui-surface)); border-radius: 20px; box-shadow: 0 6px 0 color-mix(in srgb, var(--ui-menu-active) 14%, transparent); }
body.ui-style-kartun .app-navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }
body.ui-style-kartun .quick-action-icon { border-radius: 16px; }
body.ui-style-kartun .btn { border-radius: 14px; }
body.ui-style-kartun .sidebar .nav-link { border-radius: 14px; }
body.ui-style-high-contrast { --ui-text-muted: #334155; }
body.ui-style-high-contrast .card,
body.ui-style-high-contrast .quick-action-card { border: 2px solid color-mix(in srgb, var(--ui-text) 25%, transparent); box-shadow: none; }
body.ui-style-high-contrast .sidebar .nav-link { font-weight: 650; }
body.ui-style-high-contrast .app-navbar { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important; }
body.ui-radius-compact .card,
body.ui-radius-compact .quick-action-card,
body.ui-radius-compact .btn,
body.ui-radius-compact .sidebar .nav-link { border-radius: 7px !important; }
body.ui-radius-soft .card,
body.ui-radius-soft .quick-action-card { border-radius: 12px !important; }
body.ui-radius-pill .btn,
body.ui-radius-pill .sidebar .nav-link { border-radius: 999px !important; }
body.ui-themed .sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
body.ui-themed .sidebar::-webkit-scrollbar { width: 8px; }
body.ui-themed .sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ui-menu-active) 35%, #cbd5e1); }


/* =========================================================
   510_14_14 - UI/UX & Responsive Experience Overhaul
   Prinsip: satu sistem visual, ruang kerja proporsional, tabel
   tidak dipaksa mengecil, dan seluruh data tetap dapat diakses.
========================================================= */
:root {
    --content-gutter: clamp(.65rem, 1.4vw, 1.5rem);
    --panel-gap: clamp(.65rem, 1vw, 1rem);
    --control-h: 42px;
}

/* Workspace: gunakan lebar layar secara efektif tanpa membuat konten melebar liar. */
main.app-main {
    padding: var(--content-gutter);
    max-width: none;
}
.app-main > .container,
.app-main > .container-fluid {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.app-main .row { row-gap: var(--panel-gap); }

/* Page sections / headers yang konsisten di seluruh role. */
.app-main > .d-flex:first-child,
.app-main > .page-header,
.app-main .page-header {
    gap: .75rem;
    margin-bottom: 1rem;
}
.app-main .page-header h1,
.app-main .page-header h2,
.app-main .page-header h3,
.app-main .page-header h4,
.app-main .page-header h5,
.app-main .page-header h6 { margin-bottom: 0; font-weight: 800; letter-spacing: -.02em; }

/* Cards: less decorative, more usable. */
.app-main .card { overflow: hidden; }
.app-main .card-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.app-main .card-header > * { min-width: 0; }
.app-main .card-header .btn,
.app-main .card-header .btn-group { margin-left: auto; flex-shrink: 0; }
.app-main .card-body { overflow: visible; }

/* Toolbars and filters stay readable on every screen. */
.app-main .toolbar,
.app-main .page-toolbar,
.app-main .filter-toolbar,
.app-main .filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .65rem;
}
.app-main .toolbar > *,
.app-main .page-toolbar > *,
.app-main .filter-toolbar > *,
.app-main .filter-panel > * { min-width: 0; }
.app-main .form-control,
.app-main .form-select,
.app-main .input-group-text { min-height: var(--control-h); }
.app-main textarea.form-control { min-height: 96px; }

/* Universal tables: desktop uses all available width; mobile gets an isolated swipe area. */
.app-main .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    border-radius: 0 0 var(--radius) var(--radius);
    outline: none;
}
.app-main .table-scroll:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}
.app-main .table-scroll > .table {
    width: 100%;
    margin-bottom: 0;
}
.app-main .table-scroll > .table th,
.app-main .table-scroll > .table td { white-space: nowrap; }
.app-main .table-scroll > .table td:last-child,
.app-main .table-scroll > .table th:last-child { min-width: 96px; }
.app-main .table-scroll > .table .text-wrap,
.app-main .table-scroll > .table td.text-wrap,
.app-main .table-scroll > .table th.text-wrap { white-space: normal; }

/* Keep action columns usable without shrinking the entire table. */
.app-main .table-scroll .btn-group,
.app-main .table-scroll td:last-child .btn-group,
.app-main .table-scroll td:last-child .d-flex { flex-wrap: wrap; gap: .3rem; }
.app-main .table-scroll td:last-child .btn { margin-bottom: .15rem; }

/* More balanced desktop density. */
@media (min-width: 1200px) {
    .app-main .table-scroll > .table th { padding: .72rem .9rem; }
    .app-main .table-scroll > .table td { padding: .68rem .9rem; }
    .app-main .card-body { padding: 1.05rem; }
}

@media (max-width: 991.98px) {
    main.app-main { padding: .8rem; }
    .app-main .card-header { min-height: 48px; }
    .app-main .page-header,
    .app-main > .d-flex:first-child { align-items: flex-start; }
    .app-main .page-toolbar > *,
    .app-main .filter-toolbar > * { flex: 1 1 180px; }
}

@media (max-width: 767.98px) {
    main.app-main { padding: .65rem; }
    .app-main .card { border-radius: 12px; }
    .app-main .card-header { min-height: 46px; padding: .7rem .8rem; }
    .app-main .card-body { padding: .8rem; }
    .app-main .page-header,
    .app-main > .d-flex:first-child { flex-wrap: wrap; }
    .app-main .page-header .btn,
    .app-main > .d-flex:first-child .btn { min-height: 40px; }
    .app-main .toolbar,
    .app-main .page-toolbar,
    .app-main .filter-toolbar,
    .app-main .filter-panel { align-items: stretch; }
    .app-main .toolbar > *,
    .app-main .page-toolbar > *,
    .app-main .filter-toolbar > *,
    .app-main .filter-panel > * { flex: 1 1 100%; }

    /* Do not squeeze complex tables. The user can swipe the table itself. */
    .app-main .table-scroll > .table {
        width: max-content;
        min-width: 720px;
        font-size: .8rem;
    }
    .app-main .table-scroll > .table th { padding: .62rem .72rem; }
    .app-main .table-scroll > .table td { padding: .58rem .72rem; }
    .app-main .table-scroll::after {
        content: 'Geser tabel ke kiri/kanan untuk melihat kolom lainnya';
        display: block;
        padding: .38rem .65rem;
        color: var(--text-muted);
        font-size: .68rem;
        text-align: center;
        background: color-mix(in srgb, var(--primary-light) 70%, transparent);
    }

    /* Dashboard role: retain card-mode tables where already explicitly enabled. */
    .dashboard-table-mobile { min-width: 0 !important; }
}

@media (max-width: 420px) {
    .app-main .card-header { font-size: .84rem; }
    .app-main .table-scroll > .table { min-width: 680px; }
    .app-main .table-scroll > .table th,
    .app-main .table-scroll > .table td { padding-left: .62rem; padding-right: .62rem; }
}

/* =========================================================
   Public dashboard responsive hardening
========================================================= */
.tv-shell { width: 100%; max-width: 2400px; margin: 0 auto; box-sizing: border-box; overflow-x: hidden; }
.tv-header, .tv-ticker-wrap, .tv-kpi-strip, .tv-main { width: min(100%, 2400px); margin-left: auto; margin-right: auto; }
.tv-main { min-width: 0; }
.tv-stage-col, .tv-sidebar, .tv-panel, .tv-side-panel { min-width: 0; }
.tv-panel-body { min-width: 0; }
.tv-table { width: 100%; }

@media (max-width: 1100px) {
    .tv-header { padding-left: 1rem; padding-right: 1rem; }
    .tv-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tv-main { grid-template-columns: 1fr; }
    .tv-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .tv-shell { padding: 10px 14px; }
    .tv-header { padding: .65rem .75rem; gap: .55rem; }
    .tv-brand-text { font-size: .9rem !important; }
    .tv-header .brand-sub { font-size: .62rem; }
    .tv-datetime .tv-clock { font-size: 1rem; }
    .tv-datetime .tv-date { font-size: .58rem; }
    .tv-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .55rem .65rem; }
    .tv-kpi-card { min-width: 0; padding: .7rem; }
    .tv-kpi-value { font-size: 1.15rem; }
    .tv-main { display: flex; flex-direction: column; gap: .65rem; padding: 0; }
    .tv-panel-grid { display: grid !important; grid-template-columns: 1fr !important; gap: .65rem; }
    .tv-sidebar { display: flex; flex-direction: column; gap: .65rem; }
    .tv-panel-head, .tv-side-title { min-height: 42px; padding: .65rem .75rem; }
    .tv-panel-body { padding: 4px 7px 7px; }

    /* Public tables remain fully accessible without enlarging the page. */
    .tv-panel-body > .table.tv-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .tv-table thead th { white-space: nowrap; }
    .tv-table td, .tv-table th { padding: .5rem .6rem; }
    .tv-panel-body > .table.tv-table::after {
        content: '';
        display: block;
        height: .15rem;
    }
    .tv-jam-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .tv-jam-btn { flex: 0 0 auto; min-width: 32px; height: 32px; font-size: .78rem; }
    .tv-guru-viewport { max-height: 260px; }
}

@media (max-width: 420px) {
    .tv-kpi-strip { grid-template-columns: 1fr 1fr; padding: .5rem; }
    .tv-kpi-card { padding: .6rem; border-radius: 11px; }
    .tv-kpi-label { font-size: .62rem; }
    .tv-kpi-value { font-size: 1.05rem; }
    .tv-header .brand-sub { font-size: .62rem; }
}

/* =========================================================
   510_14_15 - Visual UI/UX Refresh
   Fokus: modern, konsisten, mudah dipindai, tanpa mengubah fungsi.
========================================================= */
:root {
    --ui-ink: #172033;
    --ui-muted: #6b7890;
    --ui-line: #e8edf5;
    --ui-soft: #f7f9fc;
    --ui-elev: 0 10px 30px rgba(23,32,51,.07);
    --ui-elev-hover: 0 16px 36px rgba(23,32,51,.11);
    --ui-focus: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Workspace rhythm */
.app-main { color: var(--ui-ink); }
.app-main > .d-flex:first-child,
.app-main > .page-header {
    padding: .1rem 0 .35rem;
}
.app-main > .d-flex:first-child > div:first-child,
.app-main > .page-header > div:first-child { min-width: 0; }
.app-main > .d-flex:first-child h1,
.app-main > .d-flex:first-child h2,
.app-main > .d-flex:first-child h3,
.app-main > .d-flex:first-child h4,
.app-main > .d-flex:first-child h5,
.app-main > .d-flex:first-child h6,
.app-main > .page-header h1,
.app-main > .page-header h2,
.app-main > .page-header h3,
.app-main > .page-header h4,
.app-main > .page-header h5,
.app-main > .page-header h6 {
    color: var(--ui-ink);
    letter-spacing: -.025em;
}
.app-main > .d-flex:first-child .text-muted,
.app-main > .page-header .text-muted { color: var(--ui-muted) !important; }

/* Cards */
.app-main .card {
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    box-shadow: var(--ui-elev);
    background: #fff;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.app-main .card:hover { box-shadow: var(--ui-elev-hover); }
.app-main .card-header {
    background: #fff !important;
    color: var(--ui-ink);
    border-bottom: 1px solid var(--ui-line);
    font-weight: 750;
    letter-spacing: -.01em;
    padding: .85rem 1rem;
}
.app-main .card-header i:first-child {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary); margin-right: .25rem;
}
.app-main .card-body { padding: 1rem; }

/* Stat cards: visual hierarchy without excessive decoration */
.app-main .card-stat {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.app-main .card-stat::after {
    content: ''; position: absolute; width: 92px; height: 92px; border-radius: 50%;
    right: -34px; top: -38px; background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.app-main .card-stat .text-muted { color: var(--ui-muted) !important; font-weight: 600; font-size: .76rem; }
.app-main .card-stat .stat-num { font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1.05; font-weight: 800; color: var(--ui-ink); margin-top: .25rem; }
.app-main .stat-icon {
    width: 42px; height: 42px; border-radius: 12px !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
    color: var(--primary) !important; position: relative; z-index: 1;
}

/* Dashboard hero */
.app-main .dashboard-hero {
    border-radius: 20px;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    margin-bottom: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #111827) 60%, var(--secondary) 120%);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary) 20%, transparent);
    position: relative; overflow: hidden;
}
.app-main .dashboard-hero::after {
    content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -110px;
    border-radius: 50%; border: 34px solid rgba(255,255,255,.08);
}
.app-main .dashboard-hero h4 { font-weight: 800; letter-spacing: -.025em; }
.app-main .dashboard-hero p { opacity: .84; font-size: .82rem; }
.app-main .dashboard-hero-actions .btn { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); transition: all .2s ease-in-out; }
.app-main .dashboard-hero-actions .btn:hover, .app-main .dashboard-hero-actions .btn:focus, .app-main .dashboard-hero-actions .btn:active { background: #fff !important; color: var(--primary, #1e40af) !important; border-color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; transform: translateY(-1px); }
.app-main .dashboard-hero-actions .btn:hover *, .app-main .dashboard-hero-actions .btn:focus *, .app-main .dashboard-hero-actions .btn:active * { color: var(--primary, #1e40af) !important; }

/* Quick actions */
.app-main .dashboard-section-title {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    margin: 1.15rem 0 .65rem;
}
.app-main .dashboard-section-title h6 { margin: 0; font-size: .86rem; font-weight: 800; color: var(--ui-ink); }
.app-main .dashboard-section-title span { color: var(--ui-muted); font-size: .72rem; }
.app-main .quick-action-grid { gap: .75rem; }
.app-main .quick-action-card {
    border: 1px solid var(--ui-line) !important; border-radius: 15px !important;
    background: #fff !important; box-shadow: var(--ui-elev) !important;
    padding: .9rem !important; min-height: 76px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.app-main .quick-action-card:hover {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 30%, var(--ui-line)) !important;
    box-shadow: var(--ui-elev-hover) !important;
}
.app-main .quick-action-icon {
    width: 42px !important; height: 42px !important; border-radius: 12px !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--ux-surface));
    color: var(--primary);
}
.app-main .quick-action-title { color: var(--ui-ink); font-weight: 750; font-size: .84rem; }
.app-main .quick-action-sub { color: var(--ui-muted); font-size: .68rem; margin-top: .1rem; }
.app-main .quick-action-arrow { color: #a1acc0; transition: transform .2s ease, color .2s ease; }
.app-main .quick-action-card:hover .quick-action-arrow { transform: translateX(3px); color: var(--primary); }
.app-main .quick-action-card.urgent { border-color: color-mix(in srgb, var(--danger) 22%, var(--ui-line)) !important; }
.app-main .quick-action-card.urgent .quick-action-icon { background: #fff1f2 !important; color: var(--danger) !important; }

/* Buttons */
.app-main .btn {
    min-height: 38px; border-radius: 10px; font-weight: 650; font-size: .82rem;
    padding: .48rem .78rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.app-main .btn-primary { box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 18%, transparent); }
.app-main .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 24%, transparent); }
.app-main .btn-outline-primary:hover,
.app-main .btn-outline-secondary:hover,
.app-main .btn-outline-success:hover,
.app-main .btn-outline-danger:hover,
.app-main .btn-outline-warning:hover { transform: translateY(-1px); }
.app-main .btn-sm { min-height: 32px; border-radius: 8px; font-size: .74rem; padding: .32rem .58rem; }

/* Forms */
.app-main .form-label { color: #536177; font-size: .76rem; font-weight: 700; margin-bottom: .35rem; }
.app-main .form-control,
.app-main .form-select {
    border: 1px solid #dfe5ef; border-radius: 10px; color: var(--ui-ink);
    background-color: #fff; box-shadow: 0 1px 2px rgba(23,32,51,.025);
}
.app-main .form-control::placeholder { color: #a1acbd; }
.app-main .form-control:focus,
.app-main .form-select:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, #dfe5ef);
    box-shadow: 0 0 0 4px var(--ui-focus);
}
.app-main textarea.form-control { line-height: 1.55; }
.app-main .input-group-text { border-color: #dfe5ef; background: #f8fafc; color: #738096; }

/* Alerts */
.app-main .alert { border-radius: 12px; border-width: 1px; font-size: .82rem; box-shadow: 0 4px 14px rgba(23,32,51,.04); }

/* Tables */
.app-main .table-responsive,
.app-main .table-scroll { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; }
.app-main .table { --bs-table-bg: transparent; color: var(--ui-ink); vertical-align: middle; }
.app-main .table > :not(caption) > * > * { border-bottom-color: #edf1f6; }
.app-main .table thead th {
    background: #f7f9fc; color: #66748a; text-transform: uppercase; letter-spacing: .035em;
    font-size: .67rem; font-weight: 800; border-bottom: 1px solid #e4e9f1;
}
.app-main .table tbody td { font-size: .79rem; }
.app-main .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--primary) 3.5%, #fff); }
.app-main .table tbody tr:last-child td { border-bottom: 0; }
.app-main .table .badge { font-weight: 700; letter-spacing: .01em; }

/* Pagination */
.app-main .pagination .page-link { border: 1px solid var(--ui-line); color: #617089; border-radius: 8px !important; margin: 0 .12rem; font-size: .75rem; font-weight: 650; }
.app-main .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 18%, transparent); }

/* Modal / dropdown */
.app-main ~ .modal .modal-content,
.modal .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.2); overflow: hidden; }
.modal .modal-header { border-bottom: 1px solid var(--ui-line); padding: 1rem 1.1rem; }
.modal .modal-title { font-weight: 800; letter-spacing: -.02em; }
.modal .modal-footer { border-top: 1px solid var(--ui-line); }
.dropdown-menu { border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: 0 14px 32px rgba(15,23,42,.12); padding: .35rem; }
.dropdown-item { border-radius: 8px; font-size: .82rem; padding: .5rem .65rem; }
.dropdown-item:hover { background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--primary-dark); }

/* Data cards / empty states */
.app-main .border-bottom { border-color: var(--ui-line) !important; }
.app-main .empty-state,
.app-main .text-muted.text-center.py-3 {
    color: var(--ui-muted) !important;
}


/* 510_14_28 — JS motion helpers. These elements remain controllable by the page-level motion setting. */
.sig-motion-sticker { will-change: transform; }
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 767.98px) {
    .app-main .dashboard-hero { border-radius: 15px; padding: 1rem; }
    .app-main .dashboard-hero-content { gap: .7rem; }
    .app-main .dashboard-section-title { margin-top: .9rem; }
    .app-main .quick-action-grid { grid-template-columns: 1fr 1fr; }
    .app-main .quick-action-card { min-height: 72px; padding: .72rem !important; }
    .app-main .quick-action-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
    .app-main .quick-action-title { font-size: .76rem; }
    .app-main .quick-action-sub { font-size: .61rem; }
    .app-main .card:hover { transform: none; }
    .app-main .card-body { padding: .85rem; }
}

@media (max-width: 430px) {
    .app-main .quick-action-grid { grid-template-columns: 1fr; }
    .app-main .dashboard-hero-actions .btn { width: 100%; }
    .app-main .dashboard-hero-actions { width: 100%; }
    .app-main .dashboard-section-title span { display: none; }
}

/* =========================================================
   510_14_16 - Linux/browser asset & layout compatibility hardening
   - Asset cache is versioned at the PHP link level.
   - Keep flex/grid children shrinkable on stricter engines.
   - Provide non-color-mix fallbacks for the refreshed UI.
========================================================= */
.app-main, .app-main .row, .app-main [class*="col-"] { min-width: 0; }
.app-main .card, .app-main .card-body, .app-main .card-header { max-width: 100%; }
.app-main .d-flex, .app-main .input-group, .app-main .btn-group { min-width: 0; }
.app-main img, .app-main svg, .app-main canvas { max-width: 100%; }
.app-main .table-responsive, .app-main .table-scroll { contain: inline-size; }

@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
    .app-main .card-header i:first-child,
    .app-main .stat-icon,
    .app-main .quick-action-icon { background: color-mix(in srgb, var(--primary, #2563eb) 8%, var(--ux-surface)); }
    .app-main .quick-action-card:hover { border-color: #cbd5e1 !important; }
    .app-main .dashboard-hero { background: var(--primary); }
    .app-main .btn-primary { box-shadow: 0 5px 12px rgba(15,23,42,.12); }
    .app-main .form-control:focus,
    .app-main .form-select:focus { box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
    .app-main .table-hover > tbody > tr:hover > * { background: #f8fafc; }
    .dropdown-item:hover { background: #f1f5f9; }
}

@media (max-width: 767.98px) {
    .app-main .table-responsive,
    .app-main .table-scroll { contain: none; }
    .app-main .page-header,
    .app-main > .d-flex:first-child { width: 100%; }
    .app-main .page-header > *,
    .app-main > .d-flex:first-child > * { max-width: 100%; }
    .app-main .card-header .btn,
    .app-main .card-header .btn-group { max-width: 100%; }
}


/* =========================================================
   510_14_17 - Responsive data-card tables
   Goal: eliminate horizontal scrolling for ordinary data tables on
   phones/small Linux viewports while keeping every cell readable.
========================================================= */
.app-main .responsive-table-shell {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.app-main {
    container-type: inline-size;
    container-name: appmain;
}

.app-main .mobile-data-table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}
.app-main .mobile-data-table th,
.app-main .mobile-data-table td {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 991.98px) {
    .app-main .responsive-table-shell,
    .app-main .mobile-data-table {
        overflow: visible !important;
    }

    /* Turn each normal row into a compact information card. */
    .app-main .mobile-data-table {
        display: block;
        border-collapse: separate !important;
        border-spacing: 0;
        table-layout: auto !important;
    }
    .app-main .mobile-data-table thead {
        display: none;
    }
    .app-main .mobile-data-table tbody {
        display: block;
        width: 100%;
    }
    .app-main .mobile-data-table tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 .7rem;
        padding: .28rem 0;
        background: #fff;
        border: 1px solid var(--ui-line);
        border-radius: 13px;
        box-shadow: 0 3px 12px rgba(15,23,42,.045);
        overflow: hidden;
    }
    .app-main .mobile-data-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .app-main .mobile-data-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
        align-items: start;
        gap: .65rem;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: .52rem .78rem;
        border: 0 !important;
        border-bottom: 1px solid #f0f2f6 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: .79rem;
        line-height: 1.45;
    }
    .app-main .mobile-data-table tbody tr td:last-child {
        border-bottom: 0 !important;
    }
    .app-main .mobile-data-table tbody td::before {
        content: attr(data-label);
        min-width: 0;
        color: var(--ui-muted);
        font-size: .64rem;
        line-height: 1.35;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .035em;
    }
    .app-main .mobile-data-table tbody td > *,
    .app-main .mobile-data-table tbody td form,
    .app-main .mobile-data-table tbody td .d-inline,
    .app-main .mobile-data-table tbody td .btn-group {
        min-width: 0;
        max-width: 100%;
    }
    .app-main .mobile-data-table tbody td .text-nowrap,
    .app-main .mobile-data-table tbody td[style*="white-space"] {
        white-space: normal !important;
    }
    .app-main .mobile-data-table tbody td img,
    .app-main .mobile-data-table tbody td svg {
        max-width: 100%;
        height: auto;
    }
    .app-main .mobile-data-table tbody td .btn,
    .app-main .mobile-data-table tbody td .btn-group {
        white-space: normal;
        flex-wrap: wrap;
    }
    .app-main .mobile-data-table tbody td .btn {
        margin: 0 .2rem .2rem 0;
    }
    .app-main .mobile-data-table tbody tr.mobile-table-empty,
    .app-main .mobile-data-table tbody tr.mobile-table-empty td {
        display: block !important;
        text-align: center !important;
    }
    .app-main .mobile-data-table tbody tr.mobile-table-empty td::before {
        content: none;
    }

    /* Do not allow nested responsive wrappers to reintroduce horizontal scrolling. */
    .app-main .responsive-table-shell .table-responsive,
    .app-main .responsive-table-shell .table-scroll {
        overflow: visible !important;
    }

    /* Complex matrix tables use a dense, wrapped presentation rather than a forced swipe. */
    .app-main .mobile-table-complex {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    .app-main .mobile-table-complex th,
    .app-main .mobile-table-complex td {
        min-width: 0 !important;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        padding-left: .45rem;
        padding-right: .45rem;
    }
}

/* Content-width responsive mode: Linux/desktop layouts can have a narrow main content area even when the browser viewport is wide.
   Switch data tables to cards based on the actual .app-main width, not only viewport width. */
@container appmain (max-width: 1100px) {
    .app-main .mobile-data-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
    .app-main .mobile-data-table thead { display: none !important; }
    .app-main .mobile-data-table tbody { display: block !important; width: 100% !important; }
    .app-main .mobile-data-table tbody tr {
        display: block !important; width: 100% !important; margin: 0 0 .7rem;
        padding: .28rem 0; background: #fff; border: 1px solid var(--ui-line);
        border-radius: 13px; box-shadow: 0 3px 12px rgba(15,23,42,.045); overflow: hidden;
    }
    .app-main .mobile-data-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
        gap: .65rem; align-items: start; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
        padding: .52rem .78rem; border: 0 !important; border-bottom: 1px solid #f0f2f6 !important;
        text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
        font-size: .79rem; line-height: 1.45;
    }
    .app-main .mobile-data-table tbody td:last-child { border-bottom: 0 !important; }
    .app-main .mobile-data-table tbody td::before {
        content: attr(data-label); min-width: 0; color: var(--ui-muted); font-size: .64rem; line-height: 1.35;
        font-weight: 800; text-transform: uppercase; letter-spacing: .035em;
    }
    .app-main .mobile-data-table tbody td > *,
    .app-main .mobile-data-table tbody td form,
    .app-main .mobile-data-table tbody td .d-inline,
    .app-main .mobile-data-table tbody td .btn-group { min-width: 0; max-width: 100%; }
    .app-main .mobile-data-table tbody td .text-nowrap,
    .app-main .mobile-data-table tbody td[style*="white-space"] { white-space: normal !important; }
    .app-main .mobile-data-table tbody td img, .app-main .mobile-data-table tbody td svg { max-width: 100%; height: auto; }
    .app-main .mobile-data-table tbody td .btn, .app-main .mobile-data-table tbody td .btn-group { white-space: normal; flex-wrap: wrap; }
}

@container appmain (max-width: 700px) {
    .app-main .mobile-data-table tbody td { grid-template-columns: minmax(72px, 34%) minmax(0, 1fr); gap: .5rem; padding: .48rem .68rem; font-size: .77rem; }
    .app-main .mobile-data-table tbody td::before { font-size: .60rem; }
}

/* Never let wide table content create page-level horizontal overflow. */
.app-main .table-responsive,
.app-main .table-scroll { max-width: 100%; }
.app-main table:not(.mobile-data-table) { max-width: 100%; }
.app-main table:not(.mobile-data-table) th,
.app-main table:not(.mobile-data-table) td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }

@media (max-width: 575.98px) {
    .app-main .mobile-data-table tbody td {
        grid-template-columns: minmax(72px, 34%) minmax(0, 1fr);
        gap: .5rem;
        padding: .48rem .68rem;
        font-size: .77rem;
    }
    .app-main .mobile-data-table tbody td::before {
        font-size: .60rem;
    }
}


/* =========================================================
   510_14_19 - SEKOLAH APP DESIGN SYSTEM & EXPERIENCE OVERHAUL
   Prinsip: hierarchy > decoration, fungsi > keseragaman bentuk.
   Komponen tetap konsisten, tetapi setiap role/fitur mendapat karakter.
========================================================= */
:root{
    --ds-ink:#172033;
    --ds-muted:#718096;
    --ds-soft:#f7f9fc;
    --ds-line:#e5eaf2;
    --ds-radius:16px;
    --ds-gap:1rem;
    --ds-accent:var(--primary);
    --ds-accent-soft:#eef2ff;
}

body[data-role="admin"]{--ds-accent:#4f46e5;--ds-accent-soft:#eef2ff}
body[data-role="guru"]{--ds-accent:#0f766e;--ds-accent-soft:#ecfdf5}
body[data-role="tata_usaha"]{--ds-accent:#0369a1;--ds-accent-soft:#eff6ff}
body[data-role="bk"]{--ds-accent:#7c3aed;--ds-accent-soft:#f5f3ff}
body[data-role="kepsek"]{--ds-accent:#b45309;--ds-accent-soft:#fffbeb}
body[data-role="siswa"]{--ds-accent:#0284c7;--ds-accent-soft:#f0f9ff}

/* Page rhythm: make every feature read as a workspace, not a pile of boxes. */
.app-main{
    padding:clamp(1rem,2.2vw,1.75rem) clamp(.9rem,2.3vw,1.75rem) 2.5rem;
}
.app-main > .card,
.app-main > .row > [class*="col-"] > .card,
.app-main > .row > [class*="col-"] > form.card{
    --card-accent:var(--ds-accent);
}

/* Headings and first-row controls become a consistent page chrome. */
.app-main > .page-header,
.app-main > .d-flex:first-child:not(.dashboard-hero):not(.dashboard-section-title){
    position:relative;
}
.app-main > .page-header h5,
.app-main > .page-header h6{
    font-size:clamp(1.05rem,1.7vw,1.35rem);
    font-weight:850;
}
.app-main .page-kicker{
    display:inline-flex;align-items:center;gap:.4rem;
    margin-bottom:.3rem;color:var(--ds-accent);font-size:.66rem;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;
}

/* Section titles get a small visual anchor so long pages become scannable. */
.app-main .dashboard-section-title,
.app-main .section-title{
    position:relative;padding-left:.75rem;margin-top:1.35rem;
}
.app-main .dashboard-section-title::before,
.app-main .section-title::before{
    content:"";position:absolute;left:0;top:.12rem;bottom:.12rem;width:3px;
    border-radius:4px;background:var(--ds-accent);
}
.app-main .dashboard-section-title h6,
.app-main .section-title h6{font-size:.9rem;letter-spacing:-.01em}

/* Cards are differentiated by role: summary, workspace, action, status. */
.app-main .card{
    position:relative;border-color:var(--ds-line)!important;border-radius:var(--ds-radius)!important;
    box-shadow:0 3px 14px rgba(15,23,42,.045)!important;
}
.app-main .card-header{
    display:flex;align-items:center;gap:.55rem;min-height:54px;padding:.8rem 1rem!important;
    background:linear-gradient(180deg,#fff,#fbfcfe)!important;
}
.app-main .card-header::after{
    content:"";width:28px;height:3px;border-radius:99px;background:var(--ds-accent);margin-left:auto;opacity:.18;
}
.app-main .card-header i:first-child{background:var(--ds-accent-soft);color:var(--ds-accent)}
.app-main .card-body{padding:1rem}

/* Stat cards: no longer identical; the icon, number and accent form a visual sentence. */
.app-main .card-stat{
    min-height:116px;border-left:4px solid var(--card-accent,var(--ds-accent))!important;
    background:linear-gradient(145deg,#fff 0%,#fbfcff 100%)!important;
}
.app-main .card-stat::before{background:var(--card-accent,var(--ds-accent))!important;width:4px}
.app-main .card-stat::after{
    width:120px;height:120px;right:-58px;top:-64px;
    background:var(--ds-accent-soft)!important;opacity:.85;
}
.app-main .card-stat .stat-icon{
    background:var(--ds-accent-soft)!important;color:var(--card-accent,var(--ds-accent))!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--card-accent,var(--ds-accent)) 10%,transparent);
}
.app-main .card-stat .stat-num{position:relative;z-index:1}

/* Quick actions: directional affordance and stronger icon identity. */
.app-main .quick-action-card{
    min-height:84px!important;border-radius:16px!important;padding:.85rem!important;
    box-shadow:0 4px 16px rgba(15,23,42,.045)!important;
}
.app-main .quick-action-card:nth-child(3n+1) .quick-action-icon{background:var(--ds-accent-soft);color:var(--ds-accent)}
.app-main .quick-action-card:nth-child(3n+2) .quick-action-icon{background:#f0fdf4;color:#15803d}
.app-main .quick-action-card:nth-child(3n) .quick-action-icon{background:#fff7ed;color:#c2410c}
.app-main .quick-action-card:hover{border-color:color-mix(in srgb,var(--ds-accent) 28%,var(--ds-line))!important}

/* Forms: group related fields visually without making them heavy. */
.app-main form.card .card-header,
.app-main .filter-card .card-header{background:#fbfcfe!important}
.app-main .form-label{letter-spacing:.005em}
.app-main .form-control,.app-main .form-select{min-height:40px}
.app-main textarea.form-control{min-height:96px}
.app-main .form-control:focus,.app-main .form-select:focus{
    border-color:color-mix(in srgb,var(--ds-accent) 55%,#dfe5ef);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--ds-accent) 10%,transparent);
}

/* Toolbars: actions are visually separated from data. */
.app-main .table-responsive + .d-flex,
.app-main .table-scroll + .d-flex{margin-top:.75rem}
.app-main .btn-toolbar,.app-main .table-toolbar,.app-main .filter-toolbar{
    gap:.5rem;align-items:center;flex-wrap:wrap;
}
.app-main .btn-primary{background:var(--ds-accent)!important;border-color:var(--ds-accent)!important}
.app-main .btn-outline-primary{color:var(--ds-accent)!important;border-color:color-mix(in srgb,var(--ds-accent) 35%,#cbd5e1)!important}
.app-main .btn-outline-secondary{color:#475569!important;border-color:#64748b!important}
.app-main .btn-outline-warning{color:#d97706!important;border-color:#f59e0b!important}
.app-main .btn-outline-info{color:#0284c7!important;border-color:#0ea5e9!important}

/* Data views: distinguish data from its surrounding card. */
.app-main .table-responsive,.app-main .table-scroll{
    border:0!important;border-radius:12px;background:#fff;
}
.app-main .table thead th{background:#f5f7fb!important;color:#68768a!important}
.app-main .table tbody tr{border-left:3px solid transparent;transition:background .18s,border-color .18s}
.app-main .table tbody tr:hover{border-left-color:var(--ds-accent);background:var(--ds-accent-soft)!important}
.app-main .table tbody td{padding:.72rem .85rem}

/* Status badges become semantic pills, not decoration. */
.app-main .badge{font-size:.68rem;padding:.4rem .62rem;line-height:1.1}

/* Role-specific page accents: same system, different personality. */
body[data-role="admin"] .dashboard-hero{background:linear-gradient(135deg,#3730a3,#4f46e5 58%,#0ea5e9)}
body[data-role="guru"] .dashboard-hero{background:linear-gradient(135deg,#115e59,#0f766e 58%,#14b8a6)}
body[data-role="tata_usaha"] .dashboard-hero{background:linear-gradient(135deg,#075985,#0369a1 58%,#0ea5e9)}
body[data-role="bk"] .dashboard-hero{background:linear-gradient(135deg,#5b21b6,#7c3aed 58%,#a855f7)}
body[data-role="kepsek"] .dashboard-hero{background:linear-gradient(135deg,#92400e,#b45309 58%,#f59e0b)}
body[data-role="siswa"] .dashboard-hero{background:linear-gradient(135deg,#075985,#0284c7 58%,#38bdf8)}

/* Feature-specific visual cues. The page remains structurally identical, but its purpose is recognizable. */
body[data-page="surat_masuk"],body[data-page="jenis_surat"],body[data-page="persuratan_pengaturan"]{--ds-accent:#0369a1;--ds-accent-soft:#eff6ff}
body[data-page="pembiayaan"],body[data-page="laporan_pembiayaan"],body[data-page="pembayaran_siswa"]{--ds-accent:#15803d;--ds-accent-soft:#f0fdf4}
body[data-page="inventaris"],body[data-page="peminjaman"],body[data-page="laporan_peminjaman"]{--ds-accent:#c2410c;--ds-accent-soft:#fff7ed}
body[data-page="pelanggaran"],body[data-page="lapor_pelanggaran"],body[data-page="wali_pelanggaran"]{--ds-accent:#be123c;--ds-accent-soft:#fff1f2}
body[data-page="presensi_siswa"],body[data-page="absen_kelas"],body[data-page="wali_kehadiran"],body[data-page="kehadiran"]{--ds-accent:#0f766e;--ds-accent-soft:#ecfdf5}
body[data-page="konseling"],body[data-page="peminatan"],body[data-page="wali_laporan_masalah"]{--ds-accent:#7c3aed;--ds-accent-soft:#f5f3ff}
body[data-page="jadwal"],body[data-page="api_jadwal"]{--ds-accent:#2563eb;--ds-accent-soft:#eff6ff}
body[data-page="prestasi"],body[data-page="wali_prestasi"]{--ds-accent:#b45309;--ds-accent-soft:#fffbeb}

/* Compact screens: stack metadata inside cards rather than squeezing it. */
@media(max-width:767.98px){
    .app-main{padding:.85rem .75rem 1.5rem}
    .app-main .card{border-radius:14px!important}
    .app-main .card-header{min-height:50px;padding:.72rem .8rem!important}
    .app-main .card-body{padding:.8rem}
    .app-main .dashboard-section-title{margin-top:1rem}
    .app-main .quick-action-card{min-height:76px!important}
}

/* ================================================================
   510_14_20 — COMPACT VISUAL HIERARCHY
   Goal: reduce visual weight, improve scanability, shorten page height.
   ================================================================ */
:root{
    --compact-radius:10px;
    --compact-gap:.65rem;
    --compact-line:#e7ebf1;
}

/* Reduce the visual mass of generic cards. */
.app-main .card{
    border-radius:var(--compact-radius)!important;
    box-shadow:0 1px 5px rgba(15,23,42,.035)!important;
}
.app-main .card-header{
    min-height:44px;
    padding:.62rem .8rem!important;
    background:#fff!important;
    border-bottom:1px solid var(--compact-line)!important;
}
.app-main .card-header::after{display:none}
.app-main .card-body{padding:.78rem}

/* Make section titles compact and scannable. */
.app-main .dashboard-section-title,
.app-main .section-title{
    margin-top:.9rem;
    margin-bottom:.55rem;
    padding-left:.55rem;
}
.app-main .dashboard-section-title::before,
.app-main .section-title::before{width:3px}
.app-main .dashboard-section-title h6,
.app-main .section-title h6{font-size:.78rem;margin:0}

/* Compact dashboard hero: informative, not oversized. */
.app-main .dashboard-hero{
    padding:.85rem 1rem!important;
    min-height:0!important;
    border-radius:12px!important;
    margin-bottom:.75rem!important;
}
.app-main .dashboard-hero h4{font-size:1rem!important;margin-bottom:.15rem!important}
.app-main .dashboard-hero p{font-size:.72rem!important;margin-bottom:0!important}

/* Statistics become small visual anchors rather than large cards. */
.app-main .card-stat{
    min-height:78px!important;
    padding:.65rem .7rem!important;
    border-left-width:3px!important;
    border-radius:10px!important;
}
.app-main .card-stat .stat-icon{
    width:34px!important;height:34px!important;
    border-radius:9px!important;font-size:.9rem!important;
}
.app-main .card-stat .stat-num{
    font-size:1.25rem!important;
    line-height:1!important;
    margin-top:0!important;
}
.app-main .card-stat .stat-label,
.app-main .card-stat .text-muted{
    font-size:.67rem!important;
    line-height:1.15!important;
}

/* Distinct but restrained semantic colours. */
.app-main .dashboard-stat-grid .card-stat:nth-child(1){--card-accent:#2563eb;background:#f8fbff!important}
.app-main .dashboard-stat-grid .card-stat:nth-child(2){--card-accent:#0f766e;background:#f5fffd!important}
.app-main .dashboard-stat-grid .card-stat:nth-child(3){--card-accent:#b45309;background:#fffaf3!important}
.app-main .dashboard-stat-grid .card-stat:nth-child(4){--card-accent:#be123c;background:#fff7f8!important}
.app-main .dashboard-stat-grid .card-stat:nth-child(5){--card-accent:#7c3aed;background:#faf8ff!important}
.app-main .dashboard-stat-grid .card-stat:nth-child(6){--card-accent:#15803d;background:#f6fff8!important}

/* Quick actions: compact, colourful icon + one-line label. */
.app-main .quick-action-card{
    min-height:58px!important;
    padding:.55rem .65rem!important;
    gap:.55rem!important;
    border-radius:10px!important;
    box-shadow:none!important;
    background:#fff!important;
}
.app-main .quick-action-card .quick-action-icon{
    width:34px!important;height:34px!important;
    min-width:34px!important;
    border-radius:9px!important;
    font-size:.9rem!important;
}
.app-main .quick-action-card strong,
.app-main .quick-action-card .fw-semibold{font-size:.74rem!important;line-height:1.2}
.app-main .quick-action-card small,
.app-main .quick-action-card .text-muted{font-size:.64rem!important;line-height:1.15}
.app-main .quick-action-card:nth-child(4n+1){border-left:3px solid #2563eb!important}
.app-main .quick-action-card:nth-child(4n+2){border-left:3px solid #0f766e!important}
.app-main .quick-action-card:nth-child(4n+3){border-left:3px solid #b45309!important}
.app-main .quick-action-card:nth-child(4n){border-left:3px solid #7c3aed!important}

/* Avoid excessive vertical gaps created by generic Bootstrap rows. */
.app-main .row{--bs-gutter-y:.65rem}
.app-main .row > [class*="col-"]{margin-bottom:0!important}

/* Data cards/tables: keep the data dense but readable. */
.app-main .table-card,
.app-main .data-card{border-radius:10px!important}
.app-main .table thead th{font-size:.68rem!important;padding:.5rem .65rem!important}
.app-main .table tbody td{font-size:.72rem!important;padding:.55rem .65rem!important;line-height:1.25}
.app-main .table .btn{padding:.28rem .45rem!important;font-size:.68rem!important}
.app-main .badge{font-size:.62rem!important;padding:.32rem .48rem!important}

/* Compact filters: more controls visible in one line on desktop. */
.app-main .filter-card .card-body,
.app-main .filter-toolbar{padding:.65rem!important}
.app-main .form-label{font-size:.68rem!important;margin-bottom:.25rem!important}
.app-main .form-control,
.app-main .form-select{min-height:36px!important;height:36px!important;font-size:.72rem!important;padding:.35rem .55rem!important}
.app-main textarea.form-control{height:auto!important;min-height:84px!important}
.app-main .btn{border-radius:8px!important;font-size:.72rem!important;padding:.42rem .65rem!important}

/* Compact pagination. */
.app-main .pagination{margin-bottom:0!important;gap:2px}
.app-main .pagination .page-link{font-size:.68rem;padding:.32rem .48rem;border-radius:6px!important}

/* Remove decorative circles that consume visual space. */
.app-main .card-stat::after{width:70px!important;height:70px!important;right:-35px!important;top:-35px!important;opacity:.45!important}

/* Mobile: compact does not mean tiny; preserve touch targets. */
@media(max-width:767.98px){
    .app-main{padding:.65rem .6rem 1rem}
    .app-main .card-header{padding:.58rem .65rem!important;min-height:42px}
    .app-main .card-body{padding:.65rem}
    .app-main .dashboard-hero{padding:.72rem .78rem!important;border-radius:10px!important}
    .app-main .dashboard-hero h4{font-size:.92rem!important}
    .app-main .dashboard-hero p{font-size:.68rem!important}
    .app-main .card-stat{min-height:72px!important;padding:.58rem!important}
    .app-main .card-stat .stat-num{font-size:1.12rem!important}
    .app-main .quick-action-card{min-height:54px!important;padding:.48rem .55rem!important}
    .app-main .quick-action-card .quick-action-icon{width:31px!important;height:31px!important;min-width:31px!important}
    .app-main .table tbody td{font-size:.7rem!important}
}


/* ================================================================
   510_14_21 — MODERN WORKSPACE UI & UX
   Reference direction: clean school-management workspace,
   generous but controlled cards, semantic colour, clear hierarchy.
   Dashboard keeps larger metric cards; feature pages use compact
   workspace surfaces and a readable desktop table.
================================================================ */
:root{
    --ux-bg:#f6f7fb;
    --ux-surface:#ffffff;
    --ux-line:#e7eaf1;
    --ux-text:#17213a;
    --ux-muted:#6f7b91;
    --ux-radius:16px;
    --ux-shadow:0 2px 10px rgba(24,39,75,.045);
}

html[data-theme="dark"],
[data-theme="dark"]{
    --ux-bg:#0f172a;
    --ux-surface:#1e293b;
    --ux-line:#334155;
    --ux-text:#f1f5f9;
    --ux-muted:#94a3b8;
    --ux-radius:16px;
    --ux-shadow:0 4px 20px rgba(0,0,0,.4);
}

body.ui-themed{background:var(--ux-bg);color:var(--ux-text)}
.app-main{background:var(--ux-bg);min-width:0}

/* Page header: small visual anchor, strong title, optional action on right. */
.app-main > .d-flex.justify-content-between.align-items-center.mb-4,
.app-main > .page-header{
    min-height:58px;
    margin-bottom:1rem!important;
    gap:1rem;
}
.app-main > .d-flex.justify-content-between.align-items-center.mb-4 h4,
.app-main > .page-header h4,
.app-main > .page-header h5{
    color:var(--ux-text)!important;
    font-size:1.55rem!important;
    line-height:1.15;
    font-weight:800!important;
    letter-spacing:-.025em;
    margin:0!important;
}
.app-main > .d-flex.justify-content-between.align-items-center.mb-4 h4::before,
.app-main > .page-header h4::before{
    content:"";
    display:inline-block;
    width:10px;height:34px;margin-right:.7rem;
    vertical-align:-8px;border-radius:8px;
    background:linear-gradient(180deg,var(--ds-accent),color-mix(in srgb,var(--ds-accent) 60%,#8b5cf6));
}

/* Feature surfaces: filters, data and forms share one calm visual language. */
.app-main > .card,
.app-main > .row > [class*="col-"] > .card,
.app-main > .row > [class*="col-"] > form.card{
    border:1px solid var(--ux-line)!important;
    border-radius:var(--ux-radius)!important;
    box-shadow:var(--ux-shadow)!important;
    background:var(--ux-surface)!important;
}
.app-main > .card > .card-body,
.app-main > .row > [class*="col-"] > .card > .card-body,
.app-main > .row > [class*="col-"] > form.card > .card-body{
    background:transparent!important;
}

/* Filter/search bar: visually one workspace, not a loose set of inputs. */
.app-main > .card.mb-3:not(.card-stat),
.app-main .filter-card{
    border-radius:14px!important;
    margin-bottom:1rem!important;
    box-shadow:0 2px 9px rgba(24,39,75,.035)!important;
}
.app-main > .card.mb-3:not(.card-stat) > .card-body,
.app-main .filter-card > .card-body{
    padding:.85rem 1rem!important;
}
.app-main .form-label{
    color:#69758a!important;
    font-size:.72rem!important;
    font-weight:700!important;
}
.app-main .form-control,.app-main .form-select{
    min-height:42px!important;height:42px!important;
    border:1px solid #dfe4ec!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#25304a!important;
    font-size:.82rem!important;
    box-shadow:none!important;
}
.app-main .form-control::placeholder{color:#a0aabd}
.app-main .form-control:focus,.app-main .form-select:focus{
    border-color:var(--ds-accent)!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-accent) 10%,transparent)!important;
}

/* Actions: primary action is obvious, secondary actions stay quiet. */
.app-main .btn{
    min-height:40px;
    border-radius:10px!important;
    font-weight:700!important;
    letter-spacing:-.005em;
}
.app-main .btn-primary{
    box-shadow:0 5px 12px color-mix(in srgb,var(--ds-accent) 18%,transparent)!important;
}
.app-main .btn-outline-primary:not(.active):not(:hover),
.app-main .btn-outline-secondary:not(.active):not(:hover),
.app-main .btn-outline-success:not(.active):not(:hover),
.app-main .btn-outline-danger:not(.active):not(:hover),
.app-main .btn-outline-warning:not(.active):not(:hover),
.app-main .btn-outline-info:not(.active):not(:hover){
    background:var(--ux-surface)!important;
}
.app-main .btn-outline-secondary:not(.active):not(:hover){
    border-color:#64748b!important;
    color:#475569!important;
}
.app-main .btn-outline-warning:not(.active):not(:hover){
    border-color:#f59e0b!important;
    color:#d97706!important;
}
.app-main .btn-outline-info:not(.active):not(:hover){
    border-color:#0ea5e9!important;
    color:#0284c7!important;
}
.app-main .btn-outline-primary:hover,
.app-main .btn-outline-primary.active{ background:var(--ds-accent,#2563eb)!important; color:#fff!important; border-color:var(--ds-accent,#2563eb)!important; }
/* .app-main .btn-outline-secondary:hover,
.app-main .btn-outline-secondary.active{ background:#475569!important; color:#fff!important; border-color:#475569!important; } */
.app-main .btn-outline-success:hover,
.app-main .btn-outline-success.active{ background:#16a34a!important; color:#fff!important; border-color:#16a34a!important; }
.app-main .btn-outline-danger:hover,
.app-main .btn-outline-danger.active{ background:#dc2626!important; color:#fff!important; border-color:#dc2626!important; }
.app-main .btn-outline-warning:hover,
.app-main .btn-outline-warning.active{ background:#f59e0b!important; color:#fff!important; border-color:#f59e0b!important; }
.app-main .btn-outline-info:hover,
.app-main .btn-outline-info.active{ background:#0ea5e9!important; color:#fff!important; border-color:#0ea5e9!important; }

/* Desktop data view — modeled after the clean reference workspace. */
.app-main .table-responsive,.app-main .table-scroll{
    border:1px solid var(--ux-line)!important;
    border-radius:12px!important;
    background:var(--ux-surface)!important;
    overflow-x:auto;
    scrollbar-width:thin;
}
.app-main .table{
    margin:0!important;
    color:#25304a;
    font-size:.8rem;
    vertical-align:middle;
}
.app-main .table thead th{
    background:#f8f9fc!important;
    color:#66728a!important;
    border-bottom:1px solid #e4e8ef!important;
    padding:.72rem .75rem!important;
    font-size:.68rem!important;
    font-weight:800!important;
    text-transform:uppercase;
    letter-spacing:.025em;
    white-space:nowrap;
}
.app-main .table tbody td{
    padding:.72rem .75rem!important;
    border-bottom:1px solid #edf0f4!important;
    font-size:.79rem!important;
    line-height:1.35;
}
.app-main .table tbody tr:last-child td{border-bottom:0!important}
.app-main .table tbody tr{border-left:0!important}
.app-main .table tbody tr:hover{background:#fafbff!important;border-left:0!important}
.app-main .table td:first-child,.app-main .table th:first-child{padding-left:.9rem!important}
.app-main .table td:last-child,.app-main .table th:last-child{padding-right:.9rem!important}
.app-main .table img{box-shadow:0 0 0 3px #f1f4f8}

/* Status/action language. */
.app-main .badge{
    border-radius:999px!important;
    font-weight:750!important;
    padding:.36rem .62rem!important;
}
.app-main .table .btn-sm{
    min-height:32px!important;
    padding:.28rem .55rem!important;
    border-radius:8px!important;
    font-size:.7rem!important;
}
.app-main .table .btn-group,
.app-main .table-responsive .btn-group,
.app-main .table-scroll .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.app-main .table .btn-group > .btn,
.app-main .table-responsive .btn-group > .btn,
.app-main .table-scroll .btn-group > .btn {
    border-radius: 8px !important;
    margin-left: 0 !important;
}
.app-main .table .btn-outline-secondary,
.app-main .table-responsive .btn-outline-secondary,
.app-main .table-scroll .btn-outline-secondary {
    border: 1px solid #64748b !important;
    color: #475569 !important;
    background-color: var(--ux-surface) !important;
}
.app-main .table .btn-outline-secondary:hover,
.app-main .table-responsive .btn-outline-secondary:hover,
.app-main .table-scroll .btn-outline-secondary:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
.app-main .table td .d-flex{align-items:center}

/* Bulk/action strips become quiet utility bars instead of giant alerts. */
.app-main #bulkToolbar{
    border:1px solid #f0d98d!important;
    border-radius:11px!important;
    padding:.55rem .75rem!important;
    background:#fffaf0!important;
    color:#6d5a24!important;
}

/* Card headers: compact but with enough breathing room. */
.app-main .card-header{
    min-height:52px!important;
    padding:.78rem 1rem!important;
    color:var(--ux-text)!important;
    font-size:.88rem;
    font-weight:750;
    border-bottom:1px solid var(--ux-line)!important;
    background:var(--ux-surface)!important;
}
.app-main .card-header i:first-child{
    width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;
}
.app-main .card-body{padding:1rem!important}

/* Dashboard: intentionally larger than feature cards, as requested. */
.app-main .dashboard-hero{
    min-height:112px!important;
    padding:1.15rem 1.3rem!important;
    border-radius:18px!important;
    margin-bottom:1rem!important;
}
.app-main .dashboard-hero h4{font-size:1.25rem!important;font-weight:800!important}
.app-main .dashboard-hero p{font-size:.8rem!important}
.app-main .dashboard-section-title{margin-top:1.05rem!important;margin-bottom:.7rem!important}
.app-main .dashboard-section-title h6{font-size:.88rem!important;font-weight:800!important}
.app-main .quick-action-card{
    min-height:76px!important;
    padding:.75rem!important;
    border-radius:13px!important;
    background:var(--ux-surface)!important;
    border:1px solid var(--ux-line)!important;
    box-shadow:var(--ux-shadow)!important;
}
.app-main .quick-action-card .quick-action-icon{width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important}
.app-main .quick-action-card .quick-action-title{font-size:.78rem!important;font-weight:800!important}
.app-main .quick-action-card .quick-action-sub{font-size:.66rem!important;color:var(--ux-muted)!important}
.app-main .card-stat{
    min-height:142px!important;
    padding:1rem!important;
    border-radius:16px!important;
    border-left-width:4px!important;
    box-shadow:0 3px 12px rgba(24,39,75,.055)!important;
}
.app-main .card-stat .stat-icon{width:46px!important;height:46px!important;border-radius:13px!important;font-size:1.15rem!important}
.app-main .card-stat .stat-num{font-size:1.8rem!important;line-height:1.05!important;font-weight:850!important;margin-top:.25rem!important}
.app-main .card-stat .text-muted,.app-main .card-stat .stat-label{font-size:.72rem!important;font-weight:650!important}
.app-main .dashboard-stat-grid .card-stat{min-height:148px!important}

/* Make ordinary feature pages feel less like dashboards: no oversized decorative blocks. */
body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .card-stat{
    min-height:92px!important;padding:.8rem!important;border-radius:13px!important;
}
body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .card-stat .stat-num{font-size:1.35rem!important}

/* Better spacing around standalone action buttons. */
.app-main > .btn.mb-3,
.app-main > .d-flex.mb-3{margin-bottom:.85rem!important}
.app-main > .d-flex.mb-3{align-items:center;gap:.55rem;flex-wrap:wrap}

/* Desktop: keep universal tables as real tables while still wrapping content. */
@container appmain (min-width: 900.01px){
    .app-main .mobile-data-table{display:table!important;width:100%!important;table-layout:auto!important}
    .app-main .mobile-data-table thead{display:table-header-group!important}
    .app-main .mobile-data-table tbody{display:table-row-group!important}
    .app-main .mobile-data-table tbody tr{display:table-row!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:transparent!important}
    .app-main .mobile-data-table tbody td{display:table-cell!important;width:auto!important;max-width:none!important;padding:.72rem .75rem!important;border-bottom:1px solid #edf0f4!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;font-size:.79rem!important;line-height:1.35}
    .app-main .mobile-data-table tbody td::before{content:none!important}
}

/* At narrow content widths, switch to readable cards — never page-wide horizontal scroll. */
@container appmain (max-width: 899.99px){
    .app-main .table-responsive,.app-main .table-scroll{overflow-x:visible!important}
}

@media(max-width:767.98px){
    .app-main{padding:.75rem .65rem 1.2rem}
    .app-main > .d-flex.justify-content-between.align-items-center.mb-4 h4,
    .app-main > .page-header h4{font-size:1.2rem!important}
    .app-main > .d-flex.justify-content-between.align-items-center.mb-4 h4::before,
    .app-main > .page-header h4::before{height:26px;width:7px;margin-right:.5rem;vertical-align:-6px}
    .app-main .card-stat{min-height:86px!important;padding:.7rem!important}
    .app-main .card-stat .stat-num{font-size:1.3rem!important}
    .app-main .dashboard-hero{min-height:88px!important;padding:.85rem!important;border-radius:14px!important}
    .app-main .dashboard-hero h4{font-size:1rem!important}
    .app-main .quick-action-card{min-height:64px!important}
    .app-main .form-control,.app-main .form-select{height:40px!important;min-height:40px!important}
}

/* =========================================================
   510_14_23 — MOBILE WORKSPACE CARD REFINEMENT
   Mobile feature pages use compact record cards, not stretched
   label/value lists. Dashboard remains intentionally larger.
========================================================= */
@media (max-width: 991.98px){
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
        gap:0!important;
        position:relative!important;
        margin:0 0 .65rem!important;
        padding:.55rem!important;
        border:1px solid #e5e9f0!important;
        border-radius:14px!important;
        background:#fff!important;
        box-shadow:0 2px 8px rgba(25,35,60,.035)!important;
        overflow:hidden!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card::before{
        content:"";
        position:absolute;
        inset:0 auto 0 0;
        width:3px;
        background:var(--ds-accent,#4f46e5);
        opacity:.8;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell{
        display:block!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        padding:.48rem .55rem!important;
        border:0!important;
        border-bottom:0!important;
        background:transparent!important;
        font-size:.78rem!important;
        line-height:1.35!important;
        text-align:left!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
        word-break:break-word!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell::before{
        display:block!important;
        margin:0 0 .18rem!important;
        color:#8792a6!important;
        font-size:.57rem!important;
        line-height:1.1!important;
        font-weight:800!important;
        letter-spacing:.055em!important;
        text-transform:uppercase!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-check{
        position:absolute!important;
        top:.45rem!important;
        right:.45rem!important;
        z-index:2!important;
        width:auto!important;
        padding:.15rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-check::before{display:none!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-check input{margin:0!important}

    /* Photo + primary identity form a compact top area. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo{
        grid-column:1!important;
        grid-row:1 / span 2!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        min-height:76px!important;
        padding:.45rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo::before{display:none!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo img{
        width:54px!important;height:54px!important;max-width:54px!important;
        border-radius:50%!important;object-fit:cover!important;
        box-shadow:0 0 0 3px #f0f3f8!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-primary{
        grid-column:2!important;
        grid-row:1!important;
        align-self:end!important;
        padding-bottom:.18rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-primary::before{display:none!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-primary > *{font-weight:800!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-status{
        grid-column:2!important;
        grid-row:2!important;
        align-self:start!important;
        padding-top:.15rem!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:.35rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-status::before{display:inline-block!important;margin:0!important;font-size:.52rem!important}

    /* Cards without photos still start with the identity field. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-primary:not(.mobile-card-has-photo) td.mobile-cell-primary{
        grid-column:1 / -1!important;
        padding-bottom:.62rem!important;
        border-bottom:1px solid #eef1f5!important;
        margin-bottom:.1rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-primary:not(.mobile-card-has-photo) td.mobile-cell-primary::before{font-size:.55rem!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-primary:not(.mobile-card-has-photo) td.mobile-cell-primary > *{font-weight:800!important}

    /* Status pills stay compact; they should never become full-width bars. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody td.mobile-cell-status .badge,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody td.mobile-cell-status [class*="badge"]{
        display:inline-flex!important;
        width:auto!important;
        max-width:100%!important;
        min-height:24px!important;
        align-items:center!important;
        padding:.22rem .48rem!important;
        border-radius:999px!important;
        font-size:.62rem!important;
        line-height:1!important;
    }

    /* Actions become a compact footer instead of giant stacked buttons. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions{
        grid-column:1 / -1!important;
        margin-top:.3rem!important;
        padding:.55rem .35rem .25rem!important;
        border-top:1px solid #eef1f5!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions::before{
        margin-bottom:.35rem!important;
        font-size:.55rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > .d-flex,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > form,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > .btn-group{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:.35rem!important;
        width:100%!important;
        margin:0!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions .btn,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions a.btn{
        flex:1 1 110px!important;
        width:auto!important;
        min-width:0!important;
        min-height:34px!important;
        padding:.35rem .55rem!important;
        border-radius:8px!important;
        font-size:.68rem!important;
        box-shadow:none!important;
    }

    /* Ordinary fields: two compact columns rather than one tall list. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell:not(.mobile-cell-photo):not(.mobile-cell-primary):not(.mobile-cell-status):not(.mobile-cell-actions):not(.mobile-cell-check){
        min-height:52px!important;
    }

    /* Feature shells are quieter on mobile; the record card provides the hierarchy. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main > .card,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main > .row > [class*="col-"] > .card{
        border-radius:14px!important;
        box-shadow:0 1px 6px rgba(25,35,60,.025)!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .card-body{padding:.72rem!important}
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .card-header{padding:.65rem .75rem!important;min-height:46px!important}

    /* Dashboard is deliberately exempt: its larger visual cards remain. */
    body[data-page="dashboard"] .app-main .card-stat,
    body[data-page="index"] .app-main .card-stat{min-height:128px!important;padding:.9rem!important}
}


/* =========================================================
   510_14_24 — RESPONSIVE DATA GRID & MODERN MOBILE UI
   Feature pages: two compact cards per row on phones.
   Dashboard intentionally remains larger and unchanged.
========================================================= */
@media (max-width: 767.98px){
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table{
        display:block!important;
        width:100%!important;
        table-layout:fixed!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table thead{
        display:none!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:.65rem!important;
        width:100%!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
        grid-auto-rows:min-content!important;
        align-content:start!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:.58rem!important;
        border:1px solid #e6eaf2!important;
        border-radius:14px!important;
        background:#fff!important;
        box-shadow:0 2px 10px rgba(28,39,75,.045)!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card::before{
        width:3px!important;
        background:linear-gradient(180deg,var(--ds-accent,#4f46e5),color-mix(in srgb,var(--ds-accent,#4f46e5) 28%,#fff))!important;
    }

    /* Compact identity header. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo{
        grid-column:1!important;
        grid-row:1 / span 2!important;
        min-height:62px!important;
        padding:.25rem!important;
        justify-content:center!important;
        align-items:center!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo img{
        width:44px!important;
        height:44px!important;
        max-width:44px!important;
        border:2px solid #eef1ff!important;
        box-shadow:none!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-primary{
        grid-column:2!important;
        grid-row:1!important;
        align-self:center!important;
        padding:.2rem .2rem .05rem!important;
        min-height:0!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-primary > *{
        display:block!important;
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
        font-size:.78rem!important;
        line-height:1.2!important;
        font-weight:800!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-status{
        grid-column:2!important;
        grid-row:2!important;
        align-self:start!important;
        padding:.05rem .2rem .2rem!important;
        min-height:0!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-status::before{
        display:none!important;
    }

    /* Metadata becomes a tight two-column information grid. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell:not(.mobile-cell-photo):not(.mobile-cell-primary):not(.mobile-cell-status):not(.mobile-cell-actions):not(.mobile-cell-check){
        min-width:0!important;
        min-height:42px!important;
        padding:.32rem .28rem!important;
        overflow:hidden!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell:not(.mobile-cell-photo):not(.mobile-cell-primary):not(.mobile-cell-status):not(.mobile-cell-actions):not(.mobile-cell-check)::before{
        margin:0 0 .08rem!important;
        font-size:.49rem!important;
        line-height:1.05!important;
        letter-spacing:.045em!important;
        color:#8a94a8!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-data-cell:not(.mobile-cell-photo):not(.mobile-cell-primary):not(.mobile-cell-status):not(.mobile-cell-actions):not(.mobile-cell-check) > *{
        max-width:100%!important;
        font-size:.67rem!important;
        line-height:1.2!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    /* Status: small semantic pill, never a full-width bar. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody td.mobile-cell-status .badge,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody td.mobile-cell-status [class*="badge"]{
        min-height:20px!important;
        padding:.18rem .38rem!important;
        font-size:.56rem!important;
        border-radius:999px!important;
    }

    /* Actions: compact two-button footer. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions{
        grid-column:1 / -1!important;
        margin-top:.15rem!important;
        padding:.42rem .15rem .05rem!important;
        border-top:1px solid #edf0f5!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions::before{
        display:none!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > .d-flex,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > form,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions > .btn-group{
        display:flex!important;
        gap:.3rem!important;
        width:100%!important;
        margin:0!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions .btn,
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-actions a.btn{
        flex:1 1 0!important;
        min-width:0!important;
        min-height:29px!important;
        padding:.24rem .25rem!important;
        border-radius:7px!important;
        font-size:.61rem!important;
        line-height:1.1!important;
        white-space:nowrap!important;
    }

    /* Selection control stays unobtrusive in the card corner. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-check{
        top:.38rem!important;
        right:.38rem!important;
        padding:0!important;
        z-index:3!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card td.mobile-cell-check input{
        width:15px!important;
        height:15px!important;
    }

    /* Empty rows span the complete grid. */
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-table-empty{
        grid-column:1 / -1!important;
    }
}

@media (max-width:360px){
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody{
        gap:.5rem!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-record-card{
        padding:.5rem!important;
        border-radius:12px!important;
    }
    body:not([data-page="dashboard"]):not([data-page="index"]) .app-main .mobile-data-table tbody tr.mobile-card-has-photo td.mobile-cell-photo img{
        width:40px!important;height:40px!important;max-width:40px!important;
    }
}

/* =========================================================
   510_14_25 - Student Dashboard UX Refinement
   Compact score summary: information-dense, calm and mobile-friendly.
========================================================= */
.student-dashboard{min-width:0}
.student-dashboard .student-hero{margin-bottom:.9rem}
.student-dashboard .student-score-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0 0 1rem}
.student-dashboard .student-score-card{position:relative;display:flex;align-items:center;gap:.8rem;min-height:104px;padding:.9rem 1rem;border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.05);overflow:hidden}
.student-dashboard .student-score-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.student-dashboard .student-score-card .score-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;font-size:1rem}
.student-dashboard .score-copy{min-width:0;display:flex;flex-direction:column;gap:.08rem}
.student-dashboard .score-label{font-size:.76rem;font-weight:800;color:#64748b;letter-spacing:.01em}
.student-dashboard .score-value{font-size:1.65rem;line-height:1.05;font-weight:850;color:#172033;letter-spacing:-.03em}
.student-dashboard .score-copy small{font-size:.65rem;color:#94a3b8;line-height:1.2}
.student-dashboard .score-achievement{background:linear-gradient(135deg,#fff 0%,#f5fff9 100%)}
.student-dashboard .score-achievement::before{background:#16a34a}
.student-dashboard .score-achievement .score-icon{background:#ecfdf3;color:#16a34a}
.student-dashboard .score-violation{background:linear-gradient(135deg,#fff 0%,#fff7f7 100%)}
.student-dashboard .score-violation::before{background:#ef4444}
.student-dashboard .score-violation .score-icon{background:#fff1f2;color:#e11d48}
.student-dashboard .score-total{background:linear-gradient(135deg,#fff 0%,#f7f7ff 100%)}
.student-dashboard .score-total::before{background:var(--primary)}
.student-dashboard .score-total .score-icon{background:var(--primary-light);color:var(--primary)}
.student-dashboard .score-total .score-value{color:var(--primary-dark)}
.student-dashboard .quick-action-grid{margin-bottom:1rem}
@media(max-width:767.98px){
  .student-dashboard .student-score-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .student-dashboard .student-score-card{min-height:92px;padding:.75rem .8rem;border-radius:14px;gap:.65rem}
  .student-dashboard .student-score-card .score-icon{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:.88rem}
  .student-dashboard .score-label{font-size:.68rem}
  .student-dashboard .score-value{font-size:1.38rem}
  .student-dashboard .score-copy small{font-size:.58rem}
  .student-dashboard .score-total{grid-column:1 / -1;min-height:76px}
  .student-dashboard .score-total .score-value{font-size:1.5rem}
}
@media(max-width:390px){
  .student-dashboard .student-score-panel{gap:.5rem}
  .student-dashboard .student-score-card{padding:.65rem .7rem}
  .student-dashboard .student-score-card .score-icon{width:32px;height:32px;flex-basis:32px}
  .student-dashboard .score-value{font-size:1.25rem}
}


/* 510_14_29 — compositor-driven motion reliability */
.sig-css-marquee-x {
    animation: sigMarqueeX var(--public-marquee-duration, 24s) linear infinite !important;
    animation-play-state: running !important;
    transform: translate3d(0,0,0);
}
@keyframes sigMarqueeX {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(var(--public-marquee-distance, -50%),0,0); }
}
.dashboard-info-ticker-css-run {
    animation: dashboardInfoMarqueeCss var(--dashboard-info-duration, 24s) linear infinite !important;
    animation-play-state: running !important;
    transform: translate3d(0,0,0);
}
/* 510_14_30: complete-feed distance, so every information item is shown once per cycle. */
.sig-css-marquee-x, .dashboard-info-ticker-css-run {
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
}
@keyframes dashboardInfoMarqueeCss {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
}
/* Public dashboard ambient motion is compositor-driven; it does not depend on touch/scroll repaint. */
.tv-body:not(.tv-static) .tv-blob.b1 { animation: tvBlobDrift1 12s ease-in-out infinite, blobPulse 7s ease-in-out infinite !important; animation-play-state: running !important; }
.tv-body:not(.tv-static) .tv-blob.b2 { animation: tvBlobDrift2 15s ease-in-out infinite, blobPulse 9s ease-in-out infinite reverse !important; animation-play-state: running !important; }
.tv-body:not(.tv-static) .tv-ticker-label i { animation: tickerIconBounce 2.2s ease-in-out infinite !important; animation-play-state: running !important; }
.tv-body:not(.tv-static) .tv-live-dot { animation: tvLiveDot 1.8s ease-in-out infinite, liveGlow 2.2s ease-in-out infinite !important; animation-play-state: running !important; }
/* Do not let the generic reduced-motion rule accidentally freeze the functional ticker. */
@media (prefers-reduced-motion: reduce) {
    .tv-body .sig-css-marquee-x,
    .dashboard-info-ticker-css-run { animation-duration: var(--public-marquee-duration, 24s) !important; animation-iteration-count: infinite !important; animation-play-state: running !important; }
    .tv-body:not(.tv-static) .tv-blob.b1,
    .tv-body:not(.tv-static) .tv-blob.b2,
    .tv-body:not(.tv-static) .tv-ticker-label i,
    .tv-body:not(.tv-static) .tv-live-dot { animation-play-state: running !important; }
}

/* =========================================================
   510_14_31 — Tata Usaha Operational Workspace
   Scoped to .tu-dashboard so other dashboards remain unchanged.
   ========================================================= */
.tu-dashboard{--tu-blue:#1677e8;--tu-green:#16a085;--tu-orange:#e8790b;--tu-purple:#7047e8;--tu-amber:#d99a05;color:#172033;padding-bottom:2rem}
.tu-dashboard a{text-decoration:none}
.tu-hero{position:relative;overflow:hidden;display:flex;align-items:stretch;justify-content:space-between;gap:1rem;padding:1.45rem 1.55rem;margin-bottom:1.15rem;border-radius:22px;background:linear-gradient(120deg,#4036d7 0%,#365fe6 55%,#24a8dc 100%);color:#fff;box-shadow:0 16px 38px rgba(63,70,220,.18)}
.tu-hero:before,.tu-hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}.tu-hero:before{width:260px;height:260px;right:15%;top:-155px}.tu-hero:after{width:180px;height:180px;right:-55px;bottom:-100px}
.tu-hero-copy,.tu-hero-side{position:relative;z-index:1}.tu-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.12em;opacity:.84;margin-bottom:.45rem}.tu-hero h1{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:850;margin:0 0 .35rem;letter-spacing:-.025em}.tu-hero h1 span{font-size:.9em}.tu-hero p{margin:0;color:rgba(255,255,255,.9);font-size:.88rem}.tu-hero p span{margin:0 .25rem}.tu-hero-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.tu-hero-tags span{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:.72rem;font-weight:750;backdrop-filter:blur(8px)}.tu-hero-tags i{color:#5ff0c0}.tu-hero-side{align-self:center;min-width:190px;display:flex;align-items:center;gap:.65rem;padding:.8rem .9rem;border-radius:15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)}.tu-workload-number{font-size:2.1rem;font-weight:900;line-height:1;color:#fff}.tu-hero-side strong{display:block;font-size:.8rem}.tu-hero-side small{display:block;margin-top:.15rem;font-size:.67rem;color:rgba(255,255,255,.72)}
.tu-section{margin-bottom:1.15rem}.tu-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.65rem}.tu-section-kicker{display:block;color:#8792a8;font-size:.62rem;font-weight:850;letter-spacing:.12em;margin-bottom:.1rem}.tu-section-head h2{margin:0;font-size:1.05rem;font-weight:850;color:#172033;letter-spacing:-.015em}.tu-section-head h2 i{color:#4a49d8;margin-right:.3rem}.tu-section-head h2 em{font-style:normal;font-size:.64rem;background:#fff0dd;color:#d45b08;border-radius:999px;padding:.3rem .55rem;margin-left:.45rem;vertical-align:middle}.tu-link{font-size:.72rem;font-weight:800;color:#3f48d8;white-space:nowrap}.tu-link i{margin-left:.2rem}.tu-muted{font-size:.7rem;color:#9aa4b5}
.tu-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.tu-action-card{display:flex;align-items:center;gap:.7rem;min-width:0;padding:.8rem .85rem;border:1px solid #e4e8f1;border-left:4px solid var(--tu-blue);border-radius:16px;background:#fff;color:#172033;box-shadow:0 6px 18px rgba(25,36,60,.045);transition:transform .18s ease,box-shadow .18s ease}.tu-action-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(25,36,60,.09)}.tu-action-card.tu-green{border-left-color:var(--tu-green)}.tu-action-card.tu-orange{border-left-color:var(--tu-orange)}.tu-action-card.tu-purple{border-left-color:var(--tu-purple)}.tu-action-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:13px;background:#edf4ff;color:var(--tu-blue);font-size:1.15rem}.tu-green .tu-action-icon{background:#eafaf3;color:var(--tu-green)}.tu-orange .tu-action-icon{background:#fff4e7;color:var(--tu-orange)}.tu-purple .tu-action-icon{background:#f2edff;color:var(--tu-purple)}.tu-action-card span:nth-child(2){min-width:0}.tu-action-card strong{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-action-card small{display:block;color:#8b96a9;font-size:.67rem;margin-top:.12rem}.tu-action-go{margin-left:auto;color:#aab2c1;font-size:.85rem}
.tu-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.tu-task-card{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.65rem;padding:.75rem .8rem;border:1px solid #e5e9f1;border-left:4px solid var(--tu-blue);border-radius:15px;background:#fff;color:#172033;box-shadow:0 5px 16px rgba(25,36,60,.04);transition:transform .18s ease,box-shadow .18s ease}.tu-task-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(25,36,60,.08)}.tu-task-card.tu-green{border-left-color:var(--tu-green)}.tu-task-card.tu-orange{border-left-color:var(--tu-orange)}.tu-task-card.tu-purple{border-left-color:var(--tu-purple)}.tu-task-card.tu-amber{border-left-color:var(--tu-amber)}.tu-task-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:var(--tu-blue)}.tu-green .tu-task-icon{background:#eafaf3;color:var(--tu-green)}.tu-orange .tu-task-icon{background:#fff4e7;color:var(--tu-orange)}.tu-purple .tu-task-icon{background:#f2edff;color:var(--tu-purple)}.tu-amber .tu-task-icon{background:#fff8df;color:var(--tu-amber)}.tu-task-copy{min-width:0}.tu-task-copy strong{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-task-copy small{display:block;color:#929bad;font-size:.64rem;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-task-count{text-align:right}.tu-task-count b{display:block;font-size:1.15rem;line-height:1;color:#1b2435}.tu-task-count small{display:block;font-size:.58rem;color:#db650e;margin-top:.15rem;white-space:nowrap}.tu-task-arrow{color:#a8b0be;font-size:.78rem}.tu-empty-priority{display:flex;align-items:center;gap:.8rem;padding:.95rem 1rem;border:1px solid #dcefe6;border-radius:16px;background:#f5fcf8;color:#247d5f;margin-bottom:1.15rem}.tu-empty-priority>i{font-size:1.5rem}.tu-empty-priority strong{display:block;font-size:.8rem}.tu-empty-priority span{display:block;font-size:.68rem;color:#6d9585;margin-top:.1rem}
.tu-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.tu-module{border:1px solid #e3e7ef;border-top:3px solid var(--tu-blue);border-radius:16px;background:#fff;box-shadow:0 5px 16px rgba(25,36,60,.04);overflow:hidden}.tu-module.tu-green{border-top-color:var(--tu-green)}.tu-module.tu-orange{border-top-color:var(--tu-orange)}.tu-module.tu-purple{border-top-color:var(--tu-purple)}.tu-module header{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.7rem .75rem .55rem}.tu-module header span{font-size:.68rem;font-weight:850;color:#344056;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-module header span i{margin-right:.25rem;color:var(--tu-blue)}.tu-green header span i{color:var(--tu-green)}.tu-orange header span i{color:var(--tu-orange)}.tu-purple header span i{color:var(--tu-purple)}.tu-module header a{font-size:.61rem;font-weight:800;color:#647085;white-space:nowrap}.tu-module-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#edf0f5}.tu-module-stats div{padding:.62rem .68rem;background:#fff}.tu-module-stats b{display:block;font-size:1rem;line-height:1.1;color:#172033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-module-stats small{display:block;font-size:.57rem;color:#929bad;margin-top:.2rem;line-height:1.2}
.tu-bottom-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);gap:.8rem;margin-bottom:1rem}.tu-panel{border:1px solid #e2e7ef;border-radius:18px;background:#fff;box-shadow:0 6px 20px rgba(25,36,60,.045);overflow:hidden}.tu-panel>header{padding:.8rem .9rem;border-bottom:1px solid #edf0f4}.tu-panel h2{margin:0;font-size:.92rem;font-weight:850}.tu-panel h2 i{color:#4a49d8;margin-right:.3rem}.tu-activity-list{padding:.35rem}.tu-activity{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.58rem .55rem;border-radius:11px;color:#172033;transition:background .15s ease}.tu-activity:hover{background:#f7f9fc}.tu-activity-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#edf4ff;color:var(--tu-blue)}.tu-activity.tu-green .tu-activity-icon{background:#eafaf3;color:var(--tu-green)}.tu-activity.tu-orange .tu-activity-icon{background:#fff4e7;color:var(--tu-orange)}.tu-activity.tu-purple .tu-activity-icon{background:#f2edff;color:var(--tu-purple)}.tu-activity strong{display:block;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tu-activity small{display:block;font-size:.59rem;color:#98a1b0;margin-top:.12rem}.tu-activity>b{font-size:.58rem;color:#138b68;background:#eafaf3;padding:.28rem .45rem;border-radius:999px;white-space:nowrap}.tu-no-data{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.2rem;color:#9ba5b5;font-size:.7rem}.tu-guide-list{padding:.45rem}.tu-guide-list>div{display:flex;gap:.6rem;padding:.65rem;border-radius:12px}.tu-guide-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:#edf4ff;color:var(--tu-blue)}.tu-guide-icon.green{background:#eafaf3;color:var(--tu-green)}.tu-guide-icon.orange{background:#fff4e7;color:var(--tu-orange)}.tu-guide-list strong{display:block;font-size:.68rem}.tu-guide-list small{display:block;color:#8d98aa;font-size:.59rem;line-height:1.35;margin-top:.12rem}.tu-mini-tools{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}.tu-mini-tools a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid #dfe5ee;border-radius:14px;background:#fff;color:#172033}.tu-mini-tools a>i:first-child{font-size:1.1rem;color:var(--tu-blue)}.tu-mini-tools strong{display:block;font-size:.72rem}.tu-mini-tools small{display:block;font-size:.6rem;color:#909aab;margin-top:.1rem}.tu-mini-tools a>i:last-child{color:#a6afbd}
@media(max-width:1100px){.tu-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tu-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.tu-dashboard{padding-bottom:1rem}.tu-hero{display:block;padding:1rem 1rem 1.05rem;border-radius:18px;margin-bottom:.9rem}.tu-eyebrow{font-size:.56rem}.tu-hero h1{font-size:1.25rem}.tu-hero p{font-size:.7rem;line-height:1.4}.tu-hero-tags{gap:.3rem;margin-top:.7rem}.tu-hero-tags span{font-size:.58rem;padding:.3rem .48rem}.tu-hero-side{margin-top:.8rem;min-width:0;width:max-content;max-width:100%;padding:.55rem .7rem}.tu-workload-number{font-size:1.55rem}.tu-hero-side strong{font-size:.68rem}.tu-hero-side small{font-size:.57rem}.tu-section{margin-bottom:.9rem}.tu-section-head{align-items:center;margin-bottom:.5rem}.tu-section-kicker{font-size:.53rem}.tu-section-head h2{font-size:.88rem}.tu-section-head h2 em{font-size:.55rem;padding:.22rem .4rem}.tu-muted{display:none}.tu-action-grid{grid-template-columns:1fr 1fr;gap:.5rem}.tu-action-card{padding:.62rem .55rem;gap:.45rem;border-radius:13px}.tu-action-icon{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:.95rem}.tu-action-card strong{font-size:.68rem}.tu-action-card small{font-size:.55rem}.tu-action-go{font-size:.7rem}.tu-task-grid{grid-template-columns:1fr;gap:.45rem}.tu-task-card{grid-template-columns:auto 1fr auto auto;padding:.62rem .6rem;border-radius:12px}.tu-task-icon{width:34px;height:34px;border-radius:9px;font-size:.85rem}.tu-task-copy strong{font-size:.68rem}.tu-task-copy small{font-size:.56rem}.tu-task-count b{font-size:1rem}.tu-task-count small{font-size:.5rem}.tu-task-arrow{font-size:.65rem}.tu-module-grid{grid-template-columns:1fr 1fr;gap:.5rem}.tu-module{border-radius:13px}.tu-module header{padding:.58rem .55rem .45rem}.tu-module header span{font-size:.55rem}.tu-module header a{font-size:.52rem}.tu-module-stats b{font-size:.82rem}.tu-module-stats small{font-size:.5rem}.tu-module-stats div{padding:.5rem .55rem}.tu-bottom-grid{grid-template-columns:1fr;gap:.6rem}.tu-panel{border-radius:14px}.tu-panel>header{padding:.65rem .7rem}.tu-panel h2{font-size:.8rem}.tu-activity{padding:.5rem .4rem;grid-template-columns:auto 1fr auto}.tu-activity-icon{width:30px;height:30px;border-radius:8px;font-size:.75rem}.tu-activity strong{font-size:.62rem}.tu-activity small{font-size:.52rem}.tu-activity>b{font-size:.5rem;padding:.22rem .35rem}.tu-guide-list strong{font-size:.62rem}.tu-guide-list small{font-size:.54rem}.tu-mini-tools{grid-template-columns:1fr 1fr;gap:.5rem}.tu-mini-tools a{padding:.58rem .55rem;gap:.45rem}.tu-mini-tools strong{font-size:.6rem}.tu-mini-tools small{font-size:.5rem}.tu-mini-tools a>i:first-child{font-size:.9rem}.tu-link{font-size:.6rem}}
@media(max-width:380px){.tu-module-grid{grid-template-columns:1fr}.tu-action-card{min-height:62px}.tu-action-card small{display:none}.tu-hero-tags span:nth-child(3),.tu-hero-tags span:nth-child(4){display:none}}

/* =========================================================
   510_14_36 — Public dashboard no-touch continuous motion
   All visible scrolling cards use CSS compositor animation.
   JavaScript only prepares the duplicated content and duration.
   ========================================================= */
.tv-auto-track{
    display:flex;
    flex-direction:column;
    width:100%;
    will-change:transform;
}
.tv-auto-set{
    flex:0 0 auto;
    width:100%;
}
.tv-auto-marquee-y{
    animation:tvAutoMarqueeY var(--auto-duration-y,18s) linear infinite !important;
    animation-play-state:running !important;
}
.tv-auto-marquee-bottom-up{
    animation:tvTidakMasukMarqueeBottomUp var(--auto-duration-y,18s) linear infinite !important;
    animation-play-state:running !important;
    will-change:transform;
}
@keyframes tvAutoMarqueeY{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(0,-50%,0)}
}
@keyframes tvTidakMasukMarqueeBottomUp{
    0%{transform:translate3d(0,var(--tv-start-y,0),0)}
    100%{transform:translate3d(0,var(--tv-end-y,-50%),0)}
}
.tv-marquee-y-run{
    animation:tvAutoMarqueeY var(--marquee-duration-y,18s) linear infinite !important;
    animation-play-state:running !important;
    will-change:transform;
}
.tv-guru-track{
    will-change:transform;
}
.tv-panel-body[data-autoscroll],
.tv-kegiatan-list,
.tv-guru-viewport{overflow:hidden}

@media (prefers-reduced-motion: reduce){
    .tv-auto-marquee-y,
    .tv-auto-marquee-bottom-up,
    .tv-marquee-y-run,
    .tv-guru-track{
        animation-duration:var(--auto-duration-y,18s) !important;
        animation-iteration-count:infinite !important;
        animation-play-state:running !important;
    }
}

/* =========================================================
   SIGMAJO UI 1.29.0 — Bright Modern Workspace
   ========================================================= */
:root{
  --sig-blue:#2456e8;--sig-blue-2:#3977f6;--sig-indigo:#6847f5;--sig-cyan:#25bfd9;
  --sig-green:#22b573;--sig-orange:#ff8a2a;--sig-red:#ff5f68;--sig-ink:#111a3d;
  --sig-muted:#687399;--sig-soft:#f4f7ff;--sig-line:#e8edfb;--sig-shadow:0 12px 34px rgba(31,55,120,.08);
}
body.ui-themed{background:#f5f7fd;color:var(--sig-ink)}
.app-navbar{height:58px!important;min-height:58px!important;max-height:58px!important;margin-left:0!important;width:100%!important;left:0!important;right:0!important;position:fixed!important;top:0!important;z-index:1040!important;box-sizing:border-box!important;padding:0 clamp(.75rem, 1.25vw, 1.5rem)!important;background:linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 80%, #0284c7 100%) !important;animation:none!important;border-bottom:1px solid rgba(255, 255, 255, 0.15) !important;box-shadow:0 4px 20px rgba(15, 23, 42, 0.15) !important;}
@media (min-width:768px){.topbar-greeting{display:flex!important;flex-direction:column!important;justify-content:center!important;line-height:normal!important;gap:2px!important}}@media (max-width:767.98px){.topbar-greeting{display:none!important}}.topbar-greeting-title{font-size:.92rem;font-weight:800;color:#ffffff !important;letter-spacing:-.015em;line-height:1.25;margin:0!important}.topbar-greeting-sub{font-size:.72rem;color:rgba(255, 255, 255, 0.82) !important;font-weight:500;margin:0!important;line-height:1.2}
.mobile-brand{display:flex;align-items:center;gap:.6rem;color:#ffffff !important}.mobile-brand strong{color:#ffffff !important}.mobile-brand .brand-logo{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28);color:#ffffff}.mobile-brand .brand-logo img{width:100%;height:100%;object-fit:contain}
.period-pill{align-items:center;gap:.5rem;padding:.32rem .75rem;border:1px solid rgba(255, 255, 255, 0.28) !important;border-radius:10px;color:#ffffff !important;font-size:.75rem;font-weight:650;background:rgba(255, 255, 255, 0.16) !important}
.period-pill *{color:#ffffff !important}
.topbar-notification{width:36px;height:36px;border:1px solid rgba(255, 255, 255, 0.25) !important;border-radius:10px;align-items:center;justify-content:center;color:#ffffff !important;font-size:1rem;background:rgba(255, 255, 255, 0.15) !important}
.topbar-profile{align-items:center;gap:.55rem;border:1px solid rgba(255, 255, 255, 0.28) !important;background:rgba(255, 255, 255, 0.16) !important;color:#ffffff !important;border-radius:10px;padding:.22rem .65rem;min-width:auto}.topbar-profile .avatar{background:#ffffff !important;color:#1e40af !important;font-weight:800;border:0;width:34px;height:34px;font-size:.85rem}.topbar-profile span{display:flex;flex-direction:column;line-height:1.15}.topbar-profile strong{font-size:.78rem;color:#ffffff !important;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-profile small{font-size:.66rem;color:rgba(255, 255, 255, 0.85) !important;margin-top:.1rem}
.btn-logout{background:rgba(255, 255, 255, 0.2) !important;color:#ffffff !important;border:1px solid rgba(255, 255, 255, 0.35) !important;padding:.32rem .75rem;border-radius:8px;font-size:.8rem;height:34px;display:inline-flex;align-items:center;gap:.35rem}.btn-logout:hover,.btn-logout:focus,.btn-logout:active{background:#dc2626 !important;border-color:#ef4444 !important;color:#ffffff !important}
.btn-logout *{color:#ffffff !important}
#sidebarToggle,#sidebarDesktopToggle{background:rgba(255, 255, 255, 0.15) !important;color:#ffffff !important;border:1px solid rgba(255, 255, 255, 0.25) !important}#sidebarToggle:hover,#sidebarDesktopToggle:hover,#sidebarToggle:focus,#sidebarDesktopToggle:focus,#sidebarToggle:active,#sidebarDesktopToggle:active{background:rgba(255, 255, 255, 0.25) !important;color:#ffffff !important;border-color:rgba(255, 255, 255, 0.4) !important;outline:none!important;box-shadow:none!important}
#sidebarToggle i,#sidebarDesktopToggle i{color:#ffffff !important}
.sidebar-scroll{flex:1;overflow-y:auto;padding:.6rem .65rem .6rem;background:transparent;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar .nav-link{color:#ffffff !important;border-radius:8px;padding:.38rem .65rem;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.55rem;transition:all .18s ease;border:1px solid transparent;line-height:1.3}
.sidebar .nav-link i{font-size:.92rem;color:rgba(255,255,255,.95) !important;width:20px;text-align:center;transition:all .18s ease}
.sidebar .nav-link:hover{background:rgba(255,255,255,.18) !important;color:#ffffff !important;border-color:rgba(255,255,255,.24);transform:translateX(2px)}
.sidebar .nav-link:hover i{color:#ffffff !important}
.sidebar .nav-link.active{background:#ffffff !important;color:#1d4ed8 !important;font-weight:750 !important;box-shadow:0 4px 14px rgba(0,0,0,.22) !important}
.sidebar .nav-link.active i{color:#1d4ed8 !important}
.sidebar-group{margin:.18rem 0}.sidebar-group summary{padding:.38rem .6rem !important;font-size:.73rem !important;font-weight:800 !important;letter-spacing:.04em;border:1px solid rgba(255,255,255,.18) !important;border-radius:8px !important;background:rgba(255,255,255,.1) !important;color:#ffffff !important}
.sidebar-group summary:hover{background:rgba(255,255,255,.18) !important;color:#ffffff !important;border-color:rgba(255,255,255,.3) !important}
.sidebar-group summary span{display:flex;align-items:center;gap:.45rem;color:#ffffff !important;font-weight:800 !important}
.sidebar-group summary span i{color:#ffffff !important;font-size:.85rem}
.sidebar-group .group-chevron{font-size:.72rem;color:rgba(255,255,255,.82) !important;transition:transform .2s ease}
.sidebar-group details[open] .group-chevron{transform:rotate(180deg);color:#ffffff !important}
.sidebar-subnav{border-left:2px solid rgba(255,255,255,.28) !important;margin:.15rem 0 .2rem .55rem !important;padding:.15rem 0 .15rem .45rem !important;display:flex;flex-direction:column;gap:.1rem !important}
.sidebar-subnav .nav-link{padding:.32rem .55rem !important;font-size:.815rem !important;font-weight:600 !important;color:rgba(255,255,255,.92) !important}
.sidebar-subnav .nav-link i{font-size:.88rem !important;color:rgba(255,255,255,.85) !important}
.sidebar-subnav .nav-link:hover{color:#ffffff !important;background:rgba(255,255,255,.16) !important}
.sidebar-subnav .nav-link.active{background:#ffffff !important;color:#1d4ed8 !important;font-weight:750 !important}
.sidebar-subnav .nav-link.active i{color:#1d4ed8 !important}
.sidebar-group-role{margin-top:.35rem !important;border:none !important;border-radius:0 !important;background:transparent !important}
.sidebar-role-badge{background:rgba(255,255,255,.2) !important;color:#ffffff !important;border:1px solid rgba(255,255,255,.35) !important;border-radius:999px;font-size:.58rem;font-weight:800;padding:.18rem .45rem}
.sidebar-account{margin:.4rem .65rem .4rem;padding:.55rem .65rem;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:.55rem}
.sidebar-account-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff;color:#1d4ed8;font-weight:800;font-size:.82rem}
.sidebar-account-copy{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.2}
.sidebar-account-copy strong{font-size:.76rem;color:#ffffff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-account-copy span{font-size:.64rem;color:rgba(255,255,255,.8);font-weight:600}
.sidebar-account-exit{color:rgba(255,255,255,.85);padding:.25rem;transition:color .18s ease}.sidebar-account-exit:hover{color:#ff8a9a}
.sidebar-version{display:flex;justify-content:space-between;padding:.15rem .75rem .55rem;font-size:.62rem;color:rgba(255,255,255,.7);font-weight:600}
.card,.modern-panel{border:1px solid var(--sig-line);box-shadow:var(--sig-shadow);background:#fff}
.form-control,.form-select{background:#fff;border-color:#dfe5f1;border-radius:12px}.form-control:focus,.form-select:focus{border-color:#83a8ff;box-shadow:0 0 0 .2rem rgba(36,86,232,.1)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 7px 18px rgba(79,70,229,.18)}
.modern-dashboard{max-width:1480px;margin:0 auto}

body.ui-themed .sidebar {
    background: linear-gradient(168deg,#1d4ed8 0%,#2563eb 45%,#1e40af 100%) !important;
    color: #ffffff !important;
    border-right: 0 !important;
}
body.ui-themed .sidebar-brand-copy strong { color: #ffffff !important; }
body.ui-themed .sidebar-brand-copy span { color: rgba(255,255,255,.85) !important; }
body.ui-themed .sidebar-scroll { background: transparent !important; }
body.ui-themed .sidebar .nav-link {
    color: #ffffff !important;
    font-weight: 600 !important;
}
body.ui-themed .sidebar .nav-link i {
    color: rgba(255,255,255,.95) !important;
}
body.ui-themed .sidebar .nav-link:hover {
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}
body.ui-themed .sidebar .nav-link:hover i {
    color: #ffffff !important;
}
body.ui-themed .sidebar .nav-link.active {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
}
body.ui-themed .sidebar .nav-link.active i { color: #1d4ed8 !important; }
body.ui-themed .sidebar-group summary {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}
body.ui-themed .sidebar-group summary span {
    color: #ffffff !important;
    font-weight: 800 !important;
}
body.ui-themed .sidebar-group summary span i {
    color: #ffffff !important;
}
body.ui-themed .sidebar-subnav { border-left-color: rgba(255,255,255,.28) !important; }
body.ui-themed .sidebar-account { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important; }
body.ui-themed .sidebar-account-avatar { background:#ffffff !important; color:#1d4ed8 !important; }
body.ui-themed .sidebar-account-copy strong { color:#ffffff !important; }
body.ui-themed .sidebar-account-copy span { color:rgba(255,255,255,.8) !important; }
body.ui-themed .sidebar-version { color:rgba(255,255,255,.7) !important; }
body.ui-themed .sidebar-role-badge { background: rgba(255,255,255,.2) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.35) !important; }

/* Dashboard blocks must never remain transparent/invisible when a
   browser or OS accessibility setting suppresses entrance animation. */
.teacher-modern-dashboard .animate-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

/* Keep the workspace usable on narrow desktop/tablet widths. */
@media (max-width: 1199.98px) {
    .app-main { padding-left: 1rem !important; padding-right: 1rem !important; }
    .teacher-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .app-main { padding: .75rem !important; }
    .app-navbar { padding-left: .7rem; padding-right: .7rem; }
    .teacher-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .teacher-main-grid { grid-template-columns: 1fr; }
    .schedule-row { grid-template-columns: 54px minmax(0,1fr); }
    .schedule-action { grid-column: 2; justify-self: start; }
}
@media (max-width: 479.98px) {
    .teacher-kpi-grid { grid-template-columns: 1fr; }
    .modern-quick-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .modern-quick-grid a { min-width: 0; }
    .modern-quick-grid span { font-size: .56rem; }
}

/* =========================================================
   SIGMAJO UI 1.30.0 — Responsive Layout & Proportionality
   Fix desktop flow, zoom/scaling, laptop widths and mobile.
   CSS-only: no database/schema changes.
========================================================= */
:root{--sig-sidebar-w:260px;--sig-content-max:1520px}
html,body{max-width:100%;overflow-x:hidden}
body.ui-themed{background:#f4f7ff;min-width:0}

/* Desktop: sidebar is a true fixed rail. Header/content occupy the remaining width. */
@media (min-width: 992px){
  .app-navbar{
    margin-left:0!important;
    left:240px!important;
    right:0!important;
    width:calc(100% - 240px)!important;
    max-width:none!important;
    box-sizing:border-box!important;
    position:fixed!important;
    top:0!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    z-index:1030!important;
    transition:left 0.25s ease, width 0.25s ease !important;
  }
  body.sidebar-mini .app-navbar {
    left:48px!important;
    width:calc(100% - 48px)!important;
  }
  .app-shell{display:block!important;margin-top:58px!important;min-height:calc(100vh - 58px)!important;width:100%;}
  .app-shell>.sidebar,
  .sidebar,
  .app-sidebar{
    position:fixed!important;left:0!important;top:0!important;width:var(--sig-sidebar-w, 240px)!important;
    height:100vh!important;min-height:100vh!important;max-height:100vh!important;margin:0!important;
    transform:none!important;z-index:1040!important;
  }
  body.sidebar-mini .sidebar,
  body.sidebar-mini .app-sidebar {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
  .app-shell>.app-main{
    margin-left:var(--sig-sidebar-w, 240px)!important;
    width:calc(100% - var(--sig-sidebar-w, 240px))!important;
    max-width:none!important;min-width:0!important;
    padding:clamp(16px,1.35vw,24px) clamp(16px,1.55vw,28px) 32px!important;
    overflow-x:hidden!important;
  }
  body.sidebar-mini .app-shell>.app-main,
  body.sidebar-mini main.app-main {
    margin-left: 48px !important;
    width: calc(100% - 48px) !important;
  }
  .sidebar-scroll{min-height:0;overflow-y:auto;overflow-x:hidden}
}

/* Laptop / reduced viewport: keep everything inside the available content width. */
@media (min-width:992px) and (max-width:1399.98px){
  :root{--sig-sidebar-w:248px}
  body.sidebar-mini { --sig-sidebar-w:48px !important; }
  .teacher-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .teacher-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr);gap:12px}
  .teacher-kpi{min-width:0;padding:13px}
  .kpi-copy{min-width:0}
  .kpi-copy strong,.kpi-copy small,.kpi-copy em,.kpi-link{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .schedule-row{grid-template-columns:58px minmax(0,1fr) auto;gap:10px}
  .schedule-info{min-width:0}
}

/* Medium laptop / tablet landscape: one main column avoids clipped right panels. */
@media (min-width:992px) and (max-width:1199.98px){
  .teacher-main-grid{grid-template-columns:minmax(0,1fr)}
  .teacher-side-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .class-summary-grid{grid-template-columns:1.1fr repeat(3,minmax(0,1fr))}
}

/* Mobile/tablet: sidebar becomes an off-canvas drawer and header is full width. */
@media (max-width:991.98px){
  .app-navbar{
    margin-left:0!important;width:100%!important;max-width:none!important;
    left:0!important;right:0!important;position:fixed!important;top:0!important;
    height:58px!important;min-height:58px!important;max-height:58px!important;padding:0 clamp(.5rem, 1vw, .85rem)!important;
    z-index:1040!important;
  }
  .app-shell{display:block!important;width:100%;margin-top:58px!important;min-height:calc(100vh - 58px)!important}
  .app-shell>.sidebar,
  .sidebar,
  .app-sidebar{
    position:fixed!important;left:0!important;top:58px!important;width:min(300px,86vw)!important;
    height:calc(100vh - 58px)!important;min-height:calc(100vh - 58px)!important;max-height:calc(100vh - 58px)!important;margin:0!important;
    transform:translateX(-105%)!important;z-index:1038!important;
  }
  .app-shell>.sidebar.show,
  .sidebar.show,
  .app-sidebar.show{transform:translateX(0)!important}
  .sidebar-overlay{inset:58px 0 0 0!important;top:58px!important;z-index:1035!important}
  .app-shell>.app-main{
    margin-left:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    padding:clamp(12px,2.5vw,20px)!important;overflow-x:hidden!important;
  }
  .modern-dashboard{width:100%;max-width:1520px;margin:0 auto}
  .teacher-kpi-grid,.teacher-main-grid,.teacher-side-stack,.class-summary-grid,.modern-quick-grid{min-width:0}
  .teacher-kpi,.modern-panel,.teacher-inspiration-card,.teacher-banner,.schedule-row,.class-summary{min-width:0;max-width:100%}
}

/* Strongly responsive teacher dashboard. */
@media (max-width:991.98px){
  .teacher-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .teacher-main-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .teacher-side-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .teacher-kpi{min-height:118px;padding:12px;gap:10px}
  .kpi-icon{width:56px;min-width:56px;height:56px}
  .kpi-copy{min-width:0}
  .kpi-copy strong{font-size:1.45rem}
  .schedule-row{grid-template-columns:58px minmax(0,1fr) auto;gap:10px}
  .schedule-action{justify-self:end}
}
@media (max-width:720px){
  .teacher-kpi-grid{grid-template-columns:1fr 1fr;gap:9px}
  .teacher-side-stack{grid-template-columns:1fr}
  .teacher-kpi{min-height:104px;padding:10px}
  .kpi-icon{width:48px;min-width:48px;height:48px;font-size:1.15rem}
  .kpi-copy strong{font-size:1.25rem}
  .kpi-copy small{font-size:.61rem}
  .kpi-link{font-size:.58rem}
  .modern-panel-head{padding:11px 12px}
  .modern-panel-head h5{font-size:.84rem}
  .schedule-row{grid-template-columns:52px minmax(0,1fr);gap:9px;padding:9px 0}
  .schedule-action{grid-column:2;justify-self:start;margin-top:2px}
  .schedule-info span{white-space:normal;line-height:1.45}
  .class-summary-grid{grid-template-columns:1fr 1fr}
  .class-metric{padding:9px 12px}
  .teacher-banner{padding:14px 16px;min-height:92px}
}
@media (max-width:480px){
  .app-main{padding:10px!important}
  .teacher-kpi-grid{grid-template-columns:1fr}
  .teacher-kpi{min-height:92px}
  .teacher-kpi .kpi-copy{grid-template-columns:auto 1fr}
  .kpi-copy strong{font-size:1.3rem}
  .class-summary-grid{grid-template-columns:1fr}
  .class-identity{min-height:86px}
  .modern-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px}
  .modern-quick-grid i{width:36px;height:36px;font-size:1rem}
  .modern-quick-grid span{font-size:.55rem;line-height:1.2}
  .teacher-banner>i{display:none}
}

/* Generic pages: prevent long controls/cards from forcing horizontal overflow. */
.app-main .row{--bs-gutter-x:1rem;min-width:0}
.app-main .card,.app-main .card-body,.app-main .table-responsive,.app-main form{min-width:0;max-width:100%}
.app-main .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.app-main img,.app-main iframe,.app-main video{max-width:100%}
.app-main .btn-group{max-width:100%;flex-wrap:wrap}
.app-main .d-flex{min-width:0}
.app-main .text-truncate{min-width:0}

/* Respect reduced-motion and avoid content disappearing on slow/mobile browsers. */
@media (prefers-reduced-motion:reduce){
  .animate-in,.fade-on-scroll{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

/* 1.33.0 — Teacher attendance workspace */
.attendance-page{max-width:1480px;margin:0 auto;padding:0 0 1.5rem;color:#16213f}
.attendance-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.attendance-eyebrow{font-size:.68rem;font-weight:850;letter-spacing:.09em;color:#2563eb;margin-bottom:.3rem}
.attendance-title{font-size:clamp(1.45rem,2.3vw,2rem);font-weight:850;letter-spacing:-.035em;margin:0;color:#14213d}
.attendance-subtitle{margin:.28rem 0 0;max-width:760px;color:#70809d;font-size:.84rem;line-height:1.55}
.attendance-date{display:flex;align-items:center;gap:.5rem;background:#eef4ff;color:#2456c5;border:1px solid #d6e3ff;border-radius:13px;padding:.68rem .85rem;font-size:.76rem;font-weight:800;white-space:nowrap}
.attendance-sessions,.attendance-workspace{background:#eef3fa;border:1px solid #d7e1ef;border-radius:20px;box-shadow:0 9px 26px rgba(31,52,91,.06);margin-bottom:1rem;overflow:hidden}
.attendance-section-head,.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid #d7e1ef;background:#e5edf7}
.attendance-section-head h2,.workspace-head h2{margin:.12rem 0 0;font-size:1rem;font-weight:850;color:#172744}
.section-kicker{font-size:.61rem;letter-spacing:.08em;font-weight:850;color:#71809b}
.session-auto-note{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.38rem .58rem;background:#fff;color:#52709c;border:1px solid #d8e4f3;font-size:.65rem;font-weight:800;white-space:nowrap}
.session-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding:.9rem}
.session-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #d8e2ef;border-radius:16px;padding:.85rem;box-shadow:0 3px 10px rgba(42,62,99,.04);transition:.18s ease;min-width:0}
.session-card:hover{transform:translateY(-2px);border-color:#8fb2f4;box-shadow:0 10px 22px rgba(42,82,157,.11)}
.session-card.is-selected{border:2px solid #3b73e8;padding:calc(.85rem - 1px);box-shadow:0 9px 22px rgba(37,99,235,.13)}
.session-card.is-live{background:linear-gradient(145deg,#f9fcff,#edf5ff)}
.session-top{display:flex;justify-content:space-between;gap:.4rem;align-items:center;margin-bottom:.65rem}.session-time{font-size:.72rem;font-weight:850;color:#42618f}.live-badge,.next-badge{font-size:.55rem;font-weight:900;border-radius:999px;padding:.25rem .4rem;white-space:nowrap}.live-badge{background:#dcfce7;color:#15803d}.live-badge span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:3px}.next-badge{background:#e8efff;color:#2f62c7}
.session-class{font-size:1rem;font-weight:850;color:#172744;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-mapel{display:flex;align-items:center;gap:.4rem;color:#657895;font-size:.73rem;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-mapel i{color:#5b7fe2}.session-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.6rem;border-top:1px solid #edf1f6;color:#8290a8;font-size:.62rem}.session-footer i{color:#2563eb}
.workspace-head{background:#fff;border-bottom-color:#e2e8f2}.workspace-title-wrap{display:flex;align-items:center;gap:.75rem;min-width:0}.workspace-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#347cf0,#2158d7);color:#fff;font-size:1.15rem;box-shadow:0 7px 16px rgba(37,99,235,.18);flex:none}.workspace-head h2{font-size:1.15rem}.workspace-head p{margin:.18rem 0 0;color:#7a89a3;font-size:.72rem}.workspace-status{font-size:.65rem;font-weight:850;padding:.45rem .62rem;border-radius:999px;white-space:nowrap}.workspace-status.berlangsung{background:#dcfce7;color:#15803d}.workspace-status.berikutnya{background:#e9f0ff;color:#245dcc}.workspace-status.selesai{background:#edf1f6;color:#697a93}
.attendance-tip{display:flex;gap:.65rem;align-items:flex-start;margin:1rem 1rem .7rem;padding:.72rem .8rem;background:#e6f5fb;border:1px solid #c7e5f0;border-radius:13px;color:#245d73}.attendance-tip>i{font-size:1rem;color:#0ea5e9;margin-top:.08rem}.attendance-tip div{display:flex;flex-direction:column;gap:.15rem}.attendance-tip strong{font-size:.72rem}.attendance-tip span{font-size:.68rem;line-height:1.5;color:#4b7182}
.attendance-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;background:#fff;border-top:1px solid #e2e8f2;border-bottom:1px solid #e2e8f2}.attendance-toolbar>div{display:flex;flex-direction:column}.attendance-toolbar strong{font-size:.82rem}.attendance-toolbar span{font-size:.64rem;color:#8190a8;margin-top:.12rem}.check-all{display:flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:800;color:#566985;cursor:pointer}.check-all input{accent-color:#2563eb}
.student-list{padding:.55rem .9rem;background:#f7f9fc}.student-row{display:grid;grid-template-columns:34px 40px minmax(170px,1.1fr) minmax(190px,1.7fr) 44px;align-items:center;gap:.65rem;padding:.65rem .7rem;background:#fff;border:1px solid #dce4ef;border-radius:13px;margin:.42rem 0;box-shadow:0 2px 7px rgba(39,57,91,.035);min-width:0}.student-row:hover{border-color:#b9cbe6;box-shadow:0 7px 16px rgba(39,57,91,.06)}.student-row.is-locked{background:#f1f4f8}.student-number{font-size:.64rem;color:#91a0b8;text-align:center}.student-avatar{width:36px;height:36px;border-radius:11px;background:#e9f1ff;color:#2860ce;display:flex;align-items:center;justify-content:center;font-weight:850;font-size:.76rem}.student-info{min-width:0;display:flex;flex-direction:column}.student-info strong{font-size:.74rem;color:#1c2b48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-info span{font-size:.61rem;color:#8997ad;margin-top:.14rem}.student-status{min-width:0;display:flex;flex-direction:column;gap:.18rem}.status-chip{display:inline-flex;align-items:center;gap:.3rem;width:max-content;max-width:100%;padding:.28rem .48rem;border-radius:999px;font-size:.58rem;font-weight:850}.student-status small{font-size:.58rem;color:#8a97ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-ready{background:#e9f8ef;color:#18814b}.status-bolos{background:#fee9e9;color:#c53c3c}.status-info{background:#e7f5fb;color:#0b7695}.status-sakit{background:#fff3d9;color:#9a6900}.status-izin{background:#e8f0ff;color:#285dc4}.status-alpa{background:#fee8e8;color:#c43e3e}.locked-mark{width:34px;height:34px;border-radius:10px;background:#e3e9f1;color:#7a899f;display:flex;align-items:center;justify-content:center}
.absence-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer}.absence-toggle input{position:absolute;opacity:0}.absence-toggle span{width:30px;height:30px;border-radius:10px;border:2px solid #c7d3e4;background:#fff;display:block;position:relative;transition:.16s}.absence-toggle span:after{content:'×';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:1rem;opacity:0}.absence-toggle input:checked+span{background:#ef5b62;border-color:#ef5b62}.absence-toggle input:checked+span:after{opacity:1}.absence-toggle input:focus-visible+span{outline:3px solid rgba(37,99,235,.18)}
.attendance-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;background:#fff;border-top:1px solid #e1e7f0}.action-help{display:flex;align-items:center;gap:.45rem;color:#7b8aa1;font-size:.62rem}.action-help i{color:#f59e0b}.attendance-save{background:#2563eb;border-color:#2563eb;color:#fff;border-radius:11px;font-weight:850;padding:.65rem .9rem;box-shadow:0 7px 16px rgba(37,99,235,.18)}.attendance-save:hover{background:#174fc6;border-color:#174fc6;color:#fff}
.attendance-empty{padding:3rem 1rem;text-align:center;background:#fff;border:1px solid #d9e2ee;border-radius:18px}.attendance-empty.compact{margin:1rem}.attendance-empty-icon{width:58px;height:58px;border-radius:17px;background:#e9f1ff;color:#4b78d9;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin:0 auto .8rem}.attendance-empty h3{font-size:1rem;font-weight:850;margin:0;color:#253555}.attendance-empty p{font-size:.72rem;color:#8290a7;margin:.3rem 0 0}
@media(max-width:1100px){.session-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-row{grid-template-columns:30px 38px minmax(150px,1fr) minmax(170px,1.3fr) 40px}}
@media(max-width:767px){.attendance-page{padding:0 .05rem}.attendance-head{align-items:stretch}.attendance-date{width:100%;justify-content:center}.attendance-section-head,.workspace-head{padding:.8rem}.session-grid{grid-template-columns:1fr;padding:.7rem}.session-auto-note{display:none}.session-card{padding:.75rem}.attendance-tip{margin:.75rem .7rem}.attendance-toolbar{align-items:flex-start;flex-direction:column;padding:.75rem}.student-list{padding:.4rem .55rem}.student-row{grid-template-columns:28px 36px minmax(0,1fr) 40px;gap:.5rem;padding:.58rem}.student-status{grid-column:3/-1;grid-row:2}.student-status small{white-space:normal}.student-action{grid-column:4;grid-row:1;justify-self:end}.student-number{grid-row:1}.student-avatar{grid-row:1}.student-info{grid-row:1}.attendance-actions{flex-direction:column;align-items:stretch}.action-help{align-items:flex-start}.attendance-save{width:100%}}
@media(max-width:480px){.attendance-title{font-size:1.35rem}.attendance-subtitle{font-size:.72rem}.workspace-title-wrap{gap:.55rem}.workspace-icon{width:38px;height:38px;border-radius:11px;font-size:1rem}.workspace-head h2{font-size:.92rem}.workspace-head p{font-size:.62rem}.student-row{grid-template-columns:24px 34px minmax(0,1fr) 34px}.student-avatar{width:32px;height:32px}.absence-toggle span{width:28px;height:28px}.attendance-section-head h2{font-size:.9rem}}

/* =========================================================
   1.34.0 — Global Page Title System
   Konsistensi header judul untuk Admin / Guru / Siswa / TU.
   Fokus: bold, jelas, modern, nyaman di mata, dan responsif.
========================================================= */
:root{
    --page-title-bg:#edf4ff;
    --page-title-border:#d7e5fb;
    --page-title-accent:#2563eb;
    --page-title-text:#14213d;
    --page-title-muted:#71809a;
}

/* Every main page gets one consistent visual hierarchy. */
main.app-main h1,
main.app-main .page-title,
main.app-main .content-title,
main.app-main .page-heading h1,
main.app-main .content-heading h1{
    color:var(--page-title-text);
    font-weight:800;
    letter-spacing:-.035em;
    line-height:1.12;
}

/* Give common page-heading wrappers a subtle blue-tinted surface without
   changing the application's existing card system. */
main.app-main > h1:first-child,
main.app-main > .page-title:first-child,
main.app-main > .content-title:first-child,
main.app-main > .page-heading:first-child,
main.app-main > .content-heading:first-child{
    position:relative;
    margin:0 0 1.15rem;
    padding:1rem 1.15rem 1rem 1.35rem;
    background:linear-gradient(135deg,#f4f8ff 0%,var(--page-title-bg) 100%);
    border:1px solid var(--page-title-border);
    border-radius:16px;
    box-shadow:0 5px 16px rgba(37,99,235,.045);
}

main.app-main > h1:first-child::before,
main.app-main > .page-title:first-child::before,
main.app-main > .content-title:first-child::before,
main.app-main > .page-heading:first-child::before,
main.app-main > .content-heading:first-child::before{
    content:"";
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:5px;
    border-radius:0 8px 8px 0;
    background:linear-gradient(180deg,#2563eb,#38bdf8);
}

/* If a page uses a heading inside a flex/header wrapper, keep it visually
   strong without forcing a new background around the entire wrapper. */
main.app-main .page-heading h1,
main.app-main .content-heading h1{
    font-size:clamp(1.35rem,2.2vw,2rem);
    margin:0;
}

main.app-main h1:not(:first-child),
main.app-main h2{
    font-weight:800;
    letter-spacing:-.025em;
}

main.app-main h2{
    color:#1b2b49;
}

/* Common subtitles/descriptions remain softer for comfortable scanning. */
main.app-main h1 + p,
main.app-main .page-title + p,
main.app-main .content-title + p,
main.app-main .page-heading p,
main.app-main .content-heading p{
    color:var(--page-title-muted);
}

/* Compact screens: keep the title panel proportional and avoid oversized
   vertical whitespace. */
@media(max-width:767.98px){
    main.app-main > h1:first-child,
    main.app-main > .page-title:first-child,
    main.app-main > .content-title:first-child,
    main.app-main > .page-heading:first-child,
    main.app-main > .content-heading:first-child{
        margin-bottom:.9rem;
        padding:.8rem .85rem .8rem 1rem;
        border-radius:13px;
    }
    main.app-main > h1:first-child::before,
    main.app-main > .page-title:first-child::before,
    main.app-main > .content-title:first-child::before,
    main.app-main > .page-heading:first-child::before,
    main.app-main > .content-heading:first-child::before{
        top:12px;
        bottom:12px;
        width:4px;
    }
}

@media(prefers-reduced-motion:reduce){
    main.app-main > h1:first-child,
    main.app-main > .page-title:first-child,
    main.app-main > .content-title:first-child,
    main.app-main > .page-heading:first-child,
    main.app-main > .content-heading:first-child{transition:none!important}
}

/* =========================================================
   1.35.0 — Global Page Title Design System
   Applies the same title treatment to regular pages across
   Admin, Guru, Siswa, and Tata Usaha without touching
   dashboard-specific hero/section headings.
   ========================================================= */
.app-main .sig-page-title {
    display: block;
    width: 100%;
    margin: 0 0 1.05rem !important;
    padding: .95rem 1.15rem .9rem 1.15rem;
    border: 1px solid #dbe7fb;
    border-left: 5px solid #2563eb;
    border-radius: 16px;
    background: linear-gradient(90deg, #edf5ff 0%, #f5f9ff 58%, #f8fbff 100%);
    color: #14254a;
    font-size: clamp(1.35rem, 2.15vw, 1.85rem) !important;
    font-weight: 850 !important;
    line-height: 1.18;
    letter-spacing: -.025em;
    box-shadow: 0 7px 20px rgba(37, 99, 235, .055);
}
.app-main .sig-page-title::before {
    content: '';
    display: inline-block;
    width: .42rem;
    height: .42rem;
    margin: 0 .55rem .16rem .05rem;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 5px #dceaff;
    vertical-align: middle;
}
.app-main .sig-page-title + p.text-muted,
.app-main .sig-page-title + .text-muted {
    margin-top: -.45rem;
    margin-bottom: 1.1rem;
    color: #71809a !important;
    font-size: .88rem;
    line-height: 1.55;
}

/* Common page-header wrappers used by older CRUD/report pages. */
.app-main .page-header,
.app-main .page-title-wrap,
.app-main .content-header {
    padding: .95rem 1.15rem;
    margin-bottom: 1rem;
    border: 1px solid #dbe7fb;
    border-left: 5px solid #2563eb;
    border-radius: 16px;
    background: linear-gradient(90deg, #edf5ff 0%, #f7faff 100%);
    box-shadow: 0 7px 20px rgba(37, 99, 235, .05);
}
.app-main .page-header h1,
.app-main .page-header h2,
.app-main .page-header h3,
.app-main .page-header h4,
.app-main .page-header h5,
.app-main .page-title-wrap h1,
.app-main .page-title-wrap h2,
.app-main .page-title-wrap h3,
.app-main .page-title-wrap h4,
.app-main .page-title-wrap h5,
.app-main .content-header h1,
.app-main .content-header h2,
.app-main .content-header h3,
.app-main .content-header h4,
.app-main .content-header h5 {
    margin: 0 !important;
    color: #14254a;
    font-weight: 850 !important;
    letter-spacing: -.025em;
}

/* Keep section/card headings distinct from the page title. */
.app-main .card-header h1,
.app-main .card-header h2,
.app-main .card-header h3,
.app-main .card-header h4,
.app-main .card-header h5,
.app-main .card-header h6 {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 991.98px) {
    .app-main .sig-page-title {
        font-size: 1.35rem !important;
        padding: .82rem .95rem;
        border-radius: 14px;
    }
}
@media (max-width: 575.98px) {
    .app-main .sig-page-title {
        margin-bottom: .8rem !important;
        padding: .72rem .8rem;
        font-size: 1.12rem !important;
        border-left-width: 4px;
        border-radius: 12px;
    }
    .app-main .sig-page-title::before {
        width: .32rem;
        height: .32rem;
        margin-right: .45rem;
        box-shadow: 0 0 0 4px #dceaff;
    }
    .app-main .sig-page-title + p.text-muted,
    .app-main .sig-page-title + .text-muted {
        font-size: .76rem;
        margin-top: -.25rem;
        margin-bottom: .8rem;
    }
}

/* =========================================================
   1.36.0 — SIGMAJO Universal UI System
   Konsistensi visual untuk seluruh menu + submenu Admin/Guru/Siswa/TU.
   Tidak mengubah logic, struktur database, atau markup wajib halaman.
   ========================================================= */
:root {
    --sig-blue: #2563eb;
    --sig-blue-2: #3b82f6;
    --sig-purple: #7c3aed;
    --sig-purple-2: #8b5cf6;
    --sig-ink: #172554;
    --sig-muted: #64748b;
    --sig-page: #f5f7fc;
    --sig-card: #ffffff;
    --sig-border: #e5eaf5;
    --sig-shadow: 0 8px 26px rgba(30, 64, 175, .075);
    --sig-shadow-hover: 0 14px 34px rgba(37, 99, 235, .13);
    --sig-gradient: linear-gradient(115deg, #1557d8 0%, #315eea 48%, #7c3aed 100%);
}

/* Page canvas: slightly cool background so white cards are clearly separated. */
body {
    background:
        radial-gradient(circle at 8% 0%, rgba(59,130,246,.07), transparent 28%),
        radial-gradient(circle at 96% 8%, rgba(124,58,237,.055), transparent 26%),
        var(--sig-page);
}

main.app-main {
    background: transparent;
    padding: clamp(1rem, 1.65vw, 1.75rem);
    overflow-x: hidden;
}

/* ---------- Universal page heading ---------- */
.app-main .sig-page-title,
.app-main .page-header,
.app-main .page-title-wrap,
.app-main .content-header {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(96, 125, 190, .16);
    border-left: 4px solid var(--sig-blue);
    background:
        radial-gradient(circle at 100% 0%, rgba(124,58,237,.10), transparent 34%),
        linear-gradient(105deg, #edf5ff 0%, #f7f8ff 62%, #f5f1ff 100%);
    box-shadow: 0 7px 22px rgba(37,99,235,.055);
}

.app-main .sig-page-title::after,
.app-main .page-header::after,
.app-main .page-title-wrap::after,
.app-main .content-header::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    top: -90px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.12));
    pointer-events: none;
}

.app-main .sig-page-title {
    font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--sig-ink);
    padding: .78rem 1.05rem;
    border-radius: 15px;
    margin-bottom: .85rem !important;
}

.app-main .sig-page-title::before {
    width: .38rem;
    height: .38rem;
    margin-right: .52rem;
    background: var(--sig-blue);
    box-shadow: 0 0 0 5px #dce9ff;
}

/* Ensure hero banners are never overridden by sig-page-title or header capsules */
.dashboard-hero h1, .dashboard-hero h2, .dashboard-hero h3, .dashboard-hero h4, .dashboard-hero h5, .dashboard-hero h6,
.dashboard-hero .sig-page-title,
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner h4, .hero-banner h5, .hero-banner h6,
.hero-banner .sig-page-title,
.teacher-hero-banner h1, .teacher-hero-banner h2, .teacher-hero-banner h3, .teacher-hero-banner h4, .teacher-hero-banner h5, .teacher-hero-banner h6,
.teacher-hero-banner .sig-page-title,
[class*="hero"] .sig-page-title {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
}

.dashboard-hero h4::before,
.dashboard-hero h4::after,
.dashboard-hero .sig-page-title::before,
.dashboard-hero .sig-page-title::after,
.hero-banner h4::before,
.hero-banner h4::after,
.hero-banner .sig-page-title::before,
.hero-banner .sig-page-title::after,
[class*="hero"] .sig-page-title::before,
[class*="hero"] .sig-page-title::after,
[class*="hero"] h4::before,
[class*="hero"] h4::after {
    display: none !important;
    content: none !important;
}

/* ---------- Universal cards / panels ---------- */
.app-main .card,
.app-main .panel,
.app-main .content-card,
.app-main .section-card,
.app-main .table-card,
.app-main .form-card {
    background: var(--sig-card);
    border: 1px solid var(--sig-border);
    border-radius: 17px;
    box-shadow: var(--sig-shadow);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.app-main .card:hover,
.app-main .panel:hover,
.app-main .content-card:hover,
.app-main .section-card:hover,
.app-main .table-card:hover,
.app-main .form-card:hover {
    border-color: #d9e2f5;
    box-shadow: var(--sig-shadow-hover);
}

.app-main .card-header,
.app-main .panel-header,
.app-main .section-header,
.app-main .table-card-header {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    border-bottom: 1px solid #e9edf6;
    color: var(--sig-ink);
    padding: .9rem 1.05rem;
}

.app-main .card-header::before,
.app-main .panel-header::before,
.app-main .section-header::before,
.app-main .table-card-header::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 2px;
    vertical-align: 2px;
    background: linear-gradient(135deg, var(--sig-blue), var(--sig-purple));
    box-shadow: 0 0 0 3px var(--ux-line, #edf3ff);
}

.app-main .card-body,
.app-main .panel-body,
.app-main .section-body {
    background: var(--ux-surface);
}

/* ---------- KPI/stat cards: distinguishable but still one theme ---------- */
.app-main .card-stat,
.app-main .stat-card,
.app-main .kpi-card,
.app-main .summary-card,
.app-main .metric-card {
    position: relative;
    isolation: isolate;
    border: 1px solid #e1e8f6;
    background: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 7px 22px rgba(37,99,235,.065);
}

.app-main .card-stat::after,
.app-main .stat-card::after,
.app-main .kpi-card::after,
.app-main .summary-card::after,
.app-main .metric-card::after {
    content: '';
    position: absolute;
    right: -26px;
    top: -34px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(124,58,237,.08));
    z-index: -1;
    transition: transform .3s ease;
}

.app-main .card-stat:hover::after,
.app-main .stat-card:hover::after,
.app-main .kpi-card:hover::after,
.app-main .summary-card:hover::after,
.app-main .metric-card:hover::after {
    transform: scale(1.18) translate(-5px, 5px);
}

.app-main .card-stat .stat-icon,
.app-main .stat-card .stat-icon,
.app-main .kpi-card .stat-icon,
.app-main .summary-card .stat-icon,
.app-main .metric-card .stat-icon {
    background: linear-gradient(145deg, #eaf2ff, #eef0ff) !important;
    color: var(--sig-blue) !important;
    border: 1px solid #dce7fb;
    box-shadow: 0 6px 15px rgba(37,99,235,.08);
}

/* ---------- Generic action / feature tiles ---------- */
.app-main .quick-card,
.app-main .feature-card,
.app-main .shortcut-card,
.app-main .action-card {
    position: relative;
    border: 1px solid #e1e8f6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(30,64,175,.06);
    transition: transform .22s ease, box-shadow .22s ease;
    overflow: hidden;
}

.app-main .quick-card::before,
.app-main .feature-card::before,
.app-main .shortcut-card::before,
.app-main .action-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--sig-blue), var(--sig-purple));
}

.app-main .quick-card:hover,
.app-main .feature-card:hover,
.app-main .shortcut-card:hover,
.app-main .action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sig-shadow-hover);
}

/* ---------- Form controls: visually grouped and easy to scan ---------- */
.app-main .form-control,
.app-main .form-select,
.app-main input[type="text"],
.app-main input[type="number"],
.app-main input[type="date"],
.app-main input[type="email"],
.app-main input[type="tel"],
.app-main input[type="password"],
.app-main textarea {
    background: #fbfcff;
    border-color: #dfe6f3;
    min-height: 40px;
}

.app-main .form-control:focus,
.app-main .form-select:focus,
.app-main input:focus,
.app-main textarea:focus {
    background: #fff;
    border-color: #78a3ff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.app-main label.form-label,
.app-main .form-label,
.app-main form label {
    color: #334155;
    font-weight: 650;
}

/* ---------- Tables: modern shell + header + row separation ---------- */
.app-main .table-responsive,
.app-main .table-scroll,
.app-main .responsive-table-shell {
    border: 1px solid #e2e8f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(30,64,175,.045);
}

.app-main .table {
    margin-bottom: 0;
    color: #334155;
}

.app-main .table thead,
.app-main .table thead tr {
    background: linear-gradient(105deg, #eef4ff 0%, #f3efff 100%);
}

.app-main .table thead th {
    color: #34456a;
    background: transparent;
    border-bottom: 1px solid #dfe6f3;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .82rem .9rem;
}

.app-main .table tbody tr {
    background: #fff;
    border-bottom: 1px solid #edf0f6;
    transition: background .18s ease, transform .18s ease;
}

.app-main .table tbody tr:last-child { border-bottom: 0; }
.app-main .table tbody tr:hover {
    background: linear-gradient(90deg, #f7faff 0%, #fbf9ff 100%) !important;
}

.app-main .table td,
.app-main .table th {
    padding: .72rem .9rem;
}

.app-main .table td:first-child {
    font-weight: 600;
    color: #243b73;
}

/* Zebra is intentionally very subtle, not gray-heavy. */
.app-main .table tbody tr:nth-child(even) {
    background: #fcfdff;
}

/* ---------- Badges/status pills ---------- */
.app-main .badge,
.app-main .status-badge,
.app-main .badge-status {
    border: 1px solid rgba(37,99,235,.12);
    box-shadow: 0 2px 7px rgba(30,64,175,.05);
}

/* ---------- Buttons: consistent modern treatment ---------- */
.app-main .btn-primary,
.app-main .btn-gradient,
.app-main .btn-main {
    background: linear-gradient(110deg, var(--sig-blue), var(--sig-purple));
    border: none;
    box-shadow: 0 7px 17px rgba(79,70,229,.20);
}

.app-main .btn-primary:hover,
.app-main .btn-gradient:hover,
.app-main .btn-main:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(79,70,229,.24);
}

/* ---------- Breadcrumb/filter/tool rows ---------- */
.app-main .breadcrumb {
    background: #edf4ff;
    border: 1px solid #dfe8fa;
    border-radius: 11px;
    padding: .42rem .7rem;
}

.app-main .filter-bar,
.app-main .toolbar,
.app-main .table-toolbar,
.app-main .search-filter-bar {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    border: 1px solid #e2e8f4;
    border-radius: 14px;
    padding: .65rem;
    box-shadow: 0 5px 16px rgba(30,64,175,.045);
}

/* ---------- Modern blue-purple hero/banner, without oversized text ---------- */
.app-main .welcome-banner,
.app-main .page-hero,
.app-main .feature-banner,
.app-main .hero-card {
    background: var(--sig-gradient);
    background-size: 180% 180%;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 17px;
    box-shadow: 0 12px 30px rgba(37,99,235,.20);
}

.app-main .welcome-banner::before,
.app-main .page-hero::before,
.app-main .feature-banner::before,
.app-main .hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .22;
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,.15) 45% 47%, transparent 47% 62%, rgba(255,255,255,.10) 62% 64%, transparent 64%),
        radial-gradient(circle at 85% 25%, rgba(255,255,255,.22), transparent 24%);
    pointer-events: none;
}

/* ---------- Responsive: desktop/tablet/mobile proportions ---------- */
@media (min-width: 1200px) {
    main.app-main { padding: 1.35rem 1.5rem 1.8rem; }
}

@media (max-width: 1199.98px) {
    main.app-main { padding: 1.15rem; }
    .app-main .card,
    .app-main .panel,
    .app-main .content-card,
    .app-main .section-card { border-radius: 15px; }
}

@media (max-width: 991.98px) {
    main.app-main { padding: .95rem; }
    .app-main .sig-page-title { font-size: 1.25rem !important; }
    .app-main .table-responsive,
    .app-main .table-scroll,
    .app-main .responsive-table-shell { border-radius: 13px; }
}

@media (max-width: 767.98px) {
    main.app-main { padding: .75rem; }
    .app-main .sig-page-title {
        font-size: 1.08rem !important;
        padding: .68rem .78rem;
        border-radius: 12px;
    }
    .app-main .card,
    .app-main .panel,
    .app-main .content-card,
    .app-main .section-card,
    .app-main .table-card,
    .app-main .form-card { border-radius: 13px; }
    .app-main .card-header,
    .app-main .panel-header,
    .app-main .section-header { padding: .72rem .8rem; }
    .app-main .table thead th { font-size: .68rem; padding: .68rem .7rem; }
    .app-main .table td { padding: .62rem .7rem; }
}

@media (max-width: 575.98px) {
    main.app-main { padding: .6rem; }
    .app-main .sig-page-title { margin-bottom: .7rem !important; }
    .app-main .toolbar,
    .app-main .filter-bar,
    .app-main .table-toolbar,
    .app-main .search-filter-bar { padding: .5rem; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-main .card,
    .app-main .panel,
    .app-main .content-card,
    .app-main .section-card,
    .app-main .quick-card,
    .app-main .feature-card,
    .app-main .shortcut-card,
    .app-main .action-card { transition: none !important; }
}

/* ========================================================================
   1.36.1 — PELANGGARAN WORKFLOW UI
   Guru → Wali Kelas → BK menggunakan satu laporan + satu timeline.
   ======================================================================== */
.report-page{width:100%;max-width:1440px;margin:0 auto;padding:24px 26px 42px;color:#172554}
.report-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;margin-bottom:18px;padding:22px 26px;border:1px solid #dbe5ff;border-radius:22px;background:linear-gradient(115deg,#eef5ff 0%,#f6f4ff 52%,#eee9ff 100%);box-shadow:0 12px 34px rgba(45,74,150,.08)}
.report-hero:after{content:"";position:absolute;width:240px;height:240px;right:-95px;top:-120px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.18));pointer-events:none}
.report-hero>div,.report-hero>a{position:relative;z-index:1}
.report-hero h1{margin:4px 0 6px;font-size:clamp(26px,2.2vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.025em;color:#122554}
.report-hero p{margin:0;max-width:860px;color:#64748b;font-size:15px;line-height:1.65}
.report-eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;color:#2563eb}
.report-hero-btn,.report-period{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:14px;padding:11px 15px;font-weight:700}
.report-period{border:1px solid #d6e1fb;background:rgba(255,255,255,.72);color:#2859b8}
.report-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.report-stat-card{display:flex;align-items:center;gap:13px;min-width:0;padding:16px;border:1px solid #e1e8f5;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.055);transition:transform .2s ease,box-shadow .2s ease}
.report-stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.09)}
.report-stat-icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:14px;font-size:20px}
.report-stat-card span{display:block;color:#64748b;font-size:12px;font-weight:700;margin-bottom:2px}.report-stat-card strong{display:block;font-size:25px;line-height:1.1;color:#132451}
.stat-total .report-stat-icon{background:#eaf1ff;color:#2563eb}.stat-new .report-stat-icon{background:#fff6df;color:#d97706}.stat-process .report-stat-icon{background:#f0eaff;color:#7c3aed}.stat-done .report-stat-icon{background:#e8f8ef;color:#159447}
.report-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 14px;padding:14px 16px;border:1px solid #dfe7f4;border-radius:17px;background:rgba(248,250,255,.9)}
.report-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px}.report-toolbar strong{font-size:15px}.report-toolbar span{font-size:12px;color:#718096}
.report-search{position:relative;width:min(380px,100%)}.report-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8aa0bf}.report-search input{width:100%;height:42px;padding:0 13px 0 38px;border:1px solid #d9e2f0;border-radius:12px;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}.report-search input:focus{border-color:#7da4f7;box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.report-list{display:grid;gap:14px}.report-history-card{overflow:hidden;border:1px solid #dce5f3;border-radius:20px;background:#fff;box-shadow:0 8px 25px rgba(15,23,42,.055);transition:transform .2s ease,box-shadow .2s ease}.report-history-card:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(15,23,42,.08)}
.report-card-main{display:flex;gap:15px;padding:18px 19px 16px}.report-student-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:15px;background:linear-gradient(145deg,#eaf1ff,#f1edff);color:#3569dc;font-size:21px}.report-card-info{min-width:0;flex:1}.report-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.report-card-title-row h3{margin:0 0 3px;font-size:18px;line-height:1.25;color:#132451}.report-card-title-row span{font-size:12px;color:#718096}.report-card-title-row>span{flex:0 0 auto}
.report-status{display:inline-flex!important;align-items:center;gap:6px;padding:7px 10px;border-radius:999px!important;font-size:11px!important;font-weight:800!important;border:1px solid transparent}.status-new{background:#fff7e6;color:#b96d00;border-color:#f8dfaa}.status-process{background:#f2edff;color:#6d35bd;border-color:#dfd1ff}.status-done{background:#eaf8ef;color:#137a3d;border-color:#ccebd8}
.report-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.report-detail-grid>div{min-width:0;padding:10px 11px;border-radius:12px;background:#f6f8fc;border:1px solid #edf1f7}.report-detail-grid small{display:block;margin-bottom:3px;color:#7a8ba5;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.report-detail-grid strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#263b67;font-size:12px}
.report-description{margin:11px 0 0;color:#596b87;font-size:13px;line-height:1.6}.report-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:13px 20px;border-top:1px solid #edf1f6;border-bottom:1px solid #edf1f6;background:#fafbfe}.progress-step{position:relative;text-align:center;color:#9aa9bf}.progress-step:not(:last-child):after{content:"";position:absolute;left:calc(50% + 17px);right:calc(-50% + 17px);top:10px;height:2px;background:#e4eaf3}.progress-step.is-done{color:#3268dc}.progress-step.is-done:after{background:#9ab8fa}.progress-step span{position:relative;z-index:1;display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#eef2f7;font-size:11px}.progress-step.is-done span{background:#dce8ff;color:#2563eb}.progress-step small{display:block;margin-top:5px;font-size:10px;font-weight:700}
.report-timeline{padding:15px 20px 17px;background:linear-gradient(180deg,#fff,#fcfdff)}.timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.timeline-heading span{font-size:12px;font-weight:800;color:#3b4f70}.timeline-heading small{color:#94a3b8;font-size:10px}.timeline-items{display:grid;gap:9px}.timeline-item{display:grid;grid-template-columns:11px 1fr;gap:10px;position:relative}.timeline-item:before{content:"";position:absolute;left:4px;top:9px;bottom:-10px;width:1px;background:#dbe5f2}.timeline-item:last-child:before{display:none}.timeline-dot{width:9px;height:9px;margin-top:5px;border-radius:50%;background:#4f7fe8;box-shadow:0 0 0 4px #edf3ff}.timeline-item strong{display:block;font-size:12px;color:#354b70;font-weight:700}.timeline-item small{display:block;margin-top:2px;font-size:10px;color:#8a9ab0}.timeline-empty{padding:11px 12px;border-radius:11px;background:#f7f9fc;color:#8a99ad;font-size:12px}
.bk-update-form{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:10px;padding:14px 20px 18px;border-top:1px solid #edf1f6;background:#f8faff}.bk-update-form label{display:block;margin-bottom:5px;font-size:11px;font-weight:800;color:#61728d}.bk-update-form textarea,.bk-update-form select{width:100%;border:1px solid #d8e2f0;border-radius:11px;background:#fff;padding:9px 11px;outline:none;font-size:12px}.bk-update-form textarea:focus,.bk-update-form select:focus{border-color:#7da4f7;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.bk-save{align-self:end;height:39px;white-space:nowrap;border-radius:11px;font-weight:700}
.report-after-form{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 0;padding:15px 18px;border:1px solid #dce5f3;border-radius:16px;background:linear-gradient(110deg,#f6f9ff,#faf8ff)}.report-after-form>div{display:flex;flex-direction:column;gap:2px}.report-after-form strong{font-size:13px}.report-after-form span{font-size:11px;color:#718096}.report-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:28px;border:1px dashed #d6e0ef;border-radius:18px;background:#fbfcff;text-align:center}.report-empty>i{font-size:30px;color:#7a9ce9;margin-bottom:8px}.report-empty strong{font-size:15px;color:#34476a}.report-empty span{max-width:500px;margin-top:4px;color:#8493a8;font-size:12px;line-height:1.55}
@media(max-width:1100px){.report-page{padding:20px 18px 34px}.report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.report-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-update-form{grid-template-columns:1fr 180px}.bk-save{grid-column:1/-1;justify-self:start}}
@media(max-width:760px){.report-page{padding:15px 12px 28px}.report-hero{align-items:flex-start;flex-direction:column;padding:18px}.report-hero h1{font-size:25px}.report-hero p{font-size:13px}.report-hero-btn,.report-period{width:100%;justify-content:center}.report-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.report-stat-card{padding:13px}.report-stat-icon{width:40px;height:40px;flex-basis:40px}.report-stat-card strong{font-size:21px}.report-toolbar{align-items:stretch;flex-direction:column}.report-search{width:100%}.report-card-main{padding:15px;gap:11px}.report-card-title-row{flex-direction:column}.report-card-title-row>span{align-self:flex-start}.report-detail-grid{grid-template-columns:1fr 1fr;gap:7px}.report-detail-grid>div{padding:8px}.report-progress{padding:12px 10px}.report-timeline{padding:13px 15px}.bk-update-form{grid-template-columns:1fr;padding:13px 15px 15px}.bk-save{width:100%}.report-after-form{align-items:stretch;flex-direction:column}.report-after-form .btn{width:100%}}
@media(max-width:430px){.report-stats{grid-template-columns:1fr}.report-detail-grid{grid-template-columns:1fr}.report-card-main{display:block}.report-student-icon{margin-bottom:10px}.report-progress small{font-size:9px}.report-toolbar{padding:12px}.report-hero:after{opacity:.6}}


/* ========================================================================
   1.37.0 — PELANGGARAN UI REFINEMENT
   Riwayat Pelaporan Guru + Penanganan BK
   Fokus: header lebih ringkas, kontras lebih baik, proporsi lebih nyaman.
   ======================================================================== */
.report-page{max-width:1500px;padding:18px 24px 36px;color:#172554}
.report-hero{min-height:0;margin-bottom:16px;padding:16px 22px;border-radius:20px;border:1px solid #d8e3fb;background:linear-gradient(112deg,#eef5ff 0%,#f8f8ff 52%,#f0ebff 100%);box-shadow:0 8px 24px rgba(37,67,135,.07)}
.report-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#2563eb,#7c3aed);border-radius:20px 0 0 20px;pointer-events:none}
.report-hero:after{width:170px;height:170px;right:-72px;top:-92px;background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(124,58,237,.14))}
.report-eyebrow{font-size:11px;line-height:1.25;letter-spacing:.075em;margin-bottom:3px;color:#245ed0}
.report-hero h1{margin:2px 0 4px;font-size:clamp(23px,1.9vw,30px);line-height:1.18;letter-spacing:-.022em;font-weight:800;color:#13285a}
.report-hero p{max-width:900px;font-size:13px;line-height:1.5;color:#657895}
.report-hero-btn,.report-period{padding:9px 13px;border-radius:12px;font-size:12px}
.report-period{background:rgba(255,255,255,.84);color:#2859b8}
.report-stats{gap:12px;margin-bottom:14px}
.report-stat-card{min-height:88px;padding:13px 15px;gap:11px;border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.045)}
.report-stat-card:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(15,23,42,.075)}
.report-stat-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:18px}
.report-stat-card span{font-size:10px;letter-spacing:.02em;margin-bottom:3px}
.report-stat-card strong{font-size:24px}
.report-toolbar{margin:4px 0 12px;padding:11px 14px;border-radius:15px;background:linear-gradient(100deg,#f8faff,#f7f6ff);box-shadow:0 4px 14px rgba(30,64,125,.025)}
.report-toolbar strong{font-size:14px;color:#17305f}.report-toolbar span{font-size:11px}
.report-search{width:min(410px,100%)}
.report-search input{height:40px;border-radius:11px;font-size:12px;color:#263b67}
.report-list{gap:12px}
.report-history-card{border-radius:18px;box-shadow:0 6px 20px rgba(15,23,42,.045)}
.report-history-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.07)}
.report-card-main{gap:13px;padding:15px 17px 14px}
.report-student-icon{width:44px;height:44px;flex-basis:44px;border-radius:13px;font-size:19px}
.report-card-title-row{gap:12px}.report-card-title-row h3{font-size:16px;margin-bottom:2px}.report-card-title-row span{font-size:11px}
.report-status{padding:6px 9px;font-size:10px!important}
.report-detail-grid{gap:8px;margin-top:11px}.report-detail-grid>div{padding:8px 9px;border-radius:10px;background:#f4f7fc}.report-detail-grid small{font-size:9px}.report-detail-grid strong{font-size:11px}
.report-description{margin-top:9px;font-size:12px;line-height:1.55;color:#5d6f8c}
.report-progress{padding:10px 17px}.progress-step small{margin-top:4px;font-size:9px}.progress-step span{width:19px;height:19px}
.report-timeline{padding:12px 17px 14px}.timeline-heading{margin-bottom:8px}.timeline-heading span{font-size:11px}.timeline-heading small{font-size:9px}.timeline-items{gap:7px}.timeline-item{grid-template-columns:10px 1fr;gap:9px}.timeline-item strong{font-size:11px}.timeline-item small{font-size:9px}.timeline-dot{width:8px;height:8px;box-shadow:0 0 0 3px #edf3ff}
.timeline-empty{padding:9px 10px;font-size:11px}
.bk-update-form{gap:8px;padding:12px 17px 14px;background:linear-gradient(100deg,#f6f9ff,#f9f7ff)}
.bk-update-form label{font-size:10px}.bk-update-form textarea,.bk-update-form select{border-radius:10px;padding:8px 10px;font-size:11px}.bk-save{height:37px;border-radius:10px;font-size:11px}
.report-empty{min-height:190px;border-radius:16px}
@media(max-width:1100px){.report-page{padding:16px 18px 30px}.report-hero{padding:15px 19px}.report-hero h1{font-size:25px}.report-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.report-stat-card{padding:11px}.report-stat-icon{width:38px;height:38px;flex-basis:38px}.report-stat-card strong{font-size:21px}.report-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-update-form{grid-template-columns:1fr 180px}.bk-save{grid-column:1/-1;justify-self:start}}
@media(max-width:760px){.report-page{padding:13px 12px 26px}.report-hero{align-items:flex-start;flex-direction:column;padding:15px 16px 16px;border-radius:17px}.report-hero h1{font-size:23px}.report-hero p{font-size:12px}.report-hero-btn,.report-period{width:auto;justify-content:center}.report-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.report-stat-card{min-height:76px;padding:10px}.report-stat-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:16px}.report-stat-card span{font-size:9px}.report-stat-card strong{font-size:20px}.report-toolbar{align-items:stretch;flex-direction:column;padding:11px}.report-search{width:100%}.report-card-main{padding:13px 14px}.report-card-title-row{flex-direction:column}.report-card-title-row>span{align-self:flex-start}.report-detail-grid{grid-template-columns:1fr 1fr;gap:6px}.report-progress{padding:10px 8px}.report-timeline{padding:11px 13px}.bk-update-form{grid-template-columns:1fr;padding:12px 13px 14px}.bk-save{width:100%}}
@media(max-width:430px){.report-stats{grid-template-columns:1fr 1fr}.report-stat-card{gap:8px}.report-stat-icon{width:34px;height:34px;flex-basis:34px}.report-detail-grid{grid-template-columns:1fr}.report-card-main{display:block}.report-student-icon{margin-bottom:8px}.report-hero h1{font-size:22px}.report-hero p{font-size:11.5px}.report-progress small{font-size:8px}}

/* ========================================================================
   TEACHER MODERN DASHBOARD 2.0 (High Contrast, Animated & Charts)
   ======================================================================== */
.teacher-modern-dashboard { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }

/* Staggered Entrance Animation */
.animate-in { animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }
.d4 { animation-delay: 0.32s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

.modal {
    z-index: 1060 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}
#modalMapPicker,
#docViewerModal {
    z-index: 1090 !important;
}
.modal-backdrop.map-picker-backdrop,
.modal-backdrop ~ .modal-backdrop {
    z-index: 1080 !important;
}

/* Hero Welcome Card */
.teacher-hero-banner {
    position: relative;
    border-radius: 20px;
    padding: 1.5rem 1.85rem;
    background: linear-gradient(125deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
    color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.teacher-hero-banner::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.teacher-hero-content { position: relative; z-index: 1; max-width: 800px; }
.teacher-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}
.teacher-hero-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.35rem; letter-spacing: -0.02em; line-height: 1.25; color: #ffffff !important; }
.teacher-hero-desc { font-size: 0.88rem; color: #ffffff !important; opacity: 0.92; margin: 0; line-height: 1.45; }
.teacher-hero-badge { color: #ffffff !important; }
.hero-pill { color: #ffffff !important; }
.hero-pill strong { color: #ffffff !important; font-weight: 800; }
.teacher-hero-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.76rem;
    font-weight: 600;
}
.hero-pill strong { font-weight: 800; }
.teacher-hero-illustration { position: relative; z-index: 1; flex-shrink: 0; }
.hero-icon-circle {
    width: 84px; height: 84px; border-radius: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* KPI Cards */
.teacher-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.teacher-kpi {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.15rem;
    display: flex;
    gap: 0.9rem;
    align-items: center;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.teacher-kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
    border-color: #cbd5e1;
    color: #0f172a;
}
.teacher-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
}
.kpi-blue::before { background: #2563eb; }
.kpi-green::before { background: #10b981; }
.kpi-orange::before { background: #f59e0b; }
.kpi-purple::before { background: #8b5cf6; }

.kpi-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #ffffff;
    transition: transform 0.25s ease;
}
.teacher-kpi:hover .kpi-icon { transform: scale(1.08) rotate(3deg); }
.kpi-blue .kpi-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25); }
.kpi-green .kpi-icon { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25); }
.kpi-orange .kpi-icon { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 6px 14px rgba(245, 158, 11, 0.25); }
.kpi-purple .kpi-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 14px rgba(139, 92, 246, 0.25); }

.kpi-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kpi-copy small { font-size: 0.74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-copy strong { font-size: 1.7rem; font-weight: 800; color: #0f172a; line-height: 1.15; margin: 0.15rem 0 0.1rem; }
.kpi-copy em { font-size: 0.74rem; color: #64748b; font-style: normal; font-weight: 500; }
.kpi-link { font-size: 0.73rem; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }

/* Dashboard Main Grid Layout */
.teacher-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1.2fr);
    gap: 1.25rem;
}

/* Charts Section Grid */
.teacher-charts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.25rem;
}

/* Modern Panel Card */
.modern-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modern-panel-head {
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
}
.modern-panel-head h5 {
    font-size: 0.96rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.modern-panel-head h5 i { color: var(--primary); font-size: 1.05rem; }
.modern-panel-head small { display: block; font-size: 0.74rem; color: #64748b; font-weight: 500; margin-top: 0.15rem; }
.soft-link {
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: #f1f5f9;
    text-decoration: none;
    transition: all 0.2s ease;
}
.soft-link:hover { background: var(--primary); color: #ffffff; }

/* Schedule List */
.schedule-list { padding: 0.6rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.schedule-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}
.schedule-row:hover { background: #f1f5f9; border-color: #e2e8f0; transform: translateX(2px); }
.schedule-time {
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}
.schedule-time strong { font-size: 0.86rem; font-weight: 800; }
.tone-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tone-green { background: linear-gradient(135deg, #10b981, #059669); }
.tone-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tone-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.schedule-info strong { display: block; font-size: 0.88rem; font-weight: 750; color: #0f172a; }
.schedule-info span { font-size: 0.76rem; color: #64748b; font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; }
.schedule-info b { color: #cbd5e1; }
.schedule-action {
    padding: 0.42rem 0.85rem;
    border-radius: 9px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.schedule-action:hover { opacity: 0.92; transform: scale(1.03); color: #ffffff; }

/* Empty state */
.modern-empty {
    padding: 2.2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    gap: 0.4rem;
}
.modern-empty i { font-size: 2.6rem; color: #94a3b8; }
.modern-empty strong { font-size: 0.95rem; color: #1e293b; font-weight: 750; }
.modern-empty span { font-size: 0.8rem; color: #64748b; }

/* Motivation Card */
.teacher-side-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.teacher-inspiration-card {
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #4338ca 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 8px 24px -4px rgba(67, 56, 202, 0.28);
    position: relative;
    overflow: hidden;
}
.teacher-inspiration-card::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: -40px;
    right: 20px;
}
.teacher-inspiration-card small { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #93c5fd; }
.teacher-inspiration-card h5 { font-size: 0.95rem; font-weight: 700; margin: 0.35rem 0 0.6rem; line-height: 1.35; max-width: 220px; }
.teacher-inspiration-card span { font-size: 0.72rem; color: #e0e7ff; font-weight: 600; }
.teacher-inspiration-card .progress { height: 6px; margin-top: 0.35rem; width: 160px; background: rgba(255, 255, 255, 0.25); border-radius: 999px; }
.teacher-inspiration-card .progress-bar { background: #34d399; border-radius: 999px; }
.teacher-inspiration-card > i { font-size: 3.2rem; color: #fbbf24; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); flex-shrink: 0; }

/* Quick Actions Grid */
.modern-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding: 1rem 1.15rem;
}
.modern-quick-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.73rem;
    font-weight: 650;
    text-align: center;
    transition: all 0.2s ease;
}
.modern-quick-grid a:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    color: var(--primary);
}
.modern-quick-grid i {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}
.modern-quick-grid a:hover i { transform: scale(1.12); }
.q-blue { background: #dbeafe; color: #1d4ed8; }
.q-green { background: #d1fae5; color: #059669; }
.q-red { background: #fee2e2; color: #dc2626; }
.q-orange { background: #fef3c7; color: #d97706; }
.q-cyan { background: #cffafe; color: #0891b2; }
.q-purple { background: #ede9fe; color: #7c3aed; }

/* Class Summary for Wali Kelas */
.class-summary-grid {
    display: grid;
    grid-template-columns: 1.1fr repeat(3, 1fr);
    padding: 1rem 1.35rem 1.25rem;
    gap: 0.75rem;
}
.class-identity {
    position: relative;
    border-radius: 14px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    padding: 1rem 1.15rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 94px;
    overflow: hidden;
}
.class-identity strong { font-size: 1.3rem; font-weight: 800; }
.class-identity span { font-size: 0.72rem; color: #93c5fd; font-weight: 700; text-transform: uppercase; margin-top: 0.1rem; }
.class-identity em { font-size: 0.78rem; font-style: normal; color: rgba(255, 255, 255, 0.9); margin-top: 0.2rem; }
.class-identity i { position: absolute; right: 12px; bottom: 8px; font-size: 2.2rem; opacity: 0.35; }

.class-metric {
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
}
.class-metric small { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.class-metric strong { font-size: 1.5rem; font-weight: 800; margin: 0.15rem 0 0.1rem; color: #0f172a; }
.class-metric span { font-size: 0.72rem; color: #64748b; font-weight: 500; }
.metric-green small { color: #059669; }
.metric-red small { color: #dc2626; }
.metric-blue small { color: #2563eb; }

/* Responsive adjustments */
@media (max-width: 1199.98px) {
    .teacher-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .teacher-main-grid { grid-template-columns: 1fr; }
    .teacher-charts-grid { grid-template-columns: 1fr; }
    .class-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .teacher-hero-banner { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
    .teacher-hero-title { font-size: 1.35rem; }
    .teacher-hero-illustration { display: none; }
    .teacher-kpi-grid { grid-template-columns: 1fr; }
    .schedule-row { grid-template-columns: 70px 1fr; }
    .schedule-action { grid-column: 1 / -1; width: 100%; text-align: center; }
    .modern-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .class-summary-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   DAPODIK-STYLE MINI SIDEBAR & RESIZABLE GRID STYLES
   ========================================================= */
.sidebar-collapse-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.sidebar-collapse-btn:hover {
  background: #ffffff;
  color: #1d4ed8;
  transform: scale(1.06);
}

/* DAPODIK-STYLE VERTICAL MINI RAIL & SIDEBAR MINIMIZE */
.sidebar-mini-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0.9rem 0.2rem 1.4rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.sidebar-mini-rail:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mini-rail-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mini-rail-toggle-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 7px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 0;
}
.mini-rail-toggle-btn:hover, .sidebar-mini-rail:hover .mini-rail-toggle-btn {
  background: #ffffff;
  color: #1d4ed8;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.mini-rail-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.mini-rail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-rail-spine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  white-space: nowrap;
  flex: 1;
  padding: 1.5rem 0;
}

.mini-rail-title {
  font-weight: 850;
  font-size: 0.96rem;
  color: #ffffff;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mini-rail-sub {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.8px;
}

.mini-rail-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-rail-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.sidebar-mini-rail:hover .mini-rail-icon-wrap {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Global variable override for sidebar-mini */
body.sidebar-mini {
  --sidebar-w: 48px !important;
  --sig-sidebar-w: 48px !important;
}

@media (min-width: 992px) {
  body.sidebar-mini {
    --sidebar-w: 48px !important;
    --sig-sidebar-w: 48px !important;
  }
  body.sidebar-mini .app-navbar {
    left: 48px !important;
    width: calc(100% - 48px) !important;
    margin-left: 0 !important;
    right: 0 !important;
  }
  body.sidebar-mini .app-shell > .sidebar,
  body.sidebar-mini .sidebar,
  body.sidebar-mini .app-sidebar {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    overflow: hidden !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }
  body.sidebar-mini .app-shell > .app-main,
  body.sidebar-mini main.app-main {
    margin-left: 48px !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
  }
  body.sidebar-mini .sidebar-brand,
  body.sidebar-mini .sidebar-scroll,
  body.sidebar-mini .sidebar-account,
  body.sidebar-mini .sidebar-version {
    display: none !important;
  }
  body.sidebar-mini .sidebar-mini-rail {
    display: flex !important;
  }
  .sidebar, .app-shell > .sidebar, .app-sidebar, .app-main, .app-shell > .app-main {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* Universal Resizable Table & Active Row Styles */
.resizable-th {
  position: relative;
  user-select: none;
}
.resizable-th .col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  cursor: col-resize;
  user-select: none;
  height: 100%;
  z-index: 5;
}
.resizable-th .col-resizer:hover, .resizable-th.resizing .col-resizer {
  background-color: #3b82f6;
}
tr.selected-row td {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
}

/* Reference Autocomplete & Readonly Normal Styling */
.input-readonly-normal {
  background-color: #ffffff !important;
  cursor: default;
  color: #1e293b;
  border-color: #cbd5e1;
}
.input-readonly-normal:focus {
  background-color: #ffffff !important;
  border-color: #3b82f6;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

.ref-autocomplete-wrap {
  position: relative !important;
  width: 100%;
}
.ref-autocomplete-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.15) !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  margin-top: 4px !important;
  padding: 0 !important;
  list-style: none !important;
}
.ref-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.12s ease;
}
.ref-autocomplete-item:last-child {
  border-bottom: none;
}
.ref-autocomplete-item:hover,
.ref-autocomplete-item.active {
  background-color: #f8fafc;
}
.ref-autocomplete-item.active {
  background-color: #eff6ff !important;
}
.ref-autocomplete-item .ref-item-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: #0f172a;
}
.ref-autocomplete-item .ref-item-subtitle {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 1px;
}
.ref-autocomplete-empty {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #94a3b8;
  text-align: center;
}

/* Scrollable modal hardening for forms inside modal-content */
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 2rem);
}
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-body,
.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto;
  overflow-y: auto !important;
  min-height: 0;
  max-height: calc(100vh - 190px);
}

/* ==========================================================================
   MASTER PROFILE COLLAPSIBLE SECTIONS (DAPODIK STYLE) & ACTION BUTTONS
   ========================================================================== */

/* 1. Master Section Cards */
.master-sec-card {
  background: #ffffff;
  border: 1.2px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0.9rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}
.master-sec-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.master-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: linear-gradient(to right, #f8faff, #f1f5fd);
  border-bottom: 1.2px solid #e2e8f0;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease;
}
.master-sec-head:hover {
  background: linear-gradient(to right, #f1f5fd, #e9effd);
}
.master-sec-head.collapsed {
  border-bottom-color: transparent;
}
.master-sec-head-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.master-sec-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  color: #ffffff;
}
.master-sec-kicker {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b !important;
  margin-bottom: 0.05rem;
}
.master-sec-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a !important;
  margin: 0;
}
.master-sec-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 0.85rem;
  transition: transform 0.25s ease, background 0.18s ease;
  flex-shrink: 0;
}
.master-sec-head:not(.collapsed) .master-sec-chevron {
  transform: rotate(180deg);
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.master-sec-body {
  padding: 1rem;
}

/* 2. Global Section Toggle Toolbar */
.master-sec-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
.master-sec-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.master-sec-toolbar-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* 3. Action Buttons on Tables (Squircle / Rounded Pill with Perfect Centering) */
.btn-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.btn-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0.92rem;
  background: #ffffff;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.btn-action-icon i {
  display: inline-block;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
.btn-action-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Action variants */
.btn-action-print {
  border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
  color: #2563eb !important;
}
.btn-action-print:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}

.btn-action-edit {
  border: 1.5px solid rgba(5, 150, 105, 0.45) !important;
  color: #059669 !important;
}
.btn-action-edit:hover {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
}

.btn-action-config {
  border: 1.5px solid rgba(217, 119, 6, 0.45) !important;
  color: #d97706 !important;
}
.btn-action-config:hover {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}

.btn-action-delete {
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  color: #dc2626 !important;
}
.btn-action-delete:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}

.btn-action-reactive {
  border: 1.5px solid rgba(13, 148, 136, 0.45) !important;
  color: #0d9488 !important;
}
.btn-action-reactive:hover {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
  color: #0f766e !important;
}

/* 4. Standardized Modern Pill Save / Submit Button */
.btn-save-master {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.35rem;
  font-size: 0.82rem;
  font-weight: 750;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1.5px solid #1e40af;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}
.btn-save-master:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.38);
  transform: translateY(-1px);
  color: #ffffff !important;
}
.btn-save-master:active {
  transform: translateY(0);
}
.btn-save-master i {
  font-size: 0.95rem;
  line-height: 1;
}