/* ==========================================================================
   DESIGN SYSTEM & CUSTOM STYLING - RESTEASE BREAK SYSTEM
   ========================================================================== */

/* 1. VARIABEL & SETUP TEMA */
:root {
    --bg-dark: #121c32;
    --glass-bg: rgba(12, 20, 36, 0.88);
    --glass-bg-hover: rgba(18, 30, 50, 0.92);
    --glass-border: rgba(142, 180, 220, 0.18);
    --glass-border-focus: rgba(158, 197, 232, 0.55);

    /* Theme tint variables — overridden per tema via JS */
    --glass-tint: rgba(36, 64, 96, 0.18);
    --card-border-theme: rgba(142, 180, 220, 0.26);
    
    --primary: #8eb8dc;
    --primary-hover: #6a9cc4;
    --primary-glow: rgba(142, 184, 220, 0.32);
    
    --accent: #e8eef6;
    --accent-glow: rgba(232, 238, 246, 0.22);
    
    --gold: #8eb8dc;
    --gold-glow: rgba(142, 184, 220, 0.28);

    --rose: #f43f5e;              /* Rose */
    --rose-glow: rgba(244, 63, 94, 0.3);
    
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.3);
    
    --warning: #f59e0b;
    --warning-glow: rgba(245, 158, 11, 0.3);
    
    --danger: #f43f5e;
    --danger-glow: rgba(244, 63, 94, 0.35);
    
    --text-main: #eef3f8;
    --text-muted: #9aadb8;
    --text-subtle: #6f8496;
    --text-dark: #071018;
    
    --font-family: 'Plus Jakarta Sans', sans-serif;
    --border-radius-xl: 20px;
    --border-radius-lg: 16px;
    --border-radius-md: 12px;
    --border-radius-sm: 8px;
    
    --shadow-premium: 0 8px 40px 0 rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-glow-primary: 0 0 30px rgba(110, 160, 210, 0.14), 0 8px 32px rgba(0,0,0,0.55);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    --app-sidebar-width: 218px;
    --app-sidebar-collapsed-width: 72px;
}

/* Ambient background orbs */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(110, 160, 210, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: floatOrb 12s ease-in-out infinite alternate;
}

body::after {
    display: none !important;
    content: none !important;
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 20px) scale(1.1); }
}

/* 2. PENYELARASAN UMUM */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 18% 12%, rgba(212, 175, 55, 0.10) 0%, transparent 52%),
                radial-gradient(ellipse at 82% 88%, rgba(197, 160, 89, 0.06) 0%, transparent 48%),
                linear-gradient(160deg, #030303 0%, #0a0805 40%, #050505 70%, #080604 100%);
    background-attachment: fixed;
    background-size: cover;
    text-transform: uppercase;
}

input, textarea, select, .chat-input, #chatInput, .chat-msg-text, .chat-msg-bubble, .chat-msg-reply-text, .chat-msg-reply-name, .chat-msg-sender-name, .chat-conv-item-name, .chat-conv-item-sub, .chat-header-title, .chat-header-subtitle, .message-content, .chat-message, .chat-time, .message-text, .ql-editor,
#chatView, .chat-shell, .chat-shell * {
    text-transform: none !important;
}

/* ============================================================
   THEME PRESETS — body.theme-* overrides
   CSS variables di-set via JS (applyThemePreset).
   Di sini kita handle: glass cards, buttons, nav, badges,
   scrollbar, dan elemen UI lain agar semua warna jelas.
   ============================================================ */

/* ── Shared: semua tema aktif ─────────────────────────────── */
body[class*="theme-"] {
    color: var(--text-main);
    background: transparent !important;
    background-image: none !important;
}

/* Kontras tinggi: hanya dashboard tanpa preset tema (preset pakai var di bawah) */
body:not([class*="theme-"]) {
    color: var(--text-main);
}

body:not([class*="theme-"]) h1,
body:not([class*="theme-"]) h2,
body:not([class*="theme-"]) h3,
body:not([class*="theme-"]) h4 {
    color: var(--text-main);
}

body:not([class*="theme-"]) .brand-text h1 {
    background: linear-gradient(135deg, #fff8e7 0%, #d4af37 45%, #f5e6b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not([class*="theme-"]) th {
    color: #e8d48a !important;
    font-weight: 700;
}

body:not([class*="theme-"]) td,
body:not([class*="theme-"]) .data-table td {
    color: #f3efe6;
}

body:not([class*="theme-"]) .text-muted,
body:not([class*="theme-"]) [style*="color: var(--text-muted)"] {
    color: var(--text-muted) !important;
}

body:not([class*="theme-"]) .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card) {
    background: linear-gradient(145deg, rgba(10, 9, 7, 0.92) 0%, rgba(5, 5, 4, 0.88) 100%) !important;
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.22)) !important;
}

body:not([class*="theme-"]) .app-header {
    border-bottom-color: rgba(212, 175, 55, 0.15);
    background: linear-gradient(180deg, rgba(8, 7, 5, 0.95) 0%, rgba(4, 4, 4, 0.88) 100%);
}

body:not([class*="theme-"]) .app-nav {
    border-color: rgba(212, 175, 55, 0.12);
    background: rgba(8, 7, 5, 0.55);
}

body:not([class*="theme-"]) input,
body:not([class*="theme-"]) select,
body:not([class*="theme-"]) textarea {
    color: #f8f4eb;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(212, 175, 55, 0.18);
}

body:not([class*="theme-"]) input::placeholder,
body:not([class*="theme-"]) textarea::placeholder {
    color: rgba(196, 184, 150, 0.55) !important;
}

body:not([class*="theme-"]) .btn-primary {
    color: #1a1408 !important;
    font-weight: 700;
    background: linear-gradient(135deg, #f5e6b8 0%, #d4af37 50%, #c5a028 100%) !important;
    box-shadow: 0 4px 22px rgba(212, 175, 55, 0.35);
}

body:not([class*="theme-"]) .btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 28px rgba(212, 175, 55, 0.45);
}

/* ============================================================
   TABLES — tanpa glow / halo di tepi (semua tema & preset)
   ============================================================ */
.glass-card:has(table),
.glass-card:has(.table-responsive),
.glass-card:has(.table-scroll-container),
.glass-card:has(.absensi-spreadsheet-table) {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
    min-width: 0;
    overflow: hidden;
}

.glass-card:has(table)::after,
.glass-card:has(.table-responsive)::after,
.glass-card:has(.table-scroll-container)::after {
    display: none !important;
}

.glass-card:has(table):hover,
.glass-card:has(.table-responsive):hover,
.glass-card:has(.table-scroll-container):hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.48) !important;
    transform: none !important;
}

body[class*="theme-"] .glass-card:has(table),
body[class*="theme-"] .glass-card:has(.table-responsive),
body:not([class*="theme-"]) .glass-card:has(table),
body:not([class*="theme-"]) .glass-card:has(.table-responsive) {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.14)) !important;
}

.table-responsive,
.table-scroll-container {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.28) !important;
    outline: none !important;
}

table,
.report-table,
.admin-table,
.paspor-table,
.absensi-spreadsheet-table,
.data-table {
    box-shadow: none !important;
    outline: none !important;
}

table th,
table td,
.report-table th,
.report-table td,
.admin-table th,
.admin-table td,
.paspor-table th,
.paspor-table td {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

body[class*="theme-"] table th,
body:not([class*="theme-"]) table th {
    text-shadow: none !important;
}

/* Sidebar + area konten — default (tanpa preset) */
body:not([class*="theme-"]) .app-sidebar {
    background: linear-gradient(180deg, rgba(7, 6, 5, 0.98) 0%, rgba(3, 3, 3, 0.99) 55%, rgba(6, 5, 4, 0.98) 100%) !important;
    border-right: 1px solid rgba(212, 175, 55, 0.14) !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.5), inset -1px 0 0 rgba(212, 175, 55, 0.05) !important;
}

body:not([class*="theme-"]) .sidebar-top-accent {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), rgba(245, 230, 184, 0.25), transparent) !important;
    height: 2px !important;
}

body:not([class*="theme-"]) .sidebar-logo-title,
body:not([class*="theme-"]) .sidebar-logo-title-collapsed {
    background: linear-gradient(135deg, #fff8e7 0%, #d4af37 48%, #f5e6b8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body:not([class*="theme-"]) .live-clock .time {
    background: linear-gradient(135deg, #ffffff, #e8d48a, #d4af37) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body:not([class*="theme-"]) .live-clock {
    background: rgba(212, 175, 55, 0.06) !important;
    border-color: rgba(212, 175, 55, 0.16) !important;
}

body:not([class*="theme-"]) .nav-item-main::before {
    background: linear-gradient(to bottom, #f5e6b8, #c5a028) !important;
}

body:not([class*="theme-"]) .nav-item-main.active {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.14) 0%,
        rgba(0, 0, 0, 0.38) 50%,
        rgba(0, 0, 0, 0.5) 100%
    ) !important;
    color: #fff8e7 !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(245, 230, 184, 0.1),
        inset 0 0 24px rgba(212, 175, 55, 0.1),
        0 0 20px rgba(212, 175, 55, 0.15) !important;
}

body:not([class*="theme-"]) .nav-item-main.active i {
    color: #f5e6b8 !important;
    background: rgba(212, 175, 55, 0.2) !important;
}

body:not([class*="theme-"]) .nav-item-main:hover {
    border-color: rgba(212, 175, 55, 0.12) !important;
}

body:not([class*="theme-"]) .sidebar-section-label::before {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.65), transparent) !important;
    box-shadow: none !important;
}

body:not([class*="theme-"]) .sidebar-section-label--main {
    color: rgba(232, 212, 138, 0.75) !important;
}

body:not([class*="theme-"]) .sidebar-section-label--main::before {
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.35)) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.25) !important;
}

body:not([class*="theme-"]) .sidebar-section-label--ops {
    color: rgba(196, 184, 150, 0.72) !important;
}

body:not([class*="theme-"]) .sidebar-section-label--ops::before {
    background: linear-gradient(90deg, #c9a86c, rgba(201, 168, 108, 0.35)) !important;
    box-shadow: 0 0 6px rgba(201, 168, 108, 0.2) !important;
}

body:not([class*="theme-"]) .sidebar-divider--section {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.28) 25%,
        rgba(245, 230, 184, 0.12) 50%,
        rgba(212, 175, 55, 0.28) 75%,
        transparent
    ) !important;
}

body:not([class*="theme-"]) .sidebar-toggle-btn:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

body:not([class*="theme-"]) .sidebar-body {
    scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}

body:not([class*="theme-"]) .sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35) !important;
}

body:not([class*="theme-"]) .brand-text h1 {
    background: linear-gradient(to right, #fff8e7, #d4af37, #f5e6b8) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body:not([class*="theme-"]) #izinTabMenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body:not([class*="theme-"]) #izinTabMenu .btn-tab.active {
    color: #fff8e7 !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(197, 160, 89, 0.1) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Preset galeri — shell & kartu mengikuti variabel tema */
body.theme-wb,
body[class*="theme-gold-"] {
    color: var(--text-main);
    background: transparent !important;
}

body.theme-wb .brand-text h1,
body.theme-wb .sidebar-logo-title,
body.theme-wb .sidebar-logo-title-collapsed,
body[class*="theme-gold-"] .brand-text h1,
body[class*="theme-gold-"] .sidebar-logo-title,
body[class*="theme-gold-"] .sidebar-logo-title-collapsed {
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 48%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.theme-wb .live-clock .time,
body[class*="theme-gold-"] .live-clock .time {
    background: linear-gradient(135deg, var(--text-main), var(--accent), var(--primary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body[class*="theme-gold-"] .app-sidebar {
    background: var(--shell-sidebar, linear-gradient(180deg, rgba(7, 6, 5, 0.98) 0%, rgba(3, 3, 3, 0.99) 100%)) !important;
    border-right-color: var(--card-border-theme) !important;
}

body.theme-wb .app-header,
body[class*="theme-gold-"] .app-header {
    background: var(--shell-header, linear-gradient(180deg, rgba(8, 7, 5, 0.95) 0%, rgba(4, 4, 4, 0.88) 100%)) !important;
    border-bottom-color: var(--card-border-theme) !important;
}

body.theme-wb .sidebar-top-accent,
body[class*="theme-gold-"] .sidebar-top-accent {
    background: linear-gradient(90deg, transparent, var(--primary-glow), var(--accent-glow), transparent) !important;
}

body.theme-wb .nav-item-main.active,
body[class*="theme-gold-"] .nav-item-main.active {
    background: linear-gradient(
        135deg,
        var(--glass-tint) 0%,
        rgba(0, 0, 0, 0.38) 50%,
        rgba(0, 0, 0, 0.5) 100%
    ) !important;
    border-color: var(--primary) !important;
    color: var(--accent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 24px var(--primary-glow),
        0 0 20px var(--primary-glow) !important;
}

body.theme-wb .nav-item-main.active i,
body[class*="theme-gold-"] .nav-item-main.active i {
    color: #f8fbe8 !important;
    background: linear-gradient(145deg, rgba(201, 211, 106, 0.42) 0%, rgba(142, 196, 220, 0.28) 100%) !important;
    opacity: 1 !important;
}

body.theme-wb .nav-item-main::before,
body[class*="theme-gold-"] .nav-item-main::before {
    background: linear-gradient(to bottom, var(--accent), var(--primary-hover)) !important;
}

body.theme-wb input,
body.theme-wb select,
body.theme-wb textarea,
body[class*="theme-gold-"] input,
body[class*="theme-gold-"] select,
body[class*="theme-gold-"] textarea {
    border-color: var(--card-border-theme) !important;
}

body.theme-wb .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card),
body[class*="theme-gold-"] .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card) {
    background: var(--glass-panel, linear-gradient(145deg, rgba(10, 9, 7, 0.92) 0%, rgba(5, 5, 4, 0.88) 100%)) !important;
    border-color: var(--card-border-theme) !important;
}

body.theme-wb .btn-primary,
body[class*="theme-gold-"] .btn-primary {
    color: var(--btn-primary-text, #1a1408) !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 52%, var(--primary-hover) 100%) !important;
    box-shadow: 0 4px 22px var(--primary-glow) !important;
}

body.theme-wb .btn-primary:hover,
body[class*="theme-gold-"] .btn-primary:hover {
    box-shadow: 0 6px 28px var(--primary-glow) !important;
}

body.theme-wb td,
body.theme-wb .data-table td,
body[class*="theme-gold-"] td,
body[class*="theme-gold-"] .data-table td {
    color: var(--text-main);
}

body.theme-wb .text-muted,
body.theme-wb [style*="color: var(--text-muted)"],
body[class*="theme-gold-"] .text-muted,
body[class*="theme-gold-"] [style*="color: var(--text-muted)"] {
    color: var(--text-muted) !important;
}

/* ── Tema WB — mewah matte, background warna (tanpa gambar) ── */
body.theme-wb {
    color: #f2f5f8 !important;
    background-color: #0b1118 !important;
}

body.theme-wb .background-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    background:
        radial-gradient(ellipse 90% 70% at 12% 8%, rgba(201, 211, 106, 0.16) 0%, transparent 52%),
        radial-gradient(ellipse 80% 65% at 92% 18%, rgba(142, 196, 220, 0.18) 0%, transparent 48%),
        radial-gradient(ellipse 75% 55% at 50% 100%, rgba(36, 72, 96, 0.35) 0%, transparent 55%),
        linear-gradient(165deg, #0a121a 0%, #101c28 42%, #0b1118 72%, #081018 100%) !important;
    background-color: #0b1118 !important;
}

/* Panel/kartu lebih solid agar teks tetap tajam di atas gradien */
body.theme-wb .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card) {
    background: linear-gradient(145deg, rgba(30, 48, 64, 0.96) 0%, rgba(20, 34, 48, 0.95) 100%) !important;
    box-shadow: 0 8px 24px rgba(8, 20, 32, 0.4) !important;
}

/* Sidebar WB — gradien navy + aksen lime/cyan */
body.theme-wb .app-sidebar {
    background-color: #0b1118 !important;
    background-image:
        radial-gradient(ellipse 120% 60% at 0% 0%, rgba(201, 211, 106, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 100% 50% at 100% 100%, rgba(142, 196, 220, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #121c28 0%, #0c141e 48%, #0a1018 100%) !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-right-color: rgba(142, 196, 220, 0.22) !important;
}

/* Sidebar nav — tombol mewah (tema WB) */
body.theme-wb .nav-item-main {
    border-radius: 12px !important;
    letter-spacing: 0.04em !important;
    transform: none !important;
}

body.theme-wb .nav-item-main:not(.active):not(.sidebar-logout-btn) {
    background:
        linear-gradient(155deg, rgba(32, 46, 62, 0.92) 0%, rgba(14, 22, 32, 0.94) 55%, rgba(10, 16, 24, 0.96) 100%) !important;
    border: 1px solid rgba(201, 211, 106, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

body.theme-wb .nav-item-main:not(.active):not(.sidebar-logout-btn):hover {
    background:
        linear-gradient(155deg, rgba(42, 60, 78, 0.96) 0%, rgba(18, 28, 40, 0.96) 55%, rgba(12, 20, 30, 0.98) 100%) !important;
    border-color: rgba(201, 211, 106, 0.38) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 4px 14px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(142, 196, 220, 0.08) !important;
}

body.theme-wb .nav-item-main::before {
    width: 3px !important;
    top: 7px !important;
    bottom: 7px !important;
    opacity: 0.55 !important;
    background: linear-gradient(180deg, transparent, #c9d36a 30%, #8ec4dc 70%, transparent) !important;
    box-shadow: none !important;
}

body.theme-wb .nav-item-main:hover::before,
body.theme-wb .nav-item-main.active::before {
    opacity: 1 !important;
}

body.theme-wb .sidebar-section-label {
    letter-spacing: 0.16em !important;
    font-weight: 800 !important;
    opacity: 0.95;
}

body.theme-wb .sidebar-section-label--main {
    color: #c9d36a !important;
}

body.theme-wb .sidebar-section-label--wb {
    color: #8ec4dc !important;
}

body.theme-wb .sidebar-section-label--ops {
    color: #d5df8a !important;
}

body.theme-wb .sidebar-section-label::before {
    background: linear-gradient(90deg, #c9d36a, #8ec4dc) !important;
    box-shadow: 0 0 8px rgba(201, 211, 106, 0.25);
}

body.theme-wb .sidebar-group-toggle {
    border-radius: 12px !important;
    background:
        linear-gradient(155deg, rgba(32, 46, 62, 0.92) 0%, rgba(14, 22, 32, 0.94) 100%) !important;
    border: 1px solid rgba(201, 211, 106, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

body.theme-wb .sidebar-group-toggle:hover,
body.theme-wb .sidebar-group-toggle.is-open {
    border-color: rgba(201, 211, 106, 0.35) !important;
    background:
        linear-gradient(155deg, rgba(42, 60, 78, 0.96) 0%, rgba(16, 26, 36, 0.96) 100%) !important;
}

body.theme-wb .sidebar-nav-group--cs .sidebar-group-toggle__label i {
    background: linear-gradient(145deg, rgba(142, 196, 220, 0.28), rgba(56, 120, 160, 0.35)) !important;
    border: 1px solid rgba(142, 196, 220, 0.35) !important;
    color: #b8e0f0 !important;
}

body.theme-wb .sidebar-nav-group--st .sidebar-group-toggle__label i {
    background: linear-gradient(145deg, rgba(201, 211, 106, 0.28), rgba(120, 140, 60, 0.35)) !important;
    border: 1px solid rgba(201, 211, 106, 0.35) !important;
    color: #e8efc4 !important;
}

/* Footer jam — satu panel saja, tanpa kotak hitam berlapis */
body.theme-wb .sidebar-footer {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: 8px;
}

body.theme-wb .sidebar-footer-divider {
    background: linear-gradient(90deg, transparent, rgba(142, 196, 220, 0.28), transparent) !important;
    margin-bottom: 10px;
}

body.theme-wb .live-clock {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(24, 36, 48, 0.92) 0%, rgba(16, 24, 32, 0.88) 100%) !important;
    border: 1px solid rgba(142, 196, 220, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center !important;
}

body.theme-wb .live-clock .time {
    display: block !important;
    width: 100% !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace !important;
    letter-spacing: 1.2px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    background: linear-gradient(135deg, #e8efc4 0%, #c9d36a 50%, #8ec4dc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    text-shadow: none !important;
}

body.theme-wb .live-clock .date {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    color: rgba(154, 173, 184, 0.95) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-wb .live-clock:hover {
    background: linear-gradient(145deg, rgba(28, 42, 56, 0.95) 0%, rgba(18, 28, 38, 0.92) 100%) !important;
    border-color: rgba(142, 196, 220, 0.36) !important;
}

body.theme-wb .app-sidebar.sidebar-collapsed .live-clock {
    align-items: center !important;
    padding: 8px 1px !important;
    overflow: visible !important;
}

body.theme-wb .app-sidebar.sidebar-collapsed .live-clock .time {
    font-size: 0.52rem !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    font-variant-numeric: tabular-nums !important;
}

body.theme-wb .sidebar-logo-container {
    position: relative;
    background:
        linear-gradient(160deg, rgba(34, 48, 64, 0.98) 0%, rgba(16, 24, 34, 0.97) 42%, rgba(8, 12, 18, 0.99) 100%);
    border: 1px solid rgba(201, 211, 106, 0.28);
    border-radius: 14px;
    padding: 8px 8px 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
    height: auto;
    min-height: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 10px 22px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(142, 196, 220, 0.06);
    /* visible agar nama panjang tidak terpotong */
    overflow: visible;
}

body.theme-wb .sidebar-logo-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e8efc4 18%, #c9d36a 50%, #8ec4dc 82%, transparent);
    pointer-events: none;
    opacity: 0.95;
}

body.theme-wb .sidebar-logo-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% -10%, rgba(201, 211, 106, 0.16), transparent 52%),
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(142, 196, 220, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%);
    pointer-events: none;
}

body.theme-wb .sidebar-logo-top,
body.theme-wb .sidebar-logo-clickable,
body.theme-wb .sidebar-staff-block {
    position: relative;
    z-index: 1;
}

body.theme-wb .sidebar-staff-card {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 14px rgba(142, 196, 220, 0.08);
}

body.theme-wb .sidebar-staff-card-inner {
    background:
        radial-gradient(ellipse 100% 70% at 50% -25%, rgba(201, 211, 106, 0.1) 0%, transparent 52%),
        radial-gradient(ellipse 80% 50% at 100% 100%, rgba(142, 196, 220, 0.08) 0%, transparent 48%),
        linear-gradient(155deg, rgba(32, 46, 62, 0.94) 0%, rgba(14, 22, 32, 0.96) 55%, rgba(10, 16, 24, 0.98) 100%);
}

body.theme-wb .sidebar-staff-inner-frame {
    border-color: rgba(142, 196, 220, 0.14);
    box-shadow: inset 0 0 16px rgba(142, 196, 220, 0.05);
}

body.theme-wb .sidebar-staff-card-border {
    background: linear-gradient(
        145deg,
        rgba(201, 211, 106, 0.5) 0%,
        rgba(142, 196, 220, 0.42) 42%,
        rgba(212, 175, 55, 0.25) 72%,
        rgba(201, 211, 106, 0.45) 100%
    );
}

body.theme-wb .sidebar-staff-card .sidebar-staff-name,
body.theme-wb .sidebar-staff-card #headerStaffName {
    background: linear-gradient(135deg, #e8efc4 0%, #c9d36a 48%, #8ec4dc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

body.theme-wb .sidebar-staff-name-accent {
    background: linear-gradient(180deg, transparent, #c9d36a 30%, #8ec4dc 70%, transparent) !important;
    box-shadow: 0 0 8px rgba(142, 196, 220, 0.3) !important;
}

body.theme-wb .sidebar-staff-corner {
    border-color: rgba(142, 196, 220, 0.45);
}

body.theme-wb .sidebar-staff-edit-btn {
    border-color: rgba(201, 211, 106, 0.28);
    background: linear-gradient(155deg, rgba(42, 60, 78, 0.92) 0%, rgba(14, 22, 32, 0.96) 100%);
    color: #e8efc4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 3px 10px rgba(0, 0, 0, 0.22);
}

body.theme-wb .sidebar-staff-edit-btn:hover {
    border-color: rgba(201, 211, 106, 0.48);
    background: linear-gradient(155deg, rgba(52, 72, 92, 0.96) 0%, rgba(18, 28, 40, 0.98) 100%);
    color: #ffffff;
}

body.theme-wb .sidebar-logout-btn,
body.theme-wb .nav-item-main.sidebar-logout-btn {
    color: #fecdd3 !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
    background: rgba(244, 63, 94, 0.14) !important;
}

body.theme-wb .sidebar-logout-btn:hover,
body.theme-wb .nav-item-main.sidebar-logout-btn:hover {
    color: #ffffff !important;
    border-color: rgba(244, 63, 94, 0.7) !important;
    background: rgba(244, 63, 94, 0.28) !important;
}

body.theme-wb .sidebar-logout-btn i,
body.theme-wb .nav-item-main.sidebar-logout-btn i {
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.18) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    border-radius: 8px !important;
}

body.theme-wb .sidebar-logo-title,
body.theme-wb .sidebar-logo-title-collapsed {
    position: relative;
    z-index: 1;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: 2.8px !important;
    background: linear-gradient(135deg, #f4f7e8 0%, #e8efc4 22%, #c9d36a 52%, #8ec4dc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) !important;
}

body.theme-wb .sidebar-logo-title-collapsed {
    font-size: 0.95rem !important;
    letter-spacing: 1.5px !important;
}

body.theme-wb .sidebar-toggle-btn {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(36, 52, 68, 0.95), rgba(16, 24, 34, 0.95)) !important;
    border: 1px solid rgba(201, 211, 106, 0.35) !important;
    color: #e8efc4 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.28);
}

body.theme-wb .sidebar-toggle-btn:hover {
    background: linear-gradient(145deg, rgba(48, 68, 88, 0.98), rgba(22, 34, 46, 0.98)) !important;
    border-color: rgba(142, 196, 220, 0.55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 14px rgba(201, 211, 106, 0.22);
    transform: scale(1.04);
}

body.theme-wb .app-sidebar.sidebar-collapsed .sidebar-logo-container {
    padding: 10px 4px !important;
    gap: 10px;
}

body.theme-wb .app-header {
    background: var(--shell-header, linear-gradient(180deg, #15202a 0%, #0e161e 100%)) !important;
}

body.theme-wb::before,
body.theme-wb::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body.theme-wb h1,
body.theme-wb h2,
body.theme-wb h3,
body.theme-wb h4,
body.theme-wb label,
body.theme-wb .app-header__title,
body.theme-wb .nav-section-label,
body.theme-wb .nav-item-main,
body.theme-wb .header-staff-profile {
    color: #f2f5f8 !important;
    text-shadow: none !important;
    filter: none !important;
}

body.theme-wb .brand-text h1,
body.theme-wb .sidebar-logo-title,
body.theme-wb .sidebar-logo-title-collapsed,
body.theme-wb .live-clock .time {
    background: linear-gradient(135deg, #f4f7e8 0%, #e8efc4 22%, #c9d36a 52%, #8ec4dc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

body.theme-wb .sidebar-logo-title,
body.theme-wb .sidebar-logo-title-collapsed {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) !important;
}

body.theme-wb .live-clock .time {
    filter: none !important;
}

body.theme-wb .nav-item-main i {
    color: #d5df8a !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(201, 211, 106, 0.22) !important;
    background:
        linear-gradient(145deg, rgba(201, 211, 106, 0.14) 0%, rgba(16, 24, 34, 0.85) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
    filter: none !important;
}

body.theme-wb .nav-item-main:hover {
    color: #ffffff !important;
    border-color: rgba(201, 211, 106, 0.4) !important;
    transform: none !important;
}

body.theme-wb .nav-item-main:hover i {
    color: #f4f7e8 !important;
    border-color: rgba(201, 211, 106, 0.45) !important;
    background:
        linear-gradient(145deg, rgba(201, 211, 106, 0.28) 0%, rgba(142, 196, 220, 0.12) 100%) !important;
}

body.theme-wb .nav-item-main.active:not(.sidebar-logout-btn) {
    background:
        linear-gradient(155deg, rgba(48, 68, 88, 0.98) 0%, rgba(24, 36, 50, 0.98) 45%, rgba(14, 22, 32, 0.99) 100%) !important;
    border-color: rgba(201, 211, 106, 0.55) !important;
    color: #f4f7e8 !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(201, 211, 106, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(142, 196, 220, 0.1) !important;
    filter: none !important;
}

body.theme-wb .nav-item-main.active i,
body.theme-wb .nav-item-main.active:hover i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    border-color: rgba(201, 211, 106, 0.55) !important;
    background:
        linear-gradient(145deg, rgba(201, 211, 106, 0.5) 0%, rgba(142, 196, 220, 0.32) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(201, 211, 106, 0.22),
        0 2px 10px rgba(201, 211, 106, 0.35) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) !important;
}

body.theme-wb .nav-item-main.nav-item-sub:not(.active) {
    background: rgba(10, 16, 24, 0.55) !important;
    border-color: rgba(142, 196, 220, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.theme-wb .nav-item-main.nav-item-sub.active {
    border-color: rgba(142, 196, 220, 0.4) !important;
}

body.theme-wb .sidebar-top-accent {
    background: linear-gradient(90deg, transparent, rgba(201, 211, 106, 0.35), rgba(142, 196, 220, 0.3), transparent) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.theme-wb .btn-primary {
    color: #0b1118 !important;
    background: linear-gradient(135deg, #d5df8a 0%, #c9d36a 55%, #8ec4dc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    filter: none !important;
}

body.theme-wb .btn-primary:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.04) !important;
}

body.theme-wb .btn-secondary {
    color: #f2f5f8 !important;
    border-color: rgba(142, 196, 220, 0.35) !important;
    background: #182430 !important;
    box-shadow: none !important;
}

body.theme-wb th,
body.theme-wb .report-table thead th,
body.theme-wb .data-table thead th,
body.theme-wb table thead th {
    background: #334556 !important;
    background-color: #334556 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: rgba(142, 196, 220, 0.28) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body.theme-wb td,
body.theme-wb .report-table tbody td,
body.theme-wb .data-table tbody td,
body.theme-wb table tbody td {
    color: #f2f5f8 !important;
    background-color: #101820 !important;
    border-color: #243444 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Jangan timpa warna sel shift (1/2/3/4/1/2/OFF/CUTI) */
body.theme-wb td.shift-cell,
body.theme-wb .report-table tbody td.shift-cell,
body.theme-wb table tbody td.shift-cell,
body.theme-wb .absensi-spreadsheet-table tbody td.shift-cell {
    background-color: transparent !important;
    border-color: inherit !important;
}

body.theme-wb td.shift-cell.shift-pagi,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-pagi {
    background: var(--shift-pagi-bg) !important;
    color: var(--shift-pagi-text) !important;
    border-color: var(--shift-pagi-border) !important;
}

body.theme-wb td.shift-cell.shift-malam,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-malam {
    background: var(--shift-malam-bg) !important;
    color: var(--shift-malam-text) !important;
    border-color: var(--shift-malam-border) !important;
}

body.theme-wb td.shift-cell.shift-tiga,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-tiga {
    background: var(--shift-tiga-bg) !important;
    color: var(--shift-tiga-text) !important;
    border-color: var(--shift-tiga-border) !important;
}

body.theme-wb td.shift-cell.shift-empat,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-empat {
    background: var(--shift-empat-bg) !important;
    color: var(--shift-empat-text) !important;
    border-color: var(--shift-empat-border) !important;
}

body.theme-wb td.shift-cell.shift-half,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-half {
    background: var(--shift-half-bg) !important;
    color: var(--shift-half-text) !important;
    border-color: var(--shift-half-border) !important;
}

body.theme-wb td.shift-cell.shift-off,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-off {
    background: var(--shift-off-bg) !important;
    color: var(--shift-off-text) !important;
    border-color: var(--shift-off-border) !important;
}

body.theme-wb td.shift-cell.shift-cuti,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-cuti {
    background: var(--shift-cuti-bg) !important;
    color: var(--shift-cuti-text) !important;
    border-color: var(--shift-cuti-border) !important;
}

body.theme-wb tr:hover td,
body.theme-wb .report-table tbody tr:hover td {
    background-color: #1a2834 !important;
}

body.theme-wb tr:hover td.shift-cell,
body.theme-wb .report-table tbody tr:hover td.shift-cell,
body.theme-wb .absensi-spreadsheet-table tbody tr:hover td.shift-cell {
    background-color: transparent !important;
}

body.theme-wb .wb-team-table-wrap,
body.theme-wb .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card) {
    background: #1a2d3e !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(8, 20, 32, 0.4) !important;
    filter: none !important;
    border-color: rgba(142, 196, 220, 0.22) !important;
}

body.theme-wb .wb-team-table thead th,
body.theme-wb .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-wb .wb-team-table--cuti thead tr:first-child th[colspan] {
    background: #243444 !important;
    background-color: #243444 !important;
    color: #dce8f0 !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.35) !important;
    border-right: 1px solid rgba(142, 196, 220, 0.12) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    padding: 14px 10px !important;
    min-height: 48px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.05em !important;
}

body.theme-wb .wb-team-table--cuti thead th,
body.theme-wb .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-wb .wb-team-table--cuti thead tr:first-child th[colspan],
body.theme-wb #wbPengajuanCutiTable thead th {
    font-size: 0.58rem !important;
    padding: 5px 6px !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
}

body.theme-wb .wb-team-table--cuti thead th.wb-th-rowspan,
body.theme-wb #wbPengajuanCutiTable thead th.wb-th-rowspan {
    padding: 0 !important;
    vertical-align: middle !important;
}

body.theme-wb .wb-team-table--cuti thead th.wb-th-group,
body.theme-wb #wbPengajuanCutiTable thead th.wb-th-group {
    padding: 6px 6px 4px !important;
    vertical-align: middle !important;
}

body.theme-wb .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-wb .wb-team-table--cuti thead th.wb-th-sub,
body.theme-wb #wbPengajuanCutiTable thead th.wb-th-sub {
    padding: 5px 6px !important;
    vertical-align: middle !important;
}

body.theme-wb .wb-team-table tbody td {
    color: #e8eef4 !important;
    background-color: #101820 !important;
    border-bottom: 1px solid rgba(142, 196, 220, 0.10) !important;
    border-right: 1px solid rgba(142, 196, 220, 0.08) !important;
    padding: 3px 6px !important;
}

body.theme-wb .wb-team-table tbody tr:nth-child(even) td {
    background-color: #121c26 !important;
}

body.theme-wb .wb-team-table tbody tr:hover td {
    background-color: #1a2834 !important;
}

body.theme-wb .wb-team-table thead th.wb-col-name,
body.theme-wb #wbDataStaffTable thead th.wb-col-name,
body.theme-wb #wbDataKesalahanTable thead th.wb-col-name,
body.theme-wb #wbPengajuanCutiTable thead th.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable thead th.wb-col-name {
    color: #e8efc4 !important;
    background: #243444 !important;
    background-color: #243444 !important;
}

body.theme-wb .wb-team-table tbody td.wb-col-name,
body.theme-wb #wbDataStaffTable tbody td.wb-col-name,
body.theme-wb #wbDataKesalahanTable tbody td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable tbody td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable tbody td.wb-col-name {
    color: #f2f5f8 !important;
    background: #15202a !important;
    background-color: #15202a !important;
    font-weight: 700 !important;
}

body.theme-wb .wb-team-table tbody td.wb-col-role,
body.theme-wb .wb-team-table tbody td[data-col="jabatan"] {
    color: #9aadb8 !important;
}

body.theme-wb .wb-jabatan-divider td {
    background: #1a2834 !important;
    color: #c9d36a !important;
    border-color: rgba(201, 211, 106, 0.25) !important;
    box-shadow: none !important;
}

body.theme-wb .wb-jabatan-divider td span {
    color: #c9d36a !important;
}

body.theme-wb .wb-team-header h2,
body.theme-wb .monitor-header h2,
body.theme-wb .wb-team-header p {
    color: #f2f5f8 !important;
    -webkit-text-fill-color: #f2f5f8 !important;
    background: none !important;
    text-shadow: none !important;
}

body.theme-wb .wb-team-header__icon {
    background: #1a2834 !important;
    border-color: rgba(201, 211, 106, 0.4) !important;
    color: #c9d36a !important;
    box-shadow: none !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.45rem !important;
}

body.theme-wb .wb-team-header h2 {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

body.theme-wb input,
body.theme-wb select,
body.theme-wb textarea,
body.theme-wb .chat-modal-input,
body.theme-wb .wb-team-search {
    color: #f2f5f8 !important;
    background: #0e161e !important;
    border-color: rgba(142, 196, 220, 0.32) !important;
    box-shadow: none !important;
}

body.theme-wb input::placeholder,
body.theme-wb textarea::placeholder {
    color: #6f8496 !important;
}

body.theme-wb .badge,
body.theme-wb .wb-badge {
    color: #f2f5f8 !important;
    border-color: rgba(142, 196, 220, 0.32) !important;
    box-shadow: none !important;
}

body.theme-wb ::-webkit-scrollbar-thumb {
    background: #334556 !important;
    box-shadow: none !important;
}

body.theme-wb .header-action-pill {
    color: #f2f5f8 !important;
    border-color: rgba(142, 196, 220, 0.32) !important;
    background: #182430 !important;
    box-shadow: none !important;
}

body.theme-wb .absensi-spreadsheet-table thead th {
    background: linear-gradient(180deg, rgba(40, 48, 58, 0.98) 0%, rgba(24, 30, 38, 0.98) 100%) !important;
    color: #e8dcc0 !important;
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.12) !important;
}

body.theme-wb .absensi-spreadsheet-table thead th.absensi-spreadsheet-staff-col {
    background: linear-gradient(180deg, rgba(72, 58, 28, 0.95) 0%, rgba(36, 32, 22, 0.98) 100%) !important;
    color: #f3e4b0 !important;
    border-color: rgba(212, 175, 55, 0.42) !important;
}

body.theme-wb .absensi-spreadsheet-table tbody td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(48, 40, 24, 0.92) 0%, rgba(22, 24, 32, 0.96) 48%, rgba(16, 20, 28, 0.98) 100%) !important;
    border-color: rgba(212, 175, 55, 0.34) !important;
    color: #f7f0de !important;
}

body.theme-wb .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(42, 36, 22, 0.94) 0%, rgba(18, 22, 30, 0.98) 100%) !important;
}

body.theme-wb .absensi-spreadsheet-table tbody td.col-role-cell {
    color: #e8d5a0 !important;
}

body.theme-wb .absensi-spreadsheet-table tbody td {
    color: #f2f5f8 !important;
}

/* Pager & search-clear: hilangkan sisa merah/emas imperial di tema WB */
body.theme-wb .wb-pager {
    border-color: rgba(142, 196, 220, 0.28) !important;
    background: #182430 !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.theme-wb .wb-pager__label,
body.theme-wb .wb-pager__info,
body.theme-wb .wb-pager__page {
    color: #c9d36a !important;
}

body.theme-wb .wb-pager-dd__btn {
    border-color: rgba(142, 196, 220, 0.35) !important;
    background: #0e161e !important;
    color: #f2f5f8 !important;
    box-shadow: none !important;
}

body.theme-wb .wb-pager-dd__btn:hover,
body.theme-wb .wb-pager-dd.is-open .wb-pager-dd__btn {
    border-color: #c9d36a !important;
    filter: none !important;
    box-shadow: 0 0 0 1px rgba(201, 211, 106, 0.25) !important;
}

body.theme-wb .wb-pager-dd__menu {
    border-color: rgba(142, 196, 220, 0.3) !important;
    background: #15202a !important;
    background-image: none !important;
}

body.theme-wb .wb-pager-dd__opt {
    color: #f2f5f8 !important;
}

body.theme-wb .wb-pager-dd__opt:hover {
    background: #1a2834 !important;
}

body.theme-wb .wb-pager-dd__opt.is-active {
    color: #0b1118 !important;
    background: #c9d36a !important;
}

body.theme-wb .wb-pager__btn {
    border-color: rgba(142, 196, 220, 0.35) !important;
    background: #1a2834 !important;
    color: #c9d36a !important;
}

body.theme-wb .wb-pager__btn:hover:not(:disabled) {
    border-color: #c9d36a !important;
    filter: brightness(1.06) !important;
}

body.theme-wb .wb-team-search-clear {
    color: #0b1118 !important;
    background: linear-gradient(145deg, #d5df8a 0%, #c9d36a 55%, #8ec4dc 100%) !important;
    box-shadow: none !important;
}

body.theme-wb .wb-team-search-clear:hover {
    box-shadow: 0 0 0 1px rgba(201, 211, 106, 0.45) !important;
}

body.theme-wb .wb-team-card {
    background: #15202a !important;
    background-image: none !important;
}

body.theme-wb [style*="box-shadow"],
body.theme-wb .glass-card:not(.staff-console-card),
body.theme-wb .btn,
body.theme-wb .nav-item-main {
    filter: none !important;
}

/* Frame konsol istirahat: izinkan glow saat aktif */
body.theme-wb .staff-console-card.bg-state-break,
body.theme-wb .staff-console-card.bg-state-late {
    filter: none !important;
}

/* Glass cards: tinted border + subtle background glow */
body[class*="theme-"] .glass-card {
    border-color: var(--card-border-theme, rgba(255,255,255,0.1));
    box-shadow: 0 8px 40px rgba(0,0,0,0.55),
                0 0 0 1px var(--card-border-theme, rgba(255,255,255,0.06)) inset;
}

/* Primary buttons */
body[class*="theme-"] .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    box-shadow: 0 4px 20px var(--primary-glow);
    color: #fff;
}
body[class*="theme-"] .btn-primary:hover {
    box-shadow: 0 6px 28px var(--primary-glow);
    filter: brightness(1.08);
}

/* Secondary buttons: subtle tint */
body[class*="theme-"] .btn-secondary {
    border-color: var(--card-border-theme, rgba(255,255,255,0.12));
    color: var(--text-main);
}
body[class*="theme-"] .btn-secondary:hover {
    background: var(--glass-tint, rgba(255,255,255,0.05));
    border-color: var(--primary);
}

/* Nav items */
body[class*="theme-"] .nav-item-main.active,
body[class*="theme-"] .nav-item-main:hover {
    color: var(--primary);
}
body[class*="theme-"] .nav-item-main.active::before {
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Input focus */
body[class*="theme-"] input:focus,
body[class*="theme-"] select:focus,
body[class*="theme-"] textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--glass-tint, rgba(139,92,246,0.15)) !important;
    outline: none;
}

/* Badges & tags */
body[class*="theme-"] .badge-primary,
body[class*="theme-"] .status-badge.online {
    background: var(--glass-tint, rgba(139,92,246,0.15));
    color: var(--primary);
    border-color: var(--card-border-theme, rgba(139,92,246,0.25));
}

/* Scrollbar tinted */
body[class*="theme-"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--primary), var(--accent));
}
body[class*="theme-"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--primary-hover), var(--accent));
}

/* Section headers / dividers */
body[class*="theme-"] .section-title,
body[class*="theme-"] .view-header h2,
body[class*="theme-"] .card-title {
    color: var(--text-main);
}

/* Stat cards / metric highlights */
body[class*="theme-"] .stat-value,
body[class*="theme-"] .metric-number {
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary-glow);
}

/* Table headers */
body[class*="theme-"] th {
    color: var(--primary);
    border-bottom-color: var(--card-border-theme, rgba(255,255,255,0.08));
}

/* Selected / active rows */
body[class*="theme-"] tr.active,
body[class*="theme-"] tr:hover td {
    background: var(--glass-tint, rgba(139,92,246,0.06));
}

/* Link / accent text */
body[class*="theme-"] a,
body[class*="theme-"] .text-accent {
    color: var(--accent);
}

/* Progress bars */
body[class*="theme-"] .progress-bar,
body[class*="theme-"] .progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 8px var(--primary-glow);
}

/* ── Background override: hapus .bg-gradient-dark per tema ── */
/* (sudah ditangani langsung oleh JS di #bgOverlay)            */
/* Blok lama per-tema dihapus karena tidak diperlukan lagi     */

/* ============================================================
   GLASS THEME — Luxury Floating Liquid Glass
   visionOS + iOS 18 inspired: transparan, melayang,
   aurora, shimmer animasi, depth layering premium.
   ============================================================ */

/* ── Keyframes eksklusif Glass ── */
@keyframes glassFloat {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-6px); }
}
@keyframes glassShimmer {
    0%   { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateX(280%) skewX(-14deg); opacity: 0; }
}
@keyframes glassOrbPulse {
    0%,100% { opacity: 0.65; transform: scale(1); }
    50%     { opacity: 1.00; transform: scale(1.10); }
}

/* ── CSS variables tema ── */
body.theme-glass {
    --text-main:         #ffffff;
    --text-muted:        #b8d4ff;
    --text-subtle:       #d4e8ff;
    --bg-dark:           #060a14;
    --glass-border-top:  rgba(255,255,255,0.35);
    --glass-border-side: rgba(200,220,255,0.18);
}
body.theme-glass { background-color: #060a14 !important; }

/* ── Aurora orbs — lebih besar, hidup, filter blur ── */
body.theme-glass::before {
    background: radial-gradient(circle,
        rgba(100,160,255,0.38) 0%,
        rgba(80,120,230,0.18) 38%,
        transparent 70%
    ) !important;
    width: 800px; height: 800px;
    top: -18%; left: -12%;
    animation: glassOrbPulse 9s ease-in-out infinite alternate,
               floatOrb 17s ease-in-out infinite alternate;
    filter: blur(2px);
}
body.theme-glass::after {
    display: none !important;
    content: none !important;
}

/* ── Glass Cards — frosted + floating ── */
body.theme-glass .glass-card {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.09) 0%,
        rgba(180,210,255,0.05) 45%,
        rgba(160,190,255,0.03) 70%,
        rgba(200,175,255,0.04) 100%
    ) !important;
    border: 1px solid var(--glass-border-side) !important;
    border-top: 1px solid var(--glass-border-top) !important;
    border-left: 1px solid rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(32px) saturate(210%) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(32px) saturate(210%) brightness(1.06) !important;
    border-radius: 20px !important;
    box-shadow:
        0 24px 64px rgba(0,0,20,0.62),
        0 8px 24px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.24) inset,
        0 -1px 0 rgba(100,150,255,0.08) inset !important;
    transform: translateZ(0);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s ease,
                border-color 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
body.theme-glass .glass-card:hover {
    transform: translateY(-5px) translateZ(0) !important;
    box-shadow:
        0 32px 80px rgba(0,0,20,0.68),
        0 12px 32px rgba(0,0,0,0.40),
        0 1px 0 rgba(255,255,255,0.32) inset !important;
    border-color: rgba(168,200,255,0.32) !important;
    border-top-color: rgba(255,255,255,0.42) !important;
}
/* shimmer dinonaktifkan */
body.theme-glass .glass-card:not(.active-break-card)::before {
    display: none !important;
    content: none !important;
}
body.theme-glass .glass-card:not(.active-break-card):hover::before {
    animation: none !important;
}
body.theme-glass .glass-card:not(.active-break-card)::after {
    display: none !important;
    background: none !important;
}
body.theme-glass .glass-card > * { position: relative !important; z-index: 3 !important; }

/* ── Teks utama — putih bersih, text-shadow untuk depth ── */
body.theme-glass,
body.theme-glass h1, body.theme-glass h2, body.theme-glass h3,
body.theme-glass h4, body.theme-glass h5, body.theme-glass h6,
body.theme-glass p, body.theme-glass span, body.theme-glass label,
body.theme-glass td, body.theme-glass th, body.theme-glass li,
body.theme-glass .text-main, body.theme-glass strong {
    color: var(--text-main);
    text-shadow: 0 1px 3px rgba(0,0,20,0.40);
}

/* Muted text tetap terbaca */
body.theme-glass .text-muted,
body.theme-glass .text-subtle,
body.theme-glass [style*="color: var(--text-muted)"],
body.theme-glass [style*="color:var(--text-muted)"] {
    color: #b8d4ff !important;
    opacity: 1 !important;
}

/* ── Tabel — semua baris dan kolom terlihat jelas ── */
body.theme-glass table { border-collapse: separate; border-spacing: 0; }
body.theme-glass thead tr {
    background: linear-gradient(90deg, rgba(100,160,255,0.13), rgba(140,100,255,0.09)) !important;
}
body.theme-glass th {
    color: #a8c8ff !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(168,200,255,0.28) !important;
    padding: 12px 16px !important;
    text-shadow: 0 0 14px rgba(168,200,255,0.55);
}
body.theme-glass td {
    color: #f0f6ff !important;
    border-bottom: 1px solid rgba(200,220,255,0.07) !important;
    padding: 11px 16px !important;
    text-shadow: 0 1px 2px rgba(0,0,20,0.35);
}
body.theme-glass tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.025) !important;
}
body.theme-glass tr:hover td {
    background: rgba(168,200,255,0.09) !important;
    color: #ffffff !important;
}

/* ── Buttons — frosted liquid, floating on hover ── */
body.theme-glass .btn-primary {
    background: linear-gradient(135deg,
        rgba(168,200,255,0.90),
        rgba(148,175,255,0.80),
        rgba(185,155,255,0.80)
    ) !important;
    color: #06090f !important; font-weight: 800 !important;
    border: 1px solid rgba(220,235,255,0.45) !important;
    border-top: 1px solid rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(168,200,255,0.40),
                0 1px 0 rgba(255,255,255,0.40) inset !important;
    text-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
body.theme-glass .btn-primary:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 30px rgba(168,200,255,0.55),
                0 1px 0 rgba(255,255,255,0.50) inset !important;
}
body.theme-glass .btn-primary:active { transform: translateY(0) scale(0.98) !important; }

body.theme-glass .btn-secondary,
body.theme-glass .btn:not(.btn-primary):not(.btn-danger):not(.btn-status-sudah):not(.btn-status-belum):not(.btn-status-locked) {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(200,220,255,0.16) !important;
    border-top: 1px solid rgba(255,255,255,0.20) !important;
    color: #dce8ff !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.25s ease !important;
}
body.theme-glass .btn-secondary:hover,
body.theme-glass .btn:not(.btn-primary):not(.btn-danger):not(.btn-status-sudah):not(.btn-status-belum):not(.btn-status-locked):hover {
    background: rgba(168,200,255,0.11) !important;
    border-color: rgba(168,200,255,0.35) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(168,200,255,0.18) !important;
}

/* ── Badge & status ── */
body.theme-glass .badge {
    background: rgba(168,200,255,0.10) !important;
    color: #c8dcff !important;
    border: 1px solid rgba(168,200,255,0.20) !important;
    backdrop-filter: blur(8px);
}

/* ── Input / Select / Textarea ── */
body.theme-glass input,
body.theme-glass select,
body.theme-glass textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(200,220,255,0.16) !important;
    border-top: 1px solid rgba(255,255,255,0.20) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 10px !important;
}
body.theme-glass input::placeholder,
body.theme-glass textarea::placeholder { color: rgba(180,210,255,0.45) !important; }
body.theme-glass input:focus,
body.theme-glass select:focus,
body.theme-glass textarea:focus {
    border-color: rgba(168,200,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(168,200,255,0.12),
                0 1px 0 rgba(255,255,255,0.20) inset !important;
}

/* ── Navigation — frosted floating bar ── */
body.theme-glass .app-header {
    background: rgba(6,10,20,0.52) !important;
    border-bottom: 1px solid rgba(200,220,255,0.10) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06),
                0 4px 30px rgba(0,0,20,0.30) !important;
}
body.theme-glass .app-nav {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(200,220,255,0.12) !important;
    border-top: 1px solid rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(20px) !important;
}
body.theme-glass .nav-item-main { color: rgba(200,220,255,0.70) !important; }
body.theme-glass .nav-item-main.active,
body.theme-glass .nav-item-main:hover {
    color: #ffffff !important;
    background: rgba(168,200,255,0.10) !important;
}
body.theme-glass .nav-item-main.active::before {
    background: #a8c8ff !important;
    box-shadow: 0 0 12px rgba(168,200,255,0.70) !important;
}

/* ── Scrollbar ── */
body.theme-glass ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(168,200,255,0.38), rgba(180,150,255,0.28)) !important;
}
body.theme-glass ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02) !important; }

/* ── Progress bar ── */
body.theme-glass .progress-bar,
body.theme-glass .progress-fill {
    background: linear-gradient(90deg, rgba(168,200,255,0.85), rgba(200,170,255,0.75)) !important;
    box-shadow: 0 0 14px rgba(168,200,255,0.50) !important;
}

/* ── Status badges ── */
body.theme-glass .status-badge,
body.theme-glass [class*="badge-"] { color: #f0f6ff !important; }

/* ── Stat / metric glow ── */
body.theme-glass .stat-value,
body.theme-glass .metric-number {
    color: #a8c8ff !important;
    text-shadow: 0 0 20px rgba(168,200,255,0.55), 0 0 40px rgba(168,200,255,0.25) !important;
}

/* ── Brand logo aurora ── */
body.theme-glass .brand-logo {
    background: linear-gradient(135deg, rgba(168,200,255,0.82), rgba(200,170,255,0.72)) !important;
    box-shadow: 0 4px 22px rgba(168,200,255,0.45), 0 1px 0 rgba(255,255,255,0.32) inset !important;
}
body.theme-glass .brand-text h1 {
    background: linear-gradient(to right, #ffffff, #b8d4ff, #d4c8ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── Modal — extra deep blur ── */
body.theme-glass .modal-card {
    backdrop-filter: blur(44px) saturate(230%) !important;
    -webkit-backdrop-filter: blur(44px) saturate(230%) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.11) 0%, rgba(180,210,255,0.06) 100%) !important;
    border-color: rgba(168,200,255,0.22) !important;
    box-shadow:
        0 40px 100px rgba(0,0,20,0.72),
        0 16px 40px rgba(0,0,0,0.40),
        0 1px 0 rgba(255,255,255,0.26) inset !important;
}

/* ── Kartu konsol staff — tanpa glow & shining ── */
body.theme-glass .staff-console-card {
    box-shadow:
        0 40px 100px rgba(0,0,0,0.65),
        0 16px 40px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.20) inset !important;
    animation: none !important;
}
body.theme-glass .staff-console-card:hover {
    box-shadow:
        0 60px 130px rgba(0,0,0,0.72),
        0 24px 60px rgba(0,0,0,0.40),
        0 1px 0 rgba(255,255,255,0.28) inset !important;
}
body.theme-glass .staff-console-card::before,
body.theme-glass .staff-console-card::after {
    display: none !important;
    opacity: 0 !important;
}
body.theme-glass .staff-console-card .console-shine-sweep {
    display: none !important;
    opacity: 0 !important;
}

/* ── Dividers ── */
body.theme-glass hr { border-color: rgba(200,220,255,0.10) !important; }

/* ================================================================
   CHINESE IMPERIAL DYNASTY THEME (TEMA CHINA MEWAH & FANTASTIS 🐉)
   ================================================================ */

body.theme-china-dynasty,
body.theme-gold-imperial {
    background-color: #0b0204 !important;
}

body.theme-china-dynasty::before,
body.theme-gold-imperial::before {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 65%) !important;
    animation: none !important;
}

body.theme-china-dynasty::after,
body.theme-gold-imperial::after {
    display: none !important;
    content: none !important;
}

@keyframes pulseChineseLantern {
    0% { transform: scale(1) translate(0, 0); opacity: 0.7; }
    50% { transform: scale(1.15) translate(-20px, 30px); opacity: 0.9; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
}

@keyframes floatDragonEmbers {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50% { transform: scale(1.2) translate(30px, -20px); opacity: 0.85; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
}

/* Glass Cards — imperial: emas halus, tanpa glow merah (kecuali kartu istirahat aktif) */
body.theme-china-dynasty .glass-card:not(.active-break-card),
body.theme-gold-imperial .glass-card:not(.active-break-card) {
    background: linear-gradient(145deg, rgba(12, 10, 8, 0.92) 0%, rgba(6, 5, 4, 0.90) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.22) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.52) !important;
    position: relative !important;
}

body.theme-china-dynasty .glass-card:not(.active-break-card):hover,
body.theme-gold-imperial .glass-card:not(.active-break-card):hover {
    border-color: rgba(212, 175, 55, 0.32) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55) !important;
    transform: none !important;
}

body.theme-china-dynasty .glass-card:not(.active-break-card)::before,
body.theme-gold-imperial .glass-card:not(.active-break-card)::before {
    display: none !important;
    content: none !important;
}

/* Typography & Glow */
body.theme-china-dynasty h1, body.theme-gold-imperial h1, 
body.theme-china-dynasty h2, body.theme-gold-imperial h2, 
body.theme-china-dynasty h3, body.theme-gold-imperial h3, 
body.theme-china-dynasty h4, body.theme-gold-imperial h4 {
    color: #fff8eb !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35) !important;
}

body.theme-china-dynasty .brand-text h1, body.theme-gold-imperial .brand-text h1 {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #e60026 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

/* Imperial Crimson Buttons with Gold Borders */
body.theme-china-dynasty .btn-primary, body.theme-gold-imperial .btn-primary {
    background: linear-gradient(135deg, #e60026 0%, #a8001a 100%) !important;
    border: 1px solid #ffd700 !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(230, 0, 38, 0.45), 0 0 10px rgba(255, 215, 0, 0.3) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

body.theme-china-dynasty .btn-primary:hover, body.theme-gold-imperial .btn-primary:hover {
    background: linear-gradient(135deg, #ff1a3c 0%, #d40022 100%) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(230, 0, 38, 0.65), 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

body.theme-china-dynasty .btn-secondary, body.theme-gold-imperial .btn-secondary {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    color: #ffd700 !important;
}

body.theme-china-dynasty .btn-secondary:hover, body.theme-gold-imperial .btn-secondary:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: #ffd700 !important;
}

/* Navigation & Active Links */
body.theme-china-dynasty .app-header, body.theme-gold-imperial .app-header {
    background: rgba(18, 2, 5, 0.90) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.40) !important;
}

body.theme-china-dynasty .nav-item-main.active, body.theme-gold-imperial .nav-item-main.active {
    background: linear-gradient(135deg, rgba(230, 0, 38, 0.40), rgba(255, 215, 0, 0.25)) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

/* Stat Metrics Glow (Jade & Imperial Gold) */
body.theme-china-dynasty .stat-value, body.theme-gold-imperial .stat-value,
body.theme-china-dynasty .metric-number, body.theme-gold-imperial .metric-number {
    color: #ffd700 !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(230, 0, 38, 0.4) !important;
}

/* Table Styling */
body.theme-china-dynasty th, body.theme-gold-imperial th {
    background: rgba(230, 0, 38, 0.30) !important;
    color: #ffd700 !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.40) !important;
}

body.theme-china-dynasty td, body.theme-gold-imperial td {
    border-bottom: 1px solid rgba(255, 215, 0, 0.15) !important;
}

body.theme-china-dynasty tr:hover td, body.theme-gold-imperial tr:hover td {
    background: rgba(255, 215, 0, 0.10) !important;
}

/* Badges */
body.theme-china-dynasty .badge, body.theme-gold-imperial .badge,
body.theme-china-dynasty [class*="badge-"], body.theme-gold-imperial [class*="badge-"] {
    background: linear-gradient(135deg, rgba(230, 0, 38, 0.35), rgba(255, 215, 0, 0.25)) !important;
    border: 1px solid rgba(255, 215, 0, 0.45) !important;
    color: #ffd700 !important;
}

/* Scrollbars */
body.theme-china-dynasty ::-webkit-scrollbar-thumb, body.theme-gold-imperial ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #e60026, #ffd700) !important;
    border-radius: 999px !important;
}

/* 🐉 CHINESE DRAGON FRAME UNTUK NOTIFIKASI IZIN / ISTIRAHAT 🐉 */
body.theme-china-dynasty .break-notification,
body.theme-gold-imperial .break-notification {
    background: linear-gradient(165deg, #1a150c 0%, #0c0a06 55%, #050403 100%) !important;
    background-image: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(212, 175, 55, 0.35),
        0 0 22px rgba(212, 175, 55, 0.18) !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: auto !important;
    display: block !important;
}

body.theme-china-dynasty .break-notification::before, body.theme-gold-imperial .break-notification::before,
body.theme-china-dynasty .break-notification::after, body.theme-gold-imperial .break-notification::after {
    display: block !important;
    opacity: 1 !important;
}

body.theme-china-dynasty .break-notification-content, body.theme-gold-imperial .break-notification-content {
    position: relative !important;
    z-index: 5 !important;
    color: #fff7f7 !important;
    text-shadow: none !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

body.theme-china-dynasty .break-notification-text,
body.theme-gold-imperial .break-notification-text {
    color: #fff8e7 !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-transform: none !important;
    text-align: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

body.theme-china-dynasty #staffView .break-notification-text,
body.theme-gold-imperial #staffView .break-notification-text {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

body.theme-china-dynasty .break-notification-icon, body.theme-gold-imperial .break-notification-icon {
    color: #fff5f5 !important;
    filter: drop-shadow(0 3px 8px rgba(67, 10, 14, 0.18)) !important;
}

/* 🐉 IMPERIAL CHINA DYNASTY GOLD & CRIMSON FRAME UNTUK KARTU KONSOL IZIN STAFF 🐉 */
@keyframes imperialBorderPulse {
    0%, 100% {
        border-color: #ffd700 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important;
    }
    50% {
        border-color: #ffd700 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important;
    }
}

body.theme-china-dynasty .staff-console-card,
body.theme-gold-imperial .staff-console-card {
    background:
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(251, 191, 36, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 70% 45% at 100% 100%, rgba(180, 83, 9, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 0% 85%, rgba(127, 29, 29, 0.18) 0%, transparent 50%),
        linear-gradient(165deg, #1c1010 0%, #120808 42%, #0a0505 100%) !important;
    border: 1px solid transparent !important;
    border-radius: 28px !important;
    padding: 36px 26px 28px !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(251, 191, 36, 0.28),
        0 0 42px rgba(212, 175, 55, 0.14),
        inset 0 1px 0 rgba(255, 248, 231, 0.12) !important;
    animation: consoleLuxuryBreath 6.5s ease-in-out infinite !important;
}

@keyframes consoleLuxuryBreath {
    0%, 100% {
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.72),
            0 0 0 1px rgba(251, 191, 36, 0.28),
            0 0 36px rgba(212, 175, 55, 0.12),
            inset 0 1px 0 rgba(255, 248, 231, 0.12);
    }
    50% {
        box-shadow:
            0 32px 78px rgba(0, 0, 0, 0.76),
            0 0 0 1px rgba(253, 230, 138, 0.42),
            0 0 52px rgba(212, 175, 55, 0.2),
            inset 0 1px 0 rgba(255, 248, 231, 0.18);
    }
}

/* Outer gold ring via gradient border */
body.theme-china-dynasty .staff-console-card::before,
body.theme-gold-imperial .staff-console-card::before {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.5px !important;
    background: linear-gradient(
        145deg,
        rgba(253, 230, 138, 0.95) 0%,
        rgba(212, 175, 55, 0.55) 28%,
        rgba(120, 53, 15, 0.35) 55%,
        rgba(251, 191, 36, 0.7) 78%,
        rgba(253, 224, 71, 0.85) 100%
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.theme-china-dynasty .staff-console-card::after,
body.theme-gold-imperial .staff-console-card::after {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(251, 191, 36, 0.14) !important;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.35) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: transparent !important;
}

body.theme-china-dynasty .staff-console-card .console-shine-sweep,
body.theme-gold-imperial .staff-console-card .console-shine-sweep {
    display: block !important;
    opacity: 0.35 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 55% !important;
    height: 100% !important;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 248, 231, 0.04) 35%,
        rgba(253, 230, 138, 0.16) 50%,
        rgba(255, 248, 231, 0.05) 65%,
        transparent 100%
    ) !important;
    transform: skewX(-22deg) !important;
    animation: shineSweep 6.5s infinite ease-in-out !important;
    pointer-events: none !important;
    z-index: 2 !important;
    mix-blend-mode: screen !important;
}

body.theme-china-dynasty .staff-console-card .console-card-content,
body.theme-gold-imperial .staff-console-card .console-card-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 10px !important;
}

body.theme-china-dynasty .staff-console-card .console-luxury-border,
body.theme-gold-imperial .staff-console-card .console-luxury-border {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
    border-radius: 28px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

body.theme-china-dynasty .staff-console-card .frame-corner,
body.theme-gold-imperial .staff-console-card .frame-corner {
    width: 54px !important;
    height: 54px !important;
    border-width: 2.5px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
}

body.theme-china-dynasty .staff-console-card .frame-corner.top-left,
body.theme-gold-imperial .staff-console-card .frame-corner.top-left,
body.theme-china-dynasty .staff-console-card .frame-corner.top-right,
body.theme-gold-imperial .staff-console-card .frame-corner.top-right {
    border-top-color: rgba(253, 230, 138, 0.95) !important;
}
body.theme-china-dynasty .staff-console-card .frame-corner.top-left,
body.theme-gold-imperial .staff-console-card .frame-corner.top-left {
    border-left-color: rgba(253, 230, 138, 0.95) !important;
    top: 14px !important;
    left: 14px !important;
}
body.theme-china-dynasty .staff-console-card .frame-corner.top-right,
body.theme-gold-imperial .staff-console-card .frame-corner.top-right {
    border-right-color: rgba(253, 230, 138, 0.95) !important;
    top: 14px !important;
    right: 14px !important;
}
body.theme-china-dynasty .staff-console-card .frame-corner.bottom-left,
body.theme-gold-imperial .staff-console-card .frame-corner.bottom-left,
body.theme-china-dynasty .staff-console-card .frame-corner.bottom-right,
body.theme-gold-imperial .staff-console-card .frame-corner.bottom-right {
    border-bottom-color: rgba(212, 175, 55, 0.75) !important;
}
body.theme-china-dynasty .staff-console-card .frame-corner.bottom-left,
body.theme-gold-imperial .staff-console-card .frame-corner.bottom-left {
    border-left-color: rgba(212, 175, 55, 0.75) !important;
    bottom: 14px !important;
    left: 14px !important;
}
body.theme-china-dynasty .staff-console-card .frame-corner.bottom-right,
body.theme-gold-imperial .staff-console-card .frame-corner.bottom-right {
    border-right-color: rgba(212, 175, 55, 0.75) !important;
    bottom: 14px !important;
    right: 14px !important;
}

body.theme-china-dynasty .staff-console-card .console-profile,
body.theme-gold-imperial .staff-console-card .console-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 4px !important;
    width: 100% !important;
}

body.theme-china-dynasty .staff-console-card .avatar-initials,
body.theme-gold-imperial .staff-console-card .avatar-initials {
    width: 88px !important;
    height: 88px !important;
    border: 2px solid transparent !important;
    background:
        linear-gradient(#1a1010, #1a1010) padding-box,
        conic-gradient(from 210deg, #fde68a, #d4af37, #f59e0b, #fde68a) border-box !important;
    box-shadow:
        0 0 0 5px rgba(251, 191, 36, 0.12),
        0 0 28px rgba(212, 175, 55, 0.35),
        0 10px 24px rgba(0, 0, 0, 0.55) !important;
    margin-bottom: 12px !important;
    animation: none !important;
    overflow: hidden !important;
}

/* NAMA STAFF — champagne gold luxury text */
body.theme-china-dynasty #currentStaffName,
body.theme-gold-imperial #currentStaffName,
body.theme-china-dynasty .staff-console-card h2,
body.theme-gold-imperial .staff-console-card h2,
body.theme-china-dynasty .staff-console-card .console-profile h2,
body.theme-gold-imperial .staff-console-card .console-profile h2 {
    background: linear-gradient(135deg, #fff8e7 0%, #fde68a 38%, #e8c547 72%, #fff1c2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 6px !important;
    font-size: 1.28rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    margin: 4px 0 2px !important;
    text-align: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.theme-china-dynasty .staff-console-card .role-badge,
body.theme-gold-imperial .staff-console-card .role-badge {
    background: linear-gradient(145deg, rgba(55, 36, 12, 0.95) 0%, rgba(28, 18, 8, 0.98) 100%) !important;
    border: 1px solid rgba(253, 230, 138, 0.55) !important;
    color: #fde68a !important;
    -webkit-text-fill-color: #fde68a !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 248, 231, 0.18),
        0 0 16px rgba(212, 175, 55, 0.16) !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

body.theme-china-dynasty .staff-console-card .role-badge::before,
body.theme-gold-imperial .staff-console-card .role-badge::before {
    background: linear-gradient(180deg, #fde68a, #d4af37) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.55) !important;
    width: 7px !important;
    height: 7px !important;
}

body.theme-china-dynasty .staff-console-card .console-divider,
body.theme-gold-imperial .staff-console-card .console-divider {
    margin: 8px auto !important;
    border: none !important;
    height: 1px !important;
    width: 78% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.15) 18%,
        rgba(253, 230, 138, 0.85) 50%,
        rgba(212, 175, 55, 0.25) 82%,
        transparent 100%
    ) !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.2) !important;
}

body.theme-china-dynasty .staff-console-card .quota-tracker,
body.theme-gold-imperial .staff-console-card .quota-tracker {
    width: 100% !important;
    background: linear-gradient(145deg, rgba(32, 20, 12, 0.88) 0%, rgba(12, 8, 6, 0.94) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.28) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-top: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 231, 0.08),
        inset 0 0 18px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.theme-china-dynasty .staff-console-card .quota-labels,
body.theme-gold-imperial .staff-console-card .quota-labels {
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
}

body.theme-china-dynasty .staff-console-card .quota-labels span,
body.theme-gold-imperial .staff-console-card .quota-labels span {
    color: rgba(255, 248, 231, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 248, 231, 0.78) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

body.theme-china-dynasty .staff-console-card .quota-labels span:last-child,
body.theme-gold-imperial .staff-console-card .quota-labels span:last-child,
body.theme-china-dynasty #quotaText,
body.theme-gold-imperial #quotaText,
body.theme-china-dynasty #slotStatusText,
body.theme-gold-imperial #slotStatusText,
body.theme-china-dynasty span#quotaText,
body.theme-gold-imperial span#quotaText,
body.theme-china-dynasty span#slotStatusText,
body.theme-gold-imperial span#slotStatusText {
    color: #fde68a !important;
    -webkit-text-fill-color: #fde68a !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    filter: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
    letter-spacing: 0.4px !important;
}

body.theme-china-dynasty .staff-console-card .progress-bar-container,
body.theme-gold-imperial .staff-console-card .progress-bar-container {
    height: 9px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(251, 191, 36, 0.22) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

body.theme-china-dynasty .staff-console-card .progress-bar-fill,
body.theme-gold-imperial .staff-console-card .progress-bar-fill {
    background: linear-gradient(90deg, #92400e 0%, #d97706 35%, #fbbf24 68%, #fde68a 100%) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
    border-radius: 999px !important;
}

body.theme-china-dynasty .staff-console-card .progress-bar-fill::after,
body.theme-gold-imperial .staff-console-card .progress-bar-fill::after {
    box-shadow: 0 0 8px rgba(255, 248, 231, 0.55) !important;
    opacity: 0.85 !important;
}

body.theme-china-dynasty .staff-console-card .btn-action-break,
body.theme-gold-imperial .staff-console-card .btn-action-break {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 14px 22px !important;
    font-size: 0.92rem !important;
    letter-spacing: 1.5px !important;
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 42%, #ea580c 100%) !important;
    border: 1px solid rgba(255, 248, 231, 0.55) !important;
    color: #1a0a02 !important;
    -webkit-text-fill-color: #1a0a02 !important;
    font-weight: 900 !important;
    border-radius: 16px !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(245, 158, 11, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body.theme-china-dynasty .staff-console-card .btn-action-break:hover,
body.theme-gold-imperial .staff-console-card .btn-action-break:hover {
    background: linear-gradient(135deg, #fff7cc 0%, #fbbf24 45%, #f97316 100%) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(251, 191, 36, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: none !important;
    filter: brightness(1.03);
}

body.theme-china-dynasty .staff-console-card .btn-action-break.end-state,
body.theme-gold-imperial .staff-console-card .btn-action-break.end-state {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 45%, #059669 100%) !important;
    border-color: rgba(167, 243, 208, 0.5) !important;
    color: #022c22 !important;
    -webkit-text-fill-color: #022c22 !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(16, 185, 129, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ============================================================ */

/* Dynamic background overlay — wallpaper only, never sit on top of UI */
.background-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none !important;
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: cover;
    background-position: center;
    background-color: #030303;
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(212, 175, 55, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(197, 160, 89, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 0% 60%, rgba(120, 90, 30, 0.04) 0%, transparent 45%),
        linear-gradient(165deg, #020202 0%, #060504 35%, #030303 70%, #050504 100%);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0.45), rgba(197, 160, 89, 0.3));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(245, 230, 184, 0.55), rgba(212, 175, 55, 0.45));
}

/* Utilities */
.hide {
    display: none !important;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Pending badge double-click animation */
@keyframes pendingPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes badgeFlash {
    0%   { transform: scale(1); opacity: 1; }
    30%  { transform: scale(0.88); opacity: 0.7; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.badge-pending-dbl {
    animation: pendingPulse 1.6s ease-in-out infinite;
    transition: transform 0.1s ease, filter 0.1s ease;
}
.badge-pending-dbl:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}
.badge-pending-dbl:active {
    transform: scale(0.90);
    filter: brightness(0.9);
    animation: badgeFlash 0.25s ease forwards;
}

/* 3. DESAIN GLASSMORPHISM CARD - PREMIUM UPGRADE */
.glass-card {
    background: linear-gradient(145deg, rgba(16, 26, 46, 0.94) 0%, rgba(8, 14, 26, 0.92) 100%);
    border: 1px solid var(--card-border-theme, rgba(142, 180, 220, 0.18));
    border-top: 1px solid var(--card-border-theme, rgba(200, 220, 240, 0.14));
    border-left: 1px solid var(--card-border-theme, rgba(142, 180, 220, 0.12));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5),
                0 1px 0 rgba(255,255,255,0.06) inset;
    transition: var(--transition-smooth);
    padding: 24px;
    position: relative;
    overflow: hidden;
    /* GPU compositing layer — mencegah repaint saat animasi */
    will-change: transform;
    transform: translateZ(0);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Tema tint overlay — diterapkan saat tema aktif */
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-tint, transparent);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
    transition: background 0.4s ease;
}

.glass-card > * {
    position: relative;
    z-index: 1;
}

.glass-card:hover {
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.28));
    transform: translateY(-1px);
    box-shadow: 0 12px 50px rgba(0,0,0,0.55),
                0 0 0 1px var(--glass-tint, rgba(212, 175, 55, 0.06)) inset;
}

/* 4. ATURAN SHELL UTAMA (NAVIGATION & APP BAR) */
.app-shell {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    animation: fadeIn 0.5s ease-out;
    position: relative;
    z-index: 1;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: linear-gradient(180deg, rgba(12, 20, 36, 0.94) 0%, rgba(6, 10, 20, 0.88) 100%);
    border-bottom: 1px solid rgba(142, 180, 220, 0.16);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0,0,0,0.35);
}

.app-header-bar {
    padding: 0 36px;
    height: 70px;
    min-height: 70px;
    box-sizing: border-box;
    position: static;
    width: 100%;
}

.app-header__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-action-pill {
    height: 34px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.22));
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.38) 100%);
    color: var(--accent, #f5e6b8);
}

.header-action-pill i {
    color: var(--primary, #d4af37);
    font-size: 0.85rem;
}

.header-action-pill:hover {
    border-color: var(--glass-border-focus, rgba(212, 175, 55, 0.5));
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 14px var(--primary-glow, rgba(212, 175, 55, 0.18));
}

.header-staff-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.22));
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.38) 100%);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-staff-profile:hover {
    border-color: var(--glass-border-focus, rgba(212, 175, 55, 0.45));
    background: rgba(212, 175, 55, 0.08);
}

.header-staff-profile .header-staff-avatar-icon {
    color: var(--primary, #d4af37);
    font-size: 1rem;
}

.header-action-pill--logout {
    color: var(--primary, #d4af37);
}

.header-action-pill--logout:hover {
    color: var(--accent, #fff8e7);
}

body[class*="theme-"] .header-action-pill,
body[class*="theme-"] .header-staff-profile {
    border-color: var(--card-border-theme);
    color: var(--accent, #f5e6b8);
}

body[class*="theme-"] .header-action-pill i,
body[class*="theme-"] .header-staff-profile .header-staff-avatar-icon {
    color: var(--primary);
}

.header-staff-info:not(.hide) {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-staff-avatar-wrap {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.header-staff-avatar-wrap img,
.header-staff-avatar-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 15px var(--primary-glow);
    animation: pulseLogo 3s infinite alternate;
}

.brand-text h1 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(to right, #fff8e7, #d4af37, #f5e6b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-text span {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Navigation Menu */
.app-nav {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
}

.nav-item {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.nav-item i {
    font-size: 0.95rem;
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    box-shadow: 0 4px 15px var(--primary-glow);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.live-clock {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.live-clock .time {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.live-clock .date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* DB Connection Indicator */
.status-indicator {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 8px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.status-indicator.connected {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.2);
}

.status-indicator.connected .indicator-dot {
    background-color: var(--success);
    box-shadow: 0 0 10px var(--success);
    animation: blinkGlow 2s infinite;
}

.status-indicator.disconnected {
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}

.status-indicator.disconnected .indicator-dot {
    background-color: var(--danger);
    box-shadow: 0 0 10px var(--danger);
    animation: blinkGlow 1s infinite;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Content Area */
.app-content {
    flex-grow: 1;
    padding: 28px 40px 40px;
    position: relative;
    min-height: 0;
}

/* Boot: konten tampil cepat; hanya redup sedikit saat fetch inti */
#appShell.boot-loading .app-content {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* View Sections */
.view-section {
    display: none;
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.view-section.active {
    display: block;
}

/* Portal izin: jangan mainkan slideUp ulang — itu yang terasa seperti reload */
#izinView.view-section,
#izinView.view-section.active,
#staffView,
#staffView.absensi-tab-content {
    animation: none !important;
}

/* My Jobdesk View scrolling */
#myJobdeskView.active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}

/* My Jobdesk — navy–cyan selaras WB (bukan hitam) */
body.theme-wb #myJobdeskView > .glass-card {
    background: linear-gradient(160deg, #243848 0%, #1a2d3e 55%, #152636 100%) !important;
    background-image: linear-gradient(160deg, #243848 0%, #1a2d3e 55%, #152636 100%) !important;
    border-color: rgba(142, 196, 220, 0.28) !important;
    box-shadow: 0 12px 36px rgba(8, 24, 40, 0.45) !important;
}

body.theme-wb #myJobdeskView .myjd-cashier-card {
    background: linear-gradient(165deg, #2a4156 0%, #1e3346 100%) !important;
    border-color: rgba(142, 196, 220, 0.26) !important;
    box-shadow: 0 8px 24px rgba(8, 24, 40, 0.35) !important;
}

body.theme-wb #myJobdeskView .myjd-task-badge {
    background: rgba(201, 211, 106, 0.10) !important;
    border-color: rgba(142, 196, 220, 0.35) !important;
    color: #d5df8a !important;
}

body.theme-wb #myJobdeskView .myjd-task-card {
    background: linear-gradient(160deg, rgba(42, 64, 84, 0.9) 0%, rgba(22, 36, 50, 0.95) 100%) !important;
    border-color: rgba(142, 196, 220, 0.22) !important;
}

/* Kartu ucapan My Motivation — solid, hex wallpaper tidak boleh menembus */
#bioView .bio-greeting-card {
    isolation: isolate;
    background: #0e1828 !important;
    background-image: linear-gradient(160deg, #1a2c48 0%, #121c32 42%, #0c1524 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#bioView .bio-greeting-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #0e1828;
    pointer-events: none;
}

#bioView .bio-greeting-card > * {
    position: relative;
    z-index: 1;
}

body.theme-black-gold #bioView .bio-greeting-card,
body.theme-black-gold #bioView .rules-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-black-gold #bioView .bio-greeting-card {
    background: #0e1828 !important;
    background-image: linear-gradient(160deg, #1a2c48 0%, #121c32 45%, #0c1524 100%) !important;
}

body.theme-black-gold #bioView .rules-card {
    background: #0e1828 !important;
    background-image: linear-gradient(155deg, #1a3048 0%, #142036 48%, #0e1828 100%) !important;
}

/* ── Rules Card: INGAT YA TEMAN-TEMAN (static luxury 2×2) ── */
.rules-card-section {
    position: relative;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}

.rules-card-glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

.rules-card-glow--a {
    top: -48px;
    left: -36px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(201, 211, 106, 0.14) 0%, transparent 68%);
}

.rules-card-glow--b {
    bottom: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(142, 196, 220, 0.16) 0%, transparent 70%);
}

.rules-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 26px;
    padding: 36px 34px 32px;
    text-align: center;
    background: linear-gradient(155deg, #2a4054 0%, #1e3346 48%, #172838 100%);
    border: 1px solid rgba(142, 196, 220, 0.32);
    box-shadow:
        0 20px 48px rgba(8, 20, 32, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rules-card__shine {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    pointer-events: none;
}

.rules-card__shine--top {
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 211, 106, 0.55), rgba(142, 196, 220, 0.45), transparent);
}

.rules-card__shine--bottom {
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(142, 196, 220, 0.4), rgba(201, 211, 106, 0.35), transparent);
}

.rules-card__corner {
    position: absolute;
    width: 42px;
    height: 42px;
    pointer-events: none;
    filter: none;
}

.rules-card__corner--tl {
    top: 12px;
    left: 12px;
    border-top: 2px solid #c9d36a;
    border-left: 2px solid #c9d36a;
    border-radius: 12px 0 0 0;
}

.rules-card__corner--tr {
    top: 12px;
    right: 12px;
    border-top: 2px solid #8ec4dc;
    border-right: 2px solid #8ec4dc;
    border-radius: 0 12px 0 0;
}

.rules-card__corner--bl {
    bottom: 12px;
    left: 12px;
    border-bottom: 2px solid #8ec4dc;
    border-left: 2px solid #8ec4dc;
    border-radius: 0 0 0 12px;
}

.rules-card__corner--br {
    bottom: 12px;
    right: 12px;
    border-bottom: 2px solid #c9d36a;
    border-right: 2px solid #c9d36a;
    border-radius: 0 0 12px 0;
}

.rules-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}

.rules-card__badge {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #f8fbe8;
    background: linear-gradient(145deg, #3d4f2e 0%, #2a4558 100%);
    border: 1px solid #c9d36a;
}

.rules-card__title {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e8efc4;
    background: none;
    -webkit-text-fill-color: #e8efc4;
    line-height: 1.25;
}

.rules-card__divider {
    position: relative;
    margin: 0 auto 22px;
    width: min(70%, 420px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 211, 106, 0.55), rgba(142, 196, 220, 0.45), transparent);
}

.rules-card__divider-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #c9d36a;
}

.rules-points-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.rules-points-list--grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rules-points-list--grid2 > .rules-point-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc((100% - 14px) / 2);
    justify-self: center;
}

.rules-point-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 100%;
    padding: 16px 16px 15px;
    border-radius: 16px;
    background: #243848;
    border: 1px solid rgba(142, 196, 220, 0.28);
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
    filter: none;
}

.rules-point-card:hover,
.rules-point-card:focus,
.rules-point-card:nth-child(n) {
    opacity: 1;
    transform: none;
    filter: none;
    border-color: rgba(142, 196, 220, 0.28);
    box-shadow: none;
}

.rules-point-card__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #ffffff;
    background: #c45c5c;
    border: 1px solid #e08a8a;
}

.rules-point-card__text {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #f2f5f8;
    line-height: 1.55;
    letter-spacing: 0.01em;
    opacity: 1;
    -webkit-text-fill-color: #f2f5f8;
}

@media (max-width: 720px) {
    .rules-card {
        padding: 28px 18px 24px;
        border-radius: 20px;
    }

    .rules-card__title {
        font-size: 0.82rem;
        letter-spacing: 0.12em;
    }

    .rules-points-list--grid2 {
        grid-template-columns: 1fr;
    }

    .rules-points-list--grid2 > .rules-point-card:last-child:nth-child(odd) {
        max-width: none;
        justify-self: stretch;
    }

    .rules-point-card__text {
        font-size: 0.8rem;
    }
}

/* JOBDESK VIEW — biarkan app-content yang scroll; jangan clip atas/bawah */
#jobdeskView.active {
    display: block !important;
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 0 56px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

#jobdeskView.active .jd-main-card,
#jobdeskView.active > .glass-card {
    flex-shrink: 0;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding: 28px 28px 36px !important;
    border-radius: 20px !important;
    box-sizing: border-box;
}

#jobdeskView .jd-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

#jobdeskView #jobdeskContainer {
    padding-bottom: 8px;
}

/* Chat view needs full-height flex layout — flush ke atas (tanpa poni/header) */
#chatView.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: var(--app-sidebar-width, 218px);
    right: 0;
    bottom: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    z-index: 10;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.sidebar-collapsed ~ div #chatView.active,
body:has(.app-sidebar.sidebar-collapsed) #chatView.active {
    left: var(--app-sidebar-collapsed-width, 72px) !important;
}

#chatView.active .chat-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

/* Chat Mention Dropdown & Tag System */
.chat-mention-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 14px;
    right: 14px;
    max-height: 220px;
    overflow-y: auto;
    background: rgba(14, 20, 40, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    z-index: 1000;
    padding: 6px;
}

.chat-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-mention-item:hover,
.chat-mention-item.selected {
    background: rgba(139, 92, 246, 0.22);
}

.chat-mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-mention-info {
    display: flex;
    flex-direction: column;
}

.chat-mention-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8;
}

.chat-mention-role {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Chat Mention Tag in Message Bubbles */
.chat-mention {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    padding: 1px 7px;
    font-weight: 700;
    font-size: 0.85em;
    vertical-align: baseline;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

.chat-mention i {
    font-size: 0.75em;
    color: #38bdf8;
}

/* 5. PORTAL / SETUP VIEW (TENGAH LAYAR) */
.setup-view {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.setup-view.active {
    display: flex;
}

.setup-card {
    max-width: 480px;
    width: 100%;
    animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.setup-header {
    text-align: center;
    margin-bottom: 24px;
}

.setup-header .icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 16px auto;
}

.setup-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.setup-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* 6. PAPAN MONITOR (MONITOR VIEW) */
.monitor-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.monitor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stat-summary-card h3, .role-slots-card h3 {
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.role-slots-card .card-header-flex {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(142, 180, 220, 0.14);
}

.role-slots-card .card-header-flex h3 {
    margin-bottom: 0;
}

.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header-flex i {
    color: var(--primary);
    font-size: 1.1rem;
    opacity: 0.7;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 10px 12px;
    border-radius: var(--border-radius-md);
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: default;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(142, 180, 220, 0.28);
    transform: none;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.break-active-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.break-late-icon {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(244, 63, 94, 0.08));
    color: var(--danger);
    border: 1px solid rgba(244, 63, 94, 0.25);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15);
}

.break-safe-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.08));
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.25);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.stat-info h4 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #ffffff, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-info span {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-top: 2px;
    display: block;
}

/* Role Slots Layout */
.role-slots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.role-slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(16, 26, 42, 0.92) 0%, rgba(8, 14, 26, 0.88) 100%);
    border: 1px solid rgba(142, 180, 220, 0.12);
    padding: 11px 14px 11px 16px;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.role-slot-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 2px;
    background: #8eb8dc;
}

.role-slot-row:hover {
    transform: none;
}

.role-slot-row.is-full:hover {
    background: linear-gradient(180deg, #be123c, #7f1d1d);
    border-color: rgba(251, 113, 133, 0.7);
}

.role-slot-row.is-low:hover {
    background: linear-gradient(180deg, #ca8a04, #854d0e);
    border-color: rgba(250, 204, 21, 0.7);
}

.role-slot-row.is-free:hover {
    background: linear-gradient(180deg, #16a34a, #166534);
    border-color: rgba(74, 222, 128, 0.7);
}

.role-slot-info {
    display: contents;
}

.role-slot-name {
    font-size: 0.72rem;
    font-weight: 800;
    color: #eef3f8;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.role-slot-fraction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #9eb6cc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.role-slot-fraction b {
    font-weight: 800;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.role-slot-fraction i {
    font-style: normal;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
    opacity: 0.7;
    line-height: 1;
}

.role-slot-fraction.full,
.role-slot-fraction.full b {
    color: #fecdd3;
}

.role-slot-fraction.low,
.role-slot-fraction.low b {
    color: #fde68a;
}

.role-slot-fraction.free,
.role-slot-fraction.free b {
    color: #bbf7d0;
}

.role-slot-row.is-full {
    background: linear-gradient(180deg, #7f1d1d, #450a0a);
    border-color: rgba(248, 113, 113, 0.55);
}

.role-slot-row.is-low {
    background: linear-gradient(180deg, #854d0e, #451a03);
    border-color: rgba(250, 204, 21, 0.55);
}

.role-slot-row.is-free {
    background: linear-gradient(180deg, #166534, #14532d);
    border-color: rgba(74, 222, 128, 0.55);
}

.role-dot-indicators {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-height: 8px;
}

.role-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(158, 182, 204, 0.35);
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
    transition: none;
}

.role-dot.occupied {
    background-color: #fb923c;
    border-color: #fb923c;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.28);
}

.role-dot.available {
    background-color: transparent;
    border-color: #34d399;
}

.role-slot-row.role-slot--cs-line::before { background: #22d3ee; }
.role-slot-row.role-slot--cs-lc::before { background: #c084fc; }
.role-slot-row.role-slot--kapten-kasir::before { background: #facc15; }
.role-slot-row.role-slot--kasir::before { background: #fb923c; }
.role-slot-row.role-slot--leader::before { background: #8eb8dc; }
.role-slot-row.role-slot--default::before { background: #8eb8dc; }

.role-slot-row.role-slot--cs-line .role-dot.occupied {
    background-color: #22d3ee;
    border-color: #22d3ee;
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.3);
}
.role-slot-row.role-slot--cs-lc .role-dot.occupied {
    background-color: #c084fc;
    border-color: #c084fc;
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.3);
}
.role-slot-row.role-slot--kapten-kasir .role-dot.occupied {
    background-color: #facc15;
    border-color: #facc15;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.28);
}
.role-slot-row.role-slot--kasir .role-dot.occupied {
    background-color: #fb923c;
    border-color: #fb923c;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.28);
}
.role-slot-row.role-slot--leader .role-dot.occupied,
.role-slot-row.role-slot--default .role-dot.occupied {
    background-color: #8eb8dc;
    border-color: #8eb8dc;
    box-shadow: 0 0 6px rgba(142, 184, 220, 0.28);
}

/* Active Breaks Grid */
.section-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    text-align: center;
}

.section-title-row h2 {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.section-title-row h2 i {
    color: var(--primary);
}

.section-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(142, 180, 220, 0.42);
    background:
        radial-gradient(circle at 50% 30%, rgba(200, 220, 240, 0.18), transparent 62%),
        linear-gradient(160deg, rgba(22, 36, 58, 0.95), rgba(10, 18, 32, 0.98));
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.section-title-icon i {
    font-size: 0.78rem;
    color: #8eb8dc !important;
}

.section-title-text {
    background: linear-gradient(135deg, #ffffff 0%, #eef3f8 28%, #8eb8dc 72%, #6a9cc4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 8px rgba(110, 160, 210, 0.28));
}

.section-title-row .badge {
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d7e4f0;
    background: rgba(110, 160, 210, 0.14);
    border: 1px solid rgba(142, 180, 220, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.section-title-row::after {
    content: '';
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(142, 180, 220, 0.85), transparent);
}

html body.theme-black-gold .section-title-text,
html body .section-title-text {
    background: linear-gradient(135deg, #ffffff 0%, #eef3f8 28%, #8eb8dc 72%, #6a9cc4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.active-breaks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    align-content: start;
    justify-content: center;
}

.no-breaks-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.01);
}

.icon-illustration {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.no-breaks-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.no-breaks-state p {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 320px;
}

/* Active break — bingkai berputar + isi kaca mewah per jabatan */
html body .glass-card.active-break-card {
    width: 260px;
    height: auto;
    min-height: 142px;
    max-width: 260px;
    background: #000814 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
    border: none !important;
    padding: 14px 16px 12px;
    box-sizing: border-box;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    will-change: auto;
    animation: none !important;
    transition: none !important;
    cursor: default;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html body .glass-card.active-break-card:hover {
    transform: none !important;
    border: none !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html body .glass-card.active-break-card > * {
    position: relative;
    z-index: 6;
}

html body .glass-card.active-break-card .active-card-lux {
    position: absolute !important;
    inset: 3px;
    border-radius: 17px;
    z-index: 2 !important;
    pointer-events: none;
    background:
        radial-gradient(120% 55% at 50% -18%, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 42%);
}

html body .glass-card.active-break-card .active-card-name h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    line-height: 1.18;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    background: none;
    text-align: center;
    display: block;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

html body .glass-card.active-break-card .active-card-name span {
    display: inline-block;
    width: auto;
    margin-top: 5px;
    padding: 3px 10px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(0, 0, 0, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.theme-china-dynasty .glass-card.active-break-card .active-card-name h3,
body.theme-gold-imperial .glass-card.active-break-card .active-card-name h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
}

html body .glass-card.active-break-card .active-card-bottom {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.66rem;
    font-weight: 800;
    gap: 8px;
    z-index: 8;
    padding: 0 2px 6px;
    align-items: center;
}

html body .glass-card.active-break-card .active-card-start {
    position: relative;
    padding-bottom: 0;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    white-space: nowrap;
}

html body .glass-card.active-break-card .active-card-start strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .glass-card.active-break-card .elapsed-info {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html body .glass-card.active-break-card .active-card-start::after {
    display: none;
}

html body .glass-card.active-break-card .active-card-bottom,
html body .glass-card.active-break-card .active-card-start {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

@keyframes glowing_401 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

html body .glass-card.active-break-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -80% !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    background: conic-gradient(from 0deg, #d7e4f0, #6a9cc4, #1e3a5f, #8eb8dc, #0b1a2c, #d7e4f0) !important;
    background-image: conic-gradient(from 0deg, #d7e4f0, #6a9cc4, #1e3a5f, #8eb8dc, #0b1a2c, #d7e4f0) !important;
    transform-origin: center center;
    animation: glowing_401 5s linear infinite !important;
    transition: none !important;
    z-index: 0;
    pointer-events: none;
}

html body .glass-card.active-break-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 3px !important;
    top: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: #000814 !important;
    background-image: none !important;
    border-radius: 17px;
    pointer-events: none;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 -22px 32px rgba(0, 0, 0, 0.38);
}

html body .glass-card.active-break-card.late {
    background: #1a0508 !important;
    border: none !important;
    animation: none !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(244, 63, 94, 0.22) !important;
}

html body .glass-card.active-break-card.late::before {
    background: conic-gradient(from 0deg, #fecdd3, #fb7185, #9f1239, #fda4af, #4c0519, #fecdd3) !important;
    background-image: conic-gradient(from 0deg, #fecdd3, #fb7185, #9f1239, #fda4af, #4c0519, #fecdd3) !important;
}

html body .glass-card.active-break-card.late::after {
    background:
        radial-gradient(ellipse 80% 50% at 50% -8%, rgba(254, 205, 211, 0.1), transparent 55%),
        linear-gradient(165deg, #3a141c 0%, #241016 52%, #14080c 100%) !important;
}

/* Frame + latar per jabatan — lembut, teks tetap putih */
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late),
html body #monitorView .glass-card.active-break-card.active-break-role--cs-line:not(.late) {
    background: #0c1a20 !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(94, 164, 176, 0.12) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late)::before,
html body #monitorView .glass-card.active-break-card.active-break-role--cs-line:not(.late)::before {
    background: conic-gradient(from 0deg, #c5e4ea, #6fa8b4, #1a3a42, #8fb8c0, #0e2228, #c5e4ea) !important;
    background-image: conic-gradient(from 0deg, #c5e4ea, #6fa8b4, #1a3a42, #8fb8c0, #0e2228, #c5e4ea) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--cs-line:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(165, 210, 218, 0.12) 0%, transparent 58%),
        linear-gradient(165deg, #1a3a42 0%, #122830 48%, #0c1a20 100%) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late) .active-card-name span {
    border-color: rgba(197, 228, 234, 0.4);
    background: rgba(8, 28, 34, 0.45);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late) .active-card-timer.safe .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late) .active-card-start::after,
html body .glass-card.active-break-card.active-break-role--cs-line:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #3d6e78, #8fb8c0, #6fa8b4);
    box-shadow: 0 0 6px rgba(143, 184, 192, 0.28);
}

html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late),
html body #monitorView .glass-card.active-break-card.active-break-role--cs-lc:not(.late) {
    background: #161022 !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(150, 130, 176, 0.14) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late)::before,
html body #monitorView .glass-card.active-break-card.active-break-role--cs-lc:not(.late)::before {
    background: conic-gradient(from 0deg, #d8cce6, #8f7aa8, #2a2040, #b4a3c4, #161022, #d8cce6) !important;
    background-image: conic-gradient(from 0deg, #d8cce6, #8f7aa8, #2a2040, #b4a3c4, #161022, #d8cce6) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--cs-lc:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(200, 184, 220, 0.12) 0%, transparent 58%),
        linear-gradient(165deg, #2e2444 0%, #1e1730 48%, #14101e 100%) !important;
}
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late) .active-card-name span {
    border-color: rgba(216, 204, 230, 0.4);
    background: rgba(18, 12, 28, 0.45);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late) .active-card-timer.safe .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late) .active-card-start::after,
html body .glass-card.active-break-card.active-break-role--cs-lc:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #5a4a72, #b4a3c4, #8f7aa8);
    box-shadow: 0 0 6px rgba(180, 163, 196, 0.28);
}

html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late),
html body #monitorView .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late) {
    background: #1c1810 !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(196, 176, 120, 0.12) !important;
}
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late)::before,
html body #monitorView .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late)::before {
    background: conic-gradient(from 0deg, #e6dcb8, #c4b078, #3a3018, #d4c490, #1c1810, #e6dcb8) !important;
    background-image: conic-gradient(from 0deg, #e6dcb8, #c4b078, #3a3018, #d4c490, #1c1810, #e6dcb8) !important;
}
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(230, 220, 184, 0.1) 0%, transparent 58%),
        linear-gradient(165deg, #3a3220 0%, #262014 48%, #16140e 100%) !important;
}
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late) .active-card-name span {
    border-color: rgba(230, 220, 184, 0.4);
    background: rgba(22, 18, 10, 0.45);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late) .active-card-timer.safe .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late) .active-card-start::after,
html body .glass-card.active-break-card.active-break-role--kapten-kasir:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #6a5a38, #d4c490, #c4b078);
    box-shadow: 0 0 6px rgba(212, 196, 144, 0.24);
}

html body .glass-card.active-break-card.active-break-role--kasir:not(.late),
html body #monitorView .glass-card.active-break-card.active-break-role--kasir:not(.late) {
    background: #1c120e !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(196, 148, 112, 0.12) !important;
}
html body .glass-card.active-break-card.active-break-role--kasir:not(.late)::before,
html body #monitorView .glass-card.active-break-card.active-break-role--kasir:not(.late)::before {
    background: conic-gradient(from 0deg, #e8d0bc, #c49a78, #3a2418, #d4b094, #1c120e, #e8d0bc) !important;
    background-image: conic-gradient(from 0deg, #e8d0bc, #c49a78, #3a2418, #d4b094, #1c120e, #e8d0bc) !important;
}
html body .glass-card.active-break-card.active-break-role--kasir:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--kasir:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(232, 208, 188, 0.1) 0%, transparent 58%),
        linear-gradient(165deg, #3a2820 0%, #261a14 48%, #16100c 100%) !important;
}
html body .glass-card.active-break-card.active-break-role--kasir:not(.late) .active-card-name span {
    border-color: rgba(232, 208, 188, 0.4);
    background: rgba(22, 14, 10, 0.45);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .glass-card.active-break-card.active-break-role--kasir:not(.late) .active-card-timer.safe .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html body .glass-card.active-break-card.active-break-role--kasir:not(.late) .active-card-start::after,
html body .glass-card.active-break-card.active-break-role--kasir:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #6a4a38, #d4b094, #c49a78);
    box-shadow: 0 0 6px rgba(212, 176, 148, 0.24);
}

html body .glass-card.active-break-card.active-break-role--leader:not(.late),
html body #monitorView .glass-card.active-break-card.active-break-role--leader:not(.late) {
    background: #12161c !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.48),
        0 0 14px rgba(148, 163, 184, 0.1) !important;
}
html body .glass-card.active-break-card.active-break-role--leader:not(.late)::before,
html body #monitorView .glass-card.active-break-card.active-break-role--leader:not(.late)::before {
    background: conic-gradient(from 0deg, #d8dee6, #8a96a4, #2a323c, #b4bcc6, #12161c, #d8dee6) !important;
    background-image: conic-gradient(from 0deg, #d8dee6, #8a96a4, #2a323c, #b4bcc6, #12161c, #d8dee6) !important;
}
html body .glass-card.active-break-card.active-break-role--leader:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--leader:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(216, 222, 230, 0.1) 0%, transparent 58%),
        linear-gradient(165deg, #2a323c 0%, #1a2028 48%, #101418 100%) !important;
}
html body .glass-card.active-break-card.active-break-role--leader:not(.late) .active-card-name span {
    border-color: rgba(216, 222, 230, 0.4);
    background: rgba(12, 16, 22, 0.45);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body .glass-card.active-break-card.active-break-role--leader:not(.late) .active-card-start::after,
html body .glass-card.active-break-card.active-break-role--leader:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #4a5460, #b4bcc6, #8a96a4);
    box-shadow: 0 0 6px rgba(180, 188, 198, 0.2);
}

html body .glass-card.active-break-card.active-break-role--default:not(.late)::after,
html body #monitorView .glass-card.active-break-card.active-break-role--default:not(.late)::after {
    background:
        radial-gradient(ellipse 85% 48% at 50% -10%, rgba(142, 184, 220, 0.1) 0%, transparent 58%),
        linear-gradient(165deg, #1e3044 0%, #121c28 48%, #0c141c 100%) !important;
}

.active-break-card.active-break-role--cs-line:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #3d6e78, #8fb8c0, #6fa8b4);
    background-size: 100% 100%;
    animation: none !important;
}
.active-break-card.active-break-role--cs-lc:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #5a4a72, #b4a3c4, #8f7aa8);
    background-size: 100% 100%;
    animation: none !important;
}
.active-break-card.active-break-role--kapten-kasir:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #6a5a38, #d4c490, #c4b078);
    background-size: 100% 100%;
    animation: none !important;
}
.active-break-card.active-break-role--kasir:not(.late) .timer-progress-bar {
    background: linear-gradient(90deg, #6a4a38, #d4b094, #c49a78);
    background-size: 100% 100%;
    animation: none !important;
}

html body .glass-card.active-break-card .active-card-header {
    margin-bottom: 0;
    text-align: center;
}

html body .glass-card.active-break-card .active-card-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

html body .glass-card.active-break-card .active-card-main {
    flex: 1;
    margin-bottom: 0;
    min-height: 0;
}

html body .glass-card.active-break-card .active-card-timer .timer-val {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html body .glass-card.active-break-card .active-card-timer.safe .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

html body .glass-card.active-break-card .active-card-timer.warning .timer-val {
    color: #ffe566;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 12px rgba(250, 204, 21, 0.28);
}

html body .glass-card.active-break-card .active-card-timer.late .timer-val {
    color: #fecdd3;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 12px rgba(244, 63, 94, 0.28);
}

html body .glass-card.active-break-card .timer-progress-bar {
    bottom: 7px;
    left: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
    height: 3px;
    border-radius: 999px;
    z-index: 4;
    animation: none !important;
    background-size: 100% 100% !important;
    transition: none !important;
}

@media (max-width: 360px) {
    .active-breaks-grid {
        grid-template-columns: 1fr;
    }
    html body .glass-card.active-break-card {
        width: 100%;
        max-width: 100%;
    }
}

@container break-cards (max-width: 980px) {
    #monitorView .monitor-main {
        grid-template-columns: 1fr;
    }
}

@container break-cards (max-width: 820px) {
    #monitorView .role-slots-list {
        grid-template-columns: 1fr;
    }
    #monitorView .active-breaks-grid .glass-card.active-break-card {
        flex-basis: calc((100% - 36px) / 4);
        width: calc((100% - 36px) / 4);
        max-width: calc((100% - 36px) / 4);
        height: min(136px, calc((100% - 12px) / 2));
        max-height: calc((100% - 12px) / 2);
    }
}

@container break-cards (max-width: 640px) {
    #monitorView .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #monitorView .late-staff-card,
    #monitorView .monitor-deck-late {
        flex-wrap: wrap;
    }
    #monitorView .late-staff-list-horizontal {
        max-height: none;
        flex-wrap: wrap;
    }
}

@container break-cards (max-width: 540px) {
    #monitorView .active-breaks-grid .glass-card.active-break-card {
        flex-basis: calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
        height: calc((100% - 20px) / 3);
        max-height: calc((100% - 20px) / 3);
    }
}

.active-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.active-card-header {
    margin-bottom: 8px;
    min-width: 0;
}

.active-card-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.active-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 248, 231, 0.45);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.active-card-avatar:hover {
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.active-card-avatar:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.8);
    outline-offset: 2px;
}

.active-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Logo profil permanen (PNG transparan) */
.staff-avatar-logo,
img.staff-avatar-logo,
.chat-msg-avatar img.staff-avatar-logo,
.active-card-avatar-img.staff-avatar-logo,
#consoleStaffAvatarImg.staff-avatar-logo,
#headerStaffAvatarImg.staff-avatar-logo,
#chatMyAvatarImg.staff-avatar-logo {
    object-fit: contain !important;
    object-position: center center !important;
    padding: 14% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.active-card-avatar {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.active-card-avatar-initial {
    color: #fff8e7;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    line-height: 1;
}

.active-card-name {
    min-width: 0;
    width: 100%;
}

/* Popup lihat foto profil staff — luxury frame */
.staff-profile-photo-popup-overlay {
    background: rgba(4, 6, 14, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.staff-profile-photo-popup-card {
    max-width: 560px;
    width: min(94vw, 560px);
    padding: 42px 36px 36px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 32px;
    isolation: isolate;
    border: none;
    background: linear-gradient(165deg, rgba(28, 24, 48, 0.97) 0%, rgba(12, 14, 26, 0.98) 48%, rgba(18, 16, 34, 0.99) 100%);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(251, 191, 36, 0.18),
        0 0 48px rgba(168, 85, 247, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: staffProfilePopupIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-profile-photo-popup-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.85) 0%,
        rgba(216, 180, 254, 0.7) 28%,
        rgba(168, 85, 247, 0.55) 55%,
        rgba(56, 189, 248, 0.45) 78%,
        rgba(251, 191, 36, 0.7) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.staff-profile-photo-popup-card::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    border: 1px solid rgba(251, 191, 36, 0.12);
    pointer-events: none;
    z-index: 1;
}

@keyframes staffProfilePopupIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.staff-profile-photo-popup-shine {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.staff-profile-photo-popup-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}

.staff-profile-photo-popup-orb--a {
    width: 160px;
    height: 160px;
    top: -48px;
    right: -36px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, transparent 70%);
}

.staff-profile-photo-popup-orb--b {
    width: 140px;
    height: 140px;
    bottom: -40px;
    left: -30px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 70%);
}

.staff-profile-photo-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: #fde68a;
    font-size: 1rem;
    background: linear-gradient(160deg, rgba(40, 32, 18, 0.95), rgba(22, 18, 12, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(253, 230, 138, 0.2);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.staff-profile-photo-popup-close:hover {
    color: #fff;
    background: linear-gradient(160deg, rgba(185, 28, 28, 0.95), rgba(127, 29, 29, 0.95));
    border-color: rgba(248, 113, 113, 0.7);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.35);
    transform: rotate(90deg) scale(1.06);
}

.staff-profile-photo-popup-ring {
    position: relative;
    z-index: 2;
    width: 400px;
    height: 400px;
    margin: 10px auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-profile-photo-popup-ring-glow {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, rgba(251, 191, 36, 0.1) 42%, transparent 70%);
    filter: blur(8px);
    animation: staffProfileRingPulse 3.2s ease-in-out infinite;
}

@keyframes staffProfileRingPulse {
    0%, 100% { opacity: 0.65; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.03); }
}

.staff-profile-photo-popup-frame {
    position: relative;
    z-index: 1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2a1848, #1a1030);
    padding: 0;
    box-shadow:
        0 0 0 2px rgba(251, 191, 36, 0.55),
        0 0 0 6px rgba(168, 85, 247, 0.28),
        0 0 0 10px rgba(251, 191, 36, 0.12),
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 42px rgba(168, 85, 247, 0.35);
}

.staff-profile-photo-popup-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        from 210deg,
        #fbbf24,
        #f5d0fe,
        #a855f7,
        #38bdf8,
        #fbbf24
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: staffProfileRingSpin 10s linear infinite;
    pointer-events: none;
}

@keyframes staffProfileRingSpin {
    to { transform: rotate(360deg); }
}

.staff-profile-photo-popup-frame img,
.staff-profile-photo-popup-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 0;
    z-index: 1;
}

.staff-profile-photo-popup-initials {
    position: relative;
    z-index: 1;
    font-size: 3.6rem;
    font-weight: 900;
    color: white;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.staff-profile-photo-popup-divider {
    position: relative;
    z-index: 2;
    width: min(220px, 70%);
    height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.15) 18%,
        rgba(251, 191, 36, 0.85) 50%,
        rgba(168, 85, 247, 0.55) 72%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.staff-profile-photo-popup-name {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 12px;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    line-height: 1.35;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff8e7 0%, #fde68a 42%, #e9d5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.staff-profile-photo-popup-empty {
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: rgba(253, 230, 138, 0.55);
    letter-spacing: 0.4px;
}

@media (max-width: 480px) {
    .staff-profile-photo-popup-card {
        padding: 30px 18px 26px;
        border-radius: 26px;
        width: min(96vw, 560px);
    }

    .staff-profile-photo-popup-ring {
        width: min(86vw, 320px);
        height: min(86vw, 320px);
    }

    .staff-profile-photo-popup-frame {
        width: min(76vw, 280px);
        height: min(76vw, 280px);
    }

    .staff-profile-photo-popup-name {
        font-size: 1.05rem;
    }
}

/* Avatar crop / position editor */
#avatarCropModal.modal-overlay,
.avatar-crop-overlay {
    z-index: 12050 !important;
    background: rgba(4, 6, 14, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.avatar-crop-card {
    width: min(94vw, 460px);
    padding: 28px 24px 22px;
    border-radius: 24px;
    position: relative;
    background: linear-gradient(165deg, rgba(24, 22, 42, 0.98) 0%, rgba(12, 14, 26, 0.99) 100%);
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.15);
}

.avatar-crop-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    z-index: 2;
}

.avatar-crop-close:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: rotate(90deg);
}

.avatar-crop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-right: 36px;
}

.avatar-crop-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(56, 189, 248, 0.12));
    border: 1px solid rgba(168, 85, 247, 0.4);
    flex-shrink: 0;
}

.avatar-crop-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: white;
}

.avatar-crop-header p {
    margin: 3px 0 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.avatar-crop-stage {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.avatar-crop-viewport {
    --avatar-crop-size: 280px;
    width: var(--avatar-crop-size);
    height: var(--avatar-crop-size);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    background: #0b1020;
    border: 3px solid rgba(168, 85, 247, 0.55);
    box-shadow: 0 0 0 8px rgba(168, 85, 247, 0.12), 0 16px 36px rgba(0, 0, 0, 0.45);
    user-select: none;
    -webkit-user-select: none;
}

.avatar-crop-viewport.is-dragging {
    cursor: grabbing;
}

.avatar-crop-viewport img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    will-change: left, top, width, height;
}

.avatar-crop-circle-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.avatar-crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.avatar-crop-zoom input[type="range"] {
    flex: 1;
    accent-color: #a855f7;
    cursor: pointer;
}

.avatar-crop-hint {
    margin: 0 0 18px;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

.avatar-crop-actions {
    display: flex;
    gap: 10px;
}

.avatar-crop-actions .btn {
    flex: 1;
    justify-content: center;
}

@media (max-width: 480px) {
    .avatar-crop-viewport {
        --avatar-crop-size: 240px;
    }
}

.active-card-name h3 {
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.25;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    /* Prefer 1 baris; jika terlalu panjang wrap ke bawah (maks 2 baris) */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.active-card-name span {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
}

.active-card-timer {
    text-align: center;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.active-card-timer .timer-val {
    font-size: 2.15rem;
    font-weight: 800;
    font-family: monospace;
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
}

.active-card-timer.late .timer-val {
    color: #fecaca;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92);
    animation: none;
}

.active-card-timer.safe .timer-val {
    color: #5eead4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(16, 185, 129, 0.22);
}

.active-card-timer.warning .timer-val {
    color: #fde047;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(245, 158, 11, 0.2);
}

.active-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
}

.timer-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    animation: progressShine 2s linear infinite;
    width: 0%;
    transition: width 1s linear;
    border-radius: 0 2px 2px 0;
}

.active-break-card .timer-progress-bar {
    animation: none !important;
    background-size: 100% 100% !important;
}

.active-break-card.late .timer-progress-bar {
    background: linear-gradient(90deg, #f43f5e, #fb7185, #f43f5e);
    background-size: 200% 100%;
    width: 100% !important;
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
}

@keyframes progressShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 7. KONSOL STAFF (STAFF PORTAL) */
/* Papan Monitor + Portal Staff: kunci viewport, tanpa scroll halaman ke bawah */
body:has(#izinView.active):has(#monitorView:not(.hide)),
body:has(#izinView.active):has(#staffView:not(.hide)) {
    overflow: hidden !important;
}

body:has(#izinView.active):has(#monitorView:not(.hide)) .app-content,
body:has(#izinView.active):has(#staffView:not(.hide)) .app-content {
    overflow: hidden !important;
}

/* Portal staff: isi sisa layar, padding sama dengan tab Izin lain agar header/tab tidak loncat */
body.staff-portal-fill .app-content,
body:has(#izinView.active):has(#staffView:not(.hide)) .app-content,
.app-content.app-content--staff-fill {
    padding: 28px 40px 40px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.staff-portal-fill .app-main-area,
.app-main-area.app-main-area--staff-fill,
body:has(#izinView.active):has(#staffView:not(.hide)) .app-main-area {
    overflow: hidden !important;
    position: relative;
}

#izinView.active:has(#monitorView:not(.hide)),
#izinView.active:has(#staffView:not(.hide)) {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
    position: relative;
}

#izinView.active:has(#monitorView:not(.hide)) {
    height: 100%;
    max-height: 100%;
}

/* Full height of content column — isi 1 layar penuh, TANPA padding bingkai hitam */
body.staff-portal-fill #izinView,
#izinView.active:has(#staffView:not(.hide)) {
    --ambient-px: 0px;
    --ambient-py: 0px;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.staff-portal-fill #izinView .monitor-header,
#izinView.active:has(#staffView:not(.hide)) .monitor-header {
    overflow: visible !important;
}

body.staff-portal-fill #izinView #staffView,
#izinView.active:has(#staffView:not(.hide)) #staffView {
    padding: 0 !important;
}

#izinView.active:has(#staffView:not(.hide)) .monitor-header,
#izinView.active:has(#staffView:not(.hide)) #izinTabMenu,
#izinView.active:has(#staffView:not(.hide)) #staffView {
    position: relative;
    z-index: 2;
}

#izinView > .monitor-header {
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

#izinView > .monitor-header > div {
    margin-bottom: 20px !important;
}

#izinView #izinTabMenu {
    flex-shrink: 0;
    align-items: center !important;
}

#izinView:has(#monitorView.active) #izinTabMenu {
    margin-bottom: 36px !important;
}

/* ===== PAPAN MONITOR — no page scroll ===== */
#monitorView {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto;
    max-height: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#monitorView .monitor-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    align-items: stretch;
    gap: 10px;
    grid-template-columns: 1fr;
}

#monitorView .monitor-sidebar {
    display: none;
}

#monitorView .monitor-main {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: break-cards;
}

#monitorView .monitor-command-deck {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

#monitorView .monitor-deck-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

#monitorView .monitor-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    gap: 16px;
}

#monitorView .monitor-deck-kpis {
    flex: 0 0 auto;
}

#monitorView .monitor-deck-slots {
    flex: 1 1 auto;
    min-height: 0;
}

#monitorView .monitor-deck-kpis,
#monitorView .monitor-deck-slots,
#monitorView .monitor-deck-late,
#monitorView .late-staff-card,
#monitorView .monitor-breaks-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(168, 200, 230, 0.22) !important;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(142, 184, 220, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(14, 24, 42, 0.9) 0%, rgba(8, 14, 26, 0.86) 100%) !important;
    background-image:
        radial-gradient(120% 80% at 0% 0%, rgba(142, 184, 220, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(14, 24, 42, 0.9) 0%, rgba(8, 14, 26, 0.86) 100%) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#monitorView .monitor-deck-kpis h3,
#monitorView .monitor-deck-slots h3 {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #e8f1fa;
}

#monitorView .monitor-deck-slots .card-header-flex {
    margin: 0 0 8px;
    padding: 0;
    border: none;
}

#monitorView .monitor-deck-slots .card-header-flex i {
    font-size: 0.82rem;
    opacity: 0.85;
    color: #8eb8dc;
}

#monitorView .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
}

#monitorView .role-slots-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    flex: 0 0 auto;
    align-content: start;
}

#monitorView .monitor-slots-mark {
    flex: 1 1 auto;
    min-height: 96px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-top: 4px;
    overflow: hidden;
}

#monitorView .monitor-slots-mark__ring {
    position: absolute;
    width: min(240px, 88%);
    max-height: 96%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(142, 184, 220, 0.32);
    box-shadow:
        0 0 40px rgba(142, 184, 220, 0.24),
        inset 0 0 28px rgba(142, 184, 220, 0.12);
    background:
        radial-gradient(circle at 50% 38%, rgba(190, 220, 245, 0.16), transparent 64%);
}

#monitorView .monitor-slots-mark__ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(142, 184, 220, 0.22);
}

#monitorView .monitor-slots-mark__logo {
    position: relative;
    z-index: 1;
    width: min(220px, 80%);
    max-height: min(210px, 94%);
    height: auto;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 22px rgba(142, 184, 220, 0.5));
}

#monitorView .monitor-deck-kpis::before,
#monitorView .monitor-deck-kpis::after,
#monitorView .monitor-deck-slots::before,
#monitorView .monitor-deck-slots::after,
#monitorView .monitor-deck-late::before,
#monitorView .monitor-deck-late::after,
#monitorView .late-staff-card::before,
#monitorView .late-staff-card::after,
#monitorView .monitor-breaks-panel::before,
#monitorView .monitor-breaks-panel::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

#monitorView .stat-item {
    min-height: 64px;
    height: 100%;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18, 30, 50, 0.92), rgba(8, 14, 26, 0.9));
    border: 1px solid rgba(168, 200, 230, 0.22);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

#monitorView .stat-icon {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    border-radius: 10px;
}

#monitorView .stat-info h4 {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

#monitorView .stat-info span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #d7e6f4;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
    margin-top: 4px;
}

#monitorView .role-slot-row {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name frac"
        "dots frac";
    gap: 1px 8px;
    padding: 6px 10px 6px 12px;
    border-radius: 12px;
    border: 1px solid rgba(168, 200, 230, 0.22);
    background: linear-gradient(180deg, rgba(18, 30, 50, 0.92), rgba(8, 14, 26, 0.9));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

#monitorView .role-slot-row.is-full {
    background: linear-gradient(180deg, #9f1239, #4c0519);
    border-color: rgba(251, 113, 133, 0.55);
}

#monitorView .role-slot-row.is-low {
    background: linear-gradient(180deg, #a16207, #713f12);
    border-color: rgba(250, 204, 21, 0.55);
}

#monitorView .role-slot-row.is-free {
    background: linear-gradient(180deg, #15803d, #14532d);
    border-color: rgba(74, 222, 128, 0.55);
}

#monitorView .role-slot-row::before {
    top: 6px;
    bottom: 6px;
    width: 3px;
}

#monitorView .role-slot-name {
    grid-area: name;
    font-size: 0.68rem;
    letter-spacing: 0.45px;
    color: #f4f8fc;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.2;
}

#monitorView .role-dot-indicators {
    grid-area: dots;
    justify-content: flex-start;
}

#monitorView .role-dot {
    width: 7px;
    height: 7px;
}

#monitorView .role-slot-fraction {
    grid-area: frac;
    font-size: 0.82rem;
    color: #e8f1fa;
}

#monitorView .role-slot-fraction b,
#monitorView .role-slot-fraction i {
    font-size: inherit;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}

#monitorView .role-slot-fraction.full,
#monitorView .role-slot-fraction.full b {
    color: #fecdd3;
}

#monitorView .role-slot-fraction.low,
#monitorView .role-slot-fraction.low b {
    color: #fde68a;
}

#monitorView .role-slot-fraction.free,
#monitorView .role-slot-fraction.free b {
    color: #bbf7d0;
}

#monitorView .monitor-deck-late,
#monitorView .late-staff-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    gap: 8px;
    margin: 0 !important;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(244, 63, 94, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(14, 24, 42, 0.9) 0%, rgba(8, 14, 26, 0.86) 100%) !important;
    background-image:
        radial-gradient(120% 80% at 0% 0%, rgba(244, 63, 94, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(14, 24, 42, 0.9) 0%, rgba(8, 14, 26, 0.86) 100%) !important;
}

#monitorView .late-staff-card::before {
    display: none !important;
}

#monitorView .monitor-breaks-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#monitorView .late-staff-card__header {
    margin: 0 0 8px;
    width: 100%;
    gap: 10px;
    flex-shrink: 0;
}

#monitorView .late-staff-card__title-wrap {
    gap: 10px;
}

#monitorView .late-staff-card__icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.68rem;
    box-shadow: none;
    background: linear-gradient(145deg, #9ec4e4, #7aa8cc);
    color: #071018;
}

#monitorView .late-staff-card__title {
    font-size: 0.7rem !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #e8f1fa !important;
    font-weight: 800 !important;
}

#monitorView .late-staff-card__subtitle {
    display: none;
}

#monitorView .late-staff-card__live {
    padding: 4px 10px;
    font-size: 0.62rem;
    gap: 6px;
    color: #b8ecc8;
    background: rgba(158, 212, 168, 0.12);
    border-color: rgba(158, 212, 168, 0.32);
}

#monitorView .late-staff-card__live-dot {
    width: 7px;
    height: 7px;
    background: #9ed4a8;
}

#monitorView .late-staff-list-horizontal {
    flex: 0 1 auto;
    align-self: flex-start;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    gap: 8px;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#monitorView .late-staff-empty {
    width: auto;
    max-width: 100%;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(142, 196, 220, 0.08);
    border-color: rgba(142, 196, 220, 0.18);
}

#monitorView .late-staff-empty__icon {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
    box-shadow: none;
}

#monitorView .late-staff-empty__text strong {
    font-size: 0.82rem;
    color: #f2f7fb;
}

#monitorView .late-staff-empty__text span {
    display: block;
    font-size: 0.72rem;
    color: #c5d7e8;
}

#monitorView .late-staff-item {
    padding: 10px 12px 10px 14px;
    border-radius: 9px;
    width: auto;
    max-width: min(520px, 100%);
    min-height: 52px;
    flex: 0 1 auto;
    gap: 10px;
    overflow: visible;
    align-items: center;
}

#monitorView .late-staff-item::before {
    top: 6px;
    bottom: 6px;
    width: 2px;
}

#monitorView .late-staff-item__avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.65rem;
}

#monitorView .late-staff-item .staff-info {
    gap: 4px;
    overflow: visible;
    min-width: 0;
}

#monitorView .late-staff-item .staff-role-flex {
    flex-wrap: wrap;
    overflow: visible;
}

#monitorView .late-staff-item .staff-name {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #ffe4e8;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: unset;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
    display: block;
}

#monitorView .late-staff-item .staff-role,
#monitorView .late-staff-item .late-badge-status,
#monitorView .late-staff-item .overtime-label {
    font-size: 0.58rem;
    color: #f0c4cc;
}

#monitorView .late-staff-item .late-badge-status {
    padding: 3px 8px;
    white-space: nowrap;
}

#monitorView .late-staff-item .overtime-val {
    font-size: 0.82rem;
    font-weight: 900;
    color: #ffb4c0;
}

#monitorView .section-title-row {
    flex-shrink: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    width: 100%;
    text-align: left;
}

#monitorView .section-title-row::after {
    display: none;
}

#monitorView .section-title-row h2 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    justify-content: flex-start;
}

#monitorView .section-title-icon {
    width: 22px;
    height: 22px;
}

#monitorView .section-title-icon i {
    font-size: 0.62rem;
}

#monitorView .section-title-row .badge {
    padding: 4px 10px;
    font-size: 0.68rem;
    color: #ffffff;
    background: rgba(110, 160, 210, 0.28);
    border-color: rgba(190, 220, 245, 0.55);
}

#izinView .izin-page-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
}

#izinView .izin-page-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
    color: #d7e6f4 !important;
}

#izinView #izinTabMenu .btn-tab {
    color: #e8f1fa !important;
}

#izinView #izinTabMenu .btn-tab.active {
    color: #ffffff !important;
}

#monitorView .section-title-text,
html body #monitorView .section-title-text,
html body.theme-black-gold #monitorView .section-title-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    filter: none !important;
}

#monitorView .section-title-row h2,
#monitorView .monitor-deck-kpis h3,
#monitorView .monitor-deck-slots h3,
#monitorView .late-staff-card__title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#monitorView .stat-info span {
    color: #f4f8fc !important;
}

#monitorView .role-slot-name {
    font-size: 0.76rem;
    color: #ffffff;
    font-weight: 800;
}

#monitorView .role-slot-fraction,
#monitorView .role-slot-fraction b,
#monitorView .role-slot-fraction i {
    color: #ffffff;
    opacity: 1;
}

#monitorView .role-slot-row.is-full .role-slot-fraction,
#monitorView .role-slot-row.is-full .role-slot-fraction b,
#monitorView .role-slot-row.is-full .role-slot-fraction i {
    color: #ffe4e8;
}

#monitorView .role-slot-row.is-low .role-slot-fraction,
#monitorView .role-slot-row.is-low .role-slot-fraction b,
#monitorView .role-slot-row.is-low .role-slot-fraction i {
    color: #fff7cc;
}

#monitorView .role-slot-row.is-free .role-slot-fraction,
#monitorView .role-slot-row.is-free .role-slot-fraction b,
#monitorView .role-slot-row.is-free .role-slot-fraction i {
    color: #ecfdf3;
}

#monitorView .late-staff-item .staff-name {
    color: #ffffff;
}

#monitorView .late-staff-item .staff-role,
#monitorView .late-staff-item .late-badge-status,
#monitorView .late-staff-item .overtime-label {
    font-size: 0.68rem;
    color: #ffe4e8;
    opacity: 1;
}

#monitorView .late-staff-item .late-badge-status.active {
    color: #ffffff;
}

#monitorView .late-staff-item .overtime-val {
    color: #ffd6dc;
}

#monitorView .late-staff-card__live {
    color: #d8f5e2;
}

#monitorView .late-staff-empty__text strong {
    color: #ffffff;
}

#monitorView .late-staff-empty__text span {
    color: #e4eef6;
}

#monitorView .no-breaks-state h3 {
    color: #ffffff !important;
}

#monitorView .no-breaks-state p {
    color: #d7e6f4 !important;
}

html body #monitorView .glass-card.active-break-card .active-card-name h3,
html body #monitorView .glass-card.active-break-card .active-card-name span,
html body #monitorView .glass-card.active-break-card .active-card-bottom,
html body #monitorView .glass-card.active-break-card .active-card-start,
html body #monitorView .glass-card.active-break-card .active-card-start strong,
html body #monitorView .glass-card.active-break-card .elapsed-info,
html body #monitorView .glass-card.active-break-card .active-card-timer .timer-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

#monitorView,
#monitorView *:not(.active-break-card) {
    animation: none !important;
}

#monitorView .glass-card:not(.active-break-card),
#monitorView .glass-card:not(.active-break-card)::before,
#monitorView .glass-card:not(.active-break-card)::after,
#monitorView .active-card-timer,
#monitorView .timer-progress-bar,
#monitorView .late-staff-card__live-dot,
#monitorView .slot-alert,
#monitorView .role-slot-row,
#monitorView .late-staff-item {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

#monitorView .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

#monitorView .active-breaks-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: start;
    align-items: stretch;
    gap: 12px;
    padding: 4px 2px 6px;
}

#monitorView .active-breaks-grid:has(> .active-break-card):not(:has(> .active-break-card ~ .active-break-card)) {
    justify-content: center;
}

#monitorView .active-breaks-grid .no-breaks-state {
    flex: 1 1 100%;
    max-width: 420px;
    margin: 12px auto 0;
    padding: 18px 16px !important;
}

html body #monitorView .glass-card.active-break-card {
    flex: 0 0 calc((100% - 36px) / 4);
    width: calc((100% - 36px) / 4);
    max-width: calc((100% - 36px) / 4);
    min-height: 0;
    height: min(136px, calc((100% - 12px) / 2));
    max-height: calc((100% - 12px) / 2);
    padding: 12px 14px 14px;
    border-radius: 20px;
}

html body #monitorView .glass-card.active-break-card::before {
    animation: glowing_401 5s linear infinite !important;
    inset: -80% !important;
    background-image: conic-gradient(from 0deg, #d7e4f0, #6a9cc4, #1e3a5f, #8eb8dc, #0b1a2c, #d7e4f0) !important;
}

html body #monitorView .glass-card.active-break-card::after {
    inset: 3px !important;
    top: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-radius: 17px;
}

html body #monitorView .glass-card.active-break-card .active-card-header {
    margin-bottom: 2px;
}

html body #monitorView .glass-card.active-break-card .active-card-main {
    margin-bottom: 2px;
}

html body #monitorView .glass-card.active-break-card .active-card-name h3 {
    font-size: 0.74rem;
    line-height: 1.22;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-height: none;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    text-overflow: unset;
}

html body #monitorView .glass-card.active-break-card .active-card-name span {
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 0.52rem;
}

html body #monitorView .glass-card.active-break-card .active-card-timer .timer-val {
    font-size: 1.28rem;
}

html body #monitorView .glass-card.active-break-card .active-card-bottom {
    font-size: 0.62rem;
    gap: 6px;
    padding: 2px 4px 8px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    overflow: visible;
}

html body #monitorView .glass-card.active-break-card .elapsed-info {
    font-size: 0.55rem;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #monitorView .glass-card.active-break-card .active-card-start {
    padding-bottom: 0;
}

html body #monitorView .glass-card.active-break-card .active-card-start::after {
    display: none;
}

#monitorView .slot-alert-board {
    display: none !important;
}

#monitorView .slot-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(168, 200, 230, 0.2);
    background: linear-gradient(180deg, rgba(18, 30, 50, 0.96), rgba(8, 14, 26, 0.94));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #eef4fb;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

#monitorView .slot-alert-board.is-empty {
    display: none;
}

#monitorView .slot-alert i {
    flex-shrink: 0;
    font-size: 0.85rem;
}

#monitorView .slot-alert span {
    white-space: normal;
    overflow: visible;
}

#monitorView .slot-alert.full {
    border-color: rgba(248, 113, 113, 0.5);
    background: linear-gradient(180deg, rgba(72, 16, 22, 0.96), rgba(28, 8, 12, 0.94));
    color: #ffe4e8;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 0 12px rgba(239, 68, 68, 0.18);
}

#monitorView .slot-alert.full i {
    color: #f87171;
}

#monitorView .slot-alert.low,
#monitorView .slot-alert.open {
    border-color: rgba(250, 204, 21, 0.5);
    background: linear-gradient(180deg, rgba(52, 38, 8, 0.96), rgba(24, 16, 6, 0.94));
    color: #fff4d6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 0 12px rgba(250, 204, 21, 0.16);
}

#monitorView .slot-alert.low i,
#monitorView .slot-alert.open i {
    color: #facc15;
}

#monitorView .slot-alert.empty {
    border-color: rgba(74, 222, 128, 0.48);
    background: linear-gradient(180deg, rgba(10, 40, 22, 0.96), rgba(6, 18, 12, 0.94));
    color: #dcfce7;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), 0 0 12px rgba(34, 197, 94, 0.16);
}

#monitorView .slot-alert.empty i {
    color: #4ade80;
}

#staffView {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto;
    max-height: 100%;
    padding: clamp(8px, 2vh, 20px) 0 clamp(16px, 3vh, 32px);
    margin: 0;
    overflow: visible !important;
    box-sizing: border-box;
}

#staffView .staff-portal-center {
    max-width: min(1200px, 98vw);
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#staffView .staff-portal-console-stack {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
    max-height: 100%;
    overflow: visible;
}

#staffView::before,
#staffView::after {
    display: none !important;
}

/* ============================================================
   STAFF PORTAL — Static ambient + ring animation behind card only
   ============================================================ */
.staff-portal-ambient {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: paint;
}

#izinView.active:has(#staffView:not(.hide)) > .staff-portal-ambient,
body.staff-portal-fill #izinView > .staff-portal-ambient {
    display: block;
}

#staffView > .staff-portal-center {
    position: relative;
    z-index: 1;
}

.staff-ambient-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 46% 52% at 50% 52%, rgba(142, 184, 220, 0.08) 0%, transparent 64%),
        radial-gradient(ellipse 70% 62% at 50% 48%, rgba(110, 160, 210, 0.04) 0%, transparent 72%);
    animation: staffAmbientBreathe 10s ease-in-out infinite;
}

.staff-ambient-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 72% 68% at 50% 48%, transparent 42%, rgba(2, 4, 12, 0.28) 100%);
    pointer-events: none;
}

.staff-card-rings {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.staff-portal-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170%;
    height: 180%;
    translate: -50% -50%;
    background:
        radial-gradient(ellipse 48% 42% at 50% 50%, rgba(238, 243, 248, 0.08) 0%, rgba(142, 184, 220, 0.12) 28%, rgba(106, 156, 196, 0.05) 52%, transparent 72%);
    filter: blur(22px);
    animation: staffPortalBloom 8s ease-in-out infinite;
}

.staff-portal-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240%;
    height: 240%;
    translate: -50% -50%;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(238, 243, 248, 0.05) 6deg,
        rgba(142, 184, 220, 0.08) 10deg,
        transparent 16deg,
        transparent 40deg
    );
    -webkit-mask-image: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.45) 40%, transparent 68%);
    mask-image: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.45) 40%, transparent 68%);
    filter: blur(8px);
    animation: staffPortalRays 36s linear infinite;
    opacity: 0.35;
}

.staff-portal-corona {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(238, 243, 248, 0.18) 8%,
        transparent 18%,
        transparent 50%,
        rgba(142, 184, 220, 0.16) 58%,
        transparent 70%
    );
    -webkit-mask-image: radial-gradient(circle, transparent 61%, #000 64%, #000 68%, transparent 72%);
    mask-image: radial-gradient(circle, transparent 61%, #000 64%, #000 68%, transparent 72%);
    animation: staffPortalCorona 22s linear infinite;
    filter: blur(3px) drop-shadow(0 0 8px rgba(142, 184, 220, 0.18));
}

.staff-card-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1px solid rgba(142, 184, 220, 0.14);
    box-sizing: border-box;
    aspect-ratio: 1;
}

.staff-card-ring--outer {
    width: 148%;
    border-color: rgba(190, 215, 240, 0.1);
    animation: staffLuxRing 28s linear infinite;
}

.staff-card-ring--mid {
    width: 118%;
    border-color: rgba(142, 184, 220, 0.14);
    box-shadow: 0 0 12px rgba(142, 184, 220, 0.06);
    animation: staffLuxRing 34s linear infinite reverse;
}

.staff-card-ring--pulse {
    width: 102%;
    border-color: rgba(210, 228, 246, 0.22);
    box-shadow: 0 0 12px rgba(142, 184, 220, 0.12);
    animation: none;
}

.staff-card-ring--pulse-2 {
    animation: none;
}

#staffView .staff-card-ring--pulse,
#staffView .staff-card-ring--pulse-2 {
    display: none !important;
    animation: none !important;
}

#staffView .staff-portal-bloom,
#staffView .staff-ambient-wash {
    animation: none !important;
}

#staffConsoleCard {
    position: relative;
    z-index: 2;
}

/* Matikan animasi/transisi di dalam kartu portal — transisi background/opacity bikin kedip saat izin mulai */
#staffView .staff-console-card,
#staffView .staff-console-card *:not(.btn-action-break):not(.action-icon):not(.action-text),
#staffView .console-aurora,
#staffView .console-shine-sweep,
#staffView .console-mesh-overlay,
#staffView .console-mouse-glow,
#staffView .console-avatar-ring,
#staffView .avatar-initials,
#staffView .ripple-wave,
#staffView .progress-bar-fill,
#staffView .quota-block {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#staffView #staffConsoleCard .btn-action-break {
    transition:
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s ease,
        filter 0.2s ease !important;
    transform: none;
    animation: none !important;
}

#staffView #staffConsoleCard .btn-action-break::before,
#staffView #staffConsoleCard .btn-action-break::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

#staffView #staffConsoleCard .btn-action-break:hover:not(:disabled):not(.disabled) {
    transform: translateY(-3px) scale(1.02) !important;
    filter: none !important;
}

#staffView #staffConsoleCard .btn-action-break.start-state:hover:not(:disabled):not(.disabled) {
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(245, 158, 11, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#staffView #staffConsoleCard .btn-action-break.end-state:hover:not(:disabled):not(.disabled) {
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.4),
        0 0 22px rgba(16, 185, 129, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

#staffView #staffConsoleCard .btn-action-break .action-icon,
#staffView #staffConsoleCard .btn-action-break .action-text {
    position: relative;
    z-index: 3;
}

#staffView #staffConsoleCard .btn-action-break .action-icon {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#staffView #staffConsoleCard .btn-action-break:hover:not(:disabled):not(.disabled) .action-icon {
    transform: rotate(-14deg) scale(1.14) !important;
}

#staffView #staffConsoleCard .btn-action-break:active:not(:disabled):not(.disabled) {
    transform: translateY(0) scale(0.98) !important;
    filter: brightness(0.97) !important;
}

#staffView .console-aurora,
#staffView .console-shine-sweep,
#staffView .console-mesh-overlay,
#staffView .ripple-wave {
    display: none !important;
}

@keyframes staffLuxRing {
    0%   { rotate: 0deg; opacity: 0.35; }
    50%  { opacity: 0.7; }
    100% { rotate: 360deg; opacity: 0.35; }
}

@keyframes staffLuxPulseRing {
    0%   { scale: 0.92; opacity: 0.32; }
    100% { scale: 1.7; opacity: 0; }
}

@keyframes staffPortalBloom {
    0%, 100% { opacity: 0.4; filter: blur(22px); }
    50% { opacity: 0.7; filter: blur(28px); }
}

@keyframes staffAmbientBreathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes staffPortalRays {
    to { rotate: 360deg; }
}

@keyframes staffPortalCorona {
    to { rotate: 360deg; }
}

@keyframes staffAmbientBreathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (max-width: 768px) {
    .staff-card-ring--outer,
    .staff-portal-corona {
        display: none;
    }

    .staff-portal-rays {
        width: 190%;
        height: 190%;
        opacity: 0.22;
        filter: blur(10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staff-card-ring,
    .staff-portal-bloom,
    .staff-portal-rays,
    .staff-portal-corona,
    .staff-ambient-wash {
        animation: none !important;
    }

    .staff-card-ring--pulse {
        display: none;
    }
}

/* Staff Personal Background Card Previews */
.staff-bg-card {
    height: 72px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.staff-bg-card span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    position: relative;
    z-index: 2;
}

.staff-bg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

.staff-bg-card.active {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4), 0 8px 25px rgba(139, 92, 246, 0.45);
}

/* ================================================================
   SIDEBAR COLLAPSE SYSTEM (72px Mini Sidebar)
   ================================================================ */
.app-sidebar {
    width: var(--app-sidebar-width, 218px);
    min-width: var(--app-sidebar-width, 218px);
    max-width: var(--app-sidebar-width, 218px);
    background: linear-gradient(180deg, rgba(10, 18, 34, 0.98) 0%, rgba(5, 8, 16, 0.99) 55%, rgba(8, 14, 26, 0.98) 100%);
    backdrop-filter: blur(30px);
    border-right: 1px solid rgba(142, 180, 220, 0.16);
    display: flex;
    flex-direction: column;
    padding: 14px 8px;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(142, 180, 220, 0.45), rgba(200, 220, 240, 0.22), transparent);
    pointer-events: none;
}

.sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-right: 2px;
    box-sizing: border-box;
}

.sidebar-logo-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 2px 8px;
    margin-bottom: 0;
    position: relative;
    flex-shrink: 0;
    z-index: 5;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background: inherit;
    overflow: visible;
}

.sidebar-logo-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.sidebar-logo-clickable {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    min-width: 0;
}

.sidebar-staff-block {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sidebar-staff-block.hide {
    display: none !important;
}

/* Mading bar penuh — lebar area dashboard (sidebar → kanan) */
.dashboard-top-bar {
    position: relative;
    z-index: 150;
    flex-shrink: 0;
    width: 100%;
    pointer-events: none;
}

.dashboard-top-bar.hide {
    display: none !important;
}

.dashboard-top-bar > * {
    pointer-events: auto;
}

.dashboard-mading-bar {
    width: 100%;
}

.dashboard-mading-bar__panel {
    position: relative;
    width: 100%;
    min-height: 44px;
    overflow: visible;
    border-bottom: 1px solid rgba(142, 180, 220, 0.28);
    background:
        linear-gradient(180deg, rgba(238, 243, 248, 0.07) 0%, rgba(238, 243, 248, 0) 34%),
        linear-gradient(90deg, rgba(142, 184, 220, 0.08) 0%, transparent 22%),
        linear-gradient(180deg, #152238 0%, #0c1524 58%, #09101c 100%);
    box-shadow:
        inset 0 1px 0 rgba(238, 243, 248, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 10px 28px rgba(0, 0, 0, 0.38);
}

.dashboard-mading-bar__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    opacity: 0;
}

.dashboard-mading-bar__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(106, 156, 196, 0.22) 10%,
        rgba(142, 184, 220, 0.72) 36%,
        rgba(238, 243, 248, 0.92) 50%,
        rgba(142, 184, 220, 0.72) 64%,
        rgba(106, 156, 196, 0.22) 90%,
        transparent 100%
    );
    box-shadow: 0 0 14px rgba(142, 184, 220, 0.38);
    pointer-events: none;
}

.dashboard-mading-bar__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(238, 243, 248, 0.04) 48%,
        rgba(142, 184, 220, 0.08) 50%,
        rgba(238, 243, 248, 0.04) 52%,
        transparent 62%
    );
    pointer-events: none;
}

.dashboard-mading-bar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 5px 16px;
    box-sizing: border-box;
}

.dashboard-mading-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-mading-bar__pin {
    flex-shrink: 0;
    width: 8px;
    height: 9px;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, #eef3f8 0%, #8eb8dc 48%, #4a7aa8 100%);
    box-shadow:
        0 0 10px rgba(142, 184, 220, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.45);
}

.dashboard-mading-bar__rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 24px;
    background: linear-gradient(
        90deg,
        rgba(142, 184, 220, 0.55) 0%,
        rgba(238, 243, 248, 0.22) 42%,
        rgba(142, 184, 220, 0.06) 100%
    );
}

.dashboard-staff-block {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    max-width: min(520px, 52vw);
}

.dashboard-staff-block__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px;
}

.dashboard-top-bar .live-clock.live-clock--header {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    padding: 0 !important;
    min-height: 0;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dashboard-top-bar .live-clock--header .live-clock__glow {
    position: absolute;
    inset: -14px -22px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 70% at 50% 50%, rgba(186, 214, 232, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 90% 90% at 20% 30%, rgba(142, 184, 220, 0.12) 0%, transparent 60%);
}

.dashboard-top-bar .live-clock--header .live-clock__frame {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 999px;
    padding: 1.5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 36%),
        linear-gradient(
            135deg,
            #f4f8fc 0%,
            #c5d8ea 18%,
            #6a9cc4 42%,
            #2a4a6c 58%,
            #8eb8dc 78%,
            #eef3f8 100%
        );
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(238, 243, 248, 0.12),
        0 0 28px rgba(142, 184, 220, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.dashboard-top-bar .live-clock--header .live-clock__sheen {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.dashboard-top-bar .live-clock--header .live-clock__sheen::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 38%;
    background: linear-gradient(
        108deg,
        transparent 0%,
        rgba(238, 243, 248, 0.04) 32%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(142, 184, 220, 0.12) 62%,
        transparent 100%
    );
    transform: translateX(-160%);
    animation: headerClockSheen 7.5s ease-in-out infinite;
}

@keyframes headerClockSheen {
    0%, 22% { transform: translateX(-160%); }
    62%, 100% { transform: translateX(320%); }
}

.dashboard-top-bar .live-clock--header .live-clock__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px 6px 11px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 46%),
        linear-gradient(145deg, #223656 0%, #14243c 46%, #0b1526 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 8px rgba(0, 0, 0, 0.42);
}

.dashboard-top-bar .live-clock--header .live-clock__content::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 1px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(238, 243, 248, 0.55), transparent);
    pointer-events: none;
}

.dashboard-top-bar .live-clock--header .live-clock__jewel {
    flex-shrink: 0;
    width: 8px;
    height: 9px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, #f4f8fc 0%, #8eb8dc 48%, #4a7aa8 100%);
    box-shadow:
        0 0 10px rgba(142, 184, 220, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

.dashboard-top-bar .live-clock--header .live-clock__accent {
    flex-shrink: 0;
    width: 2px;
    align-self: stretch;
    min-height: 18px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(142, 184, 220, 0.08) 0%,
        rgba(142, 184, 220, 0.95) 30%,
        rgba(238, 243, 248, 0.98) 50%,
        rgba(142, 184, 220, 0.95) 70%,
        rgba(142, 184, 220, 0.08) 100%
    );
    box-shadow: 0 0 12px rgba(142, 184, 220, 0.45);
}

.dashboard-top-bar .live-clock--header .live-clock__readout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}

.dashboard-top-bar .live-clock--header .live-clock__time-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.dashboard-top-bar .live-clock.live-clock--header .time {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
    width: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 38%, #b7d0e6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}

.dashboard-top-bar .live-clock--header .live-clock__tz {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #8eb8dc;
    text-shadow: 0 0 10px rgba(142, 184, 220, 0.45);
}

.dashboard-top-bar .live-clock.live-clock--header .date {
    font-size: 0.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    margin-top: 0;
    white-space: nowrap;
    width: auto !important;
    color: rgba(198, 220, 236, 0.9) !important;
}

body.theme-black-gold .dashboard-top-bar .live-clock.live-clock--header {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.dash-staff-luxe__logout {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 15px 0 6px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(145deg, #9b2b3a 0%, #6b1522 52%, #3a0c14 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 6px rgba(0, 0, 0, 0.32),
        0 4px 16px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(155, 43, 58, 0.28);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, filter 0.32s ease;
}

.dash-staff-luxe__logout-aura {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.35) 0%, transparent 68%);
    opacity: 0.38;
    pointer-events: none;
    z-index: 0;
    animation: none;
}

.dash-staff-luxe__logout-ring {
    position: absolute;
    inset: -1px;
    border-radius: 999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.95) 0%, rgba(239, 68, 68, 0.85) 45%, rgba(127, 29, 29, 0.9) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.88;
}

.dash-staff-luxe__logout-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 40%,
        rgba(255, 255, 255, 0.08) 48%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.08) 52%,
        transparent 60%
    );
    transform: translateX(-120%);
    animation: none;
    pointer-events: none;
    z-index: 2;
}

.dash-staff-luxe__logout:hover .dash-staff-luxe__logout-shine {
    animation: dashLogoutShine 0.85s ease-out 1;
}

.dash-staff-luxe__logout-icon-wrap {
    position: relative;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22) 0%, transparent 48%),
        linear-gradient(160deg, rgba(127, 29, 29, 0.95) 0%, rgba(69, 10, 10, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 0 10px rgba(248, 113, 113, 0.35);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}

.dash-staff-luxe__logout-icon-wrap i {
    font-size: 0.62rem;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.dash-staff-luxe__logout-label {
    position: relative;
    z-index: 3;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dash-staff-luxe__logout:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(155, 43, 58, 0.42);
}

.dash-staff-luxe__logout:hover .dash-staff-luxe__logout-ring {
    opacity: 1;
    filter: brightness(1.15);
}

.dash-staff-luxe__logout:hover .dash-staff-luxe__logout-icon-wrap {
    transform: rotate(-12deg) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 4px 12px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(252, 165, 165, 0.55);
}

.dash-staff-luxe__logout:active {
    transform: translateY(0) scale(0.98);
}

.dash-staff-luxe__logout.hide {
    display: none;
}

@keyframes dashLogoutAura {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 0.75; transform: scale(1.04); }
}

@keyframes dashLogoutShine {
    0%, 72% { transform: translateX(-120%); opacity: 0; }
    78% { opacity: 1; }
    94% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* Kartu staff di dalam mading bar */
.dash-staff-luxe {
    position: relative;
    isolation: isolate;
}

.dash-staff-luxe--inline .dash-staff-luxe__frame {
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(142, 196, 220, 0.08),
        0 0 18px rgba(142, 196, 220, 0.08);
}

.dash-staff-luxe--inline .dash-staff-luxe__glow {
    position: absolute;
    inset: -8px -10px -10px -10px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, rgba(142, 184, 220, 0.18) 0%, transparent 68%),
        radial-gradient(ellipse 45% 40% at 88% 20%, rgba(238, 243, 248, 0.08) 0%, transparent 50%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
    animation: none;
    opacity: 0.9;
}

.dash-staff-luxe__sheen {
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.dash-staff-luxe__sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(255, 255, 255, 0.03) 48%,
        rgba(238, 243, 248, 0.1) 50%,
        rgba(255, 255, 255, 0.04) 52%,
        transparent 62%
    );
    transform: translateX(-130%);
    animation: none;
}

.dash-staff-luxe:hover .dash-staff-luxe__sheen::after {
    animation: dashStaffSheenHover 0.85s ease-out 1;
}

@keyframes dashStaffSheenHover {
    0% { transform: translateX(-130%); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}

@keyframes dashStaffSheen {
    0%, 74% { transform: translateX(-130%); opacity: 0; }
    80% { opacity: 1; }
    96% { transform: translateX(130%); opacity: 0; }
    100% { transform: translateX(130%); opacity: 0; }
}

@keyframes dashStaffGlow {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes dashStaffStatusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18), 0 0 10px rgba(52, 211, 153, 0.55);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28), 0 0 16px rgba(52, 211, 153, 0.75);
    }
}

.dash-staff-luxe__frame {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(238, 243, 248, 0.72) 0%,
        rgba(142, 184, 220, 0.48) 28%,
        rgba(80, 120, 170, 0.32) 52%,
        rgba(142, 184, 220, 0.42) 76%,
        rgba(238, 243, 248, 0.58) 100%
    );
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(142, 184, 220, 0.12),
        0 0 18px rgba(142, 184, 220, 0.16);
}

.dash-staff-luxe__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 12px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(21, 34, 56, 0.96) 0%, rgba(12, 21, 36, 0.98) 55%, rgba(7, 11, 22, 0.99) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.dash-staff-luxe__content--minimal {
    position: relative;
    z-index: 1;
    gap: 9px;
    padding: 5px 7px 5px 9px;
}

.dash-staff-luxe__status {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ecfdf5 0%, #34d399 42%, #059669 100%);
    box-shadow:
        0 0 0 2px rgba(52, 211, 153, 0.18),
        0 0 10px rgba(52, 211, 153, 0.55);
    animation: none;
}

.dash-staff-luxe__name-accent {
    flex-shrink: 0;
    width: 2px;
    align-self: stretch;
    min-height: 16px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(142, 184, 220, 0.1) 0%,
        rgba(142, 184, 220, 0.9) 28%,
        rgba(238, 243, 248, 0.95) 50%,
        rgba(142, 184, 220, 0.9) 72%,
        rgba(142, 184, 220, 0.1) 100%
    );
    box-shadow:
        0 0 12px rgba(142, 184, 220, 0.4);
}

.dash-staff-luxe__content--minimal .dash-staff-luxe__name {
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.15;
    max-width: 280px;
    color: #eef3f8;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #eef3f8;
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 10px rgba(142, 184, 220, 0.18);
}

.dash-staff-luxe__badge {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c8dceb;
    font-size: 0.82rem;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        linear-gradient(155deg, rgba(21, 34, 56, 0.98) 0%, rgba(7, 11, 22, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

.dash-staff-luxe__badge-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 1.5px;
    background: linear-gradient(145deg, #eef3f8 0%, #8eb8dc 45%, #4a7aa8 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.dash-staff-luxe__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 2px;
}

.dash-staff-luxe__eyebrow {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(142, 184, 220, 0.88);
    line-height: 1;
}

.dash-staff-luxe__name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.28;
    color: #eef3f8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    max-width: 300px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-transform: uppercase;
}

.dash-staff-luxe__sep {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    min-height: 34px;
    margin: 2px 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(142, 184, 220, 0.18) 18%,
        rgba(238, 243, 248, 0.48) 50%,
        rgba(142, 184, 220, 0.18) 82%,
        transparent 100%
    );
}

.dash-staff-luxe__action {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c8dceb;
    font-size: 0.68rem;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
        linear-gradient(160deg, rgba(28, 36, 48, 0.98) 0%, rgba(10, 16, 26, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 3px rgba(0, 0, 0, 0.32),
        0 4px 10px rgba(0, 0, 0, 0.28);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, color 0.32s ease, background 0.32s ease;
}

.dash-staff-luxe__action-ring {
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(145deg, rgba(238, 243, 248, 0.95) 0%, #8eb8dc 42%, #4a7aa8 78%, rgba(238, 243, 248, 0.7) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.92;
}

.dash-staff-luxe__action i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.dash-staff-luxe__action:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.05) rotate(8deg);
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.24) 0%, transparent 42%),
        linear-gradient(160deg, rgba(42, 52, 68, 1) 0%, rgba(16, 24, 36, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(142, 184, 220, 0.28);
}

.dash-staff-luxe__action:hover .dash-staff-luxe__action-ring {
    opacity: 1;
    filter: brightness(1.08);
}

.dash-staff-luxe__action:active {
    transform: translateY(0) scale(0.96);
}

/* Tema WB */
body.theme-wb .dashboard-mading-bar__panel {
    border-bottom-color: rgba(142, 196, 220, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(16, 28, 40, 0.96) 0%, rgba(10, 18, 28, 0.98) 55%, rgba(6, 12, 20, 0.99) 100%);
}

body.theme-wb .dashboard-mading-bar__panel::after {
    background: linear-gradient(
        90deg,
        rgba(74, 122, 146, 0.15) 0%,
        rgba(142, 196, 220, 0.62) 22%,
        rgba(232, 239, 196, 0.78) 50%,
        rgba(201, 211, 106, 0.62) 78%,
        rgba(74, 122, 146, 0.15) 100%
    );
}

body.theme-wb .dashboard-mading-bar__pin {
    background:
        radial-gradient(circle at 32% 28%, #f4f7e8 0%, #c9d36a 35%, #8ec4dc 72%, #4a7a92 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
        0 0 8px rgba(142, 196, 220, 0.28);
}

body.theme-wb .dashboard-mading-bar__rule {
    background: linear-gradient(
        90deg,
        rgba(142, 196, 220, 0.38) 0%,
        rgba(201, 211, 106, 0.16) 55%,
        rgba(142, 196, 220, 0.04) 100%
    );
}

body.theme-wb .dash-staff-luxe--inline .dash-staff-luxe__glow {
    background:
        radial-gradient(ellipse 85% 80% at 50% 100%, rgba(142, 196, 220, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 0%, rgba(201, 211, 106, 0.1) 0%, transparent 55%);
}

body.theme-wb .dash-staff-luxe__name-accent {
    background: linear-gradient(
        180deg,
        rgba(232, 239, 196, 0.15) 0%,
        #e8efc4 22%,
        #8ec4dc 50%,
        #c9d36a 78%,
        rgba(232, 239, 196, 0.15) 100%
    );
    box-shadow:
        0 0 10px rgba(142, 196, 220, 0.28),
        0 0 2px rgba(201, 211, 106, 0.4);
}

body.theme-wb .dash-staff-luxe__content--minimal .dash-staff-luxe__name {
    background: linear-gradient(135deg, #f4f8fb 0%, #e8efc4 38%, #8ec4dc 72%, #eef6fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.theme-wb .dash-staff-luxe__action-ring {
    background: linear-gradient(145deg, #f4f7e8 0%, #c9d36a 48%, #8ec4dc 100%);
}

body.theme-wb .dash-staff-luxe__frame {
    background: linear-gradient(
        135deg,
        rgba(232, 239, 196, 0.42) 0%,
        rgba(142, 196, 220, 0.28) 42%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(201, 211, 106, 0.24) 58%,
        rgba(142, 196, 220, 0.32) 100%
    );
}

body.theme-wb .dash-staff-luxe__content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(145deg, rgba(24, 36, 50, 0.95) 0%, rgba(12, 20, 30, 0.97) 55%, rgba(8, 14, 22, 0.98) 100%);
}

body.theme-wb .dash-staff-luxe__eyebrow {
    color: rgba(142, 196, 220, 0.88);
}

body.theme-wb .dash-staff-luxe__name {
    color: #eef4f8;
}

body.theme-wb .dash-staff-luxe__badge-ring {
    background: linear-gradient(145deg, #e8efc4 0%, #c9d36a 48%, #8ec4dc 100%);
}

body.theme-wb .dash-staff-luxe__badge,
body.theme-wb .dash-staff-luxe__action {
    color: #e8efc4;
}

body.theme-black-gold .dash-staff-luxe__name {
    color: #eef3f8;
    -webkit-text-fill-color: #eef3f8;
}

body.staff-portal-fill .dashboard-top-bar {
    position: relative;
    z-index: 150;
    flex-shrink: 0;
}

/* Portal staff: izinView isi sisa tinggi di bawah mading bar */
body.staff-portal-fill .app-content,
body:has(#dashboardTopBar:not(.hide)):has(#izinView.active) .app-content {
    min-height: 0 !important;
}

body.staff-portal-fill #izinView,
#izinView.active:has(#staffView:not(.hide)) {
    overflow: hidden !important;
}


@media (max-width: 768px) {
    .dashboard-mading-bar__inner {
        padding: 4px 10px;
        gap: 8px;
        min-height: 40px;
    }

    .dashboard-staff-block {
        max-width: min(280px, 72vw);
    }

    .dashboard-staff-block__row {
        gap: 6px;
    }

    .dashboard-top-bar .live-clock.live-clock--header .live-clock__content {
        padding: 4px 10px 4px 8px;
        gap: 6px;
    }

    .dashboard-top-bar .live-clock.live-clock--header .time {
        font-size: 0.82rem !important;
        letter-spacing: 0.08em !important;
    }

    .dashboard-top-bar .live-clock.live-clock--header .date {
        font-size: 0.4rem !important;
        letter-spacing: 0.06em !important;
    }

    .dash-staff-luxe__logout {
        height: 30px;
        padding: 0 10px 0 5px;
        gap: 6px;
        font-size: 0.58rem;
    }

    .dash-staff-luxe__logout-icon-wrap {
        width: 22px;
        height: 22px;
    }

    .dash-staff-luxe__logout-icon-wrap i {
        font-size: 0.56rem;
    }

    .dash-staff-luxe__logout-label {
        display: none;
    }

    .dash-staff-luxe__status {
        width: 6px;
        height: 6px;
    }

    .dash-staff-luxe__content--minimal {
        gap: 6px;
        padding: 3px 5px 3px 8px;
    }

    .dash-staff-luxe__content--minimal .dash-staff-luxe__name {
        max-width: 150px;
        font-size: 0.62rem;
    }

    .dash-staff-luxe__action {
        width: 26px;
        height: 26px;
        font-size: 0.62rem;
    }
}

/* Frame fleksibel: tinggi mengikuti nama staff (pendek/panjang) */
.sidebar-staff-profile {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(201, 211, 106, 0.18);
    border-radius: 12px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.28) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.2);
    color: #f2f5f8;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sidebar-staff-profile:hover {
    border-color: rgba(201, 211, 106, 0.4);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.34) 100%);
}

.sidebar-staff-profile:hover .sidebar-staff-edit-badge {
    background: linear-gradient(145deg, #f4f7e8, #c9d36a 55%, #8ec4dc);
    color: #0b1118;
}

.sidebar-staff-avatar-ring {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(145deg, #f4f7e8 0%, #c9d36a 55%, #8ec4dc 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
    margin-top: 1px;
    box-sizing: border-box;
}

.sidebar-staff-avatar-wrap,
.sidebar-staff-avatar-wrap.header-staff-avatar-wrap {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #0e151c;
    display: block !important;
    border: none !important; /* hapus border agar foto tidak terpotong */
    box-sizing: border-box;
}

.sidebar-staff-avatar-wrap .header-staff-avatar-icon,
.sidebar-staff-avatar-wrap img,
.sidebar-staff-avatar-wrap video,
.sidebar-staff-avatar-wrap #headerStaffAvatarImg,
.sidebar-staff-avatar-wrap #headerStaffAvatarVideo {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important; /* fokus ke wajah (atas-tengah) */
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.sidebar-staff-avatar-wrap #headerStaffAvatarImg.staff-avatar-logo,
.sidebar-staff-avatar-wrap img.staff-avatar-logo {
    object-fit: contain !important;
    object-position: center center !important;
    padding: 16% !important;
    background: transparent !important;
}

.sidebar-staff-avatar-wrap .header-staff-avatar-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: rgba(232, 239, 196, 0.8);
    background: #0e151c;
}

.sidebar-staff-edit-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.48rem;
    color: #0b1118;
    background: linear-gradient(145deg, #f4f7e8 0%, #c9d36a 60%, #8ec4dc 100%);
    border: 1.5px solid #0e151c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.sidebar-staff-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

.sidebar-staff-name {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: left;
    line-height: 1.4;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--accent) 42%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    max-width: 100%;
    max-height: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-transform: uppercase;
}

.sidebar-staff-name-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-left: 2px;
}

.sidebar-staff-name-accent {
    flex-shrink: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent 0%, #c9d36a 28%, #8ec4dc 72%, transparent 100%);
    box-shadow: 0 0 8px rgba(142, 196, 220, 0.28);
    align-self: stretch;
    min-height: 28px;
}

/* Sidebar: kartu nama staff — selaras palet dashboard (navy + lime + cyan) */
.sidebar-staff-card {
    position: relative;
    width: 100%;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 14px rgba(142, 196, 220, 0.06);
    overflow: hidden;
}

.sidebar-staff-card--luxury {
    isolation: isolate;
}

.sidebar-staff-card-glow {
    position: absolute;
    inset: -50% -30% auto -30%;
    height: 90%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201, 211, 106, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse at 100% 100%, rgba(142, 196, 220, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.sidebar-staff-card-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(142, 196, 220, 0.04) 48%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(201, 211, 106, 0.04) 52%,
        transparent 62%
    );
    transform: translateX(-120%);
    animation: sidebarStaffShine 9s ease-in-out infinite;
}

@keyframes sidebarStaffShine {
    0%, 72% { transform: translateX(-120%); opacity: 0; }
    78% { opacity: 1; }
    94% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(120%); opacity: 0; }
}

.sidebar-staff-card-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        145deg,
        rgba(201, 211, 106, 0.45) 0%,
        rgba(142, 196, 220, 0.38) 38%,
        rgba(212, 175, 55, 0.28) 68%,
        rgba(201, 211, 106, 0.4) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.sidebar-staff-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 1px;
    padding: 11px 10px;
    border-radius: 11px;
    background:
        radial-gradient(ellipse 100% 80% at 50% -30%, rgba(201, 211, 106, 0.08) 0%, transparent 52%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(142, 196, 220, 0.07) 0%, transparent 48%),
        linear-gradient(155deg, rgba(32, 46, 62, 0.94) 0%, rgba(14, 22, 32, 0.96) 55%, rgba(10, 16, 24, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.sidebar-staff-inner-frame {
    position: absolute;
    inset: 5px;
    border-radius: 8px;
    border: 1px solid rgba(142, 196, 220, 0.12);
    box-shadow: inset 0 0 14px rgba(142, 196, 220, 0.04);
    pointer-events: none;
    z-index: 0;
}

.sidebar-staff-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #e8ffc4, #c9d36a 55%, #8ec4dc);
    box-shadow:
        0 0 0 2px rgba(201, 211, 106, 0.2),
        0 0 10px rgba(201, 211, 106, 0.55);
    animation: sidebarStaffLivePulse 2.4s ease-in-out infinite;
}

@keyframes sidebarStaffLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.92); }
}

.sidebar-staff-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 230, 184, 0.72);
    line-height: 1;
}

.sidebar-staff-eyebrow i {
    font-size: 0.58rem;
    opacity: 0.85;
    color: rgba(212, 175, 55, 0.9);
}

.sidebar-staff-divider {
    position: relative;
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.35) 18%,
        rgba(201, 211, 106, 0.55) 50%,
        rgba(142, 196, 220, 0.35) 82%,
        transparent 100%
    );
}

.sidebar-staff-divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: linear-gradient(135deg, #f5e6b8, #d4af37);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.sidebar-staff-name-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.sidebar-staff-name-only {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 2px;
}

.sidebar-staff-edit-btn {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(201, 211, 106, 0.28);
    background: linear-gradient(155deg, rgba(42, 60, 78, 0.92) 0%, rgba(14, 22, 32, 0.96) 100%);
    color: #e8efc4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    padding: 0;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 3px 10px rgba(0, 0, 0, 0.22);
}

.sidebar-staff-edit-btn-ring {
    position: absolute;
    inset: 2px;
    border-radius: 7px;
    border: 1px solid rgba(142, 196, 220, 0.14);
    pointer-events: none;
}

.sidebar-staff-edit-btn i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.sidebar-staff-edit-btn:hover {
    background: linear-gradient(155deg, rgba(52, 72, 92, 0.96) 0%, rgba(18, 28, 40, 0.98) 100%);
    border-color: rgba(201, 211, 106, 0.48);
    color: #ffffff;
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 4px 14px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(142, 196, 220, 0.1);
}

.sidebar-staff-edit-btn:hover .sidebar-staff-edit-btn-ring {
    border-color: rgba(142, 196, 220, 0.28);
}

.sidebar-staff-edit-btn:active {
    transform: translateY(0) scale(0.97);
}

.sidebar-staff-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 4;
    border-color: rgba(142, 196, 220, 0.42);
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 0 4px rgba(201, 211, 106, 0.25));
}

.sidebar-staff-corner--tl {
    top: 5px;
    left: 5px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
    border-top-left-radius: 4px;
}

.sidebar-staff-corner--tr {
    top: 5px;
    right: 5px;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
    border-top-right-radius: 4px;
}

.sidebar-staff-corner--bl {
    bottom: 5px;
    left: 5px;
    border-bottom-width: 1.5px;
    border-left-width: 1.5px;
    border-bottom-left-radius: 4px;
}

.sidebar-staff-corner--br {
    bottom: 5px;
    right: 5px;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
    border-bottom-right-radius: 4px;
}

/* Active break card: initial sebagai pengganti avatar */
.active-card-avatar.active-card-avatar--initial {
    cursor: default;
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(255, 248, 231, 0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    letter-spacing: 0.5px;
    line-height: 1;
}


.sidebar-logout-btn {
    margin-top: 4px;
    color: #fecdd3 !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
    background: rgba(244, 63, 94, 0.14) !important;
}

.sidebar-logout-btn:hover {
    border-color: rgba(244, 63, 94, 0.7) !important;
    background: rgba(244, 63, 94, 0.28) !important;
    color: #ffffff !important;
}

.sidebar-logout-btn i {
    color: #fb7185 !important;
}

.sidebar-logout-btn.hide {
    display: none !important;
}

.sidebar-logo-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #fff8e7 0%, #d4af37 45%, #f5e6b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: center;
}

.sidebar-logo-title-collapsed {
    display: none;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #fff8e7, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.sidebar-logo-subtitle {
    font-size: 0.52rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-top: 1px;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding-top: 10px;
    position: relative;
    flex-shrink: 0;
}

.sidebar-footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    margin-bottom: 8px;
}

.live-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 12px !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.35) 100%) !important;
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.18)) !important;
    border-radius: 11px !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.25);
}

.live-clock .time {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff, #e8d48a, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    text-align: center;
    width: 100%;
}

.live-clock .date {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
}

.sidebar-body::-webkit-scrollbar {
    width: 5px;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 999px;
}

.sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar.sidebar-collapsed {
    width: var(--app-sidebar-collapsed-width, 72px) !important;
    min-width: var(--app-sidebar-collapsed-width, 72px) !important;
    max-width: var(--app-sidebar-collapsed-width, 72px) !important;
    padding: 14px 8px !important;
}

/* Boot awal: cegah sidebar melebar sekejap sebelum app.js jalan */
html.sidebar-collapsed-boot .app-sidebar {
    width: var(--app-sidebar-collapsed-width, 72px) !important;
    min-width: var(--app-sidebar-collapsed-width, 72px) !important;
    max-width: var(--app-sidebar-collapsed-width, 72px) !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-clickable {
    display: flex !important;
    justify-content: center;
    flex: 0;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-title {
    display: none !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-title-collapsed {
    display: block !important;
}

.app-sidebar.sidebar-collapsed .sidebar-section-label,
.app-sidebar.sidebar-collapsed .nav-item-main span:not(.chat-unread-badge),
.app-sidebar.sidebar-collapsed #csGroupArrow,
.app-sidebar.sidebar-collapsed #serahTerimaGroupArrow,
.app-sidebar.sidebar-collapsed .live-clock .date {
    display: none !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 0 !important;
    text-align: center !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100% !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-clickable {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: unset !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.app-sidebar.sidebar-collapsed .sidebar-logo-title-collapsed {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.app-sidebar.sidebar-collapsed .sidebar-toggle-btn {
    grid-column: unset !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 auto !important;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-meta {
    display: none !important;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-eyebrow,
.app-sidebar.sidebar-collapsed .sidebar-staff-name,
.app-sidebar.sidebar-collapsed .sidebar-staff-name-wrap,
.app-sidebar.sidebar-collapsed .sidebar-staff-name-accent,
.app-sidebar.sidebar-collapsed .sidebar-staff-inner-frame,
.app-sidebar.sidebar-collapsed .sidebar-staff-divider,
.app-sidebar.sidebar-collapsed .sidebar-staff-corner,
.app-sidebar.sidebar-collapsed .sidebar-staff-card-shine {
    display: none !important;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-card-inner {
    padding: 8px;
    align-items: center;
    margin: 1.5px;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-name-row {
    justify-content: center;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-edit-btn {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-profile {
    padding: 6px;
    gap: 0;
    justify-content: center;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-avatar-ring {
    width: 34px;
    height: 34px;
}

.app-sidebar.sidebar-collapsed .sidebar-staff-edit-badge {
    width: 14px;
    height: 14px;
    font-size: 0.42rem;
}

.app-sidebar.sidebar-collapsed .nav-item-main {
    justify-content: center !important;
    padding: 6px 0 !important;
    text-align: center !important;
    min-height: 0;
    border-radius: 9px !important;
}

.app-sidebar.sidebar-collapsed .nav-item-main i {
    margin: 0 auto !important;
    font-size: 1.15rem !important;
}

.app-sidebar.sidebar-collapsed #btnCsGroupToggle,
.app-sidebar.sidebar-collapsed #btnSerahTerimaGroupToggle,
.app-sidebar.sidebar-collapsed .sidebar-group-toggle {
    justify-content: center !important;
    padding: 7px 0 !important;
}

.app-sidebar.sidebar-collapsed #btnCsGroupToggle > div,
.app-sidebar.sidebar-collapsed #btnSerahTerimaGroupToggle > div,
.app-sidebar.sidebar-collapsed .sidebar-group-toggle__label {
    justify-content: center !important;
    gap: 0 !important;
}

.app-sidebar.sidebar-collapsed #btnCsGroupToggle > div span,
.app-sidebar.sidebar-collapsed #btnSerahTerimaGroupToggle > div span,
.app-sidebar.sidebar-collapsed .sidebar-group-toggle__label span,
.app-sidebar.sidebar-collapsed .sidebar-group-toggle__arrow {
    display: none !important;
}

.app-sidebar.sidebar-collapsed #btnCsGroupToggle > div i,
.app-sidebar.sidebar-collapsed #btnSerahTerimaGroupToggle > div i,
.app-sidebar.sidebar-collapsed .sidebar-group-toggle__label i {
    margin: 0 auto !important;
    font-size: 1.15rem !important;
}

.app-sidebar.sidebar-collapsed #csGroupMenu,
.app-sidebar.sidebar-collapsed #serahTerimaGroupMenu,
.app-sidebar.sidebar-collapsed .sidebar-group-menu {
    /* Saat sidebar kecil: submenu tetap tampil sebagai ikon */
    max-height: none !important;
    height: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 2px 0 4px !important;
    padding-left: 0 !important;
    overflow: visible !important;
    border-left: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.app-sidebar.sidebar-collapsed .nav-item-sub {
    justify-content: center !important;
    padding: 6px 0 !important;
    min-height: 34px !important;
    width: 100% !important;
    gap: 0 !important;
}

.app-sidebar.sidebar-collapsed .nav-item-sub i {
    margin: 0 auto !important;
    font-size: 1.05rem !important;
}

.app-sidebar.sidebar-collapsed .live-clock {
    padding: 8px 1px !important;
    text-align: center !important;
    overflow: visible !important;
}

.app-sidebar.sidebar-collapsed .live-clock .time {
    font-size: 0.52rem !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}

.sidebar-toggle-btn {
    grid-column: 3;
    justify-self: end;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.4);
    color: #fff;
    transform: scale(1.05);
}

.app-sidebar.sidebar-collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

.staff-portal-center {
    max-width: 380px;
    width: 100%;
    margin: 16px auto 24px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Notifikasi di alur normal di bawah tab — tidak menutupi navbar */
#staffView .staff-portal-console-stack:has(#breakNotificationContainer:not(:empty)) {
    gap: 8px;
    padding-top: 0;
}

#staffView .staff-portal-console-stack:has(#breakNotificationContainer:not(:empty)) > .staff-portal-console-row {
    margin-top: 0;
}

.staff-portal-console-row {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: visible;
}

#staffView .staff-portal-console-stack > .staff-portal-console-row > .staff-console-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    flex: none;
}

#staffView .staff-portal-console-stack > .staff-console-card {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Timer hanya tampil saat aktif — hemat tinggi */
#staffConsoleCard #consoleActiveBreakSection {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 4px 0 0;
    overflow: hidden;
}

#staffConsoleCard #consoleActiveBreakSection.hide {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#staffConsoleCard #consoleMessageAlert {
    min-height: 0;
    box-sizing: border-box;
}

#staffConsoleCard #consoleMessageAlert.hide {
    display: none !important;
}

#staffConsoleCard #consoleActiveBreakSection .timer-card-mini {
    flex: 1;
    width: 100%;
    margin-bottom: 0;
}

/* ============================================================
   STAFF CONSOLE — ULTRA LUXURY (compact, no-scroll)
   ============================================================ */
#staffConsoleCard.staff-console-card.console-ultra-luxury {
    padding: 20px 18px 16px !important;
    max-width: 400px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(520px, calc(100dvh - 220px)) !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    border: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background:
        radial-gradient(ellipse 120% 70% at 50% -20%, rgba(56, 189, 248, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 110% 90%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 70% 45% at -10% 80%, rgba(251, 191, 36, 0.12) 0%, transparent 48%),
        linear-gradient(168deg, #121a2e 0%, #0b1224 48%, #070b16 100%) !important;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(125, 211, 252, 0.28),
        0 0 40px rgba(56, 189, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    animation: none !important;
    transform: none !important;
}

@keyframes consoleUltraGlow {
    /* Dinonaktifkan — tidak ada pulse/gerak bayangan */
    0%, 100% { box-shadow: inherit; }
}

@keyframes shineSweep {
    0% { left: -120%; opacity: 0; }
    12% { opacity: 0.55; }
    45% { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

#staffConsoleCard.console-ultra-luxury::before {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.6px !important;
    background: linear-gradient(
        140deg,
        rgba(253, 230, 138, 0.9) 0%,
        rgba(56, 189, 248, 0.75) 28%,
        rgba(168, 85, 247, 0.55) 58%,
        rgba(34, 211, 238, 0.8) 82%,
        rgba(253, 224, 71, 0.75) 100%
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#staffConsoleCard.console-ultra-luxury::after {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.28) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#staffConsoleCard .console-aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        conic-gradient(from 180deg at 50% 40%,
            rgba(56, 189, 248, 0.08),
            rgba(168, 85, 247, 0.1),
            rgba(251, 191, 36, 0.08),
            rgba(34, 211, 238, 0.1),
            rgba(56, 189, 248, 0.08));
    filter: blur(40px);
    animation: consoleAuroraSpin 14s linear infinite;
    opacity: 0.7;
}

@keyframes consoleAuroraSpin {
    to { transform: rotate(360deg); }
}

#staffConsoleCard.console-ultra-luxury .console-shine-sweep {
    display: none !important;
    animation: none !important;
}

#staffConsoleCard.console-ultra-luxury .frame-corner {
    width: 36px !important;
    height: 36px !important;
    border-width: 2px !important;
    filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.4));
}

#staffConsoleCard.console-ultra-luxury .frame-corner.top-left,
#staffConsoleCard.console-ultra-luxury .frame-corner.top-right {
    border-top-color: #fde68a !important;
}
#staffConsoleCard.console-ultra-luxury .frame-corner.top-left {
    border-left-color: #fde68a !important;
    top: 10px !important;
    left: 10px !important;
}
#staffConsoleCard.console-ultra-luxury .frame-corner.top-right {
    border-right-color: #fde68a !important;
    top: 10px !important;
    right: 10px !important;
}
#staffConsoleCard.console-ultra-luxury .frame-corner.bottom-left,
#staffConsoleCard.console-ultra-luxury .frame-corner.bottom-right {
    border-bottom-color: #67e8f9 !important;
}
#staffConsoleCard.console-ultra-luxury .frame-corner.bottom-left {
    border-left-color: #67e8f9 !important;
    bottom: 10px !important;
    left: 10px !important;
}
#staffConsoleCard.console-ultra-luxury .frame-corner.bottom-right {
    border-right-color: #67e8f9 !important;
    bottom: 10px !important;
    right: 10px !important;
}

#staffConsoleCard .console-card-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

#staffConsoleCard .console-profile {
    margin-bottom: 2px !important;
    gap: 0 !important;
}

#staffConsoleCard .console-avatar-stage {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#staffConsoleCard .console-avatar-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

#staffConsoleCard .console-avatar-ring--outer {
    inset: 0;
    border: 1px solid rgba(125, 211, 252, 0.35);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
    animation: consoleRingPulse 3s ease-in-out infinite;
}

#staffConsoleCard .console-avatar-ring--mid {
    inset: 5px;
    border: 1px dashed rgba(253, 230, 138, 0.35);
    animation: consoleRingSpin 10s linear infinite;
}

@keyframes consoleRingPulse {
    0%, 100% { transform: scale(0.98); opacity: 0.7; }
    50% { transform: scale(1.04); opacity: 1; }
}

@keyframes consoleRingSpin {
    to { transform: rotate(360deg); }
}

#staffConsoleCard .avatar-initials {
    width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    cursor: default;
    position: relative;
    border: 2px solid transparent !important;
    background:
        linear-gradient(#0f172a, #0f172a) padding-box,
        conic-gradient(from 200deg, #fde68a, #38bdf8, #a855f7, #22d3ee, #fde68a) border-box !important;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.1),
        0 0 22px rgba(56, 189, 248, 0.28),
        0 8px 18px rgba(0, 0, 0, 0.45) !important;
    animation: none !important;
    overflow: hidden !important;
}

#staffConsoleCard #consoleStaffAvatarImg,
#staffConsoleCard #consoleStaffAvatarVideo,
#staffConsoleCard .avatar-initials > img,
#staffConsoleCard .avatar-initials > video {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    display: block;
    background: transparent !important;
    box-sizing: border-box !important;
}

#staffConsoleCard #consoleStaffAvatarImg.staff-avatar-logo,
#staffConsoleCard .avatar-initials > img.staff-avatar-logo {
    object-fit: contain !important;
    padding: 16% !important;
}

#staffConsoleCard .console-avatar-cam {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
    font-size: 0.9rem;
}

#staffConsoleCard .avatar-initials:hover .console-avatar-cam {
    opacity: 1;
}

#staffConsoleCard .console-profile-eyebrow {
    margin: 0 0 2px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.75);
}

#staffConsoleCard #currentStaffName,
#staffConsoleCard.console-ultra-luxury h2 {
    margin: 0 0 4px !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 40%, #fde68a 85%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.2)) !important;
    text-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#staffConsoleCard .role-badge {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)) !important;
    border: 1px solid rgba(253, 230, 138, 0.55) !important;
    color: #fde68a !important;
    -webkit-text-fill-color: #fde68a !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(251, 191, 36, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    margin-top: 0 !important;
}

#staffConsoleCard .console-divider-lux {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    color: #fde68a;
    font-size: 0.58rem;
}

#staffConsoleCard .console-divider-lux span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.55), rgba(253, 230, 138, 0.7), rgba(125, 211, 252, 0.55), transparent);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

#staffConsoleCard .console-divider-lux i {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

#staffConsoleCard .quota-tracker {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.72) 0%, rgba(8, 12, 24, 0.88) 100%) !important;
    border: 1px solid rgba(125, 211, 252, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

#staffConsoleCard #consoleSlotTracker {
    margin-top: 8px !important;
}

#staffConsoleCard .quota-labels {
    margin-bottom: 5px !important;
}

#staffConsoleCard .quota-labels span {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: rgba(226, 232, 240, 0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

#staffConsoleCard .quota-labels span i {
    color: #67e8f9;
    font-size: 0.6rem;
}

#staffConsoleCard #quotaText,
#staffConsoleCard #slotStatusText {
    color: #fde68a !important;
    -webkit-text-fill-color: #fde68a !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
}

/* Jatah izin — balok diskrit (1x terpakai = 1 balok) */
#staffConsoleCard .quota-blocks {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 2px !important;
}

#staffConsoleCard .quota-block {
    flex: 1 1 0 !important;
    height: 10px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(125, 211, 252, 0.22) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    transition: none !important;
}

#staffConsoleCard .quota-block.is-used {
    background: linear-gradient(90deg, #0369a1 0%, #22d3ee 55%, #a3e635 100%) !important;
    border-color: rgba(34, 211, 238, 0.55) !important;
    box-shadow:
        0 0 8px rgba(34, 211, 238, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#staffConsoleCard .quota-block.is-used.is-full {
    background: linear-gradient(90deg, #b91c1c 0%, #f97316 55%, #fbbf24 100%) !important;
    border-color: rgba(251, 146, 60, 0.65) !important;
    box-shadow:
        0 0 8px rgba(239, 68, 68, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#staffConsoleCard .progress-bar-container {
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(125, 211, 252, 0.2) !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

#staffConsoleCard .progress-bar-fill {
    background: linear-gradient(90deg, #0369a1 0%, #22d3ee 45%, #a3e635 100%) !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.4) !important;
    border-radius: 999px !important;
}

#staffConsoleCard .console-actions {
    width: 100%;
    margin-top: 12px;
}

#staffConsoleCard .btn-action-break {
    margin-top: 0 !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    letter-spacing: 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

#staffConsoleCard .btn-action-break.start-state {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 42%, #ea580c 100%) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(245, 158, 11, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

#staffConsoleCard .btn-action-break.end-state {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 42%, #059669 100%) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(16, 185, 129, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.theme-china-dynasty #staffConsoleCard.staff-console-card,
body.theme-gold-imperial #staffConsoleCard.staff-console-card {
    padding: 20px 18px 16px !important;
    max-width: 400px !important;
    min-height: 0 !important;
}

#staffConsoleCard .timer-card-mini {
    padding: 4px 10px 3px;
    margin-bottom: 0;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

#staffConsoleCard .timer-card-mini .countdown-timer {
    font-size: 1rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
    line-height: 1.05;
}

#staffConsoleCard .timer-card-mini .label {
    font-size: 0.52rem;
    margin-bottom: 0;
}

#staffConsoleCard .timer-card-mini .start-time-label {
    font-size: 0.52rem;
    margin-top: 0;
}

#staffConsoleCard #consoleMessageAlert {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.66rem;
}

body.theme-china-dynasty #staffConsoleCard .console-card-content,
body.theme-gold-imperial #staffConsoleCard .console-card-content {
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
}

.staff-login-card, .admin-auth-card, .staff-console-card {
    text-align: center;
}

.login-header, .console-profile {
    margin-bottom: 16px;
}

.avatar-icon, .admin-avatar {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 16px auto;
}

.staff-login-card h2, .staff-console-card h2 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 40%, var(--text-subtle, #cbd5e1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.20));
}

.staff-login-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Autocomplete search styling */
.autocomplete-container {
    position: relative;
    text-align: left;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    width: 100%;
    padding-right: 40px;
}

.search-icon {
    position: absolute;
    right: 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: rgba(11, 16, 31, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}

.autocomplete-item:hover {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-main);
}

.autocomplete-item span.role {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
}

/* Console Dashboard View */
.btn-logout {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 6px 12px;
    border-radius: 50px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.btn-logout:hover {
    background: var(--danger);
    color: #ffffff;
    box-shadow: 0 4px 10px var(--danger-glow);
}

.avatar-initials {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 auto 20px auto;
    position: relative;
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.06),
        0 0 40px var(--primary-glow),
        0 0 80px var(--primary-glow),
        0 12px 40px rgba(0,0,0,0.50);
    animation: avatarPulseRing 3.5s ease-in-out infinite;
    z-index: 1;
}

/* Outer spinning ring */
.avatar-initials::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--primary) 20%,
        var(--accent) 45%,
        transparent 60%,
        var(--primary) 80%,
        transparent 100%
    );
    animation: avatarRingSpin 3s linear infinite;
    z-index: -1;
    opacity: 0.80;
}

/* Mask layer agar ring tidak nutupin avatar */
.avatar-initials::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--bg-dark, #06080f);
    z-index: -1;
}

@keyframes avatarRingSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes avatarPulseRing {
    0%,100% {
        box-shadow: 0 0 0 4px rgba(255,255,255,0.06),
                    0 0 35px var(--primary-glow),
                    0 0 70px var(--primary-glow),
                    0 12px 40px rgba(0,0,0,0.50);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255,255,255,0.04),
                    0 0 55px var(--primary-glow),
                    0 0 100px var(--primary-glow),
                    0 12px 40px rgba(0,0,0,0.50);
    }
}

.role-badge {
    background: rgba(99, 102, 241, 0.12);
    color: #ffffff;
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 7px 22px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    overflow: hidden;
}
/* Shimmer sweep */
.role-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: transparent;
    animation: none;
}
@keyframes badgeShimmer {
    0%   { left: -100%; opacity: 0; }
    30%  { opacity: 1; }
    60%  { left: 160%; opacity: 0; }
    100% { left: 160%; opacity: 0; }
}
/* Dot blink — disabled (badge shows role text only) */
.role-badge::before {
    display: none !important;
    content: none !important;
}
@keyframes roleDotBlink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.35; transform: scale(0.75); }
}

.console-divider {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251,191,36,0.30) 15%,
        var(--primary-glow, rgba(139,92,246,0.50)) 40%,
        var(--accent-glow, rgba(34,211,238,0.45)) 60%,
        rgba(34,211,238,0.30) 85%,
        transparent 100%
    );
    margin: 16px 0;
    position: relative;
}
/* Glow line tengah */
.console-divider::after {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--primary-glow, rgba(139,92,246,0.6)),
        var(--accent-glow, rgba(34,211,238,0.6)),
        transparent
    );
    filter: blur(3px);
    border-radius: 50px;
}

.quota-tracker {
    margin-bottom: 12px;
    text-align: left;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
}

.quota-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-muted);
}

.quota-labels span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(243, 239, 230, 0.92);
    font-size: 0.80rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.quota-labels span:first-child::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.25);
    flex-shrink: 0;
}

.quota-labels span:last-child {
    color: #fff8e7;
    font-weight: 900;
    font-size: 0.82rem;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #fff8e7;
    background-clip: initial;
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.progress-bar-container {
    height: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}
.progress-bar-container::before {
    display: none; /* progressSheen dihapus — animasi translateX tiap frame terlalu boros */
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 50px;
    width: 0%;
    transition: width 0.7s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.22);
    position: relative;
}
/* Glowing tip */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    right: -2px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 5px rgba(255, 248, 231, 0.45);
    opacity: 0.85;
}

.timer-card-mini {
    background: linear-gradient(135deg,
        rgba(245,158,11,0.12) 0%,
        rgba(234,88,12,0.08) 100%
    );
    border: 1px solid rgba(245,158,11,0.25);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(245,158,11,0.15),
                0 1px 0 rgba(255,255,255,0.08) inset;
}

.timer-card-mini .label {
    font-size: 0.66rem;
    color: rgba(245,158,11,0.7);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
}

.timer-card-mini .countdown-timer {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    line-height: 1.1;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251,191,36,0.55),
                 0 0 40px rgba(251,191,36,0.25);
    letter-spacing: 2px;
}

.timer-card-mini .start-time-label {
    font-size: 0.65rem;
    color: rgba(245,158,11,0.55);
    margin-top: 3px;
    font-weight: 600;
}

/* Interactive Action Break Button */
.btn-action-break {
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 16px;
    transition: box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 4px;
    transform: none;
}

/* Shimmer sweep */
.btn-action-break::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.22) 50%,
        transparent 70%
    );
    pointer-events: none;
}
.btn-action-break:hover::before {
    animation: btnShimmerSweep 0.55s ease forwards;
}
@keyframes btnShimmerSweep {
    0%   { left: -80%; opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* Icon animasi */
.btn-action-break .action-icon {
    font-size: 1.15rem;
    transition: none;
}
.btn-action-break:hover .action-icon { transform: none; }
.btn-action-break:active { transform: none; filter: brightness(0.96); }
.btn-action-break:disabled, .btn-action-break.disabled, .btn-action-break.is-slot-locked {
    opacity: 0.40; cursor: not-allowed;
    pointer-events: none !important;
    transform: none !important; filter: none !important; box-shadow: none !important;
}

/* Start state — amber fire */
.btn-action-break.start-state {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #ea580c 100%);
    color: #1a0a02;
    font-weight: 900;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.38),
        0 0 12px rgba(245, 158, 11, 0.22),
        0 1px 0 rgba(255,255,255,0.30) inset;
    border: 1px solid rgba(251,191,36,0.40);
    text-shadow: 0 1px 0 rgba(255,255,255,0.28);
}
.btn-action-break.start-state:hover {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        0 0 14px rgba(245, 158, 11, 0.28),
        0 1px 0 rgba(255,255,255,0.35) inset;
    filter: brightness(1.03);
}

/* End state — emerald */
.btn-action-break.end-state {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    color: #001a0f;
    font-weight: 900;
    box-shadow:
        0 8px 32px rgba(16,185,129,0.50),
        0 2px 8px rgba(5,150,105,0.30),
        0 1px 0 rgba(255,255,255,0.28) inset;
    border: 1px solid rgba(52,211,153,0.40);
    text-shadow: 0 1px 2px rgba(255,255,255,0.22);
}
.btn-action-break.end-state:hover {
    box-shadow:
        0 16px 48px rgba(16,185,129,0.60),
        0 4px 16px rgba(5,150,105,0.40),
        0 1px 0 rgba(255,255,255,0.32) inset;
    filter: brightness(1.03);
}

.info-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.20);
    border-left: 3px solid rgba(239,68,68,0.55);
    color: #fca5a5;
    padding: 12px 14px;
    border-radius: var(--border-radius-md);
    font-size: 0.74rem;
    margin-top: 12px;
    text-align: left;
    backdrop-filter: blur(8px);
}

/* 8. LAPORAN (REPORTS VIEW) */
.report-card {
    min-height: 500px;
}

.report-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.report-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.report-header p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.header-actions-flex {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-group {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    display: flex;
    gap: 8px;
    box-shadow: none;
}

.btn-tab {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted);
    padding: 6px 16px;
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-tab:hover {
    color: var(--text-main);
}

.btn-tab.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-tab-safe.active {
    background: var(--success);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--success-glow);
}

.btn-tab-late.active {
    background: var(--danger);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--danger-glow);
}

/* Table Design — Premium */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-md);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
}

.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.75rem;
}

.report-table th {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    color: #e8d48a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.report-table th:last-child {
    border-right: none;
}

.report-table td {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.72rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.report-table td:last-child {
    border-right: none;
}

.report-table tbody tr {
    transition: var(--transition-smooth);
}

/* Left accent border on hover */
.report-table tbody tr td:first-child {
    border-left: 3px solid transparent;
}

.report-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.04) !important;
}

.report-table tbody tr:hover td {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    border-right-color: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    box-shadow: none !important;
}

.report-table tbody tr:hover td:first-child {
    border-left-color: rgba(212, 175, 55, 0.45);
    box-shadow: none !important;
}

/* Reset styles for divider rows so they span cleanly */
.report-table tr.category-divider-row td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.15) !important;
}

.report-table tr.category-divider-row:hover {
    background: none !important;
}

.report-table tr.category-divider-row:hover td {
    background: rgba(20, 184, 166, 0.05) !important;
    border-bottom-color: rgba(20, 184, 166, 0.15) !important;
}

.report-table td.report-col-role {
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: rgba(243, 239, 230, 0.92);
    white-space: nowrap;
}

/* Laporan Riwayat Istirahat — data rata tengah (kecuali nama) */
#dailyTableContainer .break-report-table th,
#dailyTableContainer .break-report-table td {
    vertical-align: middle !important;
}

#dailyTableContainer .break-report-table th:first-child,
#dailyTableContainer .break-report-table td.report-col-name {
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    max-width: 240px;
}

#dailyTableContainer .break-report-table td.report-col-name strong {
    white-space: normal !important;
    font-weight: 700;
}

#dailyTableContainer .break-report-table th:not(:first-child),
#dailyTableContainer .break-report-table td.report-col-center,
#dailyTableContainer .break-report-table td.report-col-role,
#dailyTableContainer .break-report-table td.report-col-action {
    text-align: center !important;
}

#dailyTableContainer .break-report-table td.report-col-action .btn-icon-danger,
#dailyTableContainer .break-report-table td.report-col-action .btn-delete-report-log {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

#dailyTableContainer .break-report-table td.report-col-center .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Status Badge in Table */
.status-badge {
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
}

.status-badge.safe {
    background: #10b981 !important;
    color: #ffffff !important;
    border: none;
}

.status-badge.late {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: none;
}

/* Late Staff Tag — Premium styling */
.late-staff-tag {
    cursor: default;
}
.late-staff-tag:hover {
    transform: translateY(-1px);
    background: rgba(244, 63, 94, 0.08) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
    box-shadow: none;
}

/* 9. PANEL ADMIN */
.admin-workspace {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
    min-height: 520px;
    align-items: start;
    animation: fadeIn 0.4s ease-out;
}

.admin-nav-sidebar {
    background: rgba(11, 16, 31, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
    height: fit-content;
    position: static;
    top: auto;
}

.admin-profile {
    text-align: center;
    margin-bottom: 24px;
}

.admin-avatar {
    margin-bottom: 8px;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.admin-profile h4 {
    font-size: 0.92rem;
    font-weight: 700;
}

.admin-profile span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.admin-side-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.admin-side-menu li {
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-smooth);
}

.admin-side-menu li i {
    font-size: 0.95rem;
    width: 20px;
}

.admin-side-menu li:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-main);
}

.admin-side-menu li.active {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.btn-lock-admin {
    margin-top: 20px;
}

/* Tab Panel Switcher */
.admin-tab-panel {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.admin-tab-panel.active {
    display: block;
}

.panel-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 16px;
}

.panel-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.panel-header p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Admin Form Grid Layout */
.admin-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
}

.inner-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #e2e8f0;
    border-left: 3px solid var(--primary);
    padding-left: 10px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Tables inside Admin */
.table-scroll-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
}

/* Daftar staff: scroll WAJIB di dalam area tabel (bukan page) */
#tabStaff .admin-grid-layout {
    align-items: start;
}

#tabStaff .admin-staff-list-card.glass-card,
#tabStaff .admin-staff-list-card.inner-card,
.glass-card.admin-staff-list-card {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(90vh, 920px) !important;
    min-height: 620px;
    overflow: hidden !important;
}

#tabStaff .admin-staff-list-card > h4,
#tabStaff .admin-staff-list-card > .admin-staff-list-filters {
    flex: 0 0 auto;
}

#tabStaff .admin-staff-list-card .admin-staff-table-wrap,
#tabStaff .admin-staff-list-card .table-scroll-container.admin-staff-table-wrap,
.admin-staff-table-wrap#adminStaffTableScroll {
    /* flex 1 1 0 + height 0 = paksa isi sisa kartu, baru overflow-y aktif */
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 480px !important;
    max-height: min(78vh, 820px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.55) rgba(255, 255, 255, 0.06);
}

#tabStaff .admin-staff-list-card .admin-staff-table-wrap::-webkit-scrollbar {
    width: 10px;
}

#tabStaff .admin-staff-list-card .admin-staff-table-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

#tabStaff .admin-staff-list-card .admin-staff-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.45);
    border-radius: 8px;
}

#tabStaff .admin-staff-list-card .admin-staff-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.7);
}

#tabStaff .admin-grid-layout > .inner-card:first-child {
    align-self: start;
    height: fit-content;
    position: static;
}

.admin-staff-role-summary {
    margin-top: 18px;
    padding: 14px 12px 12px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.admin-staff-role-summary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.28), transparent);
    pointer-events: none;
}

.admin-staff-role-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-staff-role-summary__badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(232, 201, 112, 0.9);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: none;
}

.admin-staff-role-summary__badge i {
    font-size: 0.85rem;
}

.admin-staff-role-summary__head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-staff-role-summary__eyebrow {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(248, 244, 235, 0.45));
}

.admin-staff-role-summary__title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-main, #f8f4eb);
    line-height: 1.25;
}

.admin-staff-role-summary__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-staff-role-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px 9px 10px;
    border-radius: 12px;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.admin-staff-role-summary__row::before {
    content: "";
    width: 2px;
    align-self: stretch;
    border-radius: 999px;
    margin-right: 2px;
    background: rgba(212, 175, 55, 0.45);
    box-shadow: none;
    flex-shrink: 0;
}

.admin-staff-role-summary__row:hover {
    border-color: rgba(212, 175, 55, 0.18);
    background: rgba(212, 175, 55, 0.06);
}

.admin-staff-role-summary__role {
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-main, #f8f4eb);
    flex: 1;
    min-width: 0;
}

.admin-staff-role-summary__count {
    min-width: 32px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(248, 244, 235, 0.92);
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: none;
}

.admin-staff-role-summary__total {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-muted, rgba(248, 244, 235, 0.55));
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.admin-staff-role-summary__total strong {
    color: var(--text-main, #f8f4eb);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-shadow: none;
}

body.theme-black-gold .admin-staff-role-summary {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(212, 175, 55, 0.16);
}

body.theme-black-gold .admin-staff-role-summary__count {
    color: #f4efe4;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.26);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.admin-table th {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
}

.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-main);
}

#adminRolesTableBody .admin-role-slots-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 3;
}

#adminRolesTableBody .admin-role-slots-input {
    width: 84px !important;
    min-width: 84px;
    max-width: 84px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px;
    padding: 6px 8px !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    position: relative;
    z-index: 4;
}

#adminRolesTableBody .admin-role-slots-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

#adminRolesTableBody .admin-role-save-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 8px;
    pointer-events: auto !important;
    position: relative;
    z-index: 4;
}

#tabRoles .glass-card.inner-card {
    overflow: visible !important;
}

.btn-icon-danger,
.btn-icon-edit,
.btn-icon-save,
.btn-icon-cancel-edit {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.btn-icon-danger {
    color: var(--danger);
}

.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-icon-edit {
    color: var(--text-muted);
}

.btn-icon-edit:hover {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-main);
}

.btn-icon-save {
    color: #34d399;
}

.btn-icon-save:hover {
    background: rgba(52, 211, 153, 0.15);
}

.btn-icon-cancel-edit {
    color: var(--text-muted);
}

.btn-icon-cancel-edit:hover {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-main);
}

.admin-staff-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    white-space: nowrap;
    line-height: 1;
    height: 32px;
}

.admin-staff-name-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    min-height: 32px;
}

.admin-staff-name-text {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    word-break: break-word;
}

.admin-staff-name-input {
    width: 100%;
    max-width: 100%;
    height: 32px;
    padding: 4px 10px !important;
    font-size: 0.84rem !important;
    font-weight: 600;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: var(--text-main) !important;
    outline: none;
    box-sizing: border-box;
}

/* Daftar Staff Terdaftar — area scroll tabel */
.admin-staff-table-wrap {
    position: relative;
    isolation: isolate;
}

.admin-staff-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-staff-table thead {
    position: relative;
    z-index: 20;
}

.admin-staff-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #0f172a !important;
    background-clip: padding-box;
    box-shadow: 0 1px 0 var(--glass-border);
}

body.theme-black-gold .admin-staff-table thead th {
    background: #121212 !important;
}

/* Konten baris (termasuk pill jabatan) harus di belakang header saat scroll */
.admin-staff-table tbody {
    position: relative;
    z-index: 1;
}

.admin-staff-table tbody td {
    position: relative;
    z-index: 1;
}

.admin-staff-table col.admin-staff-col-name { width: 48%; }
.admin-staff-table col.admin-staff-col-role { width: 32%; }
.admin-staff-table col.admin-staff-col-aksi { width: 20%; }

.admin-staff-table th {
    vertical-align: middle;
    padding: 8px 12px;
    line-height: 1.2;
}

.admin-staff-table td {
    vertical-align: middle !important;
    padding: 6px 12px !important;
    line-height: 1.2;
    height: 44px;
}

.admin-staff-table .admin-staff-th-role,
.admin-staff-table .admin-staff-td-role {
    text-align: center;
}

.admin-staff-table .admin-staff-th-aksi,
.admin-staff-table .admin-staff-td-aksi {
    text-align: right;
}

.admin-staff-table .admin-staff-td-role {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.admin-staff-table .admin-staff-td-aksi {
    padding-left: 6px !important;
    padding-right: 10px !important;
}

.admin-staff-table .admin-staff-td-aksi .admin-staff-actions {
    width: 100%;
}

.admin-staff-table .btn-icon-danger,
.admin-staff-table .btn-icon-edit,
.admin-staff-table .btn-icon-save,
.admin-staff-table .btn-icon-cancel-edit {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    line-height: 1;
}

@media (max-width: 720px) {
    .admin-staff-table col.admin-staff-col-name { width: 42%; }
    .admin-staff-table col.admin-staff-col-role { width: 36%; }
    .admin-staff-table col.admin-staff-col-aksi { width: 22%; }
    .admin-staff-table th,
    .admin-staff-table td {
        padding: 6px 8px !important;
    }
}

.search-bar-mini {
    position: relative;
    margin-bottom: 12px;
}

.search-bar-mini input {
    width: 100%;
    padding: 8px 12px 8px 36px !important;
    font-size: 0.78rem;
}

.search-bar-mini i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.panel-divider {
    border: none;
    height: 1px;
    background: var(--glass-border);
    margin: 24px 0;
}

.absensi-shift-stat h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* 19. PASPOR VIEW STYLING */
.paspor-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.paspor-table th,
.paspor-table td {
    vertical-align: middle;
}

.paspor-col-name {
    width: auto;
    white-space: nowrap !important;
    padding: 0 !important;
}

.paspor-col-name strong {
    display: inline-block;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
}

.paspor-table tbody .paspor-cell-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    height: 100%;
    padding: 8px 12px;
    line-height: 1.35;
    max-width: 100%;
}

.paspor-table tbody .paspor-cell-inner--left {
    justify-content: flex-start;
    text-align: left;
}

.paspor-table tbody .paspor-cell-inner--center {
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
}

.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-col-name,
.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-col-role,
.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-col-petugas-masuk,
.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-col-petugas-pulang {
    vertical-align: middle !important;
    padding: 0 !important;
}

.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-status-cell,
.paspor-table.report-table tbody tr:not(.category-divider-row) td.paspor-note-cell {
    vertical-align: middle !important;
}

.paspor-table thead .paspor-th-petugas-group {
    text-align: center;
    letter-spacing: 0.06em;
    font-size: 0.62rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    vertical-align: middle !important;
    padding: 0 !important;
    width: auto;
    height: 28px;
}

.paspor-table thead .paspor-th-petugas-group .paspor-th-inner--compact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    line-height: 1.2;
}

.paspor-table thead th.paspor-th-rowspan {
    vertical-align: middle !important;
    padding: 0 !important;
    text-align: center;
}

.paspor-table thead th.paspor-th-rowspan .paspor-th-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Samakan dengan 2 baris petugas (28 + 28) */
    min-height: 56px;
    height: 100%;
    padding: 6px 10px;
    line-height: 1.25;
    text-align: center;
}

.paspor-table thead th.paspor-th-name .paspor-th-inner {
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
}

.paspor-table thead th.paspor-th-jabatan .paspor-th-inner,
.paspor-table thead th.paspor-th-catatan .paspor-th-inner {
    justify-content: center;
}

.paspor-table thead .paspor-th-petugas-sub {
    width: auto;
    min-width: 7.5rem;
    height: 28px;
    max-height: 28px;
    text-align: center;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: rgba(232, 212, 138, 0.92);
    padding: 0 10px !important;
    vertical-align: middle !important;
    box-sizing: border-box;
    line-height: 28px;
    white-space: nowrap;
}

.paspor-table thead .paspor-thead-row-main th[rowspan="2"] {
    vertical-align: middle !important;
}

.paspor-table thead .paspor-thead-row-sub th {
    height: 28px;
}

.paspor-col-petugas-masuk,
.paspor-col-petugas-pulang {
    width: auto !important;
    min-width: 7.5rem;
    text-align: center;
    vertical-align: middle !important;
    font-size: 0.68rem;
    line-height: 1.35;
    padding: 0 !important;
    box-sizing: border-box;
    white-space: nowrap !important;
}

.paspor-stat-ratio {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
    gap: 0.35em;
    margin: 5px 0 0;
    font-size: 1.75rem;
    line-height: 1.15;
    white-space: nowrap;
}

.paspor-stat-ratio > span {
    display: inline-block;
    white-space: nowrap;
}

.paspor-stat-sep {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.paspor-petugas-name--masuk,
.paspor-petugas-name--pulang {
    display: inline-block;
    font-weight: 700;
    white-space: nowrap;
    word-break: normal;
}

.paspor-petugas-name--masuk {
    color: #86efac;
}

.paspor-petugas-name--pulang {
    color: #93c5fd;
}

.paspor-petugas-empty {
    color: var(--text-muted);
    font-weight: 600;
}

.paspor-col-role {
    width: auto;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.92);
    white-space: nowrap !important;
}

.paspor-col-role.paspor-role-text {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Garis baris konsisten di semua kolom paspor (sama seperti NO / NAMA STAFF) */
.paspor-table.report-table tbody tr:not(.category-divider-row) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.paspor-table.report-table tbody tr:not(.category-divider-row) td:last-child {
    border-right: none !important;
}

body.theme-china-dynasty .paspor-table.report-table tbody tr:not(.category-divider-row) td,
body.theme-gold-imperial .paspor-table.report-table tbody tr:not(.category-divider-row) td {
    border-bottom: 1px solid rgba(255, 215, 0, 0.12) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Paspor shift panels — frame & garis mewah (pagi emas / malam indigo) */
.paspor-shift-panel {
    position: relative;
    padding: 0 !important;
    border-radius: 14px !important;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden !important;
}

.paspor-shift-panel--pagi {
    background: linear-gradient(168deg, rgba(245, 158, 11, 0.12) 0%, rgba(14, 10, 4, 0.94) 45%, rgba(6, 5, 2, 0.98) 100%) !important;
    border: 2px solid rgba(251, 191, 36, 0.42) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(253, 230, 138, 0.14),
        inset 0 0 0 1px rgba(212, 175, 55, 0.08) !important;
}

.paspor-shift-panel--malam {
    background: linear-gradient(168deg, rgba(99, 102, 241, 0.14) 0%, rgba(12, 14, 36, 0.94) 45%, rgba(6, 8, 22, 0.98) 100%) !important;
    border: 2px solid rgba(129, 140, 248, 0.48) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(199, 210, 254, 0.12),
        inset 0 0 0 1px rgba(129, 140, 248, 0.1) !important;
}

body:not([class*="theme-"]) .paspor-shift-panel--pagi,
body[class*="theme-"] .paspor-shift-panel--pagi {
    border-color: rgba(251, 191, 36, 0.5) !important;
}

body:not([class*="theme-"]) .paspor-shift-panel--malam,
body[class*="theme-"] .paspor-shift-panel--malam {
    border-color: rgba(129, 140, 248, 0.54) !important;
}

.paspor-shift-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid transparent;
    background-clip: padding-box;
}

.paspor-shift-panel__header--pagi {
    background: linear-gradient(90deg, rgba(88, 28, 8, 0.72) 0%, rgba(52, 16, 6, 0.88) 55%, rgba(18, 10, 4, 0.92) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.38);
    box-shadow: inset 0 -1px 0 rgba(253, 230, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.paspor-shift-panel__header--malam {
    background: linear-gradient(90deg, rgba(49, 46, 129, 0.65) 0%, rgba(30, 27, 75, 0.88) 55%, rgba(12, 14, 36, 0.92) 100%);
    border-bottom: 1px solid rgba(129, 140, 248, 0.42);
    box-shadow: inset 0 -1px 0 rgba(199, 210, 254, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.paspor-shift-panel__header-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px currentColor);
}

.paspor-shift-panel__header--pagi .paspor-shift-panel__header-icon {
    color: #fbbf24;
}

.paspor-shift-panel__header--malam .paspor-shift-panel__header-icon {
    color: #a5b4fc;
}

.paspor-shift-panel__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.paspor-shift-panel__header--pagi .paspor-shift-panel__title {
    color: #fff8e7;
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.paspor-shift-panel__header--malam .paspor-shift-panel__title {
    color: #eef2ff;
    text-shadow: 0 0 18px rgba(129, 140, 248, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.paspor-shift-panel__badge {
    margin-left: auto;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.paspor-shift-panel__header--pagi .paspor-shift-panel__badge {
    color: #fde68a;
    background: rgba(120, 53, 15, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.55);
    box-shadow: inset 0 1px 0 rgba(253, 230, 138, 0.15), 0 0 12px rgba(245, 158, 11, 0.12);
}

.paspor-shift-panel__header--malam .paspor-shift-panel__badge {
    color: #c7d2fe;
    background: rgba(49, 46, 129, 0.5);
    border: 1px solid rgba(129, 140, 248, 0.55);
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.12), 0 0 12px rgba(99, 102, 241, 0.15);
}

#pasporContainerPagi.glass-card,
#pasporContainerMalam.glass-card,
#pasporView .paspor-shift-panel.glass-card:has(.table-responsive) {
    padding: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: none !important;
}

.paspor-shift-panel__table-wrap {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    height: auto !important;
}

.paspor-shift-panel--pagi .paspor-shift-panel__table-wrap {
    border: none !important;
    background: rgba(18, 12, 4, 0.72) !important;
    box-shadow: none !important;
}

.paspor-shift-panel--malam .paspor-shift-panel__table-wrap {
    border: none !important;
    background: rgba(10, 12, 32, 0.75) !important;
    box-shadow: none !important;
}

.paspor-shift-panel--pagi .paspor-table thead th {
    background: linear-gradient(180deg, rgba(127, 45, 18, 0.92) 0%, rgba(88, 28, 12, 0.96) 100%) !important;
    color: #fde68a !important;
    border-right: 1px solid rgba(251, 191, 36, 0.22) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(253, 230, 138, 0.12);
}

.paspor-shift-panel--malam .paspor-table thead th {
    background: linear-gradient(180deg, rgba(67, 56, 202, 0.88) 0%, rgba(49, 46, 129, 0.96) 100%) !important;
    color: #e0e7ff !important;
    border-right: 1px solid rgba(129, 140, 248, 0.26) !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.1);
}

.paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-group {
    border-bottom: 1px solid rgba(251, 191, 36, 0.28) !important;
}

.paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-group {
    border-bottom: 1px solid rgba(129, 140, 248, 0.3) !important;
}

.paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-sub {
    color: rgba(253, 230, 138, 0.95) !important;
    background: rgba(72, 26, 10, 0.55) !important;
    border-right: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-sub {
    color: rgba(224, 231, 255, 0.95) !important;
    background: rgba(38, 36, 99, 0.55) !important;
    border-right: 1px solid rgba(129, 140, 248, 0.22) !important;
}

.paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row) td {
    border-bottom: 1px solid rgba(251, 191, 36, 0.12) !important;
    border-right: 1px solid rgba(251, 191, 36, 0.08) !important;
}

.paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row) td {
    border-bottom: 1px solid rgba(129, 140, 248, 0.14) !important;
    border-right: 1px solid rgba(129, 140, 248, 0.1) !important;
}

.paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    background: rgba(245, 158, 11, 0.06) !important;
    border-bottom-color: rgba(251, 191, 36, 0.22) !important;
}

.paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    background: rgba(99, 102, 241, 0.08) !important;
    border-bottom-color: rgba(129, 140, 248, 0.24) !important;
}

.paspor-shift-panel--pagi .paspor-table.report-table tbody tr:hover td:first-child {
    border-left: 3px solid rgba(251, 191, 36, 0.55) !important;
}

.paspor-shift-panel--malam .paspor-table.report-table tbody tr:hover td:first-child {
    border-left: 3px solid rgba(129, 140, 248, 0.6) !important;
}

.paspor-shift-panel--pagi .paspor-role-divider {
    background: rgba(245, 158, 11, 0.08) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.28) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.28) !important;
    color: #fcd34d !important;
}

.paspor-shift-panel--malam .paspor-role-divider {
    background: rgba(99, 102, 241, 0.1) !important;
    border-top: 1px solid rgba(129, 140, 248, 0.32) !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.32) !important;
    color: #c7d2fe !important;
}

.paspor-role-badge {
    display: none !important;
}

.paspor-status-cell {
    width: 1%;
    white-space: nowrap !important;
    text-align: center;
    vertical-align: middle !important;
    padding: 6px 8px !important;
}

.paspor-status-cell .btn {
    width: auto;
    min-width: 5.5rem;
}

.paspor-note-cell {
    width: auto;
    min-width: 140px;
    white-space: normal !important;
}

.paspor-role-divider {
    text-align: center;
    font-weight: bold;
    background: rgba(20, 184, 166, 0.05) !important;
    color: var(--accent) !important;
    border-top: 1px solid rgba(20, 184, 166, 0.15) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.15) !important;
    padding: 6px 12px;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.btn-status-belum {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: 16px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    min-width: 90px;
    transition: all 0.2s ease;
}
.btn-status-belum:hover {
    background: rgba(245, 158, 11, 0.22) !important;
}

.btn-status-sudah {
    background: rgba(34, 197, 94, 0.75) !important;
    color: #ffffff !important;
    border: 1px solid #4ade80 !important;
    border-radius: 16px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    min-width: 90px;
    transition: all 0.2s ease;
}
.btn-status-sudah:hover {
    background: rgba(34, 197, 94, 0.95) !important;
}

.btn-status-locked {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    min-width: 90px;
    cursor: not-allowed !important;
}

.paspor-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: bold;
    width: 100%;
    outline: none;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    padding: 4px 0;
}
.paspor-input:focus {
    border-bottom: 1px dashed var(--primary);
}

.paspor-notes {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    padding: 4px 8px;
    min-height: 26px;
    height: 26px;
}
.paspor-notes:focus {
    border-color: var(--primary);
    color: var(--text-primary);
}

/* Catatan / Keterangan — ikon mata & tambah */
.paspor-catatan-eye-btn,
.paspor-catatan-add-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    vertical-align: middle;
}

.paspor-catatan-eye-btn {
    border: 1px solid rgba(201, 211, 106, 0.5);
    background: linear-gradient(145deg, rgba(201, 211, 106, 0.28) 0%, rgba(142, 196, 220, 0.18) 100%);
    color: #e8efc4;
    box-shadow: 0 2px 8px rgba(201, 211, 106, 0.2);
}

.paspor-catatan-eye-btn:hover {
    border-color: rgba(201, 211, 106, 0.75);
    color: #ffffff;
    background: linear-gradient(145deg, rgba(201, 211, 106, 0.42) 0%, rgba(142, 196, 220, 0.28) 100%);
    box-shadow: 0 3px 12px rgba(201, 211, 106, 0.32);
}

.paspor-catatan-eye-btn i {
    font-size: 0.78rem;
    color: inherit;
}

.paspor-catatan-add-btn {
    border: 1px dashed rgba(142, 196, 220, 0.35);
    background: rgba(20, 34, 48, 0.65);
    color: #8ec4dc;
}

.paspor-catatan-add-btn:hover {
    border-style: solid;
    border-color: rgba(142, 196, 220, 0.55);
    color: #c9d36a;
    background: rgba(36, 56, 72, 0.85);
}

.paspor-catatan-add-btn i {
    font-size: 0.72rem;
}

.paspor-catatan-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.paspor-catatan-action-btn--primary {
    border: 1.5px solid rgba(201, 211, 106, 0.55);
    background: linear-gradient(135deg, rgba(201, 211, 106, 0.28), rgba(142, 196, 220, 0.18));
    color: #e8efc4;
}

.paspor-catatan-action-btn--primary:hover {
    background: linear-gradient(135deg, rgba(201, 211, 106, 0.42), rgba(142, 196, 220, 0.28));
    color: #ffffff;
}

.paspor-catatan-action-btn--secondary {
    border: 1.5px solid rgba(142, 196, 220, 0.4);
    background: rgba(142, 196, 220, 0.1);
    color: #8ec4dc;
}

.paspor-catatan-action-btn--secondary:hover {
    background: rgba(142, 196, 220, 0.2);
    color: #f2f5f8;
}

.paspor-catatan-action-btn--danger {
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    margin-right: auto;
}

.paspor-catatan-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fecaca;
}

.paspor-catatan-action-btn--ghost {
    border: 1.5px solid rgba(154, 173, 184, 0.35);
    background: transparent;
    color: #9aadb8;
}

.paspor-catatan-action-btn--ghost:hover {
    border-color: rgba(242, 245, 248, 0.35);
    color: #f2f5f8;
}

body.theme-wb .paspor-catatan-eye-btn {
    border-color: rgba(201, 211, 106, 0.55);
    color: #ffffff;
}

.paspor-petugas-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 12px;
}

/* Database Simulation tab */
.info-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    padding: 14px 16px;
    border-radius: var(--border-radius-md);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.info-block.danger {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.btn-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.danger-zone-title {
    color: var(--danger);
}

/* 10. FORM CONTROLS (BUTTONS & INPUTS) */
.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
.secure-input {
    width: 100%;
    background: rgba(6, 8, 16, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main);
    padding: 11px 14px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-family);
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    transition: var(--transition-smooth);
}

/* Secure Input Masking — Disables Browser Save Password Popup */
.secure-input {
    -webkit-text-security: disk !important;
    text-security: disk !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
.secure-input:focus {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12), 0 0 20px rgba(139, 92, 246, 0.1);
    background: rgba(10, 12, 25, 0.8);
}

/* Readonly fields styling */
.readonly-input {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

.info-text {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.15s ease, color 0.2s ease, opacity 0.15s ease;
    border: 1px solid transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.96);
    filter: brightness(0.94);
}

.btn-primary:active:not(:disabled),
.btn-success:active:not(:disabled),
.btn-warning:active:not(:disabled),
.btn-danger:active:not(:disabled) {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset 0 2px 5px rgba(0, 0, 0, 0.18);
    filter: brightness(0.94);
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(1px) scale(0.96);
    background: rgba(255, 255, 255, 0.12);
    filter: brightness(0.96);
}

body.theme-wb .btn:active:not(:disabled),
body.theme-wb .btn-primary:active:not(:disabled),
body.theme-wb .btn-secondary:active:not(:disabled),
body.theme-wb .btn-warning:active:not(:disabled) {
    transform: translateY(1px) scale(0.96) !important;
    filter: brightness(0.94) !important;
}

body.theme-wb .btn-primary:active:not(:disabled),
body.theme-wb .btn-warning:active:not(:disabled) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), 0 1px 0 rgba(255,255,255,0.1) inset;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #9d71f8 0%, #8b5cf6 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.5), 0 1px 0 rgba(255,255,255,0.15) inset;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-subtle);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.14);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35), 0 1px 0 rgba(255,255,255,0.1) inset;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35), 0 1px 0 rgba(255,255,255,0.1) inset;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(244, 63, 94, 0.35), 0 1px 0 rgba(255,255,255,0.1) inset;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(244, 63, 94, 0.45);
}

.btn-danger-glass {
    background: rgba(244, 63, 94, 0.1) !important;
    color: #fda4af !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
    border-radius: var(--border-radius-md);
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-danger-glass:hover {
    background: rgba(244, 63, 94, 0.2) !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.3);
}

/* Spinner in Button */
.btn-spinner {
    font-size: 0.85rem;
}

/* 11. TOAST NOTIFICATION STYLING — Premium Redesign */
.toast-container {
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
    max-width: min(240px, calc(100vw - 28px));
}

.toast {
    pointer-events: all;
    background: rgba(10, 14, 28, 0.94);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 240px;
    color: #f1f5f9;
    font-size: 0.64rem;
    font-weight: 500;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    animation: toastSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    cursor: pointer;
    position: relative;
}
.toast:hover { filter: brightness(1.08); }

.toast-body {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px 5px 8px;
}

.toast-icon-wrap {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.62rem;
    line-height: 1;
    margin-top: 0;
}
.toast-icon-wrap i {
    display: block;
    line-height: 1;
    width: 1em;
    height: 1em;
    text-align: center;
}

.toast-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.75;
    line-height: 1.1;
}

.toast-message {
    font-size: 0.62rem;
    font-weight: 600;
    color: #f1f5f9;
    word-break: break-word;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 1px 3px;
    font-size: 0.58rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0;
    transition: color 0.2s;
    border-radius: 3px;
    line-height: 1;
}
.toast-close:hover { color: white; background: rgba(255,255,255,0.08); }

.toast-progress {
    height: 2px;
    width: 100%;
    border-radius: 0 0 10px 10px;
    transform-origin: left;
    animation: toastProgress linear forwards;
}

.toast.toast-success {
    border-left: 3px solid #10b981;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 12px rgba(16,185,129,0.1);
}
.toast.toast-success .toast-icon-wrap {
    background: rgba(16,185,129,0.15);
    color: #10b981;
}
.toast.toast-success .toast-title { color: #10b981; }
.toast.toast-success .toast-progress { background: #10b981; }

.toast.toast-warning {
    border-left: 3px solid #f59e0b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 12px rgba(245,158,11,0.1);
}
.toast.toast-warning .toast-icon-wrap {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}
.toast.toast-warning .toast-title { color: #f59e0b; }
.toast.toast-warning .toast-progress { background: #f59e0b; }

.toast.toast-error {
    border-left: 3px solid #ef4444;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 12px rgba(239,68,68,0.1);
}
.toast.toast-error .toast-icon-wrap {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}
.toast.toast-error .toast-title { color: #ef4444; }
.toast.toast-error .toast-progress { background: #ef4444; }

.toast.toast-info {
    border-left: 3px solid #6366f1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 12px rgba(99,102,241,0.1);
}
.toast.toast-info .toast-icon-wrap {
    background: rgba(99,102,241,0.15);
    color: #6366f1;
}
.toast.toast-info .toast-title { color: #6366f1; }
.toast.toast-info .toast-progress { background: #6366f1; }

.toast-closing {
    animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Custom Confirm Dialog */
#customConfirmModal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(36, 58, 92, 0.28) 0%, transparent 58%),
        rgba(4, 8, 16, 0.72);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

#customConfirmModal.hide { display: none; }

#customConfirmModal .confirm-modal-luxe {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 440px;
    width: min(92vw, 440px);
    padding: 36px 32px 28px;
    border-radius: 24px;
    text-align: center;
    text-transform: none;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        radial-gradient(120% 70% at 8% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(180, 60, 70, 0.08), transparent 48%),
        linear-gradient(165deg, #182840 0%, #101c30 52%, #0a1220 100%) !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(168, 200, 230, 0.22),
        0 0 48px rgba(110, 160, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    filter: none !important;
}

#customConfirmModal .confirm-modal-luxe.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(232, 238, 246, 0.78) 0%,
        rgba(142, 184, 220, 0.55) 28%,
        rgba(80, 120, 170, 0.22) 52%,
        rgba(220, 80, 90, 0.35) 78%,
        rgba(142, 184, 220, 0.5) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: 2;
}

#customConfirmModal .confirm-modal-luxe.glass-card::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    inset: auto 14% auto 14%;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(232, 238, 246, 0.75), transparent);
    pointer-events: none;
    z-index: 3;
}

#customConfirmModal .confirm-modal-luxe > * {
    position: relative;
    z-index: 4;
}

#customConfirmModal .confirm-modal-luxe__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    animation: none !important;
    color: #fecaca;
    background:
        radial-gradient(circle at 50% 38%, rgba(248, 113, 113, 0.28) 0%, transparent 62%),
        linear-gradient(160deg, #3a1820 0%, #1a1018 100%);
    border: 1px solid rgba(252, 165, 165, 0.38);
    box-shadow:
        0 0 0 6px rgba(142, 184, 220, 0.08),
        0 10px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#customConfirmModal.confirm-modal-overlay--info .confirm-modal-luxe__icon {
    color: #d7e4f0;
    background:
        radial-gradient(circle at 50% 38%, rgba(142, 184, 220, 0.28) 0%, transparent 62%),
        linear-gradient(160deg, #1c3048 0%, #101c2c 100%);
    border-color: rgba(168, 200, 230, 0.42);
}

#customConfirmModal .confirm-modal-luxe .modal-header h3,
#customConfirmModal #confirmTitle {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f4f8fc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#customConfirmModal .confirm-modal-luxe .modal-body {
    margin-bottom: 28px;
}

#customConfirmModal .confirm-modal-luxe .modal-body p,
#customConfirmModal #confirmMessage {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #c5d4e4 !important;
}

#customConfirmModal .confirm-modal-luxe__footer {
    gap: 12px;
}

#customConfirmModal .confirm-modal-luxe__btn {
    min-height: 46px;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#customConfirmModal .confirm-modal-luxe__btn--ghost {
    color: #e8f1fa !important;
    background: rgba(14, 24, 40, 0.88) !important;
    border: 1px solid rgba(168, 200, 230, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#customConfirmModal .confirm-modal-luxe__btn--ghost:hover {
    background: rgba(22, 40, 64, 0.95) !important;
    border-color: rgba(210, 228, 245, 0.55) !important;
}

#customConfirmModal .confirm-modal-luxe__btn--ok {
    color: #fff8f8 !important;
    background: linear-gradient(180deg, #ef5b67 0%, #c81e2c 55%, #9f1239 100%) !important;
    border: 1px solid rgba(254, 202, 202, 0.35) !important;
    box-shadow:
        0 10px 24px rgba(185, 28, 28, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#customConfirmModal .confirm-modal-luxe__btn--ok:hover {
    filter: brightness(1.08);
}

#customConfirmModal .confirm-modal-luxe__btn--ok-info {
    background: linear-gradient(180deg, #8eb8dc 0%, #5a8cb8 55%, #3d6a94 100%) !important;
    border-color: rgba(232, 238, 246, 0.4) !important;
    color: #071018 !important;
    box-shadow:
        0 10px 24px rgba(70, 120, 180, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.confirm-card {
    background: rgba(10, 14, 28, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 32px 30px 26px;
    max-width: 400px;
    width: 92%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
    backdrop-filter: blur(20px);
    animation: scaleIn 0.2s cubic-bezier(0.16,1,0.3,1);
    text-align: center;
}

.confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 16px;
}
.confirm-icon.danger  { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.confirm-icon.warning { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.confirm-icon.info    { background: rgba(99,102,241,0.15); color: #6366f1; border: 1px solid rgba(99,102,241,0.25); }

.confirm-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.confirm-message {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin-bottom: 26px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-btn {
    flex: 1;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.18s ease;
    letter-spacing: 0.3px;
}
.confirm-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.confirm-btn:active { transform: translateY(0); }
.confirm-btn.btn-cancel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
.confirm-btn.btn-ok-danger  { background: linear-gradient(135deg,#ef4444,#dc2626); color: white; }
.confirm-btn.btn-ok-warning { background: linear-gradient(135deg,#f59e0b,#d97706); color: white; }
.confirm-btn.btn-ok-info    { background: linear-gradient(135deg,#6366f1,#4f46e5); color: white; }


/* 12. ANIMASI (ANIMATIONS) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

@keyframes blinkGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes textBlink {
    0%, 100% { color: var(--danger); opacity: 1; }
    50% { color: #fca5a5; opacity: 0.7; }
}

@keyframes borderBlink {
    0%, 100% { border-left-color: var(--danger); }
    50% { border-left-color: rgba(239, 68, 68, 0.2); }
}

@keyframes pulseLogo {
    0% { transform: scale(1); box-shadow: 0 4px 15px var(--primary-glow); }
    100% { transform: scale(1.03); box-shadow: 0 4px 22px rgba(6, 182, 212, 0.4); }
}

/* Responsive breakpoint for small devices */
@media (max-width: 1024px) {
    .monitor-grid {
        grid-template-columns: 1fr;
    }

    #monitorView .monitor-grid {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    #monitorView .monitor-sidebar {
        display: none;
    }
    #monitorView .monitor-main {
        overflow: hidden;
    }
    #monitorView .active-breaks-grid {
        overflow: hidden;
        max-height: none;
    }
    .app-header {
        padding: 16px 20px;
        flex-direction: column;
        gap: 16px;
    }
    .live-clock {
        text-align: center;
    }
    .admin-workspace {
        grid-template-columns: 1fr;
    }
    .admin-side-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .admin-side-menu li {
        padding: 8px 12px;
    }
}

@media (max-width: 640px) {
    .admin-grid-layout {
        grid-template-columns: 1fr;
    }
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .app-nav {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 12px;
    }
    .header-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* 13. CUSTOM CONFIRM MODAL OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 16, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.25s ease-out;
    overflow-y: auto;
}

.modal-overlay.hide {
    display: none !important;
}

.modal-card {
    max-width: 440px;
    width: 100%;
    margin: auto;
    background: rgba(13, 20, 38, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition-smooth);
    animation: pulseIcon 2s infinite alternate;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.modal-body {
    margin-bottom: 24px;
    width: 100%;
}

.modal-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    width: 100%;
    gap: 12px;
    justify-content: center;
}

.modal-footer .btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 0.88rem;
}

.officer-auth-modal {
    max-width: 520px;
    width: min(92vw, 520px);
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 24px;
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(7, 12, 28, 0.98), rgba(5, 10, 24, 0.95));
    box-shadow:
        0 30px 80px rgba(2, 6, 23, 0.78),
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 0 40px rgba(139, 92, 246, 0.14);
}

.officer-auth-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.08), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.12), transparent 28%);
    pointer-events: none;
}

.officer-auth-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.58);
    z-index: 3;
}

.officer-auth-close:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    transform: translateY(-1px) scale(1.04);
}

.officer-auth-shell {
    position: relative;
    z-index: 1;
    padding: 34px 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.officer-auth-header {
    text-align: center;
    padding-top: 4px;
}

.officer-auth-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    font-size: 1.35rem;
    background:
        radial-gradient(circle at 30% 30%, rgba(191, 219, 254, 0.9), rgba(99, 102, 241, 0.9) 32%, rgba(124, 58, 237, 0.95) 72%);
    box-shadow:
        0 16px 30px rgba(99, 102, 241, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.officer-auth-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -0.4px;
    color: #f8fafc;
}

.officer-auth-subtitle {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.6);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.officer-auth-body {
    padding: 22px 20px 18px;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.16);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(8, 13, 30, 0.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.officer-auth-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.66);
}

.officer-auth-input-wrap {
    position: relative;
}

.officer-auth-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(2, 6, 23, 0.64);
    border: 1px solid rgba(139, 92, 246, 0.34);
    border-radius: 14px;
    color: #ffffff;
    padding: 14px 46px 14px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.02) inset,
        0 8px 26px rgba(2, 6, 23, 0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.officer-auth-input::placeholder {
    color: rgba(226, 232, 240, 0.34);
    font-weight: 500;
}

.officer-auth-input:focus {
    border-color: rgba(167, 139, 250, 0.78);
    background: rgba(5, 10, 24, 0.9);
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.16),
        0 14px 30px rgba(76, 29, 149, 0.22);
}

.officer-auth-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(226, 232, 240, 0.46);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.officer-auth-toggle:hover {
    color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.officer-auth-helper {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(148, 163, 184, 0.78);
}

.officer-auth-footer {
    display: flex;
    gap: 12px;
}

.officer-auth-footer .btn {
    flex: 1;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
}

.officer-auth-footer .btn.btn-secondary {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.76);
}

.officer-auth-footer .btn.btn-primary {
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 45%, #6366f1 100%);
    box-shadow: 0 16px 32px rgba(124, 58, 237, 0.34);
}

.officer-auth-footer .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(124, 58, 237, 0.42);
}

@keyframes pulseIcon {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
    100% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.05); }
}

/* 14. DATE PICKER FILTER STYLING */
.date-filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-filter-container label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-picker-input {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    padding: 6px 12px !important;
    border-radius: var(--border-radius-md) !important;
    font-family: var(--font-family) !important;
    font-size: 0.8rem !important;
    outline: none !important;
    cursor: pointer !important;
    width: auto !important;
    transition: var(--transition-smooth);
}

.date-picker-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px var(--primary-glow) !important;
}

/* Global dashboard date/month pickers — calendar icon visible on dark UI */
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    filter: brightness(0) saturate(100%) invert(88%) sepia(22%) saturate(700%) hue-rotate(210deg) brightness(112%) contrast(101%);
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(0) saturate(100%) invert(96%) sepia(35%) saturate(900%) hue-rotate(210deg) brightness(120%) contrast(101%);
}

input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="month"]:focus::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Firefox */
input[type="date"]::-moz-calendar-picker-indicator,
input[type="month"]::-moz-calendar-picker-indicator,
input[type="datetime-local"]::-moz-calendar-picker-indicator,
input[type="time"]::-moz-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
    filter: brightness(0) saturate(100%) invert(88%) sepia(22%) saturate(700%) hue-rotate(210deg) brightness(112%) contrast(101%);
}

/* ================================================================
   LUXURY MONTH SELECTOR STYLING - PREMIUM EDITION
   ================================================================ */

.luxury-month-selector {
    position: relative;
    min-width: 220px;
}

.luxury-month-selector input[type="month"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
    border: 2px solid rgba(167, 139, 250, 0.4) !important;
    color: white !important;
    padding: 14px 45px 14px 18px !important;
    border-radius: 14px !important;
    font-family: var(--font-family) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 0 20px rgba(139, 92, 246, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    text-transform: uppercase !important;
    position: relative !important;
}

.luxury-month-selector input[type="month"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 14px;
    pointer-events: none;
}

.luxury-month-selector input[type="month"]:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(124, 58, 237, 0.15) 100%) !important;
    border-color: rgba(167, 139, 250, 0.6) !important;
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3), 
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 0 30px rgba(139, 92, 246, 0.15) !important;
    transform: translateY(-2px) !important;
}

.luxury-month-selector input[type="month"]:focus {
    border-color: rgba(167, 139, 250, 0.8) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25),
                0 15px 50px rgba(139, 92, 246, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) scale(1.01) !important;
}

.luxury-month-selector input[type="month"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(77%) sepia(40%) saturate(858%) hue-rotate(215deg) brightness(110%) contrast(100%);
    cursor: pointer;
    opacity: 0.95;
    width: 22px;
    height: 22px;
    padding: 0 8px;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    right: 10px;
}

.luxury-month-selector input[type="month"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(1.15) rotate(5deg);
    filter: brightness(0) saturate(100%) invert(84%) sepia(50%) saturate(958%) hue-rotate(215deg) brightness(115%) contrast(105%);
}

/* Import Modal Month Selector Variant - RED THEME */
.import-month-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%) !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
    max-width: 280px !important;
}

.import-month-selector input[type="month"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.06) 100%) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
    color: white !important;
    padding: 10px 35px 10px 14px !important;
    border-radius: 10px !important;
    font-family: var(--font-family) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    text-transform: uppercase !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.import-month-selector input[type="month"]:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: rgba(252, 165, 165, 0.5) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.import-month-selector input[type="month"]:focus {
    border-color: rgba(252, 165, 165, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 8px 25px rgba(239, 68, 68, 0.3) !important;
    transform: translateY(-1px) !important;
}

.import-month-selector input[type="month"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(65%) sepia(75%) saturate(1500%) hue-rotate(352deg) brightness(100%) contrast(100%);
    cursor: pointer;
    opacity: 0.85;
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.import-month-selector input[type="month"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(1.1);
}

/* Month Selector Label Styling - Premium */
.month-selector-label {
    font-size: 0.72rem;
    color: rgba(167, 139, 250, 0.95);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.month-selector-label::before {
    content: '';
    width: 3px;
    height: 3px;
    background: rgba(167, 139, 250, 0.7);
    border-radius: 50%;
}

.month-selector-label i {
    font-size: 0.9rem;
    color: rgba(167, 139, 250, 1);
    transition: all 0.3s ease;
}

.luxury-month-selector:hover .month-selector-label i {
    color: rgba(196, 181, 253, 1);
    transform: rotate(10deg) scale(1.1);
}

/* Wrapper container styling */
.luxury-month-selector {
    position: relative;
}

.luxury-month-selector::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(139, 92, 246, 0.3),
        rgba(139, 92, 246, 0.1),
        transparent);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.luxury-month-selector:hover::after {
    opacity: 1;
    bottom: -12px;
}

/* Semua preset emas — kartu tanpa halo berwarna di tepi (kecuali monitor istirahat) */
body[class*="theme-gold-"] .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card) {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body[class*="theme-gold-"] .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card)::after {
    display: none !important;
    content: none !important;
}

body[class*="theme-gold-"] .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card)::before {
    display: none !important;
    opacity: 0 !important;
}

/* Monitor: Staff Terlambat — panel mewah (tema WB) */
.late-staff-card {
    position: relative;
    margin: 0 0 28px;
    padding: 22px 24px 20px !important;
    overflow: hidden;
    border: 1px solid rgba(201, 211, 106, 0.18) !important;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(201, 211, 106, 0.1), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(142, 196, 220, 0.08), transparent 50%),
        linear-gradient(165deg, #15202b 0%, #101820 55%, #0c1218 100%) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.late-staff-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9d36a 20%, #8ec4dc 80%, transparent);
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
}

.late-staff-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.late-staff-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.late-staff-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0b1118;
    background: linear-gradient(145deg, #d5df8a 0%, #c9d36a 50%, #8ec4dc 100%);
    box-shadow: 0 8px 20px rgba(201, 211, 106, 0.22);
    font-size: 1rem;
}

.late-staff-card__title {
    margin: 0 !important;
    color: #f4f7fa !important;
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.late-staff-card__subtitle {
    margin: 3px 0 0;
    font-size: 0.72rem;
    color: rgba(242, 245, 248, 0.45);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.late-staff-card__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9d36a;
    background: rgba(201, 211, 106, 0.08);
    border: 1px solid rgba(201, 211, 106, 0.22);
    flex-shrink: 0;
}

.late-staff-card__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9d36a;
}

.late-staff-list-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0;
    max-height: 360px;
    overflow-y: auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.late-staff-empty {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(142, 196, 220, 0.18);
    background:
        linear-gradient(120deg, rgba(142, 196, 220, 0.08), rgba(201, 211, 106, 0.06)),
        rgba(8, 14, 20, 0.55);
}

.late-staff-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9ed4a8;
    font-size: 1.15rem;
    background: radial-gradient(circle at 35% 30%, rgba(158, 212, 168, 0.28), rgba(142, 196, 220, 0.08) 60%, transparent 70%),
        rgba(16, 28, 36, 0.9);
    border: 1px solid rgba(158, 212, 168, 0.35);
    box-shadow: 0 0 24px rgba(158, 212, 168, 0.12);
}

.late-staff-empty__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.late-staff-empty__text strong {
    font-size: 0.95rem;
    font-weight: 750;
    color: #e8f0e9;
    letter-spacing: 0.01em;
}

.late-staff-empty__text span {
    font-size: 0.78rem;
    color: rgba(242, 245, 248, 0.5);
    font-weight: 500;
}

.late-staff-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(244, 63, 94, 0.03));
    border: 1px solid rgba(244, 63, 94, 0.22);
    padding: 12px 14px 12px 12px;
    border-radius: 14px;
    width: min(340px, 100%);
    position: relative;
    overflow: hidden;
}

.late-staff-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #fb7185, #e11d48);
}

.late-staff-item:hover {
    border-color: rgba(251, 113, 133, 0.4);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(244, 63, 94, 0.05));
}

.late-staff-item__avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fecdd3;
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(251, 113, 133, 0.28);
}

.late-staff-item .staff-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.late-staff-item .staff-name {
    font-weight: 750;
    color: #fecdd3;
    font-size: 0.84rem;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.28;
}

.late-staff-item .staff-role-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.late-staff-item .staff-role {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.late-staff-item .late-badge-status {
    font-size: 0.58rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.late-staff-item .late-badge-status.active {
    background: rgba(244, 63, 94, 0.9);
    color: #ffffff;
    box-shadow: none;
    animation: none;
}

.late-staff-item .late-badge-status.returned {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.late-staff-item .overtime-container {
    text-align: right;
    flex-shrink: 0;
    padding-left: 4px;
}

.late-staff-item .overtime-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 750;
    color: #fb7185;
    font-size: 0.92rem;
    display: block;
    letter-spacing: 0.02em;
}

.late-staff-item .overtime-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.empty-state-mini {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

@media (max-width: 640px) {
    .late-staff-card {
        padding: 18px 16px 16px !important;
    }

    .late-staff-card__header {
        flex-wrap: wrap;
    }

    .late-staff-empty {
        padding: 16px;
        gap: 12px;
    }
}

/* 16. ROLE SELECT BADGE DROPDOWN STYLING */
.role-select-badge {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    padding: 4px 24px 4px 10px !important;
    border-radius: 50px !important;
    font-family: var(--font-family) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;
    display: inline-block !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 16px !important;
    transition: var(--transition-smooth);
}

.role-select-badge:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}

/* Dropdown jabatan di tabel admin — pakai lux menu (tidak terpotong overflow) */
.admin-table td .admin-staff-role-dd,
.admin-table td .lux-filter-dd.admin-staff-role-dd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 120px;
    max-width: 100%;
    min-height: 0;
    height: 32px;
    vertical-align: middle;
    position: relative;
    z-index: 1; /* di bawah sticky header (z-index 20) saat scroll */
    margin: 0 auto;
    line-height: 1;
}

.admin-staff-table .admin-staff-td-role .admin-staff-role-dd,
.admin-staff-table .admin-staff-td-role .lux-filter-dd.admin-staff-role-dd {
    width: min(100%, 156px);
    z-index: 1;
}

.admin-table td .admin-staff-role-dd .lux-filter-dd__btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 26px 0 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.admin-staff-table .admin-staff-role-select.lux-filter-native,
.admin-table .admin-staff-role-select.lux-filter-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

select option {
    background: #0f172a !important; /* Latar belakang dropdown gelap */
    color: #ffffff !important;      /* Teks putih terang agar terlihat jelas */
}

/* 17. NAV DROPDOWN MENU STYLING */
.nav-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px;
    border-radius: 50px !important;
    background: var(--primary) !important;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    cursor: pointer;
    font-family: var(--font-family) !important;
    transition: var(--transition-smooth);
}

.nav-dropdown-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow) !important;
    background: var(--primary-hover) !important;
}

.nav-dropdown-btn .caret-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav-dropdown-wrapper.open .nav-dropdown-btn .caret-icon {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
    min-width: 200px !important;
    z-index: 1000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-dropdown-wrapper.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
    transition: var(--transition-smooth);
}

.nav-dropdown-menu .nav-item:hover {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px);
}

.nav-dropdown-menu .nav-item.active {
    color: var(--primary) !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

.nav-dropdown-menu .nav-item i {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* 18. ABSENSI DASHBOARD & SPREADSHEET STYLING */
.absensi-tab-content.hide {
    display: none !important;
}

.grid-layout-absensi {
    margin-bottom: 20px;
}

.absensi-daily-main-col {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    box-sizing: border-box;
}

.absensi-daily-role-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--accent);
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Filter tombol shift di dashboard harian */
.absensi-daily-shift-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto 18px auto;
    padding: 0 8px;
}

.absensi-daily-shift-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 18, 28, 0.88);
    color: #e5e7eb;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.absensi-daily-shift-filter__btn i {
    font-size: 0.85rem;
}

.absensi-daily-shift-filter__btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.28);
}

.absensi-daily-shift-filter__btn--pagi.is-active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(120, 72, 8, 0.7));
    border-color: rgba(251, 191, 36, 0.7);
    color: #fef3c7;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--malam.is-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.38), rgba(49, 46, 129, 0.75));
    border-color: rgba(165, 180, 252, 0.7);
    color: #e0e7ff;
    box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--siang.is-active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(22, 101, 52, 0.75));
    border-color: rgba(134, 239, 172, 0.7);
    color: #dcfce7;
    box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--sore.is-active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.35), rgba(154, 52, 18, 0.75));
    border-color: rgba(253, 186, 116, 0.7);
    color: #ffedd5;
    box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--cuti.is-active {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.28), rgba(15, 46, 42, 0.78));
    border-color: rgba(110, 231, 183, 0.55);
    color: #d1fae5;
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.2), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--off.is-active {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.28), rgba(30, 41, 59, 0.82));
    border-color: rgba(203, 213, 225, 0.45);
    color: #e2e8f0;
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.18), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.absensi-daily-shift-filter__btn--half.is-active {
    background: linear-gradient(135deg, rgba(125, 176, 214, 0.32), rgba(18, 36, 54, 0.82));
    border-color: rgba(186, 214, 232, 0.5);
    color: #e8f2f8;
    box-shadow: 0 0 0 1px rgba(186, 214, 232, 0.2), 0 8px 22px rgba(0, 0, 0, 0.35);
}

#absensiDailyShiftTables.is-filtered {
    grid-template-columns: max-content !important;
    justify-content: center;
    max-width: 100% !important;
    width: fit-content;
    margin: 0 auto !important;
}

#absensiDailyShiftTables.is-filtered .absensi-daily-shift-panel {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Dashboard harian: 2×2 — lebar disamakan via JS (ikut tabel terlebar) */
.absensi-daily-role-tables {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 14px 18px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: start;
}

.absensi-daily-role-table-wrap {
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.absensi-daily-role-table-wrap .table-responsive {
    width: 100%;
}

.absensi-daily-role-empty {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 10px 10px !important;
    font-style: italic;
    background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 1100px) {
    .absensi-daily-role-tables {
        grid-template-columns: max-content;
        gap: 14px;
    }
}

.absensi-daily-role-summary {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 14px !important;
    box-sizing: border-box;
}

#absensiDailyRoleSummary.is-filtered-view {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 14px !important;
}

#absensiDailyRoleSummarySplit.is-filtered {
    grid-template-columns: 1fr !important;
    justify-content: stretch;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-daily-shift-recap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-daily-shift-recap-title {
    font-size: 0.68rem;
    margin-bottom: 8px;
    gap: 6px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-daily-role-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-role-stat {
    padding: 8px 6px;
    border-radius: 8px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-role-stat-label {
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-role-stat-value {
    font-size: 1.2rem;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-shift-total-block--compact {
    gap: 10px;
    padding-top: 10px;
    margin-top: 4px;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-shift-total-label {
    font-size: 0.64rem;
}

#absensiDailyRoleSummarySplit.is-filtered .absensi-shift-total-value--compact {
    font-size: 1.25rem;
}

/* Tabel harian: lebar mengikuti nama staff terpanjang */
.grid-layout-absensi .admin-table {
    width: max-content;
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

.grid-layout-absensi .admin-table th,
.grid-layout-absensi .admin-table td {
    padding-left: 12px !important;
    padding-right: 12px !important;
    vertical-align: middle;
}

.grid-layout-absensi .admin-table .absensi-col-name,
.grid-layout-absensi .admin-table th:first-child {
    width: auto;
    min-width: 140px;
    max-width: none;
}

.grid-layout-absensi .admin-table th.absensi-th-mobile,
.grid-layout-absensi .admin-table .absensi-col-mobile {
    width: 1%;
    white-space: nowrap;
}

.grid-layout-absensi .admin-table th.absensi-th-clock,
.grid-layout-absensi .admin-table .absensi-col-presensi {
    width: 1%;
    white-space: nowrap;
}

.grid-layout-absensi .admin-table th.absensi-th-aksi,
.grid-layout-absensi .admin-table .absensi-col-aksi {
    width: 1%;
    white-space: nowrap;
    min-width: 0;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.grid-layout-absensi .admin-table th.absensi-th-status,
.grid-layout-absensi .admin-table .absensi-col-status {
    width: 1%;
    white-space: nowrap;
    min-width: 0;
    padding-left: 10px !important;
    padding-right: 12px !important;
}

.grid-layout-absensi .admin-table .absensi-col-name,
.grid-layout-absensi .admin-table .absensi-col-name strong {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.25;
}

/* Tabel role 2×2: fleksibel, rapat, ikut nama terpanjang */
#absensiDailyShiftTables .absensi-daily-role-table-wrap .table-responsive {
    overflow: hidden !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

#absensiDailyShiftTables .absensi-daily-role-table.admin-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

#absensiDailyShiftTables .absensi-daily-role-table col.absensi-colw-name {
    width: auto !important;
}

#absensiDailyShiftTables .absensi-daily-role-table col.absensi-colw-mobile {
    width: 118px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table col.absensi-colw-clock {
    width: 118px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table col.absensi-colw-status {
    width: 124px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th,
#absensiDailyShiftTables .absensi-daily-role-table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th {
    font-size: 0.66rem !important;
    line-height: 1.2;
    text-align: center !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-name,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-name strong {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-align: left;
}

#absensiDailyShiftTables .absensi-daily-role-table th:first-child {
    text-align: center !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-name,
#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-mobile,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-mobile,
#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-clock,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-presensi,
#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-status {
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-mobile,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-mobile {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-mobile {
    white-space: normal !important;
    line-height: 1.15;
    letter-spacing: 0.04em !important;
    overflow: visible !important;
    word-break: keep-all;
    hyphens: none;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-clock,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-presensi {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-status,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-status {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

#absensiDailyShiftTables .absensi-daily-role-table th.absensi-th-name {
    width: auto !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 20px;
    flex-wrap: nowrap;
    line-height: 0;
    box-sizing: border-box;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-slot .status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
    font-size: 0.55rem !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1 !important;
    /* Optical vertical center for uppercase glyphs (extra top padding) */
    padding: 2px 8px 1px !important;
    min-width: 76px;
    height: 18px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-presensi-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-presensi-time {
    flex: 0 0 auto;
    padding: 2px 5px;
    font-size: 0.72rem;
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-edit-time {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    font-size: 0.45rem !important;
    box-sizing: border-box;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    top: 0;
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-edit-time i {
    font-size: 0.45rem !important;
    line-height: 1 !important;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-masuk {
    padding: 4px 8px !important;
    font-size: 0.66rem !important;
    white-space: nowrap;
}

#absensiDailyShiftTables .absensi-daily-role-table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem !important;
    padding: 2px 8px 1px !important;
    white-space: nowrap;
    line-height: 1 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row td,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-daily-role-empty {
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    white-space: nowrap !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-daily-role-empty {
    font-weight: 600;
    letter-spacing: normal;
}

/* —— Tabel role harian: mewah & elegan (champagne) —— */
#absensiDailyShiftTables .absensi-daily-role-tables {
    gap: 16px 20px;
}

#absensiDailyShiftTables .absensi-daily-role-table-wrap {
    position: relative;
    border-radius: 12px;
    padding: 1px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(145deg, rgba(245, 230, 184, 0.55), rgba(212, 175, 55, 0.18) 42%, rgba(120, 90, 40, 0.35) 100%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 248, 231, 0.08);
}

#absensiDailyShiftTables .absensi-daily-role-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 11px 11px 0 0;
    border-bottom: 1px solid rgba(245, 230, 184, 0.14);
}

#absensiDailyShiftTables .absensi-daily-role-title.category-divider--cs-line,
#absensiDailyShiftTables .absensi-daily-role-title.category-divider--cs-lc {
    background: linear-gradient(90deg, rgba(56, 97, 120, 0.55), rgba(28, 48, 64, 0.75));
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#absensiDailyShiftTables .absensi-daily-role-title.category-divider--kapten-kasir {
    background: linear-gradient(90deg, rgba(148, 118, 58, 0.52), rgba(72, 56, 28, 0.75));
    color: #f0e2b0;
}

#absensiDailyShiftTables .absensi-daily-role-title.category-divider--kasir {
    background: linear-gradient(90deg, rgba(120, 78, 48, 0.52), rgba(64, 40, 24, 0.75));
    color: #f0dcc4;
}

#absensiDailyShiftTables .absensi-daily-role-table-wrap .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 0 0 11px 11px !important;
    border: none !important;
    background:
        linear-gradient(168deg, rgba(28, 24, 16, 0.96) 0%, rgba(12, 10, 8, 0.98) 55%, rgba(8, 7, 6, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(245, 230, 184, 0.1),
        inset 0 0 32px rgba(0, 0, 0, 0.35) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table-wrap {
    background:
        linear-gradient(145deg, rgba(199, 210, 254, 0.42), rgba(129, 140, 248, 0.16) 45%, rgba(60, 64, 120, 0.35) 100%);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table-wrap .table-responsive {
    background:
        linear-gradient(168deg, rgba(18, 20, 40, 0.97) 0%, rgba(10, 12, 28, 0.98) 55%, rgba(6, 8, 20, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(199, 210, 254, 0.1),
        inset 0 0 32px rgba(0, 0, 0, 0.38) !important;
}

/* SHIFT SIANG — hijau emerald */
#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table-wrap {
    background:
        linear-gradient(145deg, rgba(187, 247, 208, 0.45), rgba(34, 197, 94, 0.18) 45%, rgba(20, 83, 45, 0.4) 100%);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table-wrap .table-responsive {
    background:
        linear-gradient(168deg, rgba(12, 28, 18, 0.97) 0%, rgba(8, 18, 12, 0.98) 55%, rgba(4, 12, 8, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(187, 247, 208, 0.12),
        inset 0 0 32px rgba(0, 0, 0, 0.38) !important;
}

/* SHIFT SORE — oranye warm */
#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table-wrap {
    background:
        linear-gradient(145deg, rgba(254, 215, 170, 0.48), rgba(249, 115, 22, 0.2) 45%, rgba(154, 52, 18, 0.42) 100%);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table-wrap .table-responsive {
    background:
        linear-gradient(168deg, rgba(36, 18, 8, 0.97) 0%, rgba(22, 12, 6, 0.98) 55%, rgba(12, 6, 3, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(254, 215, 170, 0.12),
        inset 0 0 32px rgba(0, 0, 0, 0.38) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table.admin-table {
    border-collapse: collapse !important;
    border-spacing: 0;
}

#absensiDailyShiftTables .absensi-daily-role-table thead th {
    position: relative;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    text-align: center !important;
    vertical-align: middle !important;
    color: #f3e6c0 !important;
    background:
        linear-gradient(180deg, rgba(72, 56, 28, 0.88) 0%, rgba(36, 28, 14, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.38) !important;
    text-shadow: none;
    box-shadow: none !important;
}

#absensiDailyShiftTables .absensi-daily-role-table thead th:first-child {
    text-align: center !important;
    border-top-left-radius: 0;
}

#absensiDailyShiftTables .absensi-daily-role-table thead th:last-child {
    border-top-right-radius: 0;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table thead th {
    color: #dce3ff !important;
    background:
        linear-gradient(180deg, rgba(48, 52, 110, 0.9) 0%, rgba(22, 24, 56, 0.96) 100%) !important;
    border-bottom-color: rgba(165, 180, 252, 0.4) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table thead th {
    color: #bbf7d0 !important;
    background:
        linear-gradient(180deg, rgba(22, 101, 52, 0.92) 0%, rgba(12, 48, 28, 0.96) 100%) !important;
    border-bottom-color: rgba(74, 222, 128, 0.45) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table thead th {
    color: #ffedd5 !important;
    background:
        linear-gradient(180deg, rgba(154, 52, 18, 0.92) 0%, rgba(78, 28, 10, 0.96) 100%) !important;
    border-bottom-color: rgba(251, 146, 60, 0.5) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table thead th:not(:last-child) {
    border-right: 1px solid rgba(245, 230, 184, 0.08);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table thead th:not(:last-child) {
    border-right-color: rgba(187, 247, 208, 0.12);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table thead th:not(:last-child) {
    border-right-color: rgba(254, 215, 170, 0.12);
}

#absensiDailyShiftTables .absensi-daily-role-table tbody td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    background: transparent !important;
    transition: background 0.18s ease;
}

#absensiDailyShiftTables .absensi-daily-role-table tbody td:not(:last-child) {
    border-right: 1px solid rgba(245, 230, 184, 0.08);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table tbody td:not(:last-child) {
    border-right-color: rgba(165, 180, 252, 0.1);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table tbody td:not(:last-child) {
    border-right-color: rgba(187, 247, 208, 0.12);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table tbody td:not(:last-child) {
    border-right-color: rgba(254, 215, 170, 0.12);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table tbody td {
    border-bottom-color: rgba(129, 140, 248, 0.12) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table tbody td {
    border-bottom-color: rgba(74, 222, 128, 0.14) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table tbody td {
    border-bottom-color: rgba(251, 146, 60, 0.14) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table tbody tr.absensi-daily-staff-row:nth-child(even) td {
    background: rgba(245, 230, 184, 0.03) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table tbody tr.absensi-daily-staff-row:nth-child(even) td {
    background: rgba(165, 180, 252, 0.04) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table tbody tr.absensi-daily-staff-row:nth-child(even) td {
    background: rgba(74, 222, 128, 0.05) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table tbody tr.absensi-daily-staff-row:nth-child(even) td {
    background: rgba(251, 146, 60, 0.05) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table tbody tr.absensi-daily-staff-row:hover td {
    background: rgba(212, 175, 55, 0.1) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table tbody tr.absensi-daily-staff-row:hover td {
    background: rgba(129, 140, 248, 0.12) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table tbody tr.absensi-daily-staff-row:hover td {
    background: rgba(34, 197, 94, 0.12) !important;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table tbody tr.absensi-daily-staff-row:hover td {
    background: rgba(249, 115, 22, 0.12) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-col-name strong {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #f8f4ea;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    border-top: none !important;
    border-bottom: 1px solid rgba(245, 230, 184, 0.14) !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row.category-divider--cs-line td {
    background: linear-gradient(90deg, rgba(56, 97, 120, 0.42), rgba(28, 48, 64, 0.62)) !important;
    color: #d7e8f2 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row.category-divider--cs-lc td {
    background: linear-gradient(90deg, rgba(92, 78, 120, 0.42), rgba(48, 40, 72, 0.62)) !important;
    color: #e8e0f4 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row.category-divider--kapten-kasir td {
    background: linear-gradient(90deg, rgba(148, 118, 58, 0.4), rgba(72, 56, 28, 0.62)) !important;
    color: #f0e2b0 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .category-divider-row.category-divider--kasir td {
    background: linear-gradient(90deg, rgba(120, 78, 48, 0.4), rgba(64, 40, 24, 0.62)) !important;
    color: #f0dcc4 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-presensi-time {
    padding: 3px 8px !important;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: linear-gradient(180deg, rgba(40, 32, 16, 0.9), rgba(16, 12, 6, 0.95));
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(245, 230, 184, 0.12);
}

#absensiDailyShiftTables .absensi-daily-shift-panel--malam .absensi-daily-role-table .absensi-presensi-time {
    border-color: rgba(165, 180, 252, 0.32);
    background: linear-gradient(180deg, rgba(36, 40, 80, 0.92), rgba(14, 16, 40, 0.96));
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.12);
    color: #c7d2fe;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--siang .absensi-daily-role-table .absensi-presensi-time {
    border-color: rgba(74, 222, 128, 0.4);
    background: linear-gradient(180deg, rgba(20, 64, 36, 0.92), rgba(8, 32, 18, 0.96));
    box-shadow: inset 0 1px 0 rgba(187, 247, 208, 0.14);
    color: #bbf7d0;
}

#absensiDailyShiftTables .absensi-daily-shift-panel--sore .absensi-daily-role-table .absensi-presensi-time {
    border-color: rgba(251, 146, 60, 0.42);
    background: linear-gradient(180deg, rgba(90, 40, 14, 0.92), rgba(42, 18, 6, 0.96));
    box-shadow: inset 0 1px 0 rgba(254, 215, 170, 0.14);
    color: #fed7aa;
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-edit-time {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: linear-gradient(180deg, rgba(56, 44, 20, 0.95), rgba(24, 18, 8, 0.98));
    color: #f6e7b0;
    box-shadow: inset 0 1px 0 rgba(245, 230, 184, 0.14);
    font-size: 0.45rem !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-edit-time:hover {
    border-color: rgba(245, 230, 184, 0.65);
    color: #fff8e7;
    background: linear-gradient(180deg, rgba(90, 70, 28, 0.98), rgba(40, 30, 12, 0.98));
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-masuk {
    border-radius: 999px !important;
    border: 1px solid rgba(212, 175, 55, 0.42) !important;
    background: linear-gradient(180deg, rgba(72, 56, 24, 0.95), rgba(32, 24, 10, 0.98)) !important;
    color: #f6e7b0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    box-shadow: inset 0 1px 0 rgba(245, 230, 184, 0.14);
}

#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-masuk:hover {
    border-color: rgba(245, 230, 184, 0.7) !important;
    color: #fff8e7 !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .status-badge.safe,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-ontime,
.grid-layout-absensi .admin-table .status-badge.safe {
    border-radius: 999px !important;
    border: 1px solid rgba(74, 222, 128, 0.65) !important;
    background: #16a34a !important;
    color: #ffffff !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .status-badge.late,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-late,
.grid-layout-absensi .admin-table .status-badge.late {
    border-radius: 999px !important;
    border: 1px solid rgba(248, 113, 113, 0.65) !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-waiting,
.grid-layout-absensi .admin-table .absensi-status-waiting {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.85) !important;
    background: #eab308 !important;
    color: #1c1917 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    line-height: 1 !important;
    padding: 2px 8px 1px !important;
    box-shadow: none !important;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-status-mobile {
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.4);
    background: linear-gradient(180deg, rgba(20, 70, 100, 0.75), rgba(10, 36, 56, 0.92));
    color: #bae6fd;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-presensi-empty {
    color: rgba(243, 230, 196, 0.35);
    font-weight: 600;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-daily-role-empty {
    color: rgba(243, 230, 196, 0.45) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    font-style: italic;
}

@media (max-width: 720px) {
    .absensi-daily-shift-filter {
        gap: 8px;
    }

    .absensi-daily-shift-filter__btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.68rem;
    }
}

.absensi-daily-role-summary-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.absensi-daily-shift-recap {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 10px;
    padding: 10px 12px;
}

.absensi-daily-shift-recap-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.absensi-daily-shift-recap-title i,
.absensi-daily-role-summary-title i {
    font-size: 0.85em;
}

.absensi-daily-shift-recap--pagi {
    background: linear-gradient(165deg, rgba(245, 158, 11, 0.2) 0%, rgba(28, 18, 6, 0.82) 55%, rgba(12, 8, 2, 0.9) 100%);
    border-color: rgba(245, 158, 11, 0.38);
    box-shadow: inset 0 1px 0 rgba(253, 230, 138, 0.12);
}

.absensi-daily-shift-recap--malam {
    background: linear-gradient(165deg, rgba(99, 102, 241, 0.22) 0%, rgba(15, 18, 42, 0.85) 55%, rgba(8, 10, 28, 0.92) 100%);
    border-color: rgba(129, 140, 248, 0.42);
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.1);
}

.absensi-daily-shift-recap--siang {
    background: linear-gradient(165deg, rgba(34, 197, 94, 0.2) 0%, rgba(12, 28, 18, 0.85) 55%, rgba(6, 16, 10, 0.92) 100%);
    border-color: rgba(74, 222, 128, 0.38);
    box-shadow: inset 0 1px 0 rgba(187, 247, 208, 0.1);
}

.absensi-daily-shift-recap--sore {
    background: linear-gradient(165deg, rgba(249, 115, 22, 0.2) 0%, rgba(36, 18, 8, 0.85) 55%, rgba(18, 8, 4, 0.92) 100%);
    border-color: rgba(251, 146, 60, 0.38);
    box-shadow: inset 0 1px 0 rgba(254, 215, 170, 0.1);
}

.absensi-daily-shift-recap--cuti {
    background: linear-gradient(165deg, rgba(52, 211, 153, 0.18) 0%, rgba(12, 28, 26, 0.88) 55%, rgba(8, 16, 18, 0.94) 100%);
    border-color: rgba(110, 231, 183, 0.35);
    box-shadow: inset 0 1px 0 rgba(167, 243, 208, 0.1);
}

.absensi-daily-shift-recap--off {
    background: linear-gradient(165deg, rgba(148, 163, 184, 0.16) 0%, rgba(18, 26, 38, 0.9) 55%, rgba(10, 14, 22, 0.94) 100%);
    border-color: rgba(203, 213, 225, 0.28);
    box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.08);
}

.absensi-daily-shift-recap--half {
    background: linear-gradient(165deg, rgba(125, 176, 214, 0.18) 0%, rgba(14, 28, 42, 0.9) 55%, rgba(8, 16, 26, 0.94) 100%);
    border-color: rgba(186, 214, 232, 0.32);
    box-shadow: inset 0 1px 0 rgba(224, 242, 254, 0.08);
}

.absensi-daily-shift-recap--pagi .absensi-daily-shift-recap-title {
    color: #fde68a;
}

.absensi-daily-shift-recap--malam .absensi-daily-shift-recap-title {
    color: #c7d2fe;
}

.absensi-daily-shift-recap--cuti .absensi-daily-shift-recap-title {
    color: #a7f3d0;
}

.absensi-daily-shift-recap--off .absensi-daily-shift-recap-title {
    color: #e2e8f0;
}

.absensi-daily-shift-recap--half .absensi-daily-shift-recap-title {
    color: #dbeafe;
}

.absensi-shift-total-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px 4px;
    text-align: center;
}

.absensi-shift-total-value {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
    color: #fff8e7;
    letter-spacing: -0.02em;
}

.absensi-daily-shift-recap--malam .absensi-shift-total-value {
    color: #e0e7ff;
}

.absensi-shift-total-label {
    margin-top: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(243, 239, 230, 0.75);
}

.absensi-shift-total-block--compact {
    flex-direction: row;
    gap: 10px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
}

.absensi-shift-total-block--compact .absensi-shift-total-label {
    margin-top: 0;
    flex: 1;
    text-align: left;
    font-size: 0.64rem;
}

.absensi-shift-total-value--compact {
    font-size: 1.25rem;
}

.absensi-daily-role-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.absensi-role-stat {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}

.absensi-role-stat-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(243, 239, 230, 0.85);
    margin-bottom: 4px;
}

.absensi-role-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff8e7;
    line-height: 1;
}

.absensi-daily-shift-recap--pagi .absensi-role-stat {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(251, 191, 36, 0.28);
}

.absensi-daily-shift-recap--malam .absensi-role-stat {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(129, 140, 248, 0.3);
}

.absensi-daily-shift-recap--malam .absensi-role-stat-value {
    color: #e0e7ff;
}

.absensi-daily-shift-recap--malam .absensi-shift-total-block--compact {
    border-top-color: rgba(129, 140, 248, 0.22);
}

/* Panel tabel harian — background berbeda pagi vs malam */
/* Panel shift harian: padding tipis agar header nempel ke tepi kartu */
#absensiDailyShiftTables .glass-card.absensi-daily-shift-panel,
.grid-layout-absensi .glass-card.absensi-daily-shift-panel {
    padding: 4px 8px 10px !important;
}

.grid-layout-absensi .glass-card.absensi-daily-shift-panel--pagi {
    background: linear-gradient(168deg, rgba(245, 158, 11, 0.14) 0%, rgba(14, 10, 4, 0.92) 42%, rgba(8, 6, 2, 0.96) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.32) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(253, 230, 138, 0.08) !important;
}

.grid-layout-absensi .glass-card.absensi-daily-shift-panel--malam {
    background: linear-gradient(168deg, rgba(99, 102, 241, 0.16) 0%, rgba(12, 14, 36, 0.92) 42%, rgba(6, 8, 22, 0.96) 100%) !important;
    border: 1px solid rgba(129, 140, 248, 0.36) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(199, 210, 254, 0.07) !important;
}

.grid-layout-absensi .glass-card.absensi-daily-shift-panel--siang {
    background: linear-gradient(168deg, rgba(34, 197, 94, 0.16) 0%, rgba(10, 24, 14, 0.92) 42%, rgba(4, 14, 8, 0.96) 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.36) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(187, 247, 208, 0.07) !important;
}

.grid-layout-absensi .glass-card.absensi-daily-shift-panel--sore {
    background: linear-gradient(168deg, rgba(249, 115, 22, 0.16) 0%, rgba(28, 14, 6, 0.92) 42%, rgba(14, 6, 2, 0.96) 100%) !important;
    border: 1px solid rgba(251, 146, 60, 0.36) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(254, 215, 170, 0.07) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .absensi-shift-header,
.grid-layout-absensi .absensi-daily-shift-panel--pagi h3 {
    color: #fbbf24;
    border-bottom-color: rgba(245, 158, 11, 0.55) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .absensi-shift-header,
.grid-layout-absensi .absensi-daily-shift-panel--malam h3 {
    color: #a5b4fc;
    border-bottom-color: rgba(129, 140, 248, 0.55) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--siang .absensi-shift-header,
.grid-layout-absensi .absensi-daily-shift-panel--siang h3 {
    color: #86efac;
    border-bottom-color: rgba(74, 222, 128, 0.55) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--sore .absensi-shift-header,
.grid-layout-absensi .absensi-daily-shift-panel--sore h3 {
    color: #fdba74;
    border-bottom-color: rgba(251, 146, 60, 0.55) !important;
}

.grid-layout-absensi .absensi-shift-hours-label {
    color: #fff8e7;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .absensi-shift-hours-label {
    color: #e0e7ff;
}

.grid-layout-absensi .absensi-daily-shift-panel--siang .absensi-shift-hours-label {
    color: #dcfce7;
}

.grid-layout-absensi .absensi-daily-shift-panel--sore .absensi-shift-hours-label {
    color: #ffedd5;
}

body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--pagi {
    background: linear-gradient(168deg, rgba(245, 158, 11, 0.14) 0%, rgba(14, 10, 4, 0.92) 42%, rgba(8, 6, 2, 0.96) 100%) !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
}

body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--malam {
    background: linear-gradient(168deg, rgba(99, 102, 241, 0.16) 0%, rgba(12, 14, 36, 0.92) 42%, rgba(6, 8, 22, 0.96) 100%) !important;
    border-color: rgba(129, 140, 248, 0.36) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .absensi-shift-header.morning {
    background: rgba(245, 158, 11, 0.08);
    padding: 12px 12px 10px;
    margin: -4px -4px 15px;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .absensi-shift-header.night {
    background: rgba(99, 102, 241, 0.1);
    padding: 12px 12px 10px;
    margin: -4px -4px 15px;
}

/* Frame tabel + border kartu — override tema emas generik */
body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--pagi:has(.table-responsive),
body[class*="theme-"] .grid-layout-absensi .glass-card.absensi-daily-shift-panel--pagi:has(.table-responsive) {
    border: 2px solid rgba(245, 158, 11, 0.48) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(253, 230, 138, 0.12) !important;
}

body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--malam:has(.table-responsive),
body[class*="theme-"] .grid-layout-absensi .glass-card.absensi-daily-shift-panel--malam:has(.table-responsive) {
    border: 2px solid rgba(129, 140, 248, 0.52) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(199, 210, 254, 0.14) !important;
}

body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--siang:has(.table-responsive),
body[class*="theme-"] .grid-layout-absensi .glass-card.absensi-daily-shift-panel--siang:has(.table-responsive),
#absensiDailyShiftTables .glass-card.absensi-daily-shift-panel--siang {
    border: 2px solid rgba(74, 222, 128, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(187, 247, 208, 0.12) !important;
}

body:not([class*="theme-"]) .grid-layout-absensi .glass-card.absensi-daily-shift-panel--sore:has(.table-responsive),
body[class*="theme-"] .grid-layout-absensi .glass-card.absensi-daily-shift-panel--sore:has(.table-responsive),
#absensiDailyShiftTables .glass-card.absensi-daily-shift-panel--sore {
    border: 2px solid rgba(251, 146, 60, 0.52) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(254, 215, 170, 0.14) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .table-responsive {
    border: 1px solid rgba(251, 191, 36, 0.42) !important;
    background: rgba(22, 15, 4, 0.62) !important;
    box-shadow: inset 0 0 24px rgba(245, 158, 11, 0.06) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .table-responsive {
    border: 1px solid rgba(129, 140, 248, 0.46) !important;
    background: rgba(12, 14, 36, 0.65) !important;
    box-shadow: inset 0 0 24px rgba(99, 102, 241, 0.08) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--siang .table-responsive {
    border: 1px solid rgba(74, 222, 128, 0.46) !important;
    background: rgba(10, 24, 14, 0.65) !important;
    box-shadow: inset 0 0 24px rgba(34, 197, 94, 0.08) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--sore .table-responsive {
    border: 1px solid rgba(251, 146, 60, 0.46) !important;
    background: rgba(28, 14, 6, 0.65) !important;
    box-shadow: inset 0 0 24px rgba(249, 115, 22, 0.08) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .admin-table th {
    background: rgba(120, 72, 8, 0.55) !important;
    color: #fde68a !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.45) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .admin-table th {
    background: rgba(55, 48, 163, 0.55) !important;
    color: #c7d2fe !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.5) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--siang .admin-table th {
    background: rgba(22, 101, 52, 0.55) !important;
    color: #bbf7d0 !important;
    border-bottom: 1px solid rgba(74, 222, 128, 0.5) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--sore .admin-table th {
    background: rgba(154, 52, 18, 0.55) !important;
    color: #fed7aa !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.5) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .admin-table td {
    border-bottom-color: rgba(251, 191, 36, 0.14) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .admin-table td {
    border-bottom-color: rgba(129, 140, 248, 0.16) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .admin-table tbody tr:hover td {
    background: rgba(245, 158, 11, 0.07) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .admin-table tbody tr:hover td {
    background: rgba(99, 102, 241, 0.09) !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--pagi .admin-table .absensi-col-presensi,
.grid-layout-absensi .absensi-daily-shift-panel--pagi .admin-table .absensi-presensi-time {
    color: #fcd34d !important;
}

.grid-layout-absensi .absensi-daily-shift-panel--malam .admin-table .absensi-col-presensi,
.grid-layout-absensi .absensi-daily-shift-panel--malam .admin-table .absensi-presensi-time {
    color: #a5b4fc !important;
}

@media (max-width: 992px) {
    .absensi-daily-role-summary-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .absensi-daily-role-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .grid-layout-absensi {
        grid-template-columns: 1fr !important;
    }
}

/* Spreadsheet Table Styling — muat 31 hari tanpa scroll horizontal */
.absensi-spreadsheet-wrapper {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--card-border-theme, var(--glass-border-focus));
    border-radius: var(--border-radius-md);
    background: linear-gradient(165deg, rgba(0, 0, 0, 0.26) 0%, var(--glass-bg) 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 231, 0.04);
}

.absensi-spreadsheet-table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 0.67rem;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.96) 0%, rgba(6, 8, 12, 0.98) 100%);
}

.absensi-spreadsheet-table th,
.absensi-spreadsheet-table td {
    padding: 5px 2px !important;
    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.absensi-spreadsheet-table th:not(:first-child):not(:nth-child(2)):not(:last-child),
.absensi-spreadsheet-table td.shift-day-col {
    white-space: nowrap;
    padding: 4px 1px !important;
    border: 1px solid rgba(212, 175, 55, 0.34) !important;
}

.absensi-spreadsheet-table th {
    background: linear-gradient(180deg, rgba(28, 32, 42, 0.98) 0%, rgba(16, 18, 26, 0.98) 100%);
    color: #f3e6c4;
    font-weight: 800;
    font-family: var(--font-family);
    text-transform: uppercase;
    font-size: 0.61rem;
    letter-spacing: 0.05em;
    min-height: 36px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.28) !important;
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.08) !important;
}

.absensi-spreadsheet-table td {
    background: linear-gradient(180deg, rgba(16, 18, 24, 0.94) 0%, rgba(11, 13, 18, 0.96) 100%);
    color: #ebe6dc;
    font-family: var(--font-family);
}

/* Kolom nama & jabatan — frame champagne soft */
.absensi-spreadsheet-table th.absensi-spreadsheet-staff-col,
.absensi-spreadsheet-table td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(48, 40, 24, 0.92) 0%, rgba(22, 24, 32, 0.96) 48%, rgba(16, 20, 28, 0.98) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.08),
        inset 0 0 0 1px rgba(212, 175, 55, 0.06) !important;
    position: relative;
    z-index: 2;
    line-height: 1.15 !important;
}

.absensi-spreadsheet-table td.absensi-spreadsheet-staff-col {
    vertical-align: middle !important;
    padding: 0 !important;
}

.absensi-spreadsheet-table tbody .absensi-spreadsheet-cell-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;
    height: 100%;
    width: 100%;
    padding: 6px 9px;
    line-height: 1.25;
}

.absensi-spreadsheet-table tbody .absensi-spreadsheet-cell-inner--left {
    justify-content: flex-start;
    text-align: left;
}

.absensi-spreadsheet-table tbody .absensi-spreadsheet-cell-inner--center {
    justify-content: center;
    text-align: center;
}

.absensi-spreadsheet-table th.absensi-spreadsheet-staff-col {
    background: linear-gradient(180deg, rgba(72, 58, 28, 0.95) 0%, rgba(36, 32, 22, 0.98) 100%) !important;
    color: #f3e4b0 !important;
    border: 1px solid rgba(212, 175, 55, 0.42) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    vertical-align: middle !important;
    letter-spacing: 0.08em !important;
    font-size: 0.62rem !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.absensi-spreadsheet-table td.absensi-spreadsheet-name-cell {
    font-weight: 700;
    text-align: left;
    padding: 0 !important;
    white-space: nowrap;
    font-size: 0.66rem;
    color: #f7f0de !important;
    letter-spacing: 0.03em;
}

.absensi-spreadsheet-table td.absensi-spreadsheet-name-cell strong {
    display: inline;
    line-height: 1.2;
    font-weight: 750;
    color: #f7f0de;
}

.absensi-spreadsheet-table th:first-child {
    text-align: left;
    padding-left: 6px !important;
    padding-right: 4px !important;
}

.absensi-spreadsheet-table th:nth-child(2) {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
    width: 1%;
}

/* Tabel Atur Jam Kerja — jangan pakai lebar kolom ke-2 spreadsheet (jabatan 1%) */
.shift-settings-table.absensi-spreadsheet-table {
    table-layout: auto;
    text-align: left;
    font-size: 0.85rem;
    min-width: 780px;
}

.shift-settings-table.absensi-spreadsheet-table th,
.shift-settings-table.absensi-spreadsheet-table td {
    padding: 10px 12px !important;
    overflow: visible;
    text-overflow: clip;
    vertical-align: middle;
}

.shift-settings-table.absensi-spreadsheet-table th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.shift-settings-table.absensi-spreadsheet-table th:nth-child(1),
.shift-settings-table.absensi-spreadsheet-table td:nth-child(1) {
    width: 100px;
    text-align: center;
}

.shift-settings-table.absensi-spreadsheet-table th:nth-child(2),
.shift-settings-table.absensi-spreadsheet-table td:nth-child(2) {
    width: auto !important;
    min-width: 140px;
    text-align: left;
    white-space: normal;
}

.shift-settings-table.absensi-spreadsheet-table th:nth-child(3),
.shift-settings-table.absensi-spreadsheet-table td:nth-child(3),
.shift-settings-table.absensi-spreadsheet-table th:nth-child(4),
.shift-settings-table.absensi-spreadsheet-table td:nth-child(4),
.shift-settings-table.absensi-spreadsheet-table th:nth-child(5),
.shift-settings-table.absensi-spreadsheet-table td:nth-child(5) {
    width: 140px;
    text-align: center;
    white-space: nowrap;
    padding: 10px 12px !important;
}

.shift-settings-table.absensi-spreadsheet-table th:last-child,
.shift-settings-table.absensi-spreadsheet-table td:last-child {
    width: 110px;
    text-align: center;
    padding: 10px 8px !important;
}

.shift-settings-table .shift-name-input {
    min-width: 120px;
    box-sizing: border-box;
}

.shift-settings-table .shift-code-input,
.shift-settings-table .shift-start-input,
.shift-settings-table .shift-cutoff-input,
.shift-settings-table .shift-end-input {
    box-sizing: border-box;
}

#absensiShiftSettingsContainer .glass-card:has(.shift-settings-table) {
    overflow: visible !important;
}

#absensiShiftSettingsContainer .shift-settings-table button,
#absensiShiftSettingsContainer .btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

.absensi-spreadsheet-table td.col-role-cell {
    padding: 0 !important;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: #e8d5a0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    word-break: normal;
    width: 1%;
}

.absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(42, 36, 22, 0.94) 0%, rgba(18, 22, 30, 0.98) 100%) !important;
}

.absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(62, 50, 28, 0.96) 0%, rgba(26, 30, 40, 0.98) 100%) !important;
    border-color: rgba(212, 175, 55, 0.48) !important;
}

.absensi-spreadsheet-table tbody tr:hover td.col-role-cell {
    color: #f6e7b4 !important;
}

.absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-name-cell,
.absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-name-cell strong {
    color: #fff6d8 !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col,
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(odd) td.absensi-spreadsheet-staff-col,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(odd) td.absensi-spreadsheet-staff-col,
body.theme-china-dynasty .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col,
body.theme-china-dynasty .absensi-spreadsheet-table tbody tr:nth-child(odd) td.absensi-spreadsheet-staff-col,
body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col,
body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:nth-child(odd) td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(48, 40, 24, 0.92) 0%, rgba(22, 24, 32, 0.96) 48%, rgba(16, 20, 28, 0.98) 100%) !important;
    border-color: rgba(212, 175, 55, 0.34) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(42, 36, 22, 0.94) 0%, rgba(18, 22, 30, 0.98) 100%) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-staff-col,
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-staff-col,
body.theme-china-dynasty .absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-staff-col,
body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(62, 50, 28, 0.96) 0%, rgba(26, 30, 40, 0.98) 100%) !important;
    border-color: rgba(212, 175, 55, 0.48) !important;
}

body.theme-china-dynasty .absensi-spreadsheet-table td.absensi-spreadsheet-staff-col,
body.theme-gold-imperial .absensi-spreadsheet-table td.absensi-spreadsheet-staff-col {
    border-bottom-color: rgba(212, 175, 55, 0.28) !important;
    border-right-color: rgba(212, 175, 55, 0.22) !important;
}

.absensi-spreadsheet-table th:last-child,
.absensi-spreadsheet-table td:last-child {
    padding: 2px !important;
}

/* Sel hari — garis grid sama dengan NAMA STAFF / JABATAN */
.absensi-spreadsheet-table .shift-cell,
.absensi-spreadsheet-table td.shift-cell.shift-pagi,
.absensi-spreadsheet-table td.shift-cell.shift-malam,
.absensi-spreadsheet-table td.shift-cell.shift-tiga,
.absensi-spreadsheet-table td.shift-cell.shift-empat,
.absensi-spreadsheet-table td.shift-cell.shift-half,
.absensi-spreadsheet-table td.shift-cell.shift-off,
.absensi-spreadsheet-table td.shift-cell.shift-cuti,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-pagi,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-malam,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-tiga,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-empat,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-half,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-off,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-cuti,
body.theme-wb .absensi-spreadsheet-table tbody td.shift-cell,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-pagi,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-malam,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-tiga,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-empat,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-half,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-off,
body.theme-wb .absensi-spreadsheet-table td.shift-cell.shift-cuti,
body.theme-black-gold .absensi-spreadsheet-table tbody td.shift-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 4px 0 !important;
    border-radius: 0 !important;
    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table .shift-cell.shift-cuti {
    font-size: 0.48rem;
    letter-spacing: 0.01em;
}

/* Shift palette — mewah & elegan (muted jewel + champagne) */
:root {
    --shift-pagi-bg: linear-gradient(180deg, rgba(56, 97, 150, 0.88) 0%, rgba(34, 64, 108, 0.92) 100%);
    --shift-pagi-border: rgba(158, 191, 228, 0.55);
    --shift-pagi-text: #eef4fb;
    --shift-pagi-hover-bg: linear-gradient(180deg, rgba(72, 118, 176, 0.95) 0%, rgba(42, 78, 128, 0.96) 100%);
    --shift-pagi-hover-border: rgba(186, 214, 242, 0.75);

    --shift-malam-bg: linear-gradient(180deg, rgba(166, 104, 52, 0.9) 0%, rgba(122, 70, 28, 0.94) 100%);
    --shift-malam-border: rgba(232, 188, 136, 0.5);
    --shift-malam-text: #fff4e8;
    --shift-malam-hover-bg: linear-gradient(180deg, rgba(184, 118, 62, 0.96) 0%, rgba(138, 82, 34, 0.97) 100%);
    --shift-malam-hover-border: rgba(242, 206, 160, 0.72);

    --shift-tiga-bg: linear-gradient(180deg, rgba(92, 78, 128, 0.9) 0%, rgba(58, 48, 88, 0.94) 100%);
    --shift-tiga-border: rgba(196, 182, 230, 0.48);
    --shift-tiga-text: #f4f0ff;
    --shift-tiga-hover-bg: linear-gradient(180deg, rgba(110, 94, 150, 0.96) 0%, rgba(72, 58, 108, 0.97) 100%);
    --shift-tiga-hover-border: rgba(214, 202, 240, 0.7);

    --shift-empat-bg: linear-gradient(180deg, rgba(120, 78, 48, 0.92) 0%, rgba(78, 48, 28, 0.95) 100%);
    --shift-empat-border: rgba(214, 176, 128, 0.48);
    --shift-empat-text: #f8ecd8;
    --shift-empat-hover-bg: linear-gradient(180deg, rgba(138, 92, 58, 0.96) 0%, rgba(92, 58, 34, 0.97) 100%);
    --shift-empat-hover-border: rgba(230, 196, 150, 0.7);

    --shift-half-bg: linear-gradient(180deg, rgba(168, 140, 72, 0.9) 0%, rgba(120, 96, 42, 0.94) 100%);
    --shift-half-border: rgba(232, 208, 140, 0.55);
    --shift-half-text: #fff8e6;
    --shift-half-hover-bg: linear-gradient(180deg, rgba(186, 156, 84, 0.96) 0%, rgba(138, 112, 50, 0.97) 100%);
    --shift-half-hover-border: rgba(244, 222, 164, 0.75);

    --shift-off-bg: linear-gradient(180deg, rgba(120, 48, 58, 0.9) 0%, rgba(78, 28, 38, 0.94) 100%);
    --shift-off-border: rgba(214, 150, 158, 0.42);
    --shift-off-text: #f8e8ea;
    --shift-off-hover-bg: linear-gradient(180deg, rgba(140, 58, 70, 0.96) 0%, rgba(92, 34, 46, 0.97) 100%);
    --shift-off-hover-border: rgba(230, 172, 180, 0.65);

    --shift-cuti-bg: linear-gradient(180deg, rgba(48, 108, 88, 0.9) 0%, rgba(28, 74, 58, 0.94) 100%);
    --shift-cuti-border: rgba(152, 204, 178, 0.48);
    --shift-cuti-text: #e8f8f0;
    --shift-cuti-hover-bg: linear-gradient(180deg, rgba(58, 128, 104, 0.96) 0%, rgba(36, 90, 70, 0.97) 100%);
    --shift-cuti-hover-border: rgba(176, 222, 196, 0.7);
}

/* Shift Cell Styles (default — tabel jadwal override di atas) */
.shift-cell {
    font-weight: 800;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    text-align: center;
    border-radius: 5px !important;
    border: 2px solid rgba(0, 0, 0, 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

/* Color Coding for Shifts — palette mewah */
.shift-pagi {
    background: var(--shift-pagi-bg) !important;
    color: var(--shift-pagi-text) !important;
    border: 1px solid var(--shift-pagi-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: none;
}

.shift-malam {
    background: var(--shift-malam-bg) !important;
    color: var(--shift-malam-text) !important;
    border: 1px solid var(--shift-malam-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: none;
}

.shift-tiga {
    background: var(--shift-tiga-bg) !important;
    color: var(--shift-tiga-text) !important;
    border: 1px solid var(--shift-tiga-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: none;
}

.shift-empat {
    background: var(--shift-empat-bg) !important;
    color: var(--shift-empat-text) !important;
    border: 1px solid var(--shift-empat-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: none;
}

.shift-half {
    background: var(--shift-half-bg) !important;
    color: var(--shift-half-text) !important;
    border: 1px solid var(--shift-half-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: none;
}

.shift-off {
    background: var(--shift-off-bg) !important;
    color: var(--shift-off-text) !important;
    border: 1px solid var(--shift-off-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    text-shadow: none;
}

.shift-cuti {
    background: var(--shift-cuti-bg) !important;
    color: var(--shift-cuti-text) !important;
    border: 1px solid var(--shift-cuti-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: none;
}

/* Spreadsheet shift grid — satu warna baris, warna shift tidak hilang saat hover */
.absensi-spreadsheet-table tbody tr:nth-child(even) td:not(.shift-cell),
.absensi-spreadsheet-table tbody tr:nth-child(odd) td:not(.shift-cell) {
    background: rgba(15, 23, 42, 0.5) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td:not(.shift-cell),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(odd) td:not(.shift-cell),
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td:not(.shift-cell),
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(odd) td:not(.shift-cell),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:nth-child(even) td:not(.shift-cell),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:nth-child(odd) td:not(.shift-cell) {
    background: rgba(15, 23, 42, 0.5) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td:not(.shift-cell),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td:not(.shift-cell),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td:not(.shift-cell) {
    background: rgba(20, 28, 48, 0.75) !important;
}

/* Hover hanya pada sel shift yang sedang di-cursor — bukan seluruh baris */
.absensi-spreadsheet-table td.shift-cell:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell:hover,
body.theme-wb .absensi-spreadsheet-table td.shift-cell:hover {
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    border-radius: 0 !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-pagi:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-pagi:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-pagi:hover {
    background: var(--shift-pagi-hover-bg) !important;
    color: var(--shift-pagi-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-malam:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-malam:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-malam:hover {
    background: var(--shift-malam-hover-bg) !important;
    color: var(--shift-malam-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-tiga:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-tiga:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-tiga:hover {
    background: var(--shift-tiga-hover-bg) !important;
    color: var(--shift-tiga-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-empat:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-empat:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-empat:hover {
    background: var(--shift-empat-hover-bg) !important;
    color: var(--shift-empat-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-half:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-half:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-half:hover {
    background: var(--shift-half-hover-bg) !important;
    color: var(--shift-half-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-off:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-off:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-off:hover {
    background: var(--shift-off-hover-bg) !important;
    color: var(--shift-off-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

.absensi-spreadsheet-table td.shift-cell.shift-cuti:hover,
body[class*="theme-"] .absensi-spreadsheet-table td.shift-cell.shift-cuti:hover,
body.theme-glass .absensi-spreadsheet-table td.shift-cell.shift-cuti:hover {
    background: var(--shift-cuti-hover-bg) !important;
    color: var(--shift-cuti-text) !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
    transform: none;
    z-index: 6;
    position: relative;
}

/* Lindungi sel shift lain saat baris di-hover (mis. hover di kolom nama) */
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover) {
    filter: none !important;
    transform: none !important;
}

/* Saat hover baris, tetap pakai garis champagne seperti NAMA STAFF / JABATAN */
.absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell:not(:hover) {
    border-color: rgba(212, 175, 55, 0.34) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-pagi:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-pagi:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-pagi:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-pagi:not(:hover) {
    background: var(--shift-pagi-bg) !important;
    color: var(--shift-pagi-text) !important;
    border-color: var(--shift-pagi-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-malam:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-malam:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-malam:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-malam:not(:hover) {
    background: var(--shift-malam-bg) !important;
    color: var(--shift-malam-text) !important;
    border-color: var(--shift-malam-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-tiga:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-tiga:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-tiga:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-tiga:not(:hover) {
    background: var(--shift-tiga-bg) !important;
    color: var(--shift-tiga-text) !important;
    border-color: var(--shift-tiga-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-empat:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-empat:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-empat:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-empat:not(:hover) {
    background: var(--shift-empat-bg) !important;
    color: var(--shift-empat-text) !important;
    border-color: var(--shift-empat-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-half:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-half:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-half:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-half:not(:hover) {
    background: var(--shift-half-bg) !important;
    color: var(--shift-half-text) !important;
    border-color: var(--shift-half-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-off:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-off:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-off:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-off:not(:hover) {
    background: var(--shift-off-bg) !important;
    color: var(--shift-off-text) !important;
    border-color: var(--shift-off-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-cuti:not(:hover),
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-cuti:not(:hover),
body.theme-glass .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-cuti:not(:hover),
body.theme-china-dynasty, body.theme-gold-imperial .absensi-spreadsheet-table tbody tr:hover td.shift-cell.shift-cuti:not(:hover) {
    background: var(--shift-cuti-bg) !important;
    color: var(--shift-cuti-text) !important;
    border-color: var(--shift-cuti-border) !important;
    box-shadow: none !important;
}

.absensi-spreadsheet-table .category-divider-row.category-divider--cs-line td,
body[class*="theme-"] .absensi-spreadsheet-table .category-divider-row.category-divider--cs-line td,
body.theme-glass .absensi-spreadsheet-table .category-divider-row.category-divider--cs-line td {
    background: linear-gradient(90deg, rgba(56, 97, 120, 0.35), rgba(28, 48, 64, 0.55)) !important;
    color: #d7e8f2 !important;
    border-color: rgba(168, 198, 214, 0.22) !important;
    letter-spacing: 0.12em !important;
}

.absensi-spreadsheet-table .category-divider-row.category-divider--cs-lc td,
body[class*="theme-"] .absensi-spreadsheet-table .category-divider-row.category-divider--cs-lc td,
body.theme-glass .absensi-spreadsheet-table .category-divider-row.category-divider--cs-lc td {
    background: linear-gradient(90deg, rgba(92, 78, 120, 0.35), rgba(48, 40, 72, 0.55)) !important;
    color: #e8e0f4 !important;
    border-color: rgba(196, 182, 220, 0.22) !important;
    letter-spacing: 0.12em !important;
}

.absensi-spreadsheet-table .category-divider-row.category-divider--kapten-kasir td,
body[class*="theme-"] .absensi-spreadsheet-table .category-divider-row.category-divider--kapten-kasir td,
body.theme-glass .absensi-spreadsheet-table .category-divider-row.category-divider--kapten-kasir td {
    background: linear-gradient(90deg, rgba(148, 118, 58, 0.32), rgba(72, 56, 28, 0.55)) !important;
    color: #f0e2b0 !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
    letter-spacing: 0.12em !important;
}

.absensi-spreadsheet-table .category-divider-row.category-divider--kasir td,
body[class*="theme-"] .absensi-spreadsheet-table .category-divider-row.category-divider--kasir td,
body.theme-glass .absensi-spreadsheet-table .category-divider-row.category-divider--kasir td {
    background: linear-gradient(90deg, rgba(120, 78, 48, 0.32), rgba(64, 40, 24, 0.55)) !important;
    color: #f0dcc4 !important;
    border-color: rgba(214, 176, 128, 0.24) !important;
    letter-spacing: 0.12em !important;
}

/* Pastikan warna shift tetap konsisten di baris genap (override tema zebra) */
body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-pagi,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-pagi {
    background: var(--shift-pagi-bg) !important;
    color: var(--shift-pagi-text) !important;
    border-color: var(--shift-pagi-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-malam,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-malam {
    background: var(--shift-malam-bg) !important;
    color: var(--shift-malam-text) !important;
    border-color: var(--shift-malam-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-tiga,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-tiga {
    background: var(--shift-tiga-bg) !important;
    color: var(--shift-tiga-text) !important;
    border-color: var(--shift-tiga-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-empat,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-empat {
    background: var(--shift-empat-bg) !important;
    color: var(--shift-empat-text) !important;
    border-color: var(--shift-empat-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-half,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-half {
    background: var(--shift-half-bg) !important;
    color: var(--shift-half-text) !important;
    border-color: var(--shift-half-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-off,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-off {
    background: var(--shift-off-bg) !important;
    color: var(--shift-off-text) !important;
    border-color: var(--shift-off-border) !important;
}

body[class*="theme-"] .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-cuti,
body.theme-glass .absensi-spreadsheet-table tbody tr:nth-child(even) td.shift-cell.shift-cuti {
    background: var(--shift-cuti-bg) !important;
    color: var(--shift-cuti-text) !important;
    border-color: var(--shift-cuti-border) !important;
}

/* Edit Shift Pertanggal */
.edit-shift-pertanggal-card {
    padding: 20px 22px;
}

.edit-shift-pertanggal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.edit-shift-pertanggal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
}

.edit-shift-pertanggal-title i {
    color: #22d3ee;
    margin-right: 8px;
}

.edit-shift-date-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-shift-date-btn {
    border-radius: 10px !important;
    padding: 8px 12px !important;
}

.edit-shift-date-display-wrap {
    position: relative;
    text-align: center;
    min-width: 220px;
}

.edit-shift-date-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #22d3ee;
    margin-bottom: 4px;
}

.edit-shift-date-input-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.edit-shift-date-display {
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    cursor: pointer;
}

.edit-shift-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.edit-shift-filter-input {
    flex: 1;
    min-width: 200px;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
}

.edit-shift-filter-select {
    width: auto;
    min-width: 160px;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
}

.edit-shift-table-wrap {
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.edit-shift-pertanggal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.edit-shift-pertanggal-table thead th {
    background: rgba(8, 47, 73, 0.85);
    color: #22d3ee;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.25);
    white-space: nowrap;
}

.edit-shift-pertanggal-table tbody td {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
    color: #e2e8f0;
}

.edit-shift-pertanggal-table tbody tr:last-child td {
    border-bottom: none;
}

.edit-shift-pertanggal-table tbody tr:hover td:not(.edit-shift-quick-cell) {
    background: rgba(255, 255, 255, 0.02);
}

.edit-shift-no {
    width: 48px;
    text-align: center;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}

.edit-shift-staff-name {
    display: block;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    color: #fff;
    text-transform: uppercase;
}

.edit-shift-staff-role {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #22d3ee;
    text-transform: uppercase;
}

.edit-shift-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 1px solid rgba(59, 130, 246, 0.45);
    background: rgba(15, 23, 42, 0.85);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.12);
}

.edit-shift-badge.shift-pagi { border-color: var(--shift-pagi-border); color: var(--shift-pagi-text); background: var(--shift-pagi-bg); }
.edit-shift-badge.shift-malam { border-color: var(--shift-malam-border); color: var(--shift-malam-text); background: var(--shift-malam-bg); }
.edit-shift-badge.shift-tiga { border-color: var(--shift-tiga-border); color: var(--shift-tiga-text); background: var(--shift-tiga-bg); }
.edit-shift-badge.shift-empat { border-color: var(--shift-empat-border); color: var(--shift-empat-text); background: var(--shift-empat-bg); }
.edit-shift-badge.shift-half { border-color: var(--shift-half-border); color: var(--shift-half-text); background: var(--shift-half-bg); }
.edit-shift-badge.shift-off { border-color: var(--shift-off-border); color: var(--shift-off-text); background: var(--shift-off-bg); }
.edit-shift-badge.shift-cuti { border-color: var(--shift-cuti-border); color: var(--shift-cuti-text); background: var(--shift-cuti-bg); }

.edit-shift-quick-cell {
    white-space: nowrap;
}

.edit-shift-quick-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.edit-shift-quick-btn {
    min-width: 42px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.75);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}

.edit-shift-quick-btn:hover {
    border-color: rgba(59, 130, 246, 0.45);
    color: #fff;
    background: rgba(30, 58, 138, 0.35);
}

.edit-shift-quick-btn.active {
    border-color: var(--shift-pagi-hover-border);
    background: var(--shift-pagi-hover-bg);
    color: var(--shift-pagi-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.edit-shift-delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(15, 23, 42, 0.75);
    color: rgba(248, 113, 113, 0.85);
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-shift-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
}

.absensi-shift-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--border-radius-md);
    padding: 4px 12px 6px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--accent);
    min-height: 0;
}

.absensi-shift-header__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: fit-content;
    max-width: calc(100% - 110px);
    margin-left: auto;
    margin-right: auto;
    gap: 1px;
    position: relative;
    z-index: 1;
}

.absensi-shift-header__main h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.absensi-shift-header__main h3 i {
    margin: 0;
    font-size: 1.05em;
}

.absensi-shift-cutoff-label {
    display: block;
    margin-top: 0;
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
}

.absensi-shift-header .absensi-shift-hours-label {
    display: block;
    margin-top: 0;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    line-height: 1.15;
}

.absensi-shift-header .absensi-present-count {
    position: absolute;
    right: 8px;
    bottom: 5px;
    top: auto;
    font-size: 0.65rem;
    padding: 2px 8px;
    z-index: 2;
}

.grid-layout-absensi .admin-table th:nth-child(2),
.grid-layout-absensi .admin-table td:nth-child(2),
.grid-layout-absensi .admin-table th:nth-child(3),
.grid-layout-absensi .admin-table td:nth-child(3),
.grid-layout-absensi .admin-table th:nth-child(4),
.grid-layout-absensi .admin-table td:nth-child(4),
.grid-layout-absensi .admin-table th:nth-child(5),
.grid-layout-absensi .admin-table td:nth-child(5) {
    text-align: center;
    vertical-align: middle;
}

.grid-layout-absensi .admin-table th.absensi-th-mobile {
    text-align: center !important;
    vertical-align: middle;
    white-space: nowrap !important;
    line-height: 1.2;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.grid-layout-absensi .admin-table .absensi-col-mobile {
    text-align: center !important;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.25;
}

.grid-layout-absensi .admin-table th.absensi-th-clock,
.grid-layout-absensi .admin-table .absensi-col-presensi {
    white-space: nowrap;
    text-align: center !important;
}

.grid-layout-absensi .admin-table th.absensi-th-aksi,
.grid-layout-absensi .admin-table .absensi-col-aksi {
    white-space: nowrap;
    text-align: center !important;
    vertical-align: middle;
}

.grid-layout-absensi .admin-table th.absensi-th-status,
.grid-layout-absensi .admin-table .absensi-col-status {
    text-align: center !important;
    white-space: nowrap;
    vertical-align: middle;
}

.grid-layout-absensi .admin-table .absensi-col-name {
    text-align: left;
    font-size: 0.8rem;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.grid-layout-absensi .admin-table .absensi-col-name strong {
    display: inline;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: normal;
}

.grid-layout-absensi .admin-table .absensi-col-presensi {
    text-align: center;
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

.grid-layout-absensi .admin-table .absensi-col-mobile {
    text-align: center;
    white-space: nowrap;
}

.grid-layout-absensi .admin-table .absensi-mobile-time {
    color: #38bdf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    font-size: 0.82rem;
}

.grid-layout-absensi .admin-table .absensi-presensi-time {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
}

.grid-layout-absensi .admin-table .absensi-presensi-empty {
    color: var(--text-muted);
    font-weight: 600;
}

.grid-layout-absensi .admin-table .absensi-presensi-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.grid-layout-absensi .admin-table .btn-absensi-edit-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: #fde68a;
    cursor: pointer;
    font-size: 0.58rem;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.grid-layout-absensi .admin-table .btn-absensi-edit-time i {
    font-size: 0.58rem;
}

.grid-layout-absensi .admin-table .btn-absensi-edit-time:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.55);
    color: #fff8e7;
}

.grid-layout-absensi .admin-table .absensi-manual-time-edit,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-manual-time-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 110px;
    margin: 0 auto;
    box-sizing: border-box;
}

#absensiDailyShiftTables .absensi-daily-role-table .absensi-manual-time-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.grid-layout-absensi .admin-table .absensi-manual-time-input,
#absensiDailyShiftTables .absensi-daily-role-table .absensi-manual-time-input {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(0, 0, 0, 0.45);
    color: #fff8e7;
    width: 100%;
    min-width: 0;
    max-width: 108px;
    box-sizing: border-box;
}

.grid-layout-absensi .admin-table .btn-absensi-time-save,
.grid-layout-absensi .admin-table .btn-absensi-time-clear,
.grid-layout-absensi .admin-table .btn-absensi-time-cancel,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-save,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-clear,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    color: #f3efe6;
    flex: 0 0 auto;
}

.grid-layout-absensi .admin-table .btn-absensi-time-save,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-save {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.grid-layout-absensi .admin-table .btn-absensi-time-save:hover,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-save:hover {
    border-color: rgba(52, 211, 153, 0.85);
    background: rgba(16, 185, 129, 0.32);
    color: #a7f3d0;
}

.grid-layout-absensi .admin-table .btn-absensi-time-clear,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-clear {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.grid-layout-absensi .admin-table .btn-absensi-time-clear:hover,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-clear:hover {
    border-color: rgba(248, 113, 113, 0.85);
    background: rgba(239, 68, 68, 0.32);
    color: #fecaca;
}

.grid-layout-absensi .admin-table .btn-absensi-time-cancel,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-cancel {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.grid-layout-absensi .admin-table .btn-absensi-time-cancel:hover,
#absensiDailyShiftTables .absensi-daily-role-table .btn-absensi-time-cancel:hover {
    border-color: rgba(203, 213, 225, 0.65);
    background: rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}

.grid-layout-absensi .admin-table .btn-absensi-masuk {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    box-sizing: border-box;
}

.grid-layout-absensi .admin-table .absensi-col-status .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0;
}

.grid-layout-absensi .admin-table .absensi-status-waiting {
    background: #eab308 !important;
    color: #1c1917 !important;
    border: 1px solid rgba(250, 204, 21, 0.85) !important;
}

.grid-layout-absensi .admin-table .absensi-status-mobile {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

/* Category Dividers for Daily Attendance & tables */
.category-divider-row td {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800 !important;
    font-family: var(--font-family, 'Outfit', sans-serif);
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
}

.category-divider-row.category-divider--default td {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #cbd5e1 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    text-shadow: none;
}

.category-divider-row.category-divider--cs-line td {
    background: rgba(8, 145, 178, 0.22) !important;
    color: #a5f3fc !important;
    border-top: 1px solid rgba(34, 211, 238, 0.35) !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.35) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.category-divider-row.category-divider--cs-lc td {
    background: rgba(109, 40, 217, 0.22) !important;
    color: #e9d5ff !important;
    border-top: 1px solid rgba(167, 139, 250, 0.38) !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.category-divider-row.category-divider--kapten-kasir td {
    background: rgba(161, 98, 7, 0.24) !important;
    color: #fde68a !important;
    border-top: 1px solid rgba(212, 175, 55, 0.42) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.42) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.category-divider-row.category-divider--kasir td {
    background: rgba(194, 65, 12, 0.24) !important;
    color: #fed7aa !important;
    border-top: 1px solid rgba(251, 146, 60, 0.4) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.grid-layout-absensi .category-divider-row td {
    font-size: 0.72rem;
    padding: 6px 10px !important;
}

.absensi-spreadsheet-table .category-divider-row td {
    font-size: 0.68rem;
    padding: 8px 10px !important;
}

/* 18b. SERAH TERIMA — warna berbeda per divisi */
.st-view--cs-line {
    --st-rgb: 34, 211, 238;
    --st-accent: #22d3ee;
    --st-accent-soft: #67e8f9;
    --st-btn-from: #06b6d4;
    --st-btn-to: #0891b2;
}

.st-view--kapten {
    --st-rgb: 251, 191, 36;
    --st-accent: #fbbf24;
    --st-accent-soft: #fde68a;
    --st-btn-from: #f59e0b;
    --st-btn-to: #d97706;
}

.st-view--kasir {
    --st-rgb: 52, 211, 153;
    --st-accent: #34d399;
    --st-accent-soft: #a7f3d0;
    --st-btn-from: #10b981;
    --st-btn-to: #059669;
}

.st-view-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 14px;
}

.st-view-topbar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.st-date-today-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: linear-gradient(165deg, rgba(245, 158, 11, 0.18) 0%, rgba(120, 72, 8, 0.55) 100%);
    color: #fde68a;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 231, 0.1);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.st-date-today-btn:hover {
    border-color: rgba(253, 230, 138, 0.55);
    background: linear-gradient(165deg, rgba(245, 158, 11, 0.28) 0%, rgba(146, 88, 12, 0.7) 100%);
    color: #fff8e7;
}

.st-filter-info {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
}

.st-view .st-date-filter.bukti-date-filter {
    /* ikut aksen view (CSS var --st-rgb) */
    background: linear-gradient(
        165deg,
        rgba(var(--st-rgb), 0.18) 0%,
        rgba(10, 14, 22, 0.92) 55%,
        rgba(6, 8, 12, 0.96) 100%
    );
    border-color: rgba(var(--st-rgb), 0.4);
}

.st-view .st-date-filter .bukti-date-filter__icon {
    background: linear-gradient(145deg, rgba(var(--st-rgb), 0.3), rgba(var(--st-rgb), 0.12));
    border-color: rgba(var(--st-rgb), 0.42);
    color: rgb(var(--st-rgb));
}

.st-view .st-date-filter .bukti-date-filter__text,
.st-view .st-date-filter .bukti-date-filter__cal {
    color: rgba(255, 255, 255, 0.78);
}

.st-view .st-date-filter .bukti-date-filter__field {
    border-color: rgba(var(--st-rgb), 0.3);
}

.st-view .st-date-filter .bukti-date-filter__cal:hover {
    background: rgba(var(--st-rgb), 0.16);
    color: #ffffff;
}

.st-view-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-view-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(var(--st-rgb), 0.22), rgba(var(--st-rgb), 0.08));
    border: 1px solid rgba(var(--st-rgb), 0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-accent);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.st-view-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    margin: 0;
}

.st-view-subtitle {
    font-size: 0.72rem;
    color: rgba(var(--st-rgb), 0.75);
    margin: 3px 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.st-btn-add {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-weight: 700;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--st-btn-from), var(--st-btn-to));
    border: none;
}

/* Serah Terima — SHIFT PAGI / MALAM: tombol terpisah di tengah */
.st-shift-tabs,
.absensi-tab-menu.st-shift-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.st-shift-tab,
.absensi-tab-menu.st-shift-tabs .st-shift-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 158px;
    min-height: 42px;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* SHIFT PAGI — emas / champagne */
.st-shift-tab--pagi,
.absensi-tab-menu.st-shift-tabs .st-shift-tab--pagi {
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.22) 0%, rgba(90, 62, 14, 0.72) 100%) !important;
    border: 1px solid rgba(245, 230, 184, 0.38) !important;
    color: #fde68a !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 248, 231, 0.12) !important;
}

.st-shift-tab--pagi .st-tab-icon--pagi {
    color: #fbbf24 !important;
    margin-right: 0;
}

.st-shift-tab--pagi:hover {
    color: #fff8e7 !important;
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.34) 0%, rgba(120, 82, 18, 0.82) 100%) !important;
    border-color: rgba(245, 230, 184, 0.55) !important;
}

.st-shift-tab--pagi.active,
.st-shift-tab--pagi.active:hover {
    background: linear-gradient(165deg, rgba(245, 230, 184, 0.42) 0%, rgba(184, 134, 11, 0.78) 45%, rgba(90, 55, 8, 0.95) 100%) !important;
    border-color: rgba(253, 230, 138, 0.75) !important;
    color: #fff8e7 !important;
    box-shadow:
        0 8px 22px rgba(212, 175, 55, 0.28),
        inset 0 1px 0 rgba(255, 248, 231, 0.28) !important;
}

.st-shift-tab--pagi.active .st-tab-icon--pagi {
    color: #fef3c7 !important;
}

/* SHIFT MALAM — indigo */
.st-shift-tab--malam,
.absensi-tab-menu.st-shift-tabs .st-shift-tab--malam {
    background: linear-gradient(165deg, rgba(129, 140, 248, 0.22) 0%, rgba(40, 38, 100, 0.78) 100%) !important;
    border: 1px solid rgba(199, 210, 254, 0.35) !important;
    color: #c7d2fe !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(199, 210, 254, 0.12) !important;
}

.st-shift-tab--malam .st-tab-icon--malam {
    color: #a5b4fc !important;
    margin-right: 0;
}

.st-shift-tab--malam:hover {
    color: #e0e7ff !important;
    background: linear-gradient(165deg, rgba(129, 140, 248, 0.34) 0%, rgba(55, 48, 140, 0.88) 100%) !important;
    border-color: rgba(199, 210, 254, 0.55) !important;
}

.st-shift-tab--malam.active,
.st-shift-tab--malam.active:hover {
    background: linear-gradient(165deg, rgba(165, 180, 252, 0.4) 0%, rgba(79, 70, 229, 0.72) 45%, rgba(30, 27, 75, 0.96) 100%) !important;
    border-color: rgba(199, 210, 254, 0.7) !important;
    color: #eef2ff !important;
    box-shadow:
        0 8px 22px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(199, 210, 254, 0.25) !important;
}

.st-shift-tab--malam.active .st-tab-icon--malam {
    color: #e0e7ff !important;
}

body.theme-wb .absensi-tab-menu.st-shift-tabs,
body.theme-black-gold .absensi-tab-menu.st-shift-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-black-gold .st-shift-tab--pagi.active,
body.theme-black-gold .st-shift-tab--pagi.active:hover {
    color: #0d0d0d !important;
    background: linear-gradient(135deg, #f5e6b8 0%, #f5d76e 45%, #d4af37 100%) !important;
    border-color: transparent !important;
}

body.theme-black-gold .st-shift-tab--pagi.active .st-tab-icon--pagi {
    color: #3f2e0a !important;
}

body.theme-black-gold .st-shift-tab--malam.active,
body.theme-black-gold .st-shift-tab--malam.active:hover {
    color: #eef2ff !important;
    background: linear-gradient(165deg, rgba(165, 180, 252, 0.45) 0%, rgba(67, 56, 202, 0.85) 100%) !important;
    border-color: rgba(199, 210, 254, 0.55) !important;
}

.st-card {
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid rgba(var(--st-rgb), 0.22) !important;
}

.st-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(var(--st-rgb), 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--st-rgb), 0.06);
}

.st-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.st-card-header--pagi {
    background: rgba(245, 158, 11, 0.06);
    border-bottom-color: rgba(245, 158, 11, 0.2);
}

.st-card-header--pagi .st-card-shift-icon {
    color: #f59e0b;
}

.st-card-header--malam {
    background: rgba(129, 140, 248, 0.06);
    border-bottom-color: rgba(129, 140, 248, 0.2);
}

.st-card-header--malam .st-card-shift-icon {
    color: #818cf8;
}

.st-record-badge {
    background: rgba(var(--st-rgb), 0.14);
    color: var(--st-accent-soft);
    margin-left: auto;
}

.st-table-head {
    background: rgba(var(--st-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--st-rgb), 0.2);
}

.st-table-head th {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.st-table-head th:last-child {
    text-align: center;
}

#btnSerahTerimaCSLine.active {
    background: rgba(34, 211, 238, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.28) !important;
}

#btnSerahTerimaCSLine.active i {
    color: #22d3ee !important;
}

#btnSerahTerimaKapten.active {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.28) !important;
}

#btnSerahTerimaKapten.active i {
    color: #fbbf24 !important;
}

#btnSerahTerimaKasir.active {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

#btnSerahTerimaKasir.active i {
    color: #34d399 !important;
}

/* 19. PASPOR — Petugas Picker (selaras tema dashboard / CSS variables) */
.paspor-header-actions {
    display: flex;
    gap: 18px;
    align-items: flex-end;
}

.paspor-petugas-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 280px;
}

.paspor-petugas-field__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.paspor-petugas-picker {
    position: relative;
    width: 100%;
}

.paspor-petugas-picker__native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

.paspor-petugas-picker__trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid var(--card-border-theme, var(--glass-border));
    border-radius: var(--border-radius-md);
    background: var(--glass-bg);
    box-shadow:
        var(--shadow-premium),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.paspor-petugas-picker__trigger:hover {
    border-color: var(--glass-border-focus);
    background: var(--glass-bg-hover);
    box-shadow:
        var(--shadow-glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.paspor-petugas-picker.is-open .paspor-petugas-picker__trigger,
.paspor-petugas-picker__trigger:focus-visible {
    outline: none;
    border-color: var(--glass-border-focus);
    background: var(--glass-bg-hover);
    box-shadow:
        0 0 0 3px var(--glass-tint),
        var(--shadow-glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.paspor-petugas-picker__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    color: var(--accent);
    flex-shrink: 0;
    font-size: 0.82rem;
}

.paspor-petugas-picker__value {
    flex: 1;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-subtle);
}

.paspor-petugas-picker--has-value .paspor-petugas-picker__value,
.paspor-petugas-picker--manual .paspor-petugas-picker__value {
    color: var(--text-main);
}

.paspor-petugas-picker__chevron {
    font-size: 0.72rem;
    color: var(--primary);
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}

.paspor-petugas-picker.is-open .paspor-petugas-picker__chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.paspor-petugas-picker__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 120;
    padding: 8px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--card-border-theme, var(--glass-border));
    background: var(--glass-bg);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-glow) rgba(255, 255, 255, 0.04);
}

.paspor-petugas-picker__menu::-webkit-scrollbar {
    width: 6px;
}

.paspor-petugas-picker__menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.paspor-petugas-picker__menu::-webkit-scrollbar-thumb {
    background: var(--primary-glow);
    border-radius: 8px;
}

.paspor-petugas-picker__menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.paspor-petugas-picker__menu.hide {
    display: none;
}

.paspor-petugas-picker__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.15s ease;
}

.paspor-petugas-picker__option:hover {
    background: var(--glass-tint);
    color: var(--text-main);
    box-shadow: inset 3px 0 0 var(--primary);
}

.paspor-petugas-picker__option.is-selected {
    background: var(--glass-tint);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--primary);
}

.paspor-petugas-picker__option--placeholder {
    color: var(--text-subtle);
    font-weight: 500;
}

.paspor-petugas-picker__option--manual {
    margin-top: 4px;
    border-top: 1px solid var(--glass-border);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    padding-top: 14px;
    color: var(--primary);
}

.paspor-petugas-picker__option--manual i {
    font-size: 0.78rem;
    opacity: 0.95;
    color: var(--primary);
}

.paspor-petugas-picker__option--manual:hover {
    background: var(--glass-tint);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--primary);
}

.paspor-petugas-manual {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--card-border-theme, var(--glass-border));
    background: var(--glass-bg);
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 600;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paspor-petugas-manual:focus {
    border-color: var(--glass-border-focus);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.paspor-petugas-manual.hide {
    display: none;
}

/* Legacy search-box (used elsewhere) */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    transition: var(--transition-smooth) !important;
}
.search-box:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px var(--primary-glow) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.search-box i:first-of-type {
    color: var(--text-muted) !important;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
}
.search-box select,
.search-box input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    outline: none !important;
    font-size: 0.85rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.search-box select {
    padding-right: 20px !important;
    cursor: pointer !important;
}
.search-box select option {
    background: #0f172a !important;
    color: var(--text-main) !important;
}
.search-box .fa-chevron-down {
    position: absolute !important;
    right: 12px !important;
    margin-right: 0 !important;
    pointer-events: none !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem !important;
}

/* Paspor filter toolbar refinement */
.paspor-filter-shell {
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    padding: 14px 16px !important;
    border-radius: 14px !important;
}

.paspor-filter-top-row {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.paspor-search-box {
    min-width: 320px;
    height: 38px;
    margin-right: auto;
}

.paspor-role-filter,
.paspor-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Hilangkan garis panjang / kotak wrapper di belakang tombol role paspor */
#pasporRoleFilter,
body.theme-wb #pasporRoleFilter,
body.theme-black-gold #pasporRoleFilter,
body[class*="theme-"] #pasporRoleFilter {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.paspor-role-filter .btn.btn-tab,
.paspor-status-filter .btn.btn-tab {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.71rem;
    letter-spacing: 0.4px;
    white-space: nowrap;
    line-height: 1.2;
    border-radius: 9px;
}

.paspor-status-filter {
    width: 100%;
    min-height: 42px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 2px;
    box-shadow: none !important;
}

#pasporShiftTabs {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#pasporShiftTabs .btn.btn-tab {
    min-height: 38px;
    min-width: 152px;
    padding: 8px 18px;
    border-radius: 11px;
    white-space: nowrap;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.35px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(145deg, rgba(30, 38, 52, 0.8) 0%, rgba(20, 28, 40, 0.78) 100%) !important;
    color: rgba(241, 245, 249, 0.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 10px rgba(0,0,0,0.22) !important;
    transition: all 0.22s ease !important;
}

#pasporShiftTabs .btn.btn-tab:hover {
    border-color: var(--glass-border-focus) !important;
    color: var(--text-main) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 16px rgba(0,0,0,0.3), 0 0 12px var(--glass-tint) !important;
}

#pasporShiftTabs .btn.btn-tab.active {
    color: #111827 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 52%, var(--accent) 100%) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.32), 0 0 18px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* Pastikan ikon shift selalu terlihat jelas */
#pasporShiftTabs .btn.btn-tab i {
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.28));
}

#pasporShiftTabs .btn.btn-tab .paspor-shift-icon-pagi {
    color: #fbbf24 !important;
}

#pasporShiftTabs .btn.btn-tab .paspor-shift-icon-malam {
    color: #a5b4fc !important;
}

#pasporShiftTabs .btn.btn-tab.active .paspor-shift-icon-pagi,
#pasporShiftTabs .btn.btn-tab.active .paspor-shift-icon-malam {
    color: #111827 !important;
}

/* 20. PREMIUM IZIN & ABSENSI TAB MENU STYLING */
/* (base + override digabung di bawah) */

/* Semua wrapper tab: tanpa pita/garis panjang di belakang tombol */
.absensi-tab-menu,
.jd-shift-selector,
.filter-group {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Izin + Absensi tabs: frame per tombol + posisi tengah (tanpa garis panjang luar) */
#izinTabMenu,
#absensiTabMenu {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 28px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

#izinTabMenu .btn-tab,
#absensiTabMenu .btn-tab {
    background: linear-gradient(155deg, rgba(18, 26, 40, 0.92) 0%, rgba(10, 14, 24, 0.88) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    outline: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
    padding: 10px 18px !important;
    font-family: var(--font-family) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#izinTabMenu .btn-tab:hover,
#absensiTabMenu .btn-tab:hover {
    color: #fff !important;
    background: linear-gradient(155deg, rgba(28, 40, 58, 0.95) 0%, rgba(14, 20, 32, 0.92) 100%) !important;
    border-color: rgba(125, 211, 252, 0.4) !important;
    transform: none !important;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(56, 189, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Active State: Izin Tab (Gold Luxe) */
#izinTabMenu .btn-tab.active {
    color: #fff8e7 !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.28) 0%, rgba(197, 160, 89, 0.14) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    box-shadow:
        0 4px 16px rgba(212, 175, 55, 0.2),
        0 0 14px rgba(212, 175, 55, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Active State: Absensi Tab (Teal Accent) */
#absensiTabMenu .btn-tab.active {
    color: #99f6e4 !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(13, 148, 136, 0.14) 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.55) !important;
    box-shadow:
        0 4px 16px rgba(20, 184, 166, 0.22),
        0 0 14px rgba(20, 184, 166, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Tema WB — tab menu tanpa garis panjang luar */
body.theme-wb #izinTabMenu,
body.theme-wb #absensiTabMenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-wb .absensi-tab-menu:not(#buktiTabMenu):not(.st-shift-tabs):not(#izinTabMenu):not(#absensiTabMenu):not(#pasporRoleFilter) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-wb #izinTabMenu .btn-tab,
body.theme-wb #absensiTabMenu .btn-tab {
    color: rgba(242, 245, 248, 0.78) !important;
    background: linear-gradient(155deg, rgba(20, 32, 44, 0.95) 0%, rgba(12, 20, 28, 0.92) 100%) !important;
    border: 1px solid rgba(142, 196, 220, 0.28) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.theme-wb #izinTabMenu .btn-tab:hover,
body.theme-wb #absensiTabMenu .btn-tab:hover {
    color: #f2f5f8 !important;
    background: linear-gradient(155deg, rgba(28, 44, 58, 0.98) 0%, rgba(16, 28, 38, 0.95) 100%) !important;
    border-color: rgba(142, 196, 220, 0.5) !important;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(142, 196, 220, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-wb #izinTabMenu .btn-tab.active {
    color: #e8efc4 !important;
    background: linear-gradient(135deg, rgba(201, 211, 106, 0.28) 0%, rgba(142, 196, 220, 0.14) 100%) !important;
    border: 1px solid rgba(201, 211, 106, 0.55) !important;
    box-shadow:
        0 4px 14px rgba(201, 211, 106, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-wb #absensiTabMenu .btn-tab.active {
    color: #b8dff0 !important;
    background: linear-gradient(135deg, rgba(142, 196, 220, 0.28) 0%, rgba(201, 211, 106, 0.12) 100%) !important;
    border: 1px solid rgba(142, 196, 220, 0.55) !important;
    box-shadow:
        0 4px 14px rgba(142, 196, 220, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Kuota Istirahat — quick filter buttons */
#quotaView .quota-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#quotaView .quota-filter-btn:hover,
#quotaView .quota-filter-btn.active {
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fecaca;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18), 0 6px 16px rgba(239, 68, 68, 0.22);
}

#quotaView .quota-filter-btn i {
    font-size: 0.75rem;
}

#quotaView .quota-staff-card .quota-card-badge {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

#quotaView .quota-staff-card .quota-card-badge--warn {
    background: rgba(234, 179, 8, 0.22);
    color: #facc15;
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2);
}

#quotaView .quota-staff-card .quota-card-badge--safe {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

#quotaView .quota-staff-card .quota-card-onbreak {
    background: rgba(168, 85, 247, 0.22);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.45);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#quotaView .quota-staff-card .quota-card-progress-fill {
    transition: none;
}

/* 21. PAGE HEADERS SPACING STYLING */
.monitor-header {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.monitor-header h2 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: var(--text-main) !important;
    margin: 0 !important;
}

/* 22. PREMIUM STAFF PORTAL CONSOLE STYLING — ULTRA LUXURY */
.staff-console-card {
    position: relative !important;
    isolation: isolate !important;
    background: linear-gradient(
        160deg,
        rgba(255,255,255,0.09) 0%,
        rgba(20,30,60,0.60) 30%,
        rgba(10,16,35,0.75) 70%,
        rgba(5,10,25,0.80) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-top: 1px solid rgba(255,255,255,0.28) !important;
    border-left: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(44px) saturate(200%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(1.05) !important;
    box-shadow:
        0 40px 100px rgba(0,0,0,0.65),
        0 16px 40px rgba(0,0,0,0.35),
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 -1px 0 rgba(139,92,246,0.08) inset !important;
    padding: 24px 36px !important;
    border-radius: 32px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transform: translateY(0) translateZ(0) !important;
    transition: box-shadow 0.4s ease,
                border-color 0.35s ease,
                background 0.4s ease !important;
    animation: none !important;
}

/* Inner gradient glow overlay */
.staff-console-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(139,92,246,0.08) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 50% 100%,
        rgba(34,211,238,0.06) 0%,
        transparent 50%
    ),
    linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0%,
        transparent 40%,
        rgba(139,92,246,0.03) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Particle mesh background — dinonaktifkan untuk performa, pakai static gradient */
.staff-console-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(251,191,36,0.04) 0%, transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(139,92,246,0.05) 0%, transparent 22%),
        radial-gradient(circle at 35% 70%, rgba(34,211,238,0.04) 0%, transparent 18%),
        radial-gradient(circle at 75% 85%, rgba(251,191,36,0.03) 0%, transparent 16%),
        radial-gradient(circle at 15% 88%, rgba(168,85,247,0.04) 0%, transparent 19%);
    /* particleDrift dihapus — GPU layer hemat tanpa animasi background-position */
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

@keyframes particleDrift {
    0% {
        background-position: 0% 0%, 100% 0%, 30% 70%, 80% 90%, 10% 85%;
    }
    100% {
        background-position: 10% 8%, 90% 12%, 40% 65%, 70% 95%, 20% 80%;
    }
}

.staff-console-card:hover {
    transform: none !important;
    border-color: rgba(255,255,255,0.28) !important;
    border-top-color: rgba(255,255,255,0.45) !important;
    box-shadow:
        0 60px 130px rgba(0,0,0,0.72),
        0 24px 60px rgba(0,0,0,0.40),
        0 1px 0 rgba(255,255,255,0.28) inset,
        0 -1px 0 rgba(139,92,246,0.12) inset !important;
}

.console-card-content {
    position: relative;
    z-index: 3;
    transform: none;
}

@keyframes consoleCardFloat {
    /* Dinonaktifkan — kartu portal tidak boleh naik-turun */
    0%, 100% { transform: none; }
}

@keyframes antiGravityField {
    0% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.08) saturate(1.08);
    }
    100% {
        filter: brightness(1) saturate(1);
    }
}

@keyframes antiGravityParticles {
    0% {
        background-position:
            0% 100%,
            14% 0%,
            36% 88%,
            60% 8%,
            82% 100%,
            100% 20%,
            center;
    }
    100% {
        background-position:
            4% 0%,
            18% 100%,
            40% 0%,
            64% 100%,
            86% 0%,
            96% 100%,
            center;
    }
}

.console-luxury-border,
.console-mouse-glow,
.console-mesh-overlay,
.console-shine-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.console-luxury-border {
    inset: 0;
    border-radius: 28px;
    z-index: 2;
    opacity: 0.92;
}

.console-luxury-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        160deg,
        rgba(251,191,36,0.50) 0%,
        rgba(251,191,36,0.25) 22%,
        rgba(168,85,247,0.18) 44%,
        rgba(34,211,238,0.24) 66%,
        rgba(34,211,238,0.45) 88%,
        rgba(34,211,238,0.30) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.frame-corner {
    position: absolute;
    width: 68px;
    height: 68px;
    border-width: 2.5px;
    border-style: solid;
    transition: border-color 0.5s ease;
}

.frame-corner.top-left {
    top: 16px;
    left: 16px;
    border-top-color: rgba(251,191,36,0.52);
    border-left-color: rgba(251,191,36,0.52);
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-left-radius: 16px;
}

.frame-corner.top-right {
    top: 16px;
    right: 16px;
    border-top-color: rgba(251,191,36,0.48);
    border-right-color: rgba(251,191,36,0.48);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-right-radius: 16px;
}

.frame-corner.bottom-left {
    bottom: 16px;
    left: 16px;
    border-bottom-color: rgba(34,211,238,0.48);
    border-left-color: rgba(34,211,238,0.48);
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-left-radius: 16px;
}

.frame-corner.bottom-right {
    right: 16px;
    bottom: 16px;
    border-right-color: rgba(34,211,238,0.52);
    border-bottom-color: rgba(34,211,238,0.52);
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-right-radius: 16px;
}

/* Hover efek pada card */
.staff-console-card:hover .frame-corner.top-left,
.staff-console-card:hover .frame-corner.top-right {
    border-top-color: rgba(251,191,36,1.0);
}
.staff-console-card:hover .frame-corner.top-left {
    border-left-color: rgba(251,191,36,1.0);
}
.staff-console-card:hover .frame-corner.top-right {
    border-right-color: rgba(251,191,36,1.0);
}

.staff-console-card:hover .frame-corner.bottom-left,
.staff-console-card:hover .frame-corner.bottom-right {
    border-bottom-color: rgba(34,211,238,1.0);
}
.staff-console-card:hover .frame-corner.bottom-left {
    border-left-color: rgba(34,211,238,1.0);
}
.staff-console-card:hover .frame-corner.bottom-right {
    border-right-color: rgba(34,211,238,1.0);
}

.console-mouse-glow {
    opacity: 0;
}

.console-mesh-overlay {
    opacity: 0;
}

.console-shine-sweep {
    z-index: 2;
    opacity: 0.2;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.04) 58%, transparent 72%);
    transform: none;
    mix-blend-mode: screen;
}

.quota-tracker,
.timer-card-mini,
.console-actions,
.info-alert,
.console-profile {
    position: relative;
    z-index: 3;
}

.quota-tracker,
.timer-card-mini,
.info-alert {
    background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.timer-card-mini {
    position: relative;
    overflow: hidden;
}

.timer-card-mini::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.2), transparent 62%);
    pointer-events: none;
}

.staff-console-card .role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #fff8e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-size: 0.7rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.staff-console-card .role-badge::before {
    display: none !important;
    content: none !important;
}

.staff-console-card .progress-bar-container {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.025);
}

.staff-console-card .progress-bar-fill {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.18);
}

.staff-console-card .btn-action-break {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    min-height: 56px;
    box-shadow:
        0 14px 30px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.staff-console-card .btn-action-break::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,0.3), transparent 30%, transparent 70%, rgba(255,255,255,0.15));
    opacity: 0.55;
    pointer-events: none;
}

.staff-console-card .btn-action-break::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 35%);
    transform: translate3d(calc(var(--glow-shift-x) * 0.25), calc(var(--glow-shift-y) * 0.25), 0);
    opacity: 0.55;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #staffView::before,
    #staffView::after,
    .staff-console-card,
    .staff-console-card:hover,
    .console-mouse-glow,
    .console-mesh-overlay,
    .console-shine-sweep,
    .staff-portal-ambient *,
    .staff-ambient-wash,
    .staff-ambient-aurora,
    .staff-ambient-glow,
    .staff-ambient-orb,
    .staff-ambient-grid,
    .staff-ambient-sparkles span,
    .staff-card-ring {
        transition: none !important;
        animation: none !important;
    }
}

.staff-console-card .avatar-initials {
    width: 68px !important;
    height: 68px !important;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 35%, #2dd4bf 70%, #6366f1 100%) !important;
    background-size: 400% 400% !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    animation: moveGradient 8s ease infinite, avatarNeonPulse 4s ease-in-out infinite alternate !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.staff-console-card .avatar-initials > img,
.staff-console-card .avatar-initials > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.staff-console-card .avatar-initials:hover {
    transform: none !important;
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.25) !important;
}

.staff-console-card h2 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
}

.staff-console-card .btn-logout {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: var(--danger) !important;
    padding: 6px 14px !important;
    font-size: 0.72rem !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.staff-console-card .btn-logout:hover {
    background: var(--danger) !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}

/* 23. ANIMATED BACKGROUND STATES — glow frame saat istirahat */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes breakFrameGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(45, 212, 191, 0.50),
            0 0 18px rgba(20, 184, 166, 0.48),
            0 0 42px rgba(20, 184, 166, 0.32),
            0 10px 36px rgba(0, 0, 0, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(94, 234, 212, 0.72),
            0 0 28px rgba(45, 212, 191, 0.70),
            0 0 64px rgba(20, 184, 166, 0.45),
            0 12px 40px rgba(0, 0, 0, 0.48);
    }
}

@keyframes lateFrameGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(248, 113, 113, 0.55),
            0 0 18px rgba(239, 68, 68, 0.50),
            0 0 42px rgba(220, 38, 38, 0.35),
            0 10px 36px rgba(0, 0, 0, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(252, 165, 165, 0.75),
            0 0 28px rgba(248, 113, 113, 0.72),
            0 0 64px rgba(239, 68, 68, 0.48),
            0 12px 40px rgba(0, 0, 0, 0.48);
    }
}

#staffConsoleCard.staff-console-card.bg-state-break,
.staff-console-card.bg-state-break {
    background: linear-gradient(135deg, rgba(2, 44, 34, 0.82) 0%, rgba(6, 78, 59, 0.78) 30%, rgba(13, 148, 136, 0.80) 70%, rgba(2, 44, 34, 0.82) 100%) !important;
    background-size: 400% 400% !important;
    border: 1.5px solid rgba(45, 212, 191, 0.62) !important;
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.50),
        0 0 22px rgba(20, 184, 166, 0.55),
        0 0 48px rgba(20, 184, 166, 0.35),
        0 10px 36px rgba(0, 0, 0, 0.45) !important;
    animation: moveGradient 15s ease infinite, breakFrameGlowPulse 2.4s ease-in-out infinite !important;
}

#staffConsoleCard.staff-console-card.bg-state-late,
.staff-console-card.bg-state-late {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.85) 0%, rgba(127, 29, 29, 0.82) 30%, rgba(220, 38, 38, 0.80) 70%, rgba(69, 10, 10, 0.85) 100%) !important;
    background-size: 400% 400% !important;
    border: 1.5px solid rgba(248, 113, 113, 0.65) !important;
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.55),
        0 0 22px rgba(239, 68, 68, 0.55),
        0 0 48px rgba(220, 38, 38, 0.38),
        0 10px 36px rgba(0, 0, 0, 0.45) !important;
    animation: moveGradient 6s ease infinite, lateFrameGlowPulse 1.6s ease-in-out infinite !important;
}

/* Sudut frame ikut menyala saat istirahat */
.staff-console-card.bg-state-break .frame-corner.top-left,
.staff-console-card.bg-state-break .frame-corner.top-right {
    border-top-color: rgba(45, 212, 191, 0.95) !important;
}
.staff-console-card.bg-state-break .frame-corner.top-left {
    border-left-color: rgba(45, 212, 191, 0.95) !important;
}
.staff-console-card.bg-state-break .frame-corner.top-right {
    border-right-color: rgba(45, 212, 191, 0.95) !important;
}
.staff-console-card.bg-state-break .frame-corner.bottom-left,
.staff-console-card.bg-state-break .frame-corner.bottom-right {
    border-bottom-color: rgba(94, 234, 212, 0.95) !important;
}
.staff-console-card.bg-state-break .frame-corner.bottom-left {
    border-left-color: rgba(94, 234, 212, 0.95) !important;
}
.staff-console-card.bg-state-break .frame-corner.bottom-right {
    border-right-color: rgba(94, 234, 212, 0.95) !important;
}

.staff-console-card.bg-state-break .console-luxury-border::before {
    background: linear-gradient(
        160deg,
        rgba(45, 212, 191, 0.75) 0%,
        rgba(20, 184, 166, 0.40) 28%,
        rgba(94, 234, 212, 0.35) 55%,
        rgba(45, 212, 191, 0.70) 100%
    ) !important;
    opacity: 1 !important;
}

.staff-console-card.bg-state-break .console-shine-sweep {
    opacity: 0.45 !important;
}

body.theme-wb #staffConsoleCard.staff-console-card.bg-state-break,
body.theme-wb .staff-console-card.bg-state-break {
    border-color: rgba(45, 212, 191, 0.70) !important;
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.55),
        0 0 24px rgba(20, 184, 166, 0.58),
        0 0 56px rgba(142, 196, 220, 0.28),
        0 10px 36px rgba(0, 0, 0, 0.50) !important;
    animation: moveGradient 15s ease infinite, breakFrameGlowPulse 2.4s ease-in-out infinite !important;
}

body.theme-wb #staffConsoleCard.staff-console-card.bg-state-late,
body.theme-wb .staff-console-card.bg-state-late {
    border-color: rgba(248, 113, 113, 0.72) !important;
    animation: moveGradient 6s ease infinite, lateFrameGlowPulse 1.6s ease-in-out infinite !important;
}

/* Portal staff: matikan SEMUA animasi kartu; sisakan hanya ring di belakang kartu */
#staffView #staffConsoleCard,
#staffView #staffConsoleCard.console-ultra-luxury,
#staffView #staffConsoleCard.staff-console-card,
#staffView #staffConsoleCard.staff-console-card.bg-state-break,
#staffView #staffConsoleCard.staff-console-card.bg-state-late,
body.theme-wb #staffView #staffConsoleCard.staff-console-card.bg-state-break,
body.theme-wb #staffView #staffConsoleCard.staff-console-card.bg-state-late,
body.theme-black-gold #staffView #staffConsoleCard.staff-console-card.bg-state-break,
body.theme-black-gold #staffView #staffConsoleCard.staff-console-card.bg-state-late,
body.theme-china-dynasty #staffView .staff-console-card,
body.theme-gold-imperial #staffView .staff-console-card,
#staffView .staff-console-card,
#staffView .staff-console-card *,
#staffView #staffConsoleCard * {
    animation: none !important;
}

#staffView .console-aurora,
#staffView .console-shine-sweep,
#staffView .console-mesh-overlay,
#staffView .ripple-wave {
    display: none !important;
}

/* Kartu Portal Staff — efek melayang STATIS (tanpa animasi / hover naik-turun) */
#staffView #staffConsoleCard.staff-console-card.console-ultra-luxury,
#staffView #staffConsoleCard.staff-console-card.console-ultra-luxury:hover,
#staffView #staffConsoleCard.staff-console-card.console-ultra-luxury:focus,
#staffView #staffConsoleCard.staff-console-card.console-ultra-luxury:active {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    transform: translateY(-8px) !important;
    transition: none !important;
    animation: none !important;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.45)) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.28),
        0 28px 56px rgba(0, 0, 0, 0.55),
        0 48px 90px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(125, 211, 252, 0.22),
        0 0 36px rgba(56, 189, 248, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.theme-black-gold #staffView #staffConsoleCard.staff-console-card.console-ultra-luxury,
body.theme-black-gold #staffView #staffConsoleCard.staff-console-card.console-ultra-luxury:hover {
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.55)) !important;
    transform: translateY(-8px) !important;
    animation: none !important;
    transition: none !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.35),
        0 28px 56px rgba(0, 0, 0, 0.58),
        0 48px 90px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(212, 175, 55, 0.22),
        0 0 28px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@keyframes avatarFloating {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-6px);
    }
}

@keyframes avatarNeonPulse {
    0% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }
    50% {
        box-shadow: 0 0 16px rgba(212, 175, 55, 0.32), 0 4px 14px rgba(0, 0, 0, 0.38) !important;
    }
    100% {
        box-shadow: 0 0 12px rgba(245, 230, 184, 0.28), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }
}

/* Core glowing sphere */
.avatar-core {
    position: absolute !important;
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #6366f1 0%, #2dd4bf 100%) !important;
    background-size: 400% 400% !important;
    border-radius: 50% !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
    animation: moveGradient 4s ease infinite, corePulse 2s ease-in-out infinite alternate !important;
    z-index: 2 !important;
}

#staffView .avatar-core,
#staffView .ripple-wave,
#staffView .console-avatar-ring,
#staffView .countdown-timer.blink-fast,
#staffView #consoleCountdownTimer {
    animation: none !important;
}

@keyframes corePulse {
    0% {
        transform: scale(0.9);
        filter: brightness(1);
    }
    100% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
}

/* Pulsing outer ripple waves */
.ripple-wave {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 2px solid rgba(45, 212, 191, 0.4) !important;
    animation: rippleEffect 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
    opacity: 0 !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

.ripple-wave:nth-child(2) {
    animation-delay: 1s !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

.ripple-wave:nth-child(3) {
    animation-delay: 2s !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}







/* Role Restricted Hidden Class */
.role-restricted-hidden {
    display: none !important;
}

/* Premium Navigation Sidebar Items — framed luxury cards */
.nav-item-main {
    display: flex;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.18)) !important;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(0, 0, 0, 0.28) 48%,
        rgba(0, 0, 0, 0.42) 100%
    ) !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 2px 10px rgba(0, 0, 0, 0.28) !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 0;
    height: auto;
    isolation: isolate;
}

.nav-item-main::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    bottom: 5px !important;
    width: 2px;
    height: auto !important;
    transform: none;
    background: linear-gradient(to bottom, transparent, var(--primary, #d4af37), transparent) !important;
    border-radius: 0 2px 2px 0 !important;
    opacity: 0.35;
    transition: opacity 0.22s ease, box-shadow 0.22s ease, transform 0.34s ease;
    pointer-events: none;
}

.nav-item-main.nav-item-sub::before {
    display: none !important;
    content: none !important;
}

.nav-item-main i {
    font-size: 0.72rem !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.25) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
    opacity: 0.9 !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.nav-item-main span:not(.chat-unread-badge) {
    flex: 1;
    min-width: 0;
    line-height: 1.05;
}

/* Menu utama: maks 2 baris agar judul panjang tetap terbaca */
.nav-item-main:not(.nav-item-sub) span:not(.chat-unread-badge) {
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Sub-menu: tetap satu baris, tinggi cukup */
.nav-item-sub span:not(.chat-unread-badge) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.nav-item-main:hover {
    background: linear-gradient(
        155deg,
        var(--glass-tint, rgba(212, 175, 55, 0.08)) 0%,
        rgba(0, 0, 0, 0.32) 55%,
        rgba(0, 0, 0, 0.45) 100%
    ) !important;
    color: var(--text-main, rgba(255, 255, 255, 0.95)) !important;
    border-color: var(--glass-border-focus, rgba(212, 175, 55, 0.35)) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 6px 18px rgba(0, 0, 0, 0.35),
        0 0 0 1px var(--primary-glow, rgba(212, 175, 55, 0.12)) !important;
}

.nav-item-main:hover i {
    background: linear-gradient(145deg, var(--glass-tint, rgba(212, 175, 55, 0.15)) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.25)) !important;
    color: var(--accent, #f5e6b8) !important;
    opacity: 1 !important;
}

.nav-item-main:hover::before {
    opacity: 0.85;
    box-shadow: 0 0 10px var(--primary-glow, rgba(212, 175, 55, 0.35));
}

.nav-item-main.active {
    background: linear-gradient(
        135deg,
        var(--glass-tint, rgba(212, 175, 55, 0.14)) 0%,
        rgba(0, 0, 0, 0.38) 50%,
        rgba(0, 0, 0, 0.5) 100%
    ) !important;
    color: var(--accent, #fff8e7) !important;
    border-color: var(--primary, rgba(212, 175, 55, 0.55)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 24px var(--primary-glow, rgba(212, 175, 55, 0.12)),
        0 0 20px var(--primary-glow, rgba(212, 175, 55, 0.18)),
        0 4px 16px rgba(0, 0, 0, 0.4) !important;
    transform: none;
}

.nav-item-main.active::before {
    opacity: 1;
    background: linear-gradient(to bottom, var(--accent, #f5e6b8), var(--primary, #d4af37), var(--primary-hover, #c5a028)) !important;
    box-shadow: 0 0 12px var(--primary-glow, rgba(212, 175, 55, 0.45));
}

.nav-item-main.active i {
    color: var(--accent, #f5e6b8) !important;
    background: linear-gradient(145deg, var(--primary-glow, rgba(212, 175, 55, 0.35)) 0%, rgba(0, 0, 0, 0.15) 100%) !important;
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.4)) !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px var(--primary-glow, rgba(212, 175, 55, 0.2)) !important;
}

/* Sidebar section labels & dividers */
.sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.32);
    text-transform: uppercase;
    padding: 0 10px 4px;
    margin-top: 2px;
}

.sidebar-section-label::before {
    content: '';
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), transparent);
    flex-shrink: 0;
}

.sidebar-section-label--main {
    color: rgba(232, 212, 138, 0.75);
}

.sidebar-section-label--main::before {
    width: 12px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.35));
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
}

.sidebar-section-label--ops {
    color: rgba(196, 184, 150, 0.72);
    margin-top: 0;
}

.sidebar-section-label--ops::before {
    width: 12px;
    background: linear-gradient(90deg, #c9a86c, rgba(201, 168, 108, 0.35));
    box-shadow: 0 0 8px rgba(201, 168, 108, 0.2);
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    margin: 4px 4px 6px;
}

.sidebar-divider--section {
    height: 1px;
    margin: 10px 8px 8px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.28) 25%,
        rgba(245, 230, 184, 0.12) 50%,
        rgba(212, 175, 55, 0.28) 75%,
        transparent
    );
    position: relative;
}

.sidebar-divider--section::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    --sidebar-after-submenu: 8px;
    --sidebar-after-open-group: 8px;
}

/* Collapsible nav groups */
.sidebar-nav-group {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Jarak ke blok berikutnya hanya setelah submenu terbuka (CEK QRIS → Serah Terima = KASIR → Panel Admin) */
.sidebar-nav-group.is-open + .sidebar-nav-group,
.sidebar-nav-group.is-open + .nav-item-main {
    margin-top: var(--sidebar-after-open-group, 8px);
}

.sidebar-group-toggle {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 5px 9px;
    min-height: 0;
    border: 1px solid var(--card-border-theme, rgba(255, 255, 255, 0.12));
    border-radius: 9px;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.42) 100%
    );
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    outline: none;
    font-family: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(0, 0, 0, 0.28);
}

.sidebar-group-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--glass-border-focus, rgba(255, 255, 255, 0.2));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

.sidebar-group-toggle__label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sidebar-group-toggle__label i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.78rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-group-toggle__label span {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-group-toggle__arrow {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    flex-shrink: 0;
}

.sidebar-nav-group--cs .sidebar-group-toggle__label i {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
}

.sidebar-nav-group--cs .sidebar-group-toggle__arrow {
    color: rgba(125, 211, 252, 0.7);
}

.sidebar-nav-group--cs .sidebar-group-toggle:hover,
.sidebar-nav-group--cs .sidebar-group-toggle.is-open {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.22);
}

.sidebar-nav-group--st .sidebar-group-toggle__label i {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.14);
}

.sidebar-nav-group--st .sidebar-group-toggle__arrow {
    color: rgba(196, 181, 253, 0.7);
}

.sidebar-nav-group--st .sidebar-group-toggle:hover,
.sidebar-nav-group--st .sidebar-group-toggle.is-open {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.24);
}

.sidebar-nav-group.is-open .sidebar-group-toggle__arrow {
    opacity: 1;
}

.sidebar-group-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 0 0 6px;
    width: calc(100% - 6px);
    max-width: calc(100% - 6px);
    box-sizing: border-box;
    padding: 0 2px 0 8px;
    border-left: 2px solid var(--card-border-theme, rgba(255, 255, 255, 0.08));
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-group-menu.cs-open,
.sidebar-group-menu.st-open {
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: 6px;
    padding-bottom: var(--sidebar-after-submenu, 8px);
    overflow: visible;
}

.sidebar-nav-group--cs.is-open .sidebar-group-menu {
    border-left-color: rgba(56, 189, 248, 0.2);
}

.sidebar-nav-group--st.is-open .sidebar-group-menu {
    border-left-color: rgba(139, 92, 246, 0.25);
}

.nav-item-sub {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 9px !important;
    min-height: 34px !important;
    font-size: 0.67rem !important;
    letter-spacing: 0.35px !important;
    border-radius: 9px !important;
    gap: 8px !important;
    align-items: center !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.32) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.nav-item-sub:hover {
    transform: none !important;
}

.nav-item-sub.active {
    background: linear-gradient(135deg, var(--glass-tint, rgba(212, 175, 55, 0.12)) 0%, rgba(0, 0, 0, 0.38) 100%) !important;
    border-color: var(--primary, rgba(212, 175, 55, 0.45)) !important;
    color: var(--accent, #fff8e7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 14px var(--primary-glow, rgba(212, 175, 55, 0.15)) !important;
    transform: none !important;
}

.nav-item-sub.active i {
    background: var(--glass-tint, rgba(212, 175, 55, 0.2)) !important;
    border-color: var(--card-border-theme, rgba(212, 175, 55, 0.35)) !important;
    color: var(--accent, #f5e6b8) !important;
}

.sidebar-nav-group--cs .nav-item-sub.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(0, 0, 0, 0.38) 100%) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #e0f2fe !important;
}

.sidebar-nav-group--cs .nav-item-sub.active i {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.sidebar-nav-group--st .nav-item-sub.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, rgba(0, 0, 0, 0.38) 100%) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #ede9fe !important;
}

.sidebar-nav-group--st .nav-item-sub.active i {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #c4b5fd !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}

.nav-item-sub i {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Live clock footer — hover only (base styles in sidebar block above) */

.live-clock:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
}

/* Doc Bukti Sub-tab and Copyable Cell styling */
#buktiView .absensi-tab-content {
    display: none;
}
#buktiView .absensi-tab-content.active {
    display: block !important;
}

.copyable-cell {
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding-right: 25px !important;
}
.copyable-cell:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #38bdf8 !important;
}
.copyable-cell::after {
    content: '\f0c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: #38bdf8;
}
.copyable-cell:hover::after {
    opacity: 0.8;
}

.font-mono {
    font-family: monospace, Consolas, Courier, monospace !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
}

#modalStaffBg.modal-overlay {
    z-index: 10050 !important;
}

#modalStaffBg .theme-preset-card {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s, box-shadow 0.28s;
}

#modalStaffBg .theme-preset-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(212, 175, 55, 0.25) !important;
}

#modalStaffBg .theme-preset-card:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.75);
    outline-offset: 2px;
}

#modalStaffBg .modal-card {
    pointer-events: auto;
    max-height: min(92vh, 760px);
}

#modalStaffBg .modal-card > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 520px) {
    #modalStaffBg .theme-preset-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* REDESIGNED FORM MODALS STYLING — z-index default; #modalStaffBg di atas */
.modal-overlay:not(#modalStaffBg) {
    z-index: 1100 !important;
}

#customConfirmModal,
#customPromptModal {
    z-index: 10060 !important;
    pointer-events: auto !important;
}

#customConfirmModal.hide,
#customPromptModal.hide {
    pointer-events: none !important;
}

.custom-prompt-card {
    max-width: 420px;
    width: calc(100% - 32px);
    position: relative;
    text-align: center;
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.35)) !important;
}

.custom-prompt-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    text-align: center;
}

.custom-prompt-icon {
    color: var(--primary, #d4af37);
    background: rgba(212, 175, 55, 0.12);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
    border: 1px solid rgba(212, 175, 55, 0.28);
    margin: 0 auto;
}

#customPromptModal #promptTitle {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    color: #fff8e7;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
    width: 100%;
}

.custom-prompt-body {
    margin-bottom: 20px;
    text-align: center;
}

#customPromptModal #promptMessage {
    color: var(--text-muted, #c4b896);
    margin: 0 0 15px;
    font-size: 0.95rem;
    text-align: center !important;
    width: 100%;
    line-height: 1.45;
}

.custom-prompt-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-align: center;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--card-border-theme, rgba(212, 175, 55, 0.28));
    color: #fff;
    outline: none;
    box-sizing: border-box;
}

.custom-prompt-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.custom-prompt-ok {
    padding: 10px 24px;
    font-weight: 700;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

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

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

@media (max-width: 768px) {
    .form-grid-2, .form-grid-3, .form-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

.form-group-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.form-group-label-row label {
    margin-bottom: 0 !important;
}

.badge-hari-ini {
    background: rgba(236, 72, 153, 0.15) !important;
    color: #ec4899 !important;
    border: 1px solid rgba(236, 72, 153, 0.25) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.badge-hari-ini:hover {
    background: rgba(236, 72, 153, 0.25) !important;
}

.option-link-group {
    display: flex;
    gap: 6px;
    font-size: 0.72rem;
}

.option-link {
    color: #818cf8 !important;
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}
.option-link:hover {
    color: #a5b4fc !important;
}

.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-icon-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    pointer-events: none;
}

.input-icon-wrapper input {
    padding-left: 36px !important;
}

.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.category-pill {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.category-pill i {
    font-size: 0.5rem;
}

.category-pill-red {
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}
.category-pill-red:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

.category-pill-amber {
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.05) !important;
}
.category-pill-amber:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

.category-pill-purple {
    border-color: rgba(168, 85, 247, 0.2) !important;
    color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.05) !important;
}
.category-pill-purple:hover {
    background: rgba(168, 85, 247, 0.15) !important;
}

.category-pill-blue {
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.05) !important;
}
.category-pill-blue:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

.category-pill-emerald {
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}
.category-pill-emerald:hover {
    background: rgba(16, 185, 129, 0.15) !important;
}

.category-pill-slate {
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.05) !important;
}
.category-pill-slate:hover {
    background: rgba(148, 163, 184, 0.15) !important;
}

.currency-input-wrapper {
    position: relative;
    width: 100%;
}
.currency-input-wrapper span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    pointer-events: none;
}
.currency-input-wrapper input {
    padding-left: 36px !important;
    font-weight: 700 !important;
}

.geser-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .geser-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

.geser-box {
    border-radius: 12px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.geser-box-before {
    border-left: 4px solid #f59e0b !important;
}

.geser-box-after {
    border-left: 4px solid #10b981 !important;
}

.form-info-box {
    background: rgba(245, 158, 11, 0.03);
    border: 1px dashed rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   NIGHT LAMP AUTH — mewah, rapi, tali tarik
   ========================================================================== */
.dashboard-auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 18px 36px;
    position: fixed;
    inset: 0;
    z-index: 10000;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: #121c32;
}

.night-room {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.night-room__wall {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 12% 8%, rgba(142, 184, 220, 0.10) 0%, transparent 52%),
        radial-gradient(ellipse 80% 65% at 92% 18%, rgba(106, 156, 196, 0.12) 0%, transparent 48%),
        linear-gradient(165deg, #121c32 0%, #0c1524 42%, #09101c 72%, #070b14 100%);
    transition: background 0.8s ease;
}

.night-room__hex {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(12, 22, 42, 0.70) 0%, rgba(10, 18, 36, 0.76) 48%, rgba(8, 16, 32, 0.82) 100%),
        url("assets/dashboard-hud-hex.svg");
    background-size: 100% 100%, 240px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
}

.night-room__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    mix-blend-mode: screen;
    animation: nightOrbDrift 18s ease-in-out infinite;
}

.night-room__orb--a {
    width: min(46vw, 420px);
    height: min(46vw, 420px);
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(201, 211, 106, 0.22) 0%, transparent 70%);
    opacity: 0.5;
}

.dashboard-auth-screen.is-lights-off .night-room__orb--a {
    opacity: 0.38;
}

.night-room__orb--b {
    width: min(38vw, 360px);
    height: min(38vw, 360px);
    right: -6%;
    bottom: 8%;
    background: radial-gradient(circle, rgba(142, 196, 220, 0.2) 0%, transparent 70%);
    animation-duration: 22s;
    animation-direction: reverse;
}

.night-room__grain {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 4px);
    mix-blend-mode: soft-light;
}

.night-room__glow {
    position: absolute;
    left: 42%;
    top: 38%;
    width: min(88vw, 680px);
    height: min(88vw, 680px);
    transform: translate(-50%, -18%) scale(0.28);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(232, 239, 196, 0.28) 0%, rgba(201, 211, 106, 0.14) 32%, rgba(142, 196, 220, 0.08) 52%, transparent 70%);
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.75s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), left 0.55s ease;
}

.dashboard-auth-screen.is-lights-off .night-room__glow {
    left: 50%;
}

.night-room__floor {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(120vw, 980px);
    height: 42%;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 55% 35% at 50% 0%, rgba(36, 72, 96, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(4, 8, 14, 0.55) 100%);
    opacity: 0.7;
}

.night-room__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, transparent 0%, rgba(8, 16, 24, 0.32) 78%, rgba(4, 8, 14, 0.55) 100%);
}

.dashboard-auth-screen.is-lights-on .night-room__glow {
    opacity: 1;
    transform: translate(-50%, -18%) scale(1);
}

.dashboard-auth-screen.is-lights-on .night-room__wall {
    background:
        radial-gradient(ellipse 60% 48% at 42% 36%, rgba(142, 184, 220, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(106, 156, 196, 0.10) 0%, transparent 55%),
        linear-gradient(165deg, #121c32 0%, #0c1524 42%, #09101c 72%, #070b14 100%);
}

.dashboard-auth-screen.is-lights-on .night-room__orb--a {
    opacity: 0.55;
}

.dashboard-auth-screen.is-lights-on .night-room__floor {
    opacity: 0.85;
    background:
        radial-gradient(ellipse 50% 40% at 50% 8%, rgba(201, 211, 106, 0.12) 0%, transparent 65%),
        linear-gradient(180deg, transparent 0%, rgba(4, 8, 14, 0.5) 100%);
}

@keyframes nightOrbDrift {
    0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0); }
    50% { transform: translateX(-50%) translate3d(0, 14px, 0); }
}

.night-lamp-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    justify-content: center;
    padding: 8px 0 32px;
    margin: auto;
    transition: width 0.45s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp-stage {
    width: min(100%, 940px);
    justify-content: center;
    padding: 12px 20px 32px;
}

.night-auth-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-auth-screen.is-lights-on .night-auth-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: 8px 48px;
    align-items: center;
}

.night-lamp-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.dashboard-auth-screen.is-lights-on .night-lamp-side {
    justify-self: center;
    padding: 8px 4px 8px 12px;
}

.night-auth-form-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.dashboard-auth-screen.is-lights-off .night-lamp-stage {
    width: min(100%, 420px);
    justify-content: center;
    padding: 24px 16px 36px;
}

.dashboard-auth-screen.is-lights-off .night-auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dashboard-auth-screen.is-lights-off .night-auth-form-col {
    order: -1;
    width: 100%;
    margin: 0 0 20px;
    align-items: center;
}

.dashboard-auth-screen.is-lights-off .night-auth-panel {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.dashboard-auth-screen.is-lights-off .night-auth-brand {
    margin: 0 auto 4px;
}

.dashboard-auth-screen.is-lights-off .night-auth-logo {
    max-width: min(300px, 78vw);
    opacity: 0.95;
    filter: brightness(1.05) saturate(0.85) drop-shadow(0 0 14px rgba(142, 196, 220, 0.22));
}

.dashboard-auth-screen.is-lights-off .night-auth-brand-line {
    margin: 14px auto 12px;
    background: linear-gradient(90deg, transparent, rgba(201, 211, 106, 0.45), rgba(142, 196, 220, 0.4), transparent);
    box-shadow: none;
}

.dashboard-auth-screen.is-lights-off .night-auth-brand-sub {
    color: rgba(242, 245, 248, 0.72);
}

.dashboard-auth-screen.is-lights-off .night-lamp-side {
    width: 100%;
    align-items: center;
}

.dashboard-auth-screen.is-lights-off .night-lamp-cue {
    display: block;
    opacity: 1;
    height: auto;
    margin: 22px 0 0;
    transform: none;
    pointer-events: none;
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(242, 245, 248, 0.78);
}

.dashboard-auth-screen.is-lights-off .night-room__glow {
    left: 50%;
    opacity: 0.18;
    transform: translate(-50%, -18%) scale(0.42);
}

.dashboard-auth-screen.is-lights-off .night-lamp__shade-rim,
.dashboard-auth-screen.is-lights-off .night-lamp__neck,
.dashboard-auth-screen.is-lights-off .night-lamp__stem,
.dashboard-auth-screen.is-lights-off .night-lamp__base,
.dashboard-auth-screen.is-lights-off .night-lamp__cord-anchor,
.dashboard-auth-screen.is-lights-off .night-lamp-cord__line,
.dashboard-auth-screen.is-lights-off .night-lamp-cord__knob {
    filter: brightness(1.05) saturate(0.75);
}

.dashboard-auth-screen.is-lights-off .night-lamp__shade-body {
    filter: brightness(1.15);
    box-shadow:
        inset 0 10px 22px rgba(200, 180, 140, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(180, 165, 140, 0.12);
}

.dashboard-auth-screen.is-lights-off .night-lamp-cord__hint {
    color: #e8efc4;
    border-color: rgba(201, 211, 106, 0.4);
    background: rgba(16, 28, 40, 0.82);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dashboard-auth-screen.is-lights-on .night-auth-form-col {
    justify-self: stretch;
    align-items: stretch;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel {
    justify-self: stretch;
    width: 100%;
}

/* —— Brand / Logo — di atas form, tengah kolom form —— */
.night-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0 auto 14px;
    position: relative;
    z-index: 4;
    flex-shrink: 0;
    animation: nightBrandIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.night-auth-logo {
    display: block;
    width: auto;
    max-width: min(240px, 70vw);
    height: auto;
    aspect-ratio: 824 / 200;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    background: transparent;
    mix-blend-mode: screen;
    opacity: 0.95;
    filter: brightness(1.05) saturate(0.9) drop-shadow(0 0 12px rgba(142, 196, 220, 0.2));
    transition: filter 0.55s ease, opacity 0.55s ease;
}

.dashboard-auth-screen.is-lights-on .night-auth-brand {
    margin: 0 auto 14px;
}

.dashboard-auth-screen.is-lights-on .night-auth-logo {
    max-width: min(220px, 55vw);
    opacity: 1;
    filter: brightness(1.1) saturate(1) drop-shadow(0 0 16px rgba(201, 211, 106, 0.28));
}

.night-auth-brand-line {
    display: block;
    width: 56px;
    height: 1px;
    margin: 12px auto 10px;
    background: linear-gradient(90deg, transparent, #c9d36a 40%, #8ec4dc 70%, transparent);
    box-shadow: 0 0 10px rgba(201, 211, 106, 0.2);
}

.night-auth-brand-sub {
    font-size: 0.68rem;
    color: #9aadb8;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
}

.dashboard-auth-screen.is-lights-on .night-auth-brand-sub {
    color: #e8efc4;
}

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

/* —— Cluster lampu + tali —— */
.night-lamp-cluster {
    position: relative;
    width: 260px;
    height: 250px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 2px;
    overflow: visible;
}

.night-lamp {
    position: relative;
    width: 160px;
    height: 240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 3;
    padding-bottom: 8px;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), height 0.55s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp {
    transform: none;
    height: 240px;
}

.night-lamp__shade {
    position: relative;
    width: 124px;
    height: 76px;
    z-index: 4;
    margin-bottom: -1px;
    overflow: visible;
}

.night-lamp__shade-rim {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 9px;
    border-radius: 4px;
    background: linear-gradient(180deg, #8a7a62 0%, #5a4e3e 48%, #2a241c 100%);
    box-shadow:
        inset 0 1px 0 rgba(220, 210, 190, 0.28),
        0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.night-lamp__shade-body {
    position: absolute;
    inset: 5px 0 0;
    background:
        linear-gradient(180deg, rgba(180, 160, 120, 0.05) 0%, transparent 32%),
        linear-gradient(160deg, #2a241c 0%, #14110e 48%, #0a0908 100%);
    clip-path: polygon(16% 0%, 84% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 0 10px 22px rgba(180, 160, 120, 0.04),
        0 12px 28px rgba(0, 0, 0, 0.55);
    transition: background 0.55s ease, box-shadow 0.55s ease, filter 0.55s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp__shade-body {
    background:
        linear-gradient(180deg, rgba(232, 239, 196, 0.28) 0%, rgba(201, 211, 106, 0.12) 40%, transparent 74%),
        linear-gradient(160deg, #3a4a38 0%, #1e2a28 48%, #101820 100%);
    box-shadow:
        inset 0 10px 24px rgba(201, 211, 106, 0.16),
        0 0 28px rgba(142, 196, 220, 0.12),
        0 14px 28px rgba(0, 0, 0, 0.45);
    filter: brightness(1.02);
}

.night-lamp__bulb {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c8d0a0 0%, #6a7a50 50%, #1e2a28 100%);
    opacity: 0.1;
    z-index: 3;
    transition: opacity 0.45s ease, box-shadow 0.55s ease, transform 0.55s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp__bulb {
    opacity: 0.9;
    background: radial-gradient(circle at 35% 30%, #f4f7e8 0%, #c9d36a 45%, #6a8a70 100%);
    box-shadow:
        0 0 14px 4px rgba(201, 211, 106, 0.35),
        0 0 32px 10px rgba(142, 196, 220, 0.16);
    animation: nightBulbPulse 2.8s ease-in-out infinite;
}

.night-lamp__cord-anchor {
    position: absolute;
    right: 2px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a7a5e 0%, #4a4030 55%, #1e1a14 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(200, 190, 170, 0.18);
    z-index: 6;
}

.night-lamp__neck {
    width: 20px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, #8a7a62, #5a4e3e 55%, #2a241c);
    box-shadow: inset 0 1px 0 rgba(220, 210, 190, 0.22);
    z-index: 1;
}

.night-lamp__stem {
    width: 7px;
    height: 68px;
    border-radius: 4px;
    background: linear-gradient(90deg, #2a241c, #7a6a52 40%, #4a4034 70%, #1a1612);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.45);
}

.night-lamp__base {
    width: 92px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 28%, #8a7a62 0%, #5a4e3e 42%, #1e1a14 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(220, 210, 190, 0.22),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

.night-lamp__pool {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 210px;
    height: 64px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 30%, rgba(201, 211, 106, 0.18) 0%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp__pool {
    opacity: 1;
}

@keyframes nightBulbPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.05); opacity: 0.92; }
}

/* —— Tali tarik (menempel di tepi kap, label di samping) —— */
.night-lamp-cord {
    position: absolute;
    top: calc(100% - 8px);
    left: calc(100% - 8px);
    width: 118px;
    height: 86px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: grab;
    z-index: 7;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    -webkit-tap-highlight-color: transparent;
}

.night-lamp-cord:active {
    cursor: grabbing;
}

.night-lamp-cord__pull {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16px;
    flex-shrink: 0;
}

.night-lamp-cord__line {
    display: block;
    width: 1.5px;
    height: 44px;
    margin-top: 0;
    background: linear-gradient(180deg, #b8a88a 0%, #7a6a52 45%, #3a3228 100%);
    border-radius: 2px;
    transform-origin: top center;
    transition: height 0.22s ease;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);
}

.night-lamp-cord__knob {
    display: block;
    width: 12px;
    height: 16px;
    margin-top: 1px;
    border-radius: 40% 40% 48% 48%;
    background:
        radial-gradient(circle at 30% 22%, #d4c4a0 0%, #8a7a5a 40%, #3a3224 100%);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 245, 220, 0.28);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.night-lamp-cord__hint {
    margin: 0 0 1px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8efc4;
    white-space: nowrap;
    background: rgba(16, 28, 40, 0.82);
    border: 1px solid rgba(201, 211, 106, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    align-self: flex-end;
    line-height: 1.2;
}

.dashboard-auth-screen.is-lights-on .night-lamp-cord__hint {
    color: #0b1118;
    border-color: rgba(201, 211, 106, 0.55);
    background: linear-gradient(135deg, #f4f7e8 0%, #c9d36a 55%, #8ec4dc 100%);
    box-shadow: 0 6px 16px rgba(201, 211, 106, 0.28);
}

.dashboard-auth-screen.is-lights-on .night-lamp-cord__line {
    background: linear-gradient(180deg, #e8efc4 0%, #c9d36a 45%, #6a7a40 100%);
}

.dashboard-auth-screen.is-lights-on .night-lamp-cord__knob {
    background:
        radial-gradient(circle at 30% 22%, #f4f7e8 0%, #c9d36a 40%, #6a7a40 100%);
}

.night-lamp-cord.is-pulling .night-lamp-cord__line {
    height: 58px;
}

.night-lamp-cord.is-pulling .night-lamp-cord__knob {
    transform: translateY(5px);
}

.night-lamp-cue {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(230, 215, 185, 0.4);
    letter-spacing: 0.08em;
    transition: opacity 0.45s ease, transform 0.45s ease, height 0.4s ease, margin 0.4s ease;
}

.dashboard-auth-screen.is-lights-on .night-lamp-cue {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* —— Panel form —— */
.night-auth-panel {
    width: 100%;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(20px) scale(0.98);
    filter: brightness(0.45);
    transition:
        max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease,
        margin 0.4s ease,
        padding 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.5s ease;
    border-radius: 22px;
    border: 1px solid transparent;
    background: transparent;
    box-sizing: border-box;
    position: relative;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel {
    max-height: none;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: brightness(1);
    margin-top: 0;
    padding: 22px 24px 22px;
    border-color: rgba(142, 196, 220, 0.26);
    background: linear-gradient(145deg, rgba(36, 56, 72, 0.96) 0%, rgba(22, 38, 52, 0.95) 100%);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
    box-shadow:
        0 28px 56px rgba(8, 20, 32, 0.5),
        0 0 0 1px rgba(201, 211, 106, 0.08),
        0 0 40px rgba(142, 196, 220, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: visible;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel .login-title {
    font-size: 1.65rem;
    margin: 0 0 12px 0;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel .login-field {
    margin-bottom: 10px;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel .login-input,
.dashboard-auth-screen.is-lights-on .night-auth-panel .login-select {
    height: 40px;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel .btn-login-luxury {
    height: 42px;
    margin-top: 4px;
}

.dashboard-auth-screen.is-lights-on .night-auth-tabs {
    margin-bottom: 12px;
    padding: 3px;
}

.dashboard-auth-screen.is-lights-on .night-auth-tab {
    padding: 9px 10px;
}

.dashboard-auth-screen.is-lights-on .night-auth-hint {
    margin-top: 4px;
    font-size: 0.62rem;
}

.night-auth-panel__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(232, 239, 196, 0.1) 0%, transparent 38%, transparent 62%, rgba(142, 196, 220, 0.08) 100%),
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dashboard-auth-screen.is-lights-on .night-auth-panel__sheen {
    opacity: 1;
}

.night-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(8, 16, 24, 0.55);
    border: 1px solid rgba(142, 196, 220, 0.18);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.night-auth-tab {
    border: 0;
    border-radius: 11px;
    padding: 11px 12px;
    background: transparent;
    color: rgba(154, 173, 184, 0.7);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease;
}

.night-auth-tab:hover:not(.is-active) {
    color: #f2f5f8;
}

.night-auth-tab.is-active {
    color: #0b1118;
    background: linear-gradient(135deg, #f4f7e8 0%, #c9d36a 52%, #8ec4dc 100%);
    box-shadow:
        0 6px 18px rgba(201, 211, 106, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.login-card {
    width: 100%;
    position: relative;
    z-index: 1;
}

.login-title {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 18px 0;
    text-align: left;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f2f5f8;
    background: linear-gradient(135deg, #f4f7e8 0%, #c9d36a 52%, #8ec4dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.login-field {
    text-align: left;
    margin-bottom: 14px;
}

.login-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.66rem;
    color: #9aadb8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.login-label i {
    color: #c9d36a;
    font-size: 0.7rem;
}

.login-input,
.login-select {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9rem;
    color: #f2f5f8;
    background: rgba(8, 16, 24, 0.72) !important;
    border: 1px solid rgba(142, 196, 220, 0.22) !important;
    border-radius: 14px !important;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-input::placeholder {
    color: rgba(111, 132, 150, 0.75);
}

.login-input:focus,
.login-select:focus {
    border-color: rgba(201, 211, 106, 0.55) !important;
    background: rgba(14, 24, 34, 0.92) !important;
    box-shadow:
        0 0 0 3px rgba(201, 211, 106, 0.14),
        0 0 18px rgba(142, 196, 220, 0.1) !important;
}

#regRole {
    opacity: 0.85;
    cursor: default;
}

.night-auth-hint {
    display: block;
    margin-top: 7px;
    font-size: 0.66rem;
    color: #6f8496;
    line-height: 1.4;
}

.login-password-wrap {
    position: relative;
    width: 100%;
}

.login-input--password {
    padding-right: 48px !important;
}

.login-password-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(154, 173, 184, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.login-password-toggle:hover {
    color: #c9d36a;
    background: rgba(201, 211, 106, 0.12);
}

.btn-login-luxury {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b1118;
    background: linear-gradient(135deg, #f4f7e8 0%, #c9d36a 52%, #8ec4dc 100%);
    box-shadow:
        0 10px 26px rgba(8, 20, 32, 0.4),
        0 0 20px rgba(201, 211, 106, 0.2),
        0 0 0 1px rgba(232, 239, 196, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-login-luxury::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 48%);
    pointer-events: none;
}

.btn-login-luxury::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transition: left 0.55s ease;
}

.btn-login-luxury:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 32px rgba(8, 20, 32, 0.45),
        0 0 28px rgba(142, 196, 220, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.btn-login-luxury:hover::after {
    left: 130%;
}

.btn-login-luxury:active {
    transform: translateY(0);
}

.night-auth-panel .form-group input,
.night-auth-panel .form-group select {
    background: rgba(6, 5, 8, 0.65) !important;
    border: 1px solid rgba(232, 201, 112, 0.18) !important;
    color: #f8efd8 !important;
    border-radius: 14px !important;
}

.night-auth-panel .form-group input:focus,
.night-auth-panel .form-group select:focus {
    border-color: rgba(232, 201, 112, 0.55) !important;
    background: rgba(20, 16, 12, 0.88) !important;
    box-shadow: 0 0 0 3px rgba(232, 201, 112, 0.12) !important;
}

@keyframes nightLampFlash {
    0% { opacity: 0.65; }
    100% { opacity: 0; }
}

.dashboard-auth-screen.login-light-flash::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse 48% 38% at 50% 30%, rgba(255, 236, 200, 0.2) 0%, transparent 68%);
    animation: nightLampFlash 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .night-room__glow,
    .night-room__orb,
    .night-auth-panel,
    .night-auth-brand,
    .night-lamp,
    .night-lamp__bulb,
    .night-lamp-cord__line,
    .night-lamp-cord__knob {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 820px) {
    .dashboard-auth-screen.is-lights-on .night-lamp-stage {
        width: min(100%, 440px);
    }
    .dashboard-auth-screen.is-lights-on .night-auth-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .dashboard-auth-screen.is-lights-on .night-auth-panel,
    .dashboard-auth-screen.is-lights-on .night-lamp-side,
    .dashboard-auth-screen.is-lights-on .night-auth-form-col {
        width: 100%;
    }
    .dashboard-auth-screen.is-lights-on .night-lamp-side {
        padding: 0;
    }
    .dashboard-auth-screen.is-lights-on .night-auth-form-col {
        order: 2;
    }
    .dashboard-auth-screen.is-lights-on .night-lamp-side {
        order: 1;
    }
    .dashboard-auth-screen.is-lights-on .night-lamp {
        transform: scale(0.78);
        transform-origin: center top;
        height: 190px;
    }
    .dashboard-auth-screen.is-lights-on .night-auth-panel {
        max-height: min(58vh, 560px);
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .night-lamp-stage {
        width: 100%;
        min-height: auto;
    }
    .night-auth-logo {
        max-width: 230px;
    }
    .night-lamp-cluster {
        width: 240px;
        height: 230px;
    }
    .night-lamp-cord {
        width: 110px;
        left: calc(100% - 6px);
    }
    .login-title {
        font-size: 1.7rem;
    }
    .dashboard-auth-screen.is-lights-on .night-auth-panel {
        padding: 16px 14px 16px;
    }
}

.global-profile-modal-card {
    max-width: 460px;
    width: min(94vw, 460px);
    padding: 34px 32px 26px;
    position: relative;
    border-radius: 28px;
    isolation: isolate;
    overflow: hidden;
    border: none !important;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(106, 156, 196, 0.1), transparent 48%),
        linear-gradient(165deg, rgba(22, 36, 58, 0.98) 0%, rgba(10, 16, 28, 0.99) 55%, rgba(7, 11, 20, 0.99) 100%) !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(168, 200, 230, 0.22),
        0 0 40px rgba(110, 160, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.global-profile-modal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(232, 238, 246, 0.75) 0%,
        rgba(142, 184, 220, 0.55) 32%,
        rgba(80, 120, 170, 0.28) 58%,
        rgba(142, 184, 220, 0.5) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: 2;
}

.global-profile-modal-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 238, 246, 0.7), transparent);
    pointer-events: none;
    z-index: 3;
}

.global-profile-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #e8f1fa;
    background: rgba(142, 184, 220, 0.1);
    border: 1px solid rgba(168, 200, 230, 0.28);
}

.global-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}

.global-profile-hero__mark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #071018;
    font-size: 1.15rem;
    background: linear-gradient(145deg, #eef3f8 0%, #8eb8dc 55%, #6a9cc4 100%);
    box-shadow:
        0 10px 22px rgba(110, 160, 210, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.global-profile-hero__text h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

.global-profile-hero__text p {
    margin: 4px 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c5d7e8 !important;
}

.global-profile-credentials {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(168, 200, 230, 0.2);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.global-profile-credentials-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d7e6f4;
    margin-bottom: 2px;
}

.global-profile-credentials-title i {
    color: #8eb8dc;
}

.global-profile-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    text-align: left;
}

.global-profile-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f4f8fc;
}

.global-profile-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(168, 200, 230, 0.28);
    background: linear-gradient(180deg, rgba(8, 14, 26, 0.92), rgba(6, 10, 20, 0.96)) !important;
    color: #ffffff !important;
    caret-color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-profile-input::placeholder {
    color: rgba(214, 228, 240, 0.55);
    font-weight: 500;
}

.global-profile-input:focus {
    border-color: rgba(190, 220, 245, 0.7);
    background: rgba(10, 18, 32, 0.96) !important;
    box-shadow:
        0 0 0 3px rgba(142, 184, 220, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.global-profile-input:-webkit-autofill,
.global-profile-input:-webkit-autofill:hover,
.global-profile-input:-webkit-autofill:focus,
.global-profile-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    border-color: rgba(168, 200, 230, 0.4) !important;
    transition: background-color 99999s ease-out 0s;
    box-shadow: 0 0 0 1000px #0a1220 inset !important;
}

.global-profile-credentials .login-password-wrap {
    width: 100%;
}

.global-profile-credentials .global-profile-input.login-input--password {
    width: 100%;
    padding-right: 44px;
}

.global-profile-credentials .login-password-toggle {
    color: #d7e6f4;
}

.global-profile-credentials .login-password-toggle:hover {
    color: #ffffff;
    background: rgba(142, 184, 220, 0.18);
}

.global-profile-save-creds-btn {
    width: 100%;
    margin-top: 6px;
    min-height: 48px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: #071018 !important;
    background: linear-gradient(145deg, #eef3f8 0%, #8eb8dc 58%, #6a9cc4 100%) !important;
    border: 1px solid rgba(232, 238, 246, 0.45) !important;
    box-shadow:
        0 12px 24px rgba(110, 160, 210, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.global-profile-save-creds-btn:hover {
    filter: brightness(1.06);
}

.global-profile-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.global-profile-modal-actions__btn {
    min-height: 42px;
    padding: 0 22px;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 700;
    color: #e8f1fa !important;
    background: rgba(142, 184, 220, 0.08) !important;
    border: 1px solid rgba(168, 200, 230, 0.28) !important;
    border-radius: 12px !important;
}

.global-profile-modal-actions__btn:hover {
    background: rgba(142, 184, 220, 0.16) !important;
    color: #ffffff !important;
}

.global-profile-modal-actions__btn span {
    white-space: nowrap;
}

.global-profile-modal-actions__btn--save {
    background: linear-gradient(145deg, #eef3f8 0%, #8eb8dc 58%, #6a9cc4 100%) !important;
    border: none !important;
}

body.theme-china-dynasty .global-profile-modal-actions__btn--save,
body.theme-gold-imperial .global-profile-modal-actions__btn--save {
    background: linear-gradient(135deg, #e60026 0%, #a8001a 100%) !important;
    border: 1px solid #ffd700 !important;
}

html body.theme-black-gold .global-profile-modal-card,
body.theme-black-gold .modal-overlay .glass-card.global-profile-modal-card {
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(106, 156, 196, 0.1), transparent 48%),
        linear-gradient(165deg, rgba(22, 36, 58, 0.98) 0%, rgba(10, 16, 28, 0.99) 55%, rgba(7, 11, 20, 0.99) 100%) !important;
    background-image:
        radial-gradient(120% 70% at 0% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(106, 156, 196, 0.1), transparent 48%),
        linear-gradient(165deg, rgba(22, 36, 58, 0.98) 0%, rgba(10, 16, 28, 0.99) 55%, rgba(7, 11, 20, 0.99) 100%) !important;
    border: none !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(168, 200, 230, 0.22),
        0 0 40px rgba(110, 160, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Premium SaaS Dock Tab Menu for Bukti View */
/* Dashboard Bukti — filter tanggal mewah */
.bukti-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 8px;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.14) 0%, rgba(6, 78, 59, 0.55) 55%, rgba(8, 16, 20, 0.92) 100%);
    border: 1px solid rgba(52, 211, 153, 0.38);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(167, 243, 208, 0.14);
}

.bukti-date-filter__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 2px;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.bukti-date-filter__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(52, 211, 153, 0.28), rgba(5, 150, 105, 0.45));
    border: 1px solid rgba(167, 243, 208, 0.4);
    color: #6ee7b7;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bukti-date-filter__text {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a7f3d0;
    white-space: nowrap;
}

.bukti-date-filter__field {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 168px;
    padding: 8px 34px 8px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(4, 12, 10, 0.92), rgba(2, 8, 6, 0.96));
    border: 1px solid rgba(52, 211, 153, 0.28);
    box-shadow: inset 0 1px 0 rgba(167, 243, 208, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bukti-date-filter__field:hover,
.bukti-date-filter__field:focus-within {
    border-color: rgba(110, 231, 183, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(167, 243, 208, 0.12),
        0 0 0 2px rgba(16, 185, 129, 0.15);
}

.bukti-date-filter__input {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ecfdf5 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    font-family: inherit !important;
    cursor: pointer;
    text-transform: none !important;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}

/* Sembunyikan ikon kalender native browser (supaya tidak nempel di tanggal) */
.bukti-date-filter__input::-webkit-calendar-picker-indicator {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer !important;
}

.bukti-date-filter__input::-webkit-datetime-edit,
.bukti-date-filter__input::-webkit-datetime-edit-fields-wrapper,
.bukti-date-filter__input::-webkit-datetime-edit-text,
.bukti-date-filter__input::-webkit-datetime-edit-month-field,
.bukti-date-filter__input::-webkit-datetime-edit-day-field,
.bukti-date-filter__input::-webkit-datetime-edit-year-field {
    color: #ecfdf5 !important;
    padding: 0 !important;
}

.bukti-date-filter__cal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    color: #6ee7b7;
    cursor: pointer;
}

.bukti-date-filter__cal:hover {
    background: rgba(52, 211, 153, 0.14);
    color: #a7f3d0;
}

body.theme-black-gold .bukti-date-filter {
    background: linear-gradient(165deg, rgba(142, 184, 220, 0.16) 0%, rgba(21, 34, 56, 0.92) 52%, rgba(9, 16, 28, 0.98) 100%);
    border-color: rgba(142, 184, 220, 0.42);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(238, 243, 248, 0.1),
        0 0 16px rgba(142, 184, 220, 0.12);
}

body.theme-black-gold .bukti-date-filter__icon {
    background: linear-gradient(145deg, rgba(142, 184, 220, 0.3), rgba(74, 122, 168, 0.42));
    border-color: rgba(142, 184, 220, 0.48);
    color: #eef3f8;
}

body.theme-black-gold .bukti-date-filter__text {
    color: #eef3f8;
}

body.theme-black-gold .bukti-date-filter__field {
    background: linear-gradient(180deg, #152238, #0a1220);
    border-color: rgba(142, 184, 220, 0.38);
}

body.theme-black-gold .bukti-date-filter__field:hover,
body.theme-black-gold .bukti-date-filter__field:focus-within {
    border-color: rgba(142, 184, 220, 0.68);
    box-shadow:
        inset 0 1px 0 rgba(238, 243, 248, 0.1),
        0 0 0 2px rgba(142, 184, 220, 0.18);
}

body.theme-black-gold .bukti-date-filter__input,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit-fields-wrapper,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit-text,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit-month-field,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit-day-field,
body.theme-black-gold .bukti-date-filter__input::-webkit-datetime-edit-year-field {
    color: #eef3f8 !important;
}

body.theme-black-gold .bukti-date-filter__cal {
    color: #8eb8dc;
}

body.theme-black-gold .bukti-date-filter__cal:hover {
    background: rgba(142, 184, 220, 0.16);
    color: #eef3f8;
}

#buktiTabMenu {
    /* Wrapper transparan — tiap tab jadi tombol terpisah */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    box-shadow: none !important;
}

#buktiTabMenu .btn-tab {
    background: #151c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 18px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    white-space: nowrap !important;
}

#buktiTabMenu .btn-tab i {
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#buktiTabMenu .btn-tab:hover {
    color: #ffffff !important;
    background: #1c2633 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Active tab — tombol terpisah dengan aksen warna */
#buktiTabMenu .btn-tab.btn-tab-validasi.active {
    color: #ffffff !important;
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2) !important;
}
#buktiTabMenu .btn-tab.btn-tab-lock.active {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2) !important;
}
#buktiTabMenu .btn-tab.btn-tab-geser.active {
    color: #ffffff !important;
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2) !important;
}
#buktiTabMenu .btn-tab.btn-tab-wd.active {
    color: #ffffff !important;
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2) !important;
}

/* Scale active tab icon slightly */
#buktiTabMenu .btn-tab.active i {
    transform: scale(1.15) !important;
}

/* Paspor filter tabs — active state berwarna */
#pasporRoleFilter,
#pasporStatusFilter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

#pasporStatusFilter {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#pasporRoleFilter .btn-tab,
#pasporStatusFilter .btn-tab,
#pasporShiftTabs .btn-tab {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    transition: all 0.22s ease !important;
}

#pasporRoleFilter .btn-tab {
    padding: 8px 16px !important;
    border-radius: 20px !important;
}

#pasporStatusFilter .btn-tab {
    border-radius: 6px !important;
    padding: 8px 16px !important;
}

#pasporShiftTabs .btn-tab {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#pasporRoleFilter .btn-tab:hover,
#pasporStatusFilter .btn-tab:hover,
#pasporShiftTabs .btn-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

#pasporRoleFilter .btn-tab.active[data-role="all"] {
    color: #e9d5ff !important;
    background: rgba(139, 92, 246, 0.22) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25) inset !important;
}
#pasporRoleFilter .btn-tab.active[data-role="cs lc"] {
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) inset !important;
}
#pasporRoleFilter .btn-tab.active[data-role="kapten kasir"] {
    color: #fde68a !important;
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset !important;
}
#pasporRoleFilter .btn-tab.active[data-role="kasir"] {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset !important;
}
#pasporRoleFilter .btn-tab.active[data-role="cs line"] {
    color: #a5f3fc !important;
    background: rgba(6, 182, 212, 0.22) !important;
    border-color: rgba(6, 182, 212, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.25) inset !important;
}

#pasporStatusFilter .btn-tab.active[data-status="all"] {
    color: #f1f5f9 !important;
    background: rgba(148, 163, 184, 0.22) !important;
    border-color: rgba(148, 163, 184, 0.50) !important;
}
#pasporStatusFilter .btn-tab.active[data-status="belum_masuk"] {
    color: #fecaca !important;
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
}
#pasporStatusFilter .btn-tab.active[data-status="sudah_masuk"] {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
}
#pasporStatusFilter .btn-tab.active[data-status="belum_pulang"] {
    color: #fde68a !important;
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
}
#pasporStatusFilter .btn-tab.active[data-status="sudah_pulang"] {
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
}

#btnPasporTabPagi.active {
    color: #fde68a !important;
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    border-bottom: 2px solid #f59e0b !important;
}
#btnPasporTabMalam.active {
    color: #c7d2fe !important;
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    border-bottom: 2px solid #818cf8 !important;
}

.paspor-shift-icon-pagi { color: #f59e0b; }
.paspor-shift-icon-malam { color: #818cf8; }
#btnPasporTabPagi.active .paspor-shift-icon-pagi { color: #fbbf24; }
#btnPasporTabMalam.active .paspor-shift-icon-malam { color: #a5b4fc; }

/* Custom self attendance button styles */
.btn-clock-in {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) scale(1);
}

.btn-clock-in:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.45) !important;
}

.btn-clock-in:active {
    transform: translateY(1px) scale(0.97) !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2) !important;
}

.btn-clock-in-disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    cursor: not-allowed !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: none !important;
}




/* ===== Daily Status Panel: CUTI / OFF / 1/2 ===== */
.daily-status-card {
    padding: 16px 18px;
}

.daily-status-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
}

.daily-status-card-header i {
    font-size: 0.85rem;
}

.cuti-header {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
}

.off-header {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.45);
}

.half-header {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.daily-status-badge {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.daily-status-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 32px;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

#absensiDailyContainer .daily-status-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.daily-status-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
}

.daily-status-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.2s;
}

.daily-status-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

.daily-status-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
}

.daily-status-role {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
}


/* ================================================================
   CHAT SYSTEM STYLES
   ================================================================ */

/* Unread badge on sidebar nav button */
.chat-unread-badge {
    position: absolute;
    top: 6px;
    right: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

/* ---- SHELL LAYOUT ---- */
.chat-shell {
    display: flex !important;
    flex: 1;
    flex-direction: row !important;
    overflow: hidden;
    gap: 0;
    border-radius: 0;
    border: none;
    border-top: none;
    background: rgba(8, 10, 20, 0.6);
    backdrop-filter: blur(20px);
    min-height: 0;
    height: 100%;
    position: relative;
}

/* ---- LEFT SIDEBAR ---- */
.chat-sidebar {
    width: 300px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--glass-border);
    background: rgba(10, 14, 28, 0.7);
    overflow: hidden;
}

.chat-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--glass-border);
}

.chat-my-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    cursor: default;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.4);
    transition: var(--transition-smooth);
}

/* Pastikan gambar foto profil mengisi avatar secara penuh */
.chat-my-avatar img,
.chat-my-avatar .chat-my-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none; /* JS set display:block saat ada avatar */
}

/* Inisial hanya tampil jika tidak ada foto */
.chat-my-avatar span {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

.chat-my-avatar:hover .chat-avatar-overlay {
    opacity: 1;
}

.chat-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.chat-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.chat-my-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-my-role {
    font-size: 0.68rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- SIDEBAR TOOLBAR ---- */
.chat-sidebar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--glass-border);
}

.chat-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.chat-search-wrap i {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    font-size: 0.78rem;
    pointer-events: none;
}

.chat-search-wrap input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.78rem;
    padding: 7px 12px 7px 30px;
    outline: none;
    transition: var(--transition-smooth);
}

.chat-search-wrap input:focus {
    border-color: var(--glass-border-focus);
    background: rgba(255,255,255,0.07);
}

.chat-new-actions {
    display: flex;
    gap: 4px;
}

.chat-create-group-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
}

.chat-create-group-icon > .fa-users {
    font-size: 0.85em;
}

.chat-create-group-plus {
    position: absolute;
    right: -0.28em;
    bottom: -0.18em;
    font-size: 0.48em;
    line-height: 1;
    color: inherit;
}

/* ---- TABS ---- */
.chat-tabs {
    display: flex;
    padding: 8px 10px 0;
    gap: 4px;
    border-bottom: 1px solid var(--glass-border);
}

.chat-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.chat-tab:hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.03);
}

.chat-tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    background: rgba(139,92,246,0.07);
}

/* ---- CONVERSATION LIST ---- */
.chat-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    /* Border kiri tetap ada agar avatar tidak bergeser saat active */
    border-left: 3px solid transparent;
}

.chat-conv-item:hover {
    background: rgba(255,255,255,0.04);
}

.chat-conv-item.active {
    background: rgba(139,92,246,0.12);
    border-left-color: var(--primary);
}

.chat-conv-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.chat-conv-avatar img,
.chat-conv-avatar video,
.chat-conv-header-avatar img,
.chat-conv-header-avatar video,
.chat-msg-avatar img,
.chat-msg-avatar video,
.chat-member-avatar-sm img,
.chat-member-avatar-sm video,
.chat-my-avatar img,
.chat-my-avatar video,
#avatarPreviewImg,
#avatarPreviewVideo,
#groupAvatarPreviewImg,
.chat-avatar-preview img,
.chat-avatar-preview video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Logo grup: tampil utuh di dalam lingkaran (tidak terpotong / menonjol) */
.chat-conv-avatar--logo img,
.chat-conv-avatar--logo video,
.chat-conv-header-avatar.chat-conv-avatar--logo img,
.chat-conv-header-avatar.chat-conv-avatar--logo video {
    object-fit: contain !important;
    padding: 7px !important;
    background: rgba(8, 12, 24, 0.65) !important;
}

.chat-conv-avatar--cover img,
.chat-conv-avatar--cover video {
    object-fit: cover !important;
    padding: 0 !important;
}

.chat-conv-avatar-initials {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    border: none;
}

.chat-conv-item-info {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-conv-item-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-item-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.chat-conv-empty i {
    font-size: 2rem;
    opacity: 0.3;
}

/* ---- MAIN CHAT AREA ---- */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
}

.chat-empty-state i {
    font-size: 3rem;
    opacity: 0.2;
    color: var(--primary);
}

.chat-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-subtle);
}

.chat-empty-state p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- CONVERSATION ---- */
.chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ---- CONV HEADER ---- */
.chat-conv-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    background:
        linear-gradient(180deg, rgba(28, 22, 12, 0.72) 0%, rgba(10, 14, 28, 0.55) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.chat-conv-header-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* Header memakai markup yang sama dengan list (chat-conv-avatar di dalam) */
.chat-conv-header-avatar .chat-conv-avatar {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.chat-conv-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.chat-conv-header-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f5e6b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-header-sub {
    font-size: 0.68rem;
    color: rgba(212, 175, 55, 0.65);
}

.chat-conv-header-actions {
    display: flex;
    gap: 6px;
}

/* ---- MESSAGES AREA ---- */
.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    align-content: flex-start;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 42%),
        radial-gradient(ellipse at 88% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 45%);
}

.chat-messages-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 20px;
}

/* ---- MESSAGE BUBBLES (base — overridden by UPGRADE block) ---- */
.chat-msg-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 70%;
}

.chat-msg-me    { align-self: flex-end;   flex-direction: row-reverse; }
.chat-msg-other { align-self: flex-start; }

.chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-msg-avatar-initials {
    background: linear-gradient(145deg, rgba(212,175,55,0.55), rgba(139,92,246,0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    color: #fff;
}

/* bubble reset — real styles in UPGRADE block */
.chat-msg-bubble {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: fit-content;
    max-width: 300px;
}

.chat-msg-me .chat-msg-bubble > * { align-self: flex-end; }

.chat-msg-sender { display: none; }

/* chat-msg-text: background/border/radius come from bubble, not text itself */
.chat-msg-text {
    font-size: 0.8rem;
    line-height: 1.48;
    color: var(--text-main);
    word-break: break-word;
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    max-width: none;
    text-transform: none !important;
}

.chat-msg-me .chat-msg-text { background: none; border: none; }

.chat-msg-image {
    max-width: 150px;
    max-height: 130px;
    border-radius: 8px;
    cursor: zoom-in;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s;
}

.chat-msg-image:hover {
    transform: scale(1.02);
}

.chat-msg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
    max-width: 340px;
    transition: background 0.2s;
}

.chat-msg-link:hover {
    background: rgba(34,211,238,0.15);
}

.chat-inline-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    word-break: break-all;
}

.chat-msg-time {
    font-size: 0.62rem;
    color: var(--text-muted);
    padding: 0 3px;
}

/* ---- INPUT AREA ---- */
.chat-input-area {
    flex-shrink: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    background:
        linear-gradient(0deg, rgba(18, 14, 8, 0.78) 0%, rgba(10, 14, 28, 0.55) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-img-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--glass-border);
}

.chat-img-preview img {
    height: 60px;
    width: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.chat-img-preview button {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--danger);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: var(--transition-smooth);
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-input-row textarea {
    flex: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 22px;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.84rem;
    padding: 11px 16px;
    outline: none;
    resize: none;
    line-height: 1.4;
    min-height: 42px;
    max-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.chat-input-row textarea:focus {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}

.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0d78c 0%, #d4af37 48%, #a8841e 100%);
    border: 1px solid rgba(255, 236, 170, 0.35);
    color: #1a1205;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}

.chat-send-btn:hover {
    background: linear-gradient(145deg, #ffe7a8 0%, #e0bf4a 48%, #b89228 100%);
    transform: scale(1.05);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ---- ICON BUTTON (shared) ---- */
.chat-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.chat-icon-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.15);
}

/* ---- INFO PANEL ---- */
.chat-info-panel {
    width: 320px !important;
    min-width: 280px !important;
    max-width: 340px !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 99 !important;
    border-left: 1px solid var(--glass-border) !important;
    background: rgba(12, 16, 32, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.chat-info-panel.hide {
    display: none !important;
}

.chat-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}

.chat-info-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.chat-info-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.chat-info-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--border-radius-sm);
    background: rgba(255,255,255,0.03);
    font-size: 0.78rem;
    color: var(--text-main);
    font-weight: 600;
}

.chat-info-admin-badge {
    margin-left: auto;
    font-size: 0.62rem;
    background: rgba(139,92,246,0.2);
    color: var(--primary);
    border: 1px solid rgba(139,92,246,0.3);
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- MODAL CHAT ---- */
.chat-modal {
    max-width: 480px;
    width: 95%;
    position: relative;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    text-align: left;
    align-items: stretch;
}

.chat-modal h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 14px;
}

.chat-modal label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.chat-modal-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.83rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.chat-modal-input:focus {
    border-color: var(--glass-border-focus);
}

.chat-member-search-wrap {
    margin-bottom: 8px;
}

.chat-member-pick-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    background: rgba(0,0,0,0.2);
}

.chat-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8rem;
    transition: background 0.15s;
}

.chat-member-item:hover {
    background: rgba(255,255,255,0.04);
}

.chat-member-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.chat-member-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-member-role-tag {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.chat-member-selected {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    max-height: 130px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--border-radius-md);
    background: rgba(0,0,0,0.15);
}

.chat-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.chat-selected-chip button {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.chat-selected-chip button:hover {
    opacity: 1;
}

/* ---- MODAL CLOSE BUTTON — UNIFIED ULTRA LUXURY ---- */
.modal-close-btn,
.btn-close-luxury {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    z-index: 100 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    outline: none !important;
}

.modal-close-btn:hover,
.btn-close-luxury:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.95)) !important;
    border-color: rgba(254, 202, 202, 0.6) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.75), 0 6px 20px rgba(239, 68, 68, 0.5) !important;
}

.modal-close-btn:active,
.btn-close-luxury:active {
    transform: scale(0.92) rotate(90deg) !important;
}

/* Sembunyikan tombol X — tutup modal via Batal / Tutup di footer */
.modal-close-btn,
.btn-close-luxury {
    display: none !important;
}


/* ---- AVATAR CHANGE MODAL ---- */
.chat-avatar-preview {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.4), 0 8px 32px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

.chat-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ---- LIGHTBOX ---- */
.chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
}

.chat-lightbox img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.chat-lightbox button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    z-index: 1;
    transition: background 0.2s;
}

.chat-lightbox button:hover {
    background: rgba(255,255,255,0.2);
}

/* ================================================================
   CHAT NOTIFICATION TOAST & UNREAD BADGE
   ================================================================ */

/* Badge unread per konversasi di sidebar */
.chat-conv-unread-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(139,92,246,0.5);
    animation: unreadPulse 2s ease-in-out infinite;
}

@keyframes unreadPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(139,92,246,0.4); }
    50%       { box-shadow: 0 0 14px rgba(139,92,246,0.8); }
}

/* Sidebar nav badge override — lebih mewah */
.chat-unread-badge {
    position: absolute;
    top: 6px;
    right: 10px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(244,63,94,0.6);
    animation: unreadPulse 2s ease-in-out infinite;
}

/* Chat notification toast */
.chat-notif-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(18,24,48,0.98) 0%, rgba(14,20,40,0.98) 100%);
    border: 1px solid rgba(139,92,246,0.35);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    min-width: 300px;
    max-width: 380px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.1);
    backdrop-filter: blur(20px);
    animation: chatToastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
    transition: transform 0.2s, opacity 0.2s;
    overflow: hidden;
}

.chat-notif-toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent);
}

.chat-notif-toast:hover {
    border-color: rgba(139,92,246,0.6);
    transform: translateX(-4px);
}

.chat-notif-toast-out {
    animation: chatToastOut 0.4s ease forwards;
}

@keyframes chatToastIn {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes chatToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(120%); }
}

.chat-notif-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139,92,246,0.4);
}

.chat-notif-content {
    flex: 1;
    overflow: hidden;
}

.chat-notif-sender {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-notif-group {
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 500;
}

.chat-notif-msg {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.chat-notif-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.chat-notif-close:hover {
    color: var(--danger);
}

/* ---- NOTIFICATION PERMISSION BANNER ---- */
.chat-notif-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(34,211,238,0.08));
    border-bottom: 1px solid rgba(139,92,246,0.25);
    border-top: 1px solid rgba(139,92,246,0.15);
    font-size: 0.74rem;
    color: var(--text-subtle);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-notif-banner i {
    color: var(--primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.chat-notif-banner span {
    flex: 1;
    font-weight: 600;
}

.chat-notif-banner-btn {
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: var(--transition-smooth);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}

.chat-notif-banner-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 14px rgba(139,92,246,0.5);
}

.chat-notif-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.chat-notif-banner-dismiss:hover {
    color: var(--danger);
}

/* ================================================================
   CHAT MESSAGE UPGRADE: reply, pin, seen-by, toolbar, meta
   ================================================================ */

/* Wrapper — jarak antar pengirim vs cluster pengirim sama */
.chat-msg-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    max-width: 68%;
    position: relative;
    margin: 0 !important;
    padding: 0;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

.chat-msg-cluster-start {
    margin-top: 10px !important;
}

.chat-msg-cluster-start:first-child {
    margin-top: 0 !important;
}

.chat-msg-clustered {
    margin-top: 2px !important;
}

.chat-msg-cluster-end {
    margin-bottom: 2px !important;
}

.chat-msg-me    { align-self: flex-end;   flex-direction: row-reverse; }
.chat-msg-other { align-self: flex-start; }

/* Avatar */
.chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

.chat-msg-avatar-initials {
    background: linear-gradient(145deg, rgba(212,175,55,0.55), rgba(139,92,246,0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}

.chat-msg-avatar-spacer {
    visibility: hidden;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Column */
.chat-msg-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: flex-start;
}

.chat-msg-me .chat-msg-col { align-items: flex-end; }

/* Meta: nama + jam — ringkas di atas bubble */
.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 4px;
    line-height: 1.15;
    margin-bottom: 1px;
}

.chat-msg-me .chat-msg-meta { flex-direction: row-reverse; }

.chat-msg-sender-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7dd3fc;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.chat-msg-sender-me {
    color: #e8c872;
}

.chat-msg-timestamp {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
}

/* Bubble — glass luxury */
.chat-msg-bubble {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px 16px 16px 16px;
    padding: 7px 11px 8px;
    word-break: break-word;
    width: fit-content;
    max-width: 320px;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chat-msg-me .chat-msg-bubble {
    background: linear-gradient(155deg, rgba(168, 130, 255, 0.32) 0%, rgba(109, 70, 214, 0.22) 100%);
    border-color: rgba(196, 168, 255, 0.28);
    border-radius: 16px 4px 16px 16px;
    box-shadow: 0 4px 18px rgba(109, 70, 214, 0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}

.chat-msg-clustered.chat-msg-other .chat-msg-bubble {
    border-radius: 4px 14px 14px 14px;
}

.chat-msg-clustered.chat-msg-me .chat-msg-bubble {
    border-radius: 14px 4px 14px 14px;
}

.chat-msg-text {
    font-size: 0.82rem;
    line-height: 1.38;
    color: rgba(255,255,255,0.92);
    margin: 0;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    text-transform: none !important;
}

/* Images — compact */
.chat-msg-image {
    max-width: 150px;
    max-height: 130px;
    border-radius: 8px;
    cursor: zoom-in;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08);
    display: block;
    transition: transform 0.2s, opacity 0.2s;
}

.chat-msg-image:hover { transform: scale(1.03); opacity: 0.93; }

/* Link card */
.chat-msg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,211,238,0.07);
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.72rem;
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
    max-width: 260px;
    transition: background 0.2s;
}

.chat-msg-link:hover { background: rgba(34,211,238,0.14); }

.chat-inline-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    word-break: break-all;
}

/* Reply quote inside bubble */
.chat-msg-reply-quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(0,0,0,0.22);
    border-left: 2px solid var(--primary);
    border-radius: 5px;
    padding: 4px 8px;
    cursor: pointer;
    margin-bottom: 3px;
    transition: background 0.15s;
    max-width: 320px;
}

.chat-msg-reply-quote:hover { background: rgba(139,92,246,0.1); }

.chat-msg-reply-name {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--primary);
}

.chat-msg-reply-text {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer di bawah bubble — ikon mata tidak menimpa teks */
.chat-msg-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 0;
    min-height: 0;
    line-height: 1;
}

.chat-msg-me .chat-msg-footer {
    flex-direction: row-reverse;
}

/* Seen — badge di bawah bubble, bisa diklik */
.chat-msg-seen {
    position: static;
    font-size: 0.54rem;
    color: rgba(125, 211, 252, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    opacity: 0.9;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(8, 12, 24, 0.45);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 999px;
    padding: 2px 6px;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
    z-index: 2;
}

.chat-msg-seen:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(125, 211, 252, 0.45);
    opacity: 1;
    transform: scale(1.06);
}

.chat-msg-me .chat-msg-seen {
    color: rgba(232, 200, 114, 0.95);
    border-color: rgba(232, 200, 114, 0.25);
    background: rgba(20, 14, 6, 0.4);
}

.chat-msg-me .chat-msg-seen:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(232, 200, 114, 0.5);
}

.chat-msg-seen i {
    font-size: 0.52rem;
}

/* Popover daftar staff yang sudah baca */
.chat-seen-popover {
    position: fixed;
    z-index: 9500;
    background:
        linear-gradient(165deg, rgba(28, 24, 16, 0.96) 0%, rgba(12, 16, 30, 0.97) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: chatSeenPopIn 0.16s ease;
}

@keyframes chatSeenPopIn {
    from { opacity: 0; transform: translateY(4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-seen-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    font-size: 0.74rem;
    font-weight: 700;
    color: #f0d78c;
}

.chat-seen-popover-head i {
    color: #7dd3fc;
    font-size: 0.78rem;
}

.chat-seen-popover-head span {
    flex: 1;
}

.chat-seen-popover-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1;
}

.chat-seen-popover-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.chat-seen-popover-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
}

.chat-seen-popover-loading,
.chat-seen-popover-empty {
    padding: 16px 10px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.chat-seen-popover-count {
    font-size: 0.64rem;
    color: rgba(255,255,255,0.4);
    padding: 2px 6px 8px;
    font-weight: 600;
}

.chat-seen-popover-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-seen-popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
}

.chat-seen-popover-row:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.16);
}

.chat-seen-popover-row .chat-msg-avatar {
    width: 28px;
    height: 28px;
}

.chat-seen-popover-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chat-seen-popover-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-seen-popover-status {
    font-size: 0.6rem;
    color: rgba(125, 211, 252, 0.75);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-seen-popover-status i {
    font-size: 0.55rem;
}

/* Toolbar — overlay di samping bubble, tidak mendorong pesan berikutnya */
.chat-msg-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(10, 14, 28, 0.92);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 2px 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.chat-msg-other .chat-msg-toolbar {
    left: calc(100% + 6px);
}

.chat-msg-me .chat-msg-toolbar {
    right: calc(100% + 6px);
}

.chat-msg-wrapper:hover .chat-msg-toolbar {
    opacity: 1;
    pointer-events: all;
}

.chat-msg-action {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    font-family: var(--font-family);
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    height: 22px;
}

.chat-msg-action i { font-size: 0.62rem; }

.chat-msg-action:hover {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.3);
    color: var(--text-main);
}

.chat-msg-action-danger:hover {
    background: rgba(244,63,94,0.12);
    border-color: rgba(244,63,94,0.28);
    color: var(--danger);
}

/* Pin tag */
.chat-msg-pin-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    color: var(--gold);
    font-weight: 700;
    padding: 0 3px;
    margin-bottom: 1px;
    opacity: 0.85;
}

.chat-msg-pinned > .chat-msg-col > .chat-msg-bubble {
    border-color: rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.05);
}

/* Highlight scroll-to */
.chat-msg-highlight > .chat-msg-col > .chat-msg-bubble {
    animation: msgHighlight 1.8s ease;
}

@keyframes msgHighlight {
    0%   { box-shadow: 0 0 0 2px rgba(34,211,238,0.55); }
    80%  { box-shadow: 0 0 0 2px rgba(34,211,238,0.2); }
    100% { box-shadow: none; }
}

/* Delete */
.chat-msg-deleting {
    animation: msgFadeOut 0.28s ease forwards;
}

@keyframes msgFadeOut {
    to { opacity: 0; transform: scaleY(0); max-height: 0; margin: 0; padding: 0; }
}

/* ---- REPLY BAR ---- */
.chat-reply-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: rgba(139,92,246,0.07);
    border-top: 1px solid rgba(139,92,246,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    animation: slideDown 0.2s ease;
}

.chat-reply-bar-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.chat-reply-bar-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.chat-reply-bar-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
}

.chat-reply-bar-preview {
    font-size: 0.67rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-bar-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.chat-reply-bar-cancel:hover { color: var(--danger); }

/* ---- Chat list staff counter ---- */
.chat-list-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    position: sticky;
    top: 0;
    z-index: 1;
}

.chat-list-counter i {
    color: var(--primary);
    font-size: 0.65rem;
}

/* ================================================================
   CHAT PIN CONVERSATION
   ================================================================ */

/* Section label (Disematkan / Semua Grup) */
.chat-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    padding: 8px 12px 4px;
    opacity: 0.7;
}

.chat-section-label i {
    font-size: 0.58rem;
    color: var(--primary);
}

/* Pinned item highlight */
.chat-conv-item.chat-conv-pinned {
    background: rgba(139,92,246,0.05);
}

.chat-conv-item.chat-conv-pinned:hover {
    background: rgba(139,92,246,0.1);
}

/* Pin icon in name row */
.chat-conv-item-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.chat-pin-icon {
    font-size: 0.58rem;
    color: var(--primary);
    flex-shrink: 0;
    transform: rotate(45deg);
    opacity: 0.8;
}

/* More button (ellipsis) */
.chat-conv-more-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.15s;
}

.chat-conv-item:hover .chat-conv-more-btn {
    opacity: 1;
}

.chat-conv-more-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-main);
}

/* Context menu */
.chat-context-menu {
    position: fixed;
    z-index: 9999;
    background: rgba(14,20,40,0.97);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 10px;
    padding: 5px;
    min-width: 170px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    backdrop-filter: blur(16px);
    animation: chatToastIn 0.15s ease;
}

.chat-context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.chat-context-menu button:hover {
    background: rgba(139,92,246,0.15);
    color: #fff;
}

.chat-context-menu button i {
    width: 14px;
    color: var(--primary);
    font-size: 0.75rem;
}

.chat-context-menu button.danger-btn {
    color: #ef4444;
}

.chat-context-menu button.danger-btn i {
    color: #ef4444;
}

.chat-context-menu button.danger-btn:hover {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
}

.chat-icon-btn.danger-btn {
    color: rgba(239,68,68,0.85);
}

.chat-icon-btn.danger-btn:hover {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
    border-color: rgba(239,68,68,0.4);
}

/* ================================================================
   ADMIN PANEL: FEATURE TOGGLE
   ================================================================ */
.feature-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    transition: var(--transition-smooth);
}

.feature-toggle-row:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(139,92,246,0.2);
}

.feature-toggle-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.feature-toggle-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(139,92,246,0.12);
    border: 1px solid rgba(139,92,246,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.feature-toggle-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 3px;
}

.feature-toggle-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Toggle switch */
.feature-toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.feature-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.feature-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    transition: all 0.25s ease;
}

.feature-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.feature-toggle-switch input:checked + .feature-toggle-slider {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(139,92,246,0.4);
}

.feature-toggle-switch input:checked + .feature-toggle-slider::before {
    transform: translateX(22px) translateY(-50%);
    background: #fff;
}

/* Feature toggle hidden state */
.feature-hidden {
    display: none !important;
}


/* ================================================================
   CONSOLE BACKGROUND CUSTOMIZER
   ================================================================ */
.console-bg-customizer {
    margin-top: 16px;
    position: relative;
}

.btn-toggle-bg-picker {
    width: 100%;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: var(--primary);
    padding: 10px 16px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-family);
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-toggle-bg-picker:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.btn-toggle-bg-picker i {
    font-size: 0.9rem;
}

.bg-picker-panel {
    margin-top: 12px;
    background: rgba(10, 14, 28, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--border-radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.3s ease;
}

.bg-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.bg-picker-header h4 {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bg-picker-header h4 i {
    color: var(--primary);
    font-size: 0.85rem;
}

.bg-picker-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.bg-picker-close:hover {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: var(--danger);
}

.bg-picker-content {
    padding: 16px;
}

.bg-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.bg-preset-item {
    height: 80px;
    border-radius: var(--border-radius-md);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.bg-preset-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.25s ease;
}

.bg-preset-item:hover::before {
    opacity: 0.5;
}

.bg-preset-item span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.bg-preset-item:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.bg-preset-item.active {
    border-color: var(--primary) !important;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3), 0 8px 25px rgba(139, 92, 246, 0.4);
}

.bg-preset-item.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.5);
}

.bg-picker-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 16px 0;
}

.bg-custom-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bg-custom-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bg-custom-label i {
    color: var(--primary);
    font-size: 0.8rem;
}

.bg-upload-info {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
}


/* ================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================ */

/* Promote animated elements to their own GPU layer */
#monitorView .active-card-timer,
.active-card-timer {
    will-change: auto;
    transform: none;
}

/* Reduce transition cost on elements that don't need full smooth transitions */
.nav-item-main {
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Disable pointer events on hidden sections to save hit-test cost */
.view-section:not(.active) {
    pointer-events: none;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Portal staff/monitor :has() rules must not keep izinView painted over Absensi */
#izinView:not(.active),
#izinView.hide {
    display: none !important;
    visibility: hidden !important;
}

/* Optimize scrollable areas */
.app-content,
.chat-messages-area,
.chat-sidebar-list,
#logTableWrapper,
#absensiTable {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Minimize repaints from chat badge animation */
.chat-unread-badge {
    will-change: contents;
}

/* DATA REKENING EXPIRING ROW HIGHLIGHT */
tr.expiring-warning-row {
    background: rgba(234, 179, 8, 0.06) !important;
    border-left: 3px solid #facc15 !important;
}
tr.expiring-warning-row:hover {
    background: rgba(234, 179, 8, 0.12) !important;
}


/* =================================================================
   BREAK NOTIFICATIONS - ULTRA LUXURY PREMIUM EDITION
   ================================================================= */
.break-notification-container {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    max-width: 100%;
    transform: none !important;
    z-index: 10;
    pointer-events: none;
    margin: 0 0 16px 0;
}

#staffView .break-notification-container {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 100% !important;
    width: 100%;
    max-width: 400px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto 12px !important;
    transform: none !important;
    z-index: 8;
    pointer-events: none;
    flex-shrink: 0;
    order: -1;
    display: block !important;
    box-sizing: border-box;
}

/* Kosong = tidak tampil; kartu tetap di posisi yang sama */
#staffView .break-notification-container:empty {
    display: none !important;
    margin: 0 !important;
}

#staffView .break-notification-container .break-notification {
    pointer-events: auto;
    width: 100%;
    max-height: none;
    box-sizing: border-box;
}

#staffView .break-notification,
body.theme-china-dynasty #staffView .break-notification,
body.theme-gold-imperial #staffView .break-notification {
    padding: 13px 16px !important;
    transform: none !important;
    max-width: 100%;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    box-sizing: border-box;
}

#staffView .break-notification-text {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
    letter-spacing: 0.015em;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

#staffView .break-notification.show {
    transform: none !important;
    opacity: 1 !important;
    animation: breakNotificationFadeInStaff 0.18s ease-out;
}

#staffView .break-notification-icon {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Frame solid — tetap terbaca di atas wallpaper/gambar background */
.break-notification,
.break-notification.break-notification--solid {
    background: linear-gradient(165deg, #1a150c 0%, #0c0a06 55%, #050403 100%) !important;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(212, 175, 55, 0.35),
        0 0 22px rgba(212, 175, 55, 0.18) !important;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    overflow: visible;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
}

.break-notification::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, transparent 42%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 0;
    pointer-events: none;
}

.break-notification::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(245, 230, 184, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.08);
    z-index: 0;
    pointer-events: none;
}

.break-notification.show {
    transform: translateY(0);
    opacity: 1;
    animation: breakNotificationFadeIn 0.18s ease-out;
}

@keyframes breakNotificationFadeIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes breakNotificationFadeInStaff {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.break-notification.success,
.break-notification.break-notification--solid.success {
    background: linear-gradient(165deg, #0f1f18 0%, #07140f 55%, #030806 100%) !important;
    border-color: rgba(52, 211, 153, 0.55) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(16, 185, 129, 0.28),
        0 0 20px rgba(16, 185, 129, 0.16) !important;
}

.break-notification.warning,
.break-notification.break-notification--solid.warning {
    background: linear-gradient(165deg, #2a140c 0%, #160a06 55%, #0a0503 100%) !important;
    border-color: rgba(251, 146, 60, 0.55) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(245, 158, 11, 0.28),
        0 0 20px rgba(245, 158, 11, 0.16) !important;
}

.break-notification-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.break-notification-icon {
    font-size: 1.1rem;
    color: #f5e6b8;
    animation: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
    position: relative;
    flex-shrink: 0;
    margin-top: 3px;
}

.break-notification.success .break-notification-icon {
    color: #6ee7b7;
}

.break-notification.warning .break-notification-icon {
    color: #fdba74;
}

.break-notification-icon::before {
    display: none;
}

.break-notification-text {
    color: #fff8e7;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.55);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    letter-spacing: 0.02em;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-transform: none;
    text-align: center;
    overflow: visible;
    text-overflow: unset;
}

#staffView .break-notification-text {
    white-space: normal !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

.break-notification.success .break-notification-text {
    color: #ecfdf5;
}

.break-notification.warning .break-notification-text {
    color: #fff7ed;
}

.break-notification-text.switch-out {
    animation: breakNotifTextOut 220ms ease forwards;
}
.break-notification-text.switch-in {
    animation: breakNotifTextIn 280ms ease both;
}

@keyframes breakNotifTextOut {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-4px); filter: blur(1px); }
}
@keyframes breakNotifTextIn {
    0%   { opacity: 0; transform: translateY(5px); filter: blur(1px); }
    60%  { opacity: 1; transform: translateY(-1px); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.break-notification-content::before,
.break-notification-content::after {
    display: none;
}

.break-notification-sparkle {
    display: none;
}

.break-notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 0 0 18px 18px;
    transform-origin: left;
    animation: progressBar 60s linear forwards;
    z-index: 3;
}

@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}

@media (max-width: 768px) {
    #izinView.active:has(#monitorView:not(.hide)) {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    #izinView.active:has(#staffView:not(.hide)) {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    #staffView {
        min-height: 0 !important;
        padding: 0;
        overflow: visible !important;
    }

    #staffView .staff-portal-console-stack {
        padding-top: 0;
        max-width: min(400px, 96vw);
        margin-top: 0;
        gap: 0;
        overflow: visible;
    }

    .break-notification-container,
    #staffView .break-notification-container {
        position: absolute !important;
        top: auto !important;
        bottom: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        max-width: min(400px, 96vw);
        height: auto;
        min-height: 0;
        max-height: none;
        transform: none !important;
        margin: 0 auto 10px !important;
        display: block !important;
    }

    #staffView .break-notification-container:empty {
        display: none !important;
    }

    #staffView .staff-portal-console-stack:has(#breakNotificationContainer:not(:empty)) > .staff-portal-console-row {
        margin-top: 0;
    }

    #staffView .staff-portal-center {
        margin: 0;
        padding: 0;
        justify-content: center;
        overflow: visible;
    }

    #staffConsoleCard.staff-console-card.console-ultra-luxury {
        min-height: 0 !important;
        max-height: min(480px, calc(100dvh - 220px)) !important;
        padding: 18px 16px 14px !important;
    }

    #staffView .break-notification {
        padding: 12px 14px !important;
        max-height: none !important;
    }

    #staffView .break-notification-text,
    .break-notification-text {
        white-space: normal !important;
        line-height: 1.5 !important;
        font-size: 0.88rem !important;
        font-weight: 650 !important;
        text-align: center !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
    }

    .break-notification-content {
        justify-content: center !important;
    }

    body.theme-china-dynasty .break-notification-text,
    body.theme-gold-imperial .break-notification-text {
        white-space: normal !important;
    }
    
    .break-notification {
        padding: 14px 16px;
        border-radius: 18px;
    }
    
    .break-notification-content {
        gap: 10px;
    }
    
    .break-notification-icon {
        font-size: 22px;
    }
    
    .break-notification-text {
        font-size: 0.8rem;
        line-height: 1.45;
    }
}

.break-notification.success .break-notification-confetti {
    display: none;
}

/* Shift view — searchable staff picker (simple) */
#shiftScheduleContainer .shift-schedule-card,
#shiftScheduleContainer .shift-schedule-card.glass-card {
    overflow: visible !important;
}

#shiftScheduleContainer .shift-schedule-card > * {
    z-index: auto !important;
}

#shiftScheduleContainer .shift-staff-header {
    position: relative;
    z-index: 40 !important;
    overflow: visible !important;
}

.shift-staff-picker {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.shift-staff-picker__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.shift-staff-picker__input-wrap {
    position: relative;
}

.shift-staff-picker__input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 8px 36px 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    outline: none;
}

.shift-staff-picker__input:focus {
    border-color: rgba(212, 175, 55, 0.45);
}

.shift-staff-picker__chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.shift-staff-picker__dropdown.autocomplete-dropdown,
.shift-staff-picker__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    z-index: 1200 !important;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    background: rgba(8, 10, 18, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75);
}

.shift-staff-picker__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.shift-staff-picker__item:hover,
.shift-staff-picker__item.is-active {
    background: rgba(255, 255, 255, 0.06);
}

.shift-staff-picker__item-name {
    text-transform: uppercase;
}

.shift-staff-picker__item-role {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.shift-staff-picker__group {
    padding: 6px 12px 2px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.shift-staff-picker__group:first-child {
    border-top: 0;
}

.shift-staff-picker__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.shift-staff-picker__role {
    font-size: 0.75rem;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    background: rgba(139, 92, 246, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.shift-staff-picker__own {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.shift-staff-picker__own:hover {
    color: #fff;
    border-color: rgba(212, 175, 55, 0.4);
}

.shift-mobile-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.shift-mobile-link-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.shift-mobile-link-btn:hover {
    color: #fff;
    border-color: rgba(212, 175, 55, 0.45);
}

.shift-mobile-link-preview {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.95);
    text-decoration: underline;
    word-break: break-all;
}

/* ================================================================
   SHIFT-ONLY (?view=shift) — tampilkan HANYA konten Shift Kerja
   ================================================================ */
html.mobile-shift-focus,
body.mobile-shift-focus {
    overflow-x: hidden !important;
    background: #050505 !important;
}

body.mobile-shift-focus .app-sidebar,
html.mobile-shift-focus .app-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.mobile-shift-focus .app-header,
body.mobile-shift-focus .app-header-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

body.mobile-shift-focus #appShell {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

body.mobile-shift-focus #appShell > div {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.mobile-shift-focus .app-content {
    padding: 10px 10px 28px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.mobile-shift-focus .view-section:not(#shiftView) {
    display: none !important;
}

body.mobile-shift-focus #shiftView {
    display: block !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.mobile-shift-focus #shiftView .monitor-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
}

body.mobile-shift-focus #shiftView .monitor-header h2 {
    font-size: 1.05rem !important;
}

body.mobile-shift-focus #shiftView .luxury-month-selector {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
}

body.mobile-shift-focus #shiftView .shift-mobile-link-row {
    display: none !important;
}

body.mobile-shift-focus #shiftView > div[style*="max-width: 1400px"] {
    max-width: 100% !important;
    margin: 0 !important;
}

body.mobile-shift-focus #shiftView .shift-schedule-card.glass-card,
body.mobile-shift-focus #shiftView .shift-schedule-card {
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

body.mobile-shift-focus #shiftView .shift-staff-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

body.mobile-shift-focus #shiftView .shift-staff-header > div {
    min-width: 0 !important;
    width: 100% !important;
}

body.mobile-shift-focus #shiftStaffAvatar {
    display: none !important;
}

body.mobile-shift-focus #shiftView .shift-staff-picker {
    max-width: none !important;
}

body.mobile-shift-focus #shiftView .shift-staff-header > div:last-child,
body.mobile-shift-focus #shiftView .shift-staff-header__stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

body.mobile-shift-focus #shiftView .shift-staff-header > div:last-child > div,
body.mobile-shift-focus #shiftView .shift-stat-chip {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 8px !important;
}

body.mobile-shift-focus #shiftMonthDisplay {
    font-size: 0.95rem !important;
}

body.mobile-shift-focus #shiftSummaryOff,
body.mobile-shift-focus #shiftSummaryHalf {
    font-size: 1.35rem !important;
}

body.mobile-shift-focus #shiftView div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

body.mobile-shift-focus #shiftOffDates,
body.mobile-shift-focus #shiftHalfDates {
    font-size: 1.35rem !important;
    min-height: auto !important;
}

body.mobile-shift-focus #shiftCalendarGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

@media (min-width: 420px) {
    body.mobile-shift-focus #shiftCalendarGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 700px) {
    body.mobile-shift-focus #shiftCalendarGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}


/* Custom Jobdesk Category Dropdown Portal */
#jobdeskCategoryPortal {
    display: none;
    position: fixed;
    z-index: 2147483646;
    background: #0f172a;
    border: 1px solid var(--card-border-theme, var(--glass-border));
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    padding: 8px;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

#jobdeskCategoryPortal.show {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#jobdeskCategoryPortal .category-option {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    background: #0f172a;
    border: none;
    text-align: left;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#jobdeskCategoryPortal .category-option:hover {
    background: var(--glass-tint);
    color: var(--text-main);
}

#jobdeskCategoryPortal .category-option.active {
    background: var(--glass-tint);
    color: var(--accent);
    border: 1px solid var(--card-border-theme, var(--glass-border-focus));
}

/* Scrollbar styling for dropdown */
#jobdeskCategoryPortal::-webkit-scrollbar {
    width: 6px;
}

#jobdeskCategoryPortal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

#jobdeskCategoryPortal::-webkit-scrollbar-thumb {
    background: var(--primary-glow);
    border-radius: 10px;
}

#jobdeskCategoryPortal::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ========== JOBDESK — base component classes ========== */
.jd-category-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(165deg, rgba(22, 32, 48, 0.92) 0%, rgba(10, 16, 28, 0.88) 100%);
    overflow: hidden;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.jd-category-head {
    margin: -24px -24px 18px -24px;
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 22px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c4b5fd;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(15, 23, 42, 0.55) 55%, transparent 100%);
}
.jd-category-head--deposit {
    color: #7dd3fc;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(15, 23, 42, 0.55) 55%, transparent 100%);
}
.jd-category-head--withdraw {
    color: #fda4af;
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.16) 0%, rgba(15, 23, 42, 0.55) 55%, transparent 100%);
}
.jd-category-head--lain {
    color: #6ee7b7;
    background:
        linear-gradient(135deg, rgba(52, 211, 153, 0.16) 0%, rgba(15, 23, 42, 0.55) 55%, transparent 100%);
}

.jd-category-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mini-card per jobdesk item — tanpa garis panjang pemisah */
.jd-item-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.18) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.jd-item-row__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 22px;
}
.jd-item-name {
    font-weight: 800;
    color: #f8fafc;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.jd-tugas-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.58rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(14, 165, 233, 0.14) 100%);
    border: 1px solid rgba(125, 211, 252, 0.45);
    color: #bae6fd;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(14, 165, 233, 0.15);
}

.jd-item-row--assigned {
    border-color: rgba(56, 189, 248, 0.22);
    background:
        linear-gradient(160deg, rgba(56, 189, 248, 0.08) 0%, rgba(0, 0, 0, 0.16) 100%);
}

.jd-trigger.date-picker-input {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 0.78rem;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.92) 0%, rgba(4, 8, 16, 0.95) 100%);
    color: #fff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jd-trigger.date-picker-input:hover {
    border-color: rgba(125, 211, 252, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(56, 189, 248, 0.08);
}

.jd-trigger .selected-text {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.jd-trigger i {
    flex-shrink: 0;
    font-size: 0.68rem;
    opacity: 0.55;
}

/* Luxury add-form for "Pengaturan Jobdesk Kasir" */
.jd-add-panel-luxury {
    position: relative;
    border: 1px solid var(--card-border-theme, var(--glass-border));
    background:
        linear-gradient(145deg, rgba(14, 20, 32, 0.88) 0%, rgba(8, 12, 22, 0.82) 100%),
        var(--glass-bg);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(212, 175, 55, 0.06);
}

.jd-add-panel-luxury::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 85% 20%, var(--glass-tint) 0%, transparent 42%);
}

.jd-add-form-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.jd-add-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jd-add-field--category {
    flex: 1;
    min-width: 200px;
}

.jd-add-field--name {
    flex: 2;
    min-width: 250px;
}

.jd-add-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

.jd-add-trigger.date-picker-input,
.jd-add-input.date-picker-input {
    border: 1px solid var(--glass-border) !important;
    background: rgba(0, 0, 0, 0.36) !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.jd-add-trigger.date-picker-input:hover,
.jd-add-input.date-picker-input:hover {
    border-color: var(--card-border-theme, var(--glass-border-focus)) !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.jd-add-submit.btn.btn-primary {
    height: 38px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 48%, var(--accent) 100%);
    color: #1b1407;
    letter-spacing: 0.35px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 16px var(--primary-glow);
}

.jd-add-submit.btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 22px var(--primary-glow);
}

.jd-assigned-card {
    padding: 14px 20px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jd-assigned-name {
    font-weight: 800;
    color: #fff;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jd-staff-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.jd-assigned-tasks {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.4;
}

/* Jobdesk shift selector — tombol terpisah, mewah */
.jd-shift-selector,
#jobdeskShiftSelector.jd-shift-selector {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#jobdeskShiftSelector .jd-shift-btn,
#jobdeskShiftSelector .btn-tab.jd-shift-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 148px;
    min-height: 42px;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    background: linear-gradient(165deg, #1a222e 0%, #121820 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(241, 245, 249, 0.72) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

#jobdeskShiftSelector .jd-shift-btn i {
    font-size: 0.95rem;
}

#jobdeskShiftSelector .jd-shift-btn--pagi i {
    color: #fbbf24 !important;
}

#jobdeskShiftSelector .jd-shift-btn--malam i {
    color: #a5b4fc !important;
}

#jobdeskShiftSelector .jd-shift-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(165deg, #222c3a 0%, #171e28 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

#jobdeskShiftSelector .jd-shift-btn--pagi.active,
#jobdeskShiftSelector .jd-shift-btn--pagi.active:hover {
    color: #fff8e7 !important;
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.28) 0%, rgba(120, 82, 18, 0.55) 100%) !important;
    border-color: rgba(245, 230, 184, 0.55) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 248, 231, 0.22) !important;
}

#jobdeskShiftSelector .jd-shift-btn--pagi.active i {
    color: #fde68a !important;
}

#jobdeskShiftSelector .jd-shift-btn--malam.active,
#jobdeskShiftSelector .jd-shift-btn--malam.active:hover {
    color: #e0e7ff !important;
    background: linear-gradient(165deg, rgba(129, 140, 248, 0.28) 0%, rgba(49, 46, 129, 0.55) 100%) !important;
    border-color: rgba(199, 210, 254, 0.5) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(199, 210, 254, 0.2) !important;
}

#jobdeskShiftSelector .jd-shift-btn--malam.active i {
    color: #c7d2fe !important;
}

.jd-main-header {
    border-bottom: none !important;
}

.jd-assigned-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 100%;
}

/* Jobdesk Staff Dropdown Scrollbar */
#jdGlobalDropdown #jdDropdownOptions::-webkit-scrollbar {
    width: 6px;
}

#jdGlobalDropdown #jdDropdownOptions::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

#jdGlobalDropdown #jdDropdownOptions::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.35);
    border-radius: 8px;
}

#jdGlobalDropdown #jdDropdownOptions::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.6);
}

/* ─── WB TEAM module ─── */
.sidebar-section-label--wb {
    color: rgba(125, 211, 252, 0.78);
}

.sidebar-section-label--wb::before {
    width: 12px;
    background: linear-gradient(90deg, #38bdf8, rgba(56, 189, 248, 0.35));
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

body:not([class*="theme-"]) .sidebar-section-label--wb {
    color: rgba(125, 211, 252, 0.78) !important;
}

body:not([class*="theme-"]) .sidebar-section-label--wb::before {
    background: linear-gradient(90deg, #38bdf8, rgba(56, 189, 248, 0.35)) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
}

.wb-team-view {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

/* DATA STAFF / DATA KESALAHAN / MASA AKTIF VISA: semua baris tampil penuh, pager di bawah baris terakhir */
#wbDataStaffView.active,
#wbDataKesalahanView.active,
#wbMasaAktifVisaView.active {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 24px;
    box-sizing: border-box;
}

#wbDataKesalahanView .wb-kesalahan-alert {
    margin-bottom: 12px;
    max-height: none;
    overflow: visible;
}

#wbDataStaffView .wb-team-card--fill,
#wbDataKesalahanView .wb-team-card--fill,
#wbMasaAktifVisaView .wb-team-card--fill {
    display: block;
    min-height: 0;
    overflow: visible !important;
}

#wbDataStaffView .wb-team-table-wrap,
#wbDataKesalahanView .wb-team-table-wrap,
#wbMasaAktifVisaView .wb-team-table-wrap,
#wbDataStaffView .wb-team-table-wrap--fill,
#wbDataKesalahanView .wb-team-table-wrap--fill,
#wbMasaAktifVisaView .wb-team-table-wrap--fill {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Pager: posisi normal di bawah tabel (bukan fixed/beku) */
#wbDataStaffView .wb-pager,
#wbDataKesalahanView .wb-pager,
#wbMasaAktifVisaView .wb-pager {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    margin: 12px 0 0 !important;
    width: 100%;
    box-sizing: border-box;
}

#wbDataStaffView:not(.active) .wb-pager,
#wbDataKesalahanView:not(.active) .wb-pager,
#wbMasaAktifVisaView:not(.active) .wb-pager,
#wbDataStaffView.hide .wb-pager,
#wbDataKesalahanView.hide .wb-pager,
#wbMasaAktifVisaView.hide .wb-pager {
    display: none !important;
}

body.sidebar-collapsed #wbDataStaffView .wb-pager,
body.sidebar-collapsed #wbDataKesalahanView .wb-pager,
body.sidebar-collapsed #wbMasaAktifVisaView .wb-pager {
    left: auto !important;
}

@media (max-width: 900px) {
    #wbDataStaffView .wb-pager,
    #wbDataKesalahanView .wb-pager,
    #wbMasaAktifVisaView .wb-pager {
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

.app-content.app-content--wb-fill {
    display: block !important;
    overflow-y: auto !important;
}

.app-content.app-content--wb-fill > #wbDataStaffView.active,
.app-content.app-content--wb-fill > #wbDataKesalahanView.active,
.app-content.app-content--wb-fill > #wbMasaAktifVisaView.active {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.wb-team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
    padding: 4px 0 2px;
}

.wb-team-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wb-team-header__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #7dd3fc;
    font-size: 1.45rem;
    flex-shrink: 0;
}

.wb-team-header h2 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #fff;
    text-transform: uppercase;
}

.wb-team-header p {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.wb-team-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-end;
}

/* Compact filter selects for Pengajuan Cuti header */
#wbCutiStatusFilter,
#wbCutiPersetujuanFilter {
    min-width: 220px !important;
    width: clamp(220px, 24vw, 320px) !important;
    max-width: 100% !important;
    padding: 8px 30px 8px 10px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--card-border-theme, var(--glass-border)) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    height: 38px !important;
    box-sizing: border-box !important;
    appearance: auto;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

#wbCutiPersetujuanFilter {
    min-width: 300px !important;
    width: clamp(300px, 36vw, 420px) !important;
}

#wbCutiStatusFilter:focus,
#wbCutiPersetujuanFilter:focus {
    outline: none;
    border-color: var(--glass-border-focus) !important;
    box-shadow: 0 0 0 2px var(--glass-tint) !important;
}

#wbCutiStatusFilter option,
#wbCutiPersetujuanFilter option {
    background: #0f172a;
    color: var(--text-main);
    font-weight: 700;
}

/* ── Data Kesalahan: periode bar (compact + luxury) ── */
.wb-kesalahan-period-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.wb-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 10px;
    border-radius: 12px;
    background:
        linear-gradient(165deg, rgba(90, 18, 16, 0.92) 0%, rgba(42, 8, 8, 0.96) 55%, rgba(20, 4, 4, 0.98) 100%);
    border: 1px solid rgba(255, 215, 0, 0.42);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 6px 18px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(255, 215, 0, 0.12);
}

.wb-period-chip__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
    white-space: nowrap;
}

.wb-year-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.wb-year-stepper__btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.22), rgba(184, 134, 11, 0.16));
    color: #ffe9a0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.wb-year-stepper__btn:hover {
    transform: scale(1.06);
    filter: brightness(1.12);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.wb-year-stepper__btn:active {
    transform: scale(0.96);
}

.wb-year-stepper__value {
    min-width: 3.2em;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff8dc;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    padding: 0 4px;
}

.wb-period-chip--quarter {
    padding-right: 6px;
    position: relative;
    z-index: 20;
}

.wb-period-dd {
    position: relative;
}

.wb-period-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 9.8rem;
    height: 30px;
    padding: 0 10px 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: linear-gradient(145deg, rgba(70, 14, 12, 0.95), rgba(28, 6, 6, 0.98));
    color: #fff8dc;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 10px rgba(255, 215, 0, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wb-period-dd__btn:hover,
.wb-period-dd.is-open .wb-period-dd__btn {
    border-color: #ffd700;
    filter: brightness(1.06);
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 14px rgba(255, 215, 0, 0.2);
}

.wb-period-dd__chev {
    margin-left: auto;
    font-size: 0.58rem;
    color: #ffd700;
    transition: transform 0.18s ease;
}

.wb-period-dd.is-open .wb-period-dd__chev {
    transform: rotate(180deg);
}

.wb-period-dd__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 12.5rem;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    background:
        linear-gradient(165deg, rgba(72, 14, 12, 0.98) 0%, rgba(28, 6, 6, 0.99) 55%, rgba(14, 3, 3, 1) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45) inset,
        0 14px 32px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(255, 215, 0, 0.18);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: wbPeriodDdIn 0.16s ease;
}

.wb-period-dd__menu.hide {
    display: none;
}

@keyframes wbPeriodDdIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.wb-period-dd__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #fff8dc;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.wb-period-dd__opt:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(184, 134, 11, 0.1));
    border-color: rgba(255, 215, 0, 0.28);
}

.wb-period-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(184, 134, 11, 0.18));
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.12);
}

.wb-period-dd__q {
    flex: 0 0 auto;
    min-width: 1.8em;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffd700;
}

.wb-period-dd__m {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff8dc;
}

@media (max-width: 720px) {
    .wb-kesalahan-period-bar {
        width: 100%;
    }
    .wb-period-chip {
        flex: 1 1 auto;
        justify-content: space-between;
    }
    .wb-period-dd,
    .wb-period-dd__btn {
        flex: 1;
        width: 100%;
        min-width: 0;
    }
    .wb-period-dd__menu {
        right: auto;
        width: max(100%, 12.5rem);
    }
}

.wb-team-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
}

.wb-team-search-wrap .wb-team-search {
    width: 100%;
    padding-right: 40px;
}

.wb-team-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #5a1210;
    font-size: 0.7rem;
    background: linear-gradient(145deg, #ffe9a0 0%, #ffd700 42%, #b8860b 100%);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.65),
        0 0 12px rgba(255, 215, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wb-team-search-clear:hover {
    transform: translateY(-50%) scale(1.1);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px #ffd700,
        0 0 16px rgba(255, 215, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wb-team-search-clear:active {
    transform: translateY(-50%) scale(0.96);
}

.wb-team-search-clear.hide {
    display: none !important;
}

.wb-team-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    min-width: 180px;
    font-size: 0.85rem;
}

.wb-team-search:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12);
}

body.theme-china-dynasty .wb-team-search,
body.theme-gold-imperial .wb-team-search {
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: rgba(0, 0, 0, 0.45);
}

body.theme-china-dynasty .wb-team-search:focus,
body.theme-gold-imperial .wb-team-search:focus {
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18), 0 0 14px rgba(255, 215, 0, 0.12);
}

/* Sembunyikan X native browser (diganti tombol emas kustom) */
.wb-team-search::-webkit-search-cancel-button,
.wb-team-search::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.wb-team-card {
    padding: 0;
    overflow: hidden;
    /* Solid — cegah konten table tembus lewat glass transparan */
    background: #121018 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.theme-china-dynasty .wb-team-card,
body.theme-gold-imperial .wb-team-card {
    background: #2a0a0a !important;
    background-image: none !important;
}

.wb-team-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none;
    background: #121018 !important;
    background-image: none !important;
    box-shadow: none !important;
    /* Jangan pakai isolation — bisa bikin sticky kolom nama goyang / tembus */
}

.wb-team-card--fill {
    display: block;
    min-height: 0;
}

.wb-team-table-wrap--fill {
    flex: 0 0 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.wb-kesalahan-alert {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background:
        linear-gradient(165deg, rgba(90, 18, 16, 0.95) 0%, rgba(40, 8, 8, 0.98) 55%, rgba(18, 4, 4, 1) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(248, 113, 113, 0.12);
}

.wb-kesalahan-alert--empty {
    border-color: rgba(74, 222, 128, 0.35);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 8px 22px rgba(0, 0, 0, 0.28),
        0 0 14px rgba(74, 222, 128, 0.1);
}

.wb-kesalahan-alert__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fecaca;
}

.wb-kesalahan-alert--empty .wb-kesalahan-alert__head {
    margin-bottom: 0;
    color: #86efac;
}

.wb-kesalahan-alert__head i {
    color: #f87171;
}

.wb-kesalahan-alert--empty .wb-kesalahan-alert__head i {
    color: #4ade80;
}

.wb-kesalahan-alert__head em {
    font-style: normal;
    min-width: 1.5em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fecaca;
    font-size: 0.72rem;
}

.wb-kesalahan-alert__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wb-kesalahan-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.12), rgba(80, 16, 14, 0.55));
    color: #fff8dc;
    cursor: pointer;
    text-align: left;
    transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.wb-kesalahan-chip:hover {
    transform: translateY(-1px);
    border-color: #ffd700;
    filter: brightness(1.08);
}

.wb-kesalahan-chip__name {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.wb-kesalahan-chip__meta {
    font-size: 0.66rem;
    color: #fca5a5;
    line-height: 1.3;
    white-space: normal;
}

.wb-kesalahan-chip__poin {
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ffd700;
}

.wb-kesalahan-divider-bad td span {
    color: #fca5a5 !important;
}

.wb-kesalahan-row--bad td {
    background: rgba(127, 29, 29, 0.22);
}

.wb-kesalahan-row--flash td {
    animation: wbKesalahanFlash 1.4s ease;
}

@keyframes wbKesalahanFlash {
    0%, 100% { background-color: transparent; }
    30%, 60% { background-color: rgba(255, 215, 0, 0.22); }
}

.wb-pager {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    background: #1c0808;
    background-image: linear-gradient(165deg, #6a1612 0%, #2a0a0a 45%, #140404 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 14px rgba(255, 215, 0, 0.08);
}

.wb-pager__left,
.wb-pager__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wb-pager__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffe9a0;
}

.wb-pager-dd {
    position: relative;
    z-index: 40;
}

.wb-pager-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 68px;
    height: 30px;
    padding: 0 10px 0 12px;
    border-radius: 9px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    background: linear-gradient(145deg, rgba(90, 18, 16, 0.98), rgba(28, 6, 6, 1));
    color: #fff8dc;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 10px rgba(255, 215, 0, 0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wb-pager-dd__btn:hover,
.wb-pager-dd.is-open .wb-pager-dd__btn {
    border-color: #ffd700;
    filter: brightness(1.08);
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 14px rgba(255, 215, 0, 0.22);
}

.wb-pager-dd__val {
    min-width: 1.6em;
    text-align: center;
}

.wb-pager-dd__chev {
    margin-left: auto;
    font-size: 0.58rem;
    color: #ffd700;
    transition: transform 0.18s ease;
}

.wb-pager-dd.is-open .wb-pager-dd__chev {
    transform: rotate(180deg);
}

.wb-pager-dd__menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 100%;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    background: linear-gradient(165deg, #5a1210 0%, #2a0a0a 55%, #140404 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5) inset,
        0 -10px 28px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: wbPagerDdIn 0.14s ease;
    z-index: 50;
}

.wb-pager-dd__menu.hide {
    display: none;
}

@keyframes wbPagerDdIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.wb-pager-dd__opt {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #fff8dc;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.wb-pager-dd__opt:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(184, 134, 11, 0.1));
    border-color: rgba(255, 215, 0, 0.3);
}

.wb-pager-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(184, 134, 11, 0.18));
    border-color: rgba(255, 215, 0, 0.55);
    color: #ffd700;
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.12);
}

.wb-pager__info,
.wb-pager__page {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff8dc;
    letter-spacing: 0.03em;
}

.wb-pager__btn {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.28), rgba(184, 134, 11, 0.2));
    color: #ffe9a0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.wb-pager__btn i {
    pointer-events: none;
}

.wb-pager__btn:hover:not(:disabled) {
    transform: scale(1.06);
    filter: brightness(1.1);
}

.wb-pager__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

body.theme-china-dynasty .wb-team-table-wrap,
body.theme-gold-imperial .wb-team-table-wrap {
    background: #2a0a0a !important;
}

.wb-team-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
}

.wb-team-table .wb-colgroup-name {
    width: 220px;
}

/* Matikan transition "all" dari .report-table — merusak sticky */
.wb-team-table tbody tr,
.wb-team-table th,
.wb-team-table td {
    transition: none !important;
    transform: none !important;
}

.wb-team-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #141a28 !important;
    background-color: #141a28 !important;
    background-image: none !important;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 14px 10px;
    min-height: 48px;
    line-height: 1.35;
    border-bottom: 1px solid rgba(56, 189, 248, 0.28);
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.theme-china-dynasty .wb-team-table thead th,
body.theme-gold-imperial .wb-team-table thead th {
    background: #5a1210 !important;
    background-color: #5a1210 !important;
    background-image: none !important;
    color: #ffd700 !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.4) !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

body:not([class*="theme-"]) .wb-team-table thead th {
    background: #121018 !important;
    background-color: #121018 !important;
    background-image: none !important;
    color: #e8d48a !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.wb-team-table--cuti thead th {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 5px 6px;
    min-height: 0;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

/* Rowspan headers: sticky breaks vertical-align — center via inner flex */
.wb-team-table--cuti thead th.wb-th-rowspan {
    vertical-align: middle !important;
    padding: 0 !important;
}

.wb-team-table--cuti thead th.wb-th-rowspan .wb-th-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    height: 100%;
    padding: 5px 6px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.wb-team-table--cuti thead th.wb-th-total-cuti {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(184, 134, 11, 0.12) 100%) !important;
    color: #ffd700 !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    border-left: 2px solid rgba(255, 215, 0, 0.4) !important;
    white-space: nowrap;
}

.wb-team-table--cuti thead th.wb-col-catatan {
    width: 52px;
    min-width: 52px;
    max-width: 56px;
}

.wb-team-table--cuti thead th.wb-th-group {
    vertical-align: middle !important;
    padding: 6px 6px 4px !important;
    height: 24px;
    box-sizing: border-box;
}

.wb-team-table--cuti thead tr:nth-child(2) th,
.wb-team-table--cuti thead th.wb-th-sub {
    top: 24px;
    z-index: 4;
    padding: 5px 6px !important;
    font-size: 0.58rem;
    min-height: 24px;
    height: 24px;
    vertical-align: middle !important;
    box-sizing: border-box;
    line-height: 1.2;
}

body.theme-china-dynasty .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-gold-imperial .wb-team-table--cuti thead tr:nth-child(2) th {
    background: #4a100e !important;
    background-color: #4a100e !important;
}

.wb-team-table tbody td {
    padding: 3px 6px;
    font-size: 0.72rem;
    line-height: 1.25;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    height: auto;
}

.wb-team-table .wb-col-name {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

/*
 * Bekukan NAMA STAFF — Data Staff / Kesalahan / Cuti / Visa
 * Header tetap di atas saat scroll vertikal;
 * Nama tetap di kiri saat scroll horizontal.
 */
#wbDataStaffTable th.wb-col-name,
#wbDataStaffTable td.wb-col-name,
#wbDataKesalahanTable th.wb-col-name,
#wbDataKesalahanTable td.wb-col-name,
#wbPengajuanCutiTable th.wb-col-name,
#wbPengajuanCutiTable td.wb-col-name,
#wbMasaAktifVisaTable th.wb-col-name,
#wbMasaAktifVisaTable td.wb-col-name {
    position: sticky !important;
    left: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 280px !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    background-image: none !important;
    border-right: 2px solid rgba(255, 215, 0, 0.72) !important;
    box-shadow:
        6px 0 14px -2px rgba(0, 0, 0, 0.55),
        2px 0 0 rgba(255, 215, 0, 0.35) !important;
}

#wbDataStaffTable thead th.wb-col-name,
#wbDataKesalahanTable thead th.wb-col-name,
#wbPengajuanCutiTable thead th.wb-col-name,
#wbMasaAktifVisaTable thead th.wb-col-name {
    top: 0 !important;
    z-index: 20 !important;
    text-align: center !important;
    background: #141a28 !important;
    background-color: #141a28 !important;
}

#wbDataStaffTable tbody td.wb-col-name,
#wbDataKesalahanTable tbody td.wb-col-name,
#wbPengajuanCutiTable tbody td.wb-col-name,
#wbMasaAktifVisaTable tbody td.wb-col-name {
    z-index: 6 !important;
    background: #121018 !important;
    background-color: #121018 !important;
    text-align: left !important;
}

body.theme-china-dynasty #wbDataStaffTable thead th.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable thead th.wb-col-name,
body.theme-china-dynasty #wbDataKesalahanTable thead th.wb-col-name,
body.theme-gold-imperial #wbDataKesalahanTable thead th.wb-col-name,
body.theme-china-dynasty #wbPengajuanCutiTable thead th.wb-col-name,
body.theme-gold-imperial #wbPengajuanCutiTable thead th.wb-col-name,
body.theme-china-dynasty #wbMasaAktifVisaTable thead th.wb-col-name,
body.theme-gold-imperial #wbMasaAktifVisaTable thead th.wb-col-name {
    background: #5a1210 !important;
    background-color: #5a1210 !important;
    border-right: 2px solid #ffd700 !important;
    box-shadow:
        8px 0 16px -2px rgba(0, 0, 0, 0.65),
        3px 0 10px rgba(255, 215, 0, 0.22) !important;
}

body.theme-china-dynasty #wbDataStaffTable tbody td.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable tbody td.wb-col-name,
body.theme-china-dynasty #wbDataKesalahanTable tbody td.wb-col-name,
body.theme-gold-imperial #wbDataKesalahanTable tbody td.wb-col-name,
body.theme-china-dynasty #wbPengajuanCutiTable tbody td.wb-col-name,
body.theme-gold-imperial #wbPengajuanCutiTable tbody td.wb-col-name,
body.theme-china-dynasty #wbMasaAktifVisaTable tbody td.wb-col-name,
body.theme-gold-imperial #wbMasaAktifVisaTable tbody td.wb-col-name {
    background: #2a0a0a !important;
    background-color: #2a0a0a !important;
    border-right: 2px solid rgba(255, 215, 0, 0.75) !important;
    box-shadow:
        8px 0 16px -2px rgba(0, 0, 0, 0.6),
        3px 0 8px rgba(255, 215, 0, 0.18) !important;
}

body.theme-wb #wbDataStaffTable thead th.wb-col-name,
body.theme-wb #wbDataKesalahanTable thead th.wb-col-name,
body.theme-wb #wbPengajuanCutiTable thead th.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable thead th.wb-col-name {
    background: #243444 !important;
    background-color: #243444 !important;
    color: #e8efc4 !important;
    border-right: 2px solid rgba(201, 211, 106, 0.65) !important;
    box-shadow: 6px 0 12px -4px rgba(0, 0, 0, 0.45) !important;
}

body.theme-wb #wbDataStaffTable tbody td.wb-col-name,
body.theme-wb #wbDataKesalahanTable tbody td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable tbody td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable tbody td.wb-col-name {
    background: #15202a !important;
    background-color: #15202a !important;
    color: #f2f5f8 !important;
    border-right: 2px solid rgba(201, 211, 106, 0.45) !important;
    box-shadow: 6px 0 12px -4px rgba(0, 0, 0, 0.4) !important;
}

body.theme-wb #wbDataStaffTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbDataKesalahanTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable tbody tr:hover td.wb-col-name {
    background: #1a2834 !important;
    background-color: #1a2834 !important;
}

/* Hilangkan sisa border emas kusam di tabel WB */
body.theme-wb .wb-team-table th,
body.theme-wb .wb-team-table td,
body.theme-wb #wbDataStaffTable th,
body.theme-wb #wbDataStaffTable td,
body.theme-wb #wbPengajuanCutiTable th,
body.theme-wb #wbPengajuanCutiTable td,
body.theme-wb #wbMasaAktifVisaTable th,
body.theme-wb #wbMasaAktifVisaTable td,
body.theme-wb #wbDataKesalahanTable th,
body.theme-wb #wbDataKesalahanTable td {
    border-color: rgba(142, 196, 220, 0.12) !important;
}

/* Kolom nama: aksen lime (override border generik di atas) */
body.theme-wb #wbDataStaffTable th.wb-col-name,
body.theme-wb #wbDataStaffTable td.wb-col-name,
body.theme-wb #wbDataKesalahanTable th.wb-col-name,
body.theme-wb #wbDataKesalahanTable td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable th.wb-col-name,
body.theme-wb #wbPengajuanCutiTable td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable th.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable td.wb-col-name {
    border-right-color: rgba(201, 211, 106, 0.55) !important;
}

body.theme-wb .wb-team-table tbody tr.wb-jabatan-divider td,
body.theme-wb #wbDataStaffTable tbody tr.wb-jabatan-divider td,
body.theme-wb #wbDataKesalahanTable tbody tr.wb-jabatan-divider td,
body.theme-wb #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td {
    border-color: rgba(201, 211, 106, 0.28) !important;
    border-top-color: rgba(201, 211, 106, 0.4) !important;
    border-bottom-color: rgba(201, 211, 106, 0.28) !important;
}

body.theme-wb #wbDataStaffTable tbody td.wb-col-name,
body.theme-wb #wbDataKesalahanTable tbody td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable tbody td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable tbody td.wb-col-name {
    background: #15202a !important;
    background-color: #15202a !important;
    color: #f2f5f8 !important;
    border-right: 2px solid rgba(201, 211, 106, 0.55) !important;
    box-shadow: 6px 0 12px -4px rgba(0, 0, 0, 0.4) !important;
}

body.theme-wb #wbDataStaffTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbDataKesalahanTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbPengajuanCutiTable tbody tr:hover td.wb-col-name,
body.theme-wb #wbMasaAktifVisaTable tbody tr:hover td.wb-col-name {
    background: #1a2834 !important;
    background-color: #1a2834 !important;
}

body:not([class*="theme-"]) #wbDataStaffTable thead th.wb-col-name {
    background: #121018 !important;
    background-color: #121018 !important;
}

body:not([class*="theme-"]) #wbDataStaffTable tbody td.wb-col-name {
    background: #121018 !important;
    background-color: #121018 !important;
}

body.theme-china-dynasty #wbDataStaffTable tbody tr:hover td.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable tbody tr:hover td.wb-col-name {
    background: #3d1010 !important;
    background-color: #3d1010 !important;
}

#wbDataStaffTable tbody tr:hover td.wb-col-name {
    background: #1a2233 !important;
    background-color: #1a2233 !important;
}

body:not([class*="theme-"]) #wbDataStaffTable tbody tr:hover td.wb-col-name {
    background: #1a1624 !important;
    background-color: #1a1624 !important;
}

/* LEADER (Samuel) — baris #1, background beda dari staff lain */
#wbDataStaffTable tbody tr.wb-row-leader td {
    background: #1a2e1f !important;
    background-color: #1a2e1f !important;
    background-image: none !important;
    border-bottom-color: rgba(74, 222, 128, 0.35) !important;
    color: #f0fdf4 !important;
    font-weight: 600;
}

#wbDataStaffTable tbody tr.wb-row-leader td.wb-col-name {
    background: #1a2e1f !important;
    background-color: #1a2e1f !important;
    color: #bbf7d0 !important;
    font-weight: 800;
}

#wbDataStaffTable tbody tr.wb-row-leader:hover td,
#wbDataStaffTable tbody tr.wb-row-leader:hover td.wb-col-name {
    background: #234032 !important;
    background-color: #234032 !important;
}

body.theme-china-dynasty #wbDataStaffTable tbody tr.wb-row-leader td,
body.theme-gold-imperial #wbDataStaffTable tbody tr.wb-row-leader td,
body.theme-china-dynasty #wbDataStaffTable tbody tr.wb-row-leader td.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable tbody tr.wb-row-leader td.wb-col-name {
    background: #3d2a08 !important;
    background-color: #3d2a08 !important;
    border-bottom-color: rgba(255, 215, 0, 0.45) !important;
    color: #fff8e7 !important;
}

body.theme-china-dynasty #wbDataStaffTable tbody tr.wb-row-leader td.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable tbody tr.wb-row-leader td.wb-col-name {
    color: #ffd700 !important;
}

body.theme-china-dynasty #wbDataStaffTable tbody tr.wb-row-leader:hover td,
body.theme-gold-imperial #wbDataStaffTable tbody tr.wb-row-leader:hover td,
body.theme-china-dynasty #wbDataStaffTable tbody tr.wb-row-leader:hover td.wb-col-name,
body.theme-gold-imperial #wbDataStaffTable tbody tr.wb-row-leader:hover td.wb-col-name {
    background: #4a3410 !important;
    background-color: #4a3410 !important;
}

/* Pembatas antar JABATAN — tipis, label di tengah layar (viewport) */
#wbDataStaffTable tbody tr.wb-jabatan-divider td,
#wbDataKesalahanTable tbody tr.wb-jabatan-divider td,
#wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td {
    padding: 2px 0 !important;
    height: 22px;
    line-height: 1.1;
    text-align: left !important;
    background: #4a100e !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 215, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.35) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative;
}

#wbDataStaffTable tbody tr.wb-jabatan-divider td span,
#wbDataKesalahanTable tbody tr.wb-jabatan-divider td span,
#wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span {
    position: sticky;
    left: 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--wb-vis-w, 100%);
    max-width: var(--wb-vis-w, 100%);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd700 !important;
    white-space: nowrap;
}

#wbDataStaffTable tbody tr.wb-jabatan-divider td span::before,
#wbDataKesalahanTable tbody tr.wb-jabatan-divider td span::before,
#wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.45);
}

body:not([class*="theme-"]) #wbDataStaffTable tbody tr.wb-jabatan-divider td,
body:not([class*="theme-"]) #wbDataKesalahanTable tbody tr.wb-jabatan-divider td,
body:not([class*="theme-"]) #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td {
    background: #1a1624 !important;
    background-image: none !important;
    border-top-color: rgba(212, 175, 55, 0.4) !important;
    border-bottom-color: rgba(212, 175, 55, 0.25) !important;
}

body:not([class*="theme-"]) #wbDataStaffTable tbody tr.wb-jabatan-divider td span,
body:not([class*="theme-"]) #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span,
body:not([class*="theme-"]) #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span {
    color: #e8d48a !important;
}

body:not([class*="theme-"]) #wbDataStaffTable tbody tr.wb-jabatan-divider td span::before,
body:not([class*="theme-"]) #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span::before,
body:not([class*="theme-"]) #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span::before {
    background: #e8d48a;
    box-shadow: 0 0 6px rgba(232, 212, 138, 0.4);
}

/* Tema WB — divider jabatan navy/lime, tanpa merah */
body.theme-wb #wbDataStaffTable tbody tr.wb-jabatan-divider td,
body.theme-wb #wbDataKesalahanTable tbody tr.wb-jabatan-divider td,
body.theme-wb #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td,
body.theme-wb .wb-team-table tbody tr.wb-jabatan-divider td {
    background: #1a2834 !important;
    background-color: #1a2834 !important;
    background-image: none !important;
    border-top: 1px solid rgba(201, 211, 106, 0.35) !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.22) !important;
    color: #c9d36a !important;
    box-shadow: none !important;
}

body.theme-wb #wbDataStaffTable tbody tr.wb-jabatan-divider td span,
body.theme-wb #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span,
body.theme-wb #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span,
body.theme-wb .wb-team-table tbody tr.wb-jabatan-divider td span {
    color: #c9d36a !important;
}

body.theme-wb #wbDataStaffTable tbody tr.wb-jabatan-divider td span::before,
body.theme-wb #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span::before,
body.theme-wb #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span::before,
body.theme-wb .wb-team-table tbody tr.wb-jabatan-divider td span::before {
    background: #c9d36a !important;
    box-shadow: none !important;
}

/* Legacy sticky helpers (cuti/visa name align) */
.wb-team-table .wb-col-sticky {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.wb-team-table--cuti thead tr:first-child th[colspan] {
    background: #1a2438 !important;
}

body.theme-china-dynasty .wb-team-table--cuti thead tr:first-child th[colspan],
body.theme-gold-imperial .wb-team-table--cuti thead tr:first-child th[colspan] {
    background: #6a1612 !important;
}

.wb-kesalahan-cell {
    white-space: nowrap;
}

.wb-kesalahan-cell .wb-kesalahan-val {
    display: inline-block;
    min-width: 1.2em;
    margin-right: 6px;
    font-weight: 700;
}

.wb-kesalahan-pen {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.22), rgba(184, 134, 11, 0.18));
    color: #ffd700;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.wb-kesalahan-pen:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.wb-kesalahan-pen--view {
    border-color: rgba(148, 163, 184, 0.45);
    color: #cbd5e1;
    background: linear-gradient(145deg, rgba(148, 163, 184, 0.18), rgba(71, 85, 105, 0.2));
}

.wb-kesalahan-pen--view:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.25);
}

.wb-kesalahan-cell--noted .wb-kesalahan-pen {
    border-color: rgba(74, 222, 128, 0.55);
    color: #86efac;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.15));
}

.wb-kesalahan-total-cell {
    min-width: 160px;
    max-width: 280px;
    white-space: normal;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.wb-kesalahan-custom-th {
    min-width: 140px;
    line-height: 1.25;
}

.wb-kesalahan-potong-badge {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fca5a5;
    letter-spacing: 0.02em;
}

.wb-daftar-kesalahan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}

.wb-daftar-kesalahan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.wb-daftar-kesalahan-nama {
    font-weight: 700;
    font-size: 0.86rem;
}

.wb-daftar-kesalahan-meta {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.wb-daftar-kesalahan-aksi {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wb-btn-danger {
    color: #fca5a5 !important;
}

.wb-aksi-cell {
    white-space: nowrap;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tombol aksi compact di tabel WB */
.wb-team-table .wb-btn-sm,
.wb-aksi-cell .wb-btn-sm,
#wbDataStaffTable .wb-btn-sm,
#wbPengajuanCutiTable .wb-btn-sm,
#wbMasaAktifVisaTable .wb-btn-sm,
#wbDataKesalahanTable .wb-btn-sm {
    padding: 3px 7px !important;
    min-height: 24px !important;
    height: 24px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    gap: 4px !important;
}

.wb-team-table .wb-btn-sm i,
.wb-aksi-cell .wb-btn-sm i {
    font-size: 0.68rem !important;
}

.wb-catatan-eye-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(184, 134, 11, 0.1));
    color: #ffd700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.58rem;
    transition: background 0.15s ease, border-color 0.15s ease;
    vertical-align: middle;
}

.wb-catatan-eye-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(184, 134, 11, 0.22));
    border-color: rgba(255, 215, 0, 0.65);
}

.wb-catatan-eye-btn i {
    font-size: 0.58rem;
    line-height: 1;
}

#wbPengajuanCutiTable th.wb-col-catatan,
#wbPengajuanCutiTable td:nth-last-child(2) {
    width: 52px;
    min-width: 52px;
    max-width: 56px;
    text-align: center;
}

#wbPengajuanCutiTable th.wb-col-catatan.wb-th-rowspan {
    padding: 0 !important;
}

#wbPengajuanCutiTable td:nth-last-child(2) {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.wb-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

/* STATUS warna — !important agar tidak tertimpa tema (china/gold) */
.wb-badge.wb-st-kerja,
body.theme-china-dynasty .wb-badge.wb-st-kerja,
body.theme-gold-imperial .wb-badge.wb-st-kerja,
body[class*="theme-"] .wb-badge.wb-st-kerja {
    color: #bbf7d0 !important;
    border: 1px solid rgba(34, 197, 94, 0.65) !important;
    background: rgba(22, 163, 74, 0.28) !important;
    background-image: none !important;
}

.wb-badge.wb-st-cuti,
body.theme-china-dynasty .wb-badge.wb-st-cuti,
body.theme-gold-imperial .wb-badge.wb-st-cuti,
body[class*="theme-"] .wb-badge.wb-st-cuti {
    color: #fef08a !important;
    border: 1px solid rgba(234, 179, 8, 0.7) !important;
    background: rgba(202, 138, 4, 0.3) !important;
    background-image: none !important;
}

.wb-badge.wb-st-merah,
body.theme-china-dynasty .wb-badge.wb-st-merah,
body.theme-gold-imperial .wb-badge.wb-st-merah,
body[class*="theme-"] .wb-badge.wb-st-merah {
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, 0.7) !important;
    background: rgba(220, 38, 38, 0.3) !important;
    background-image: none !important;
}

.wb-badge.wb-st-mutasi,
body.theme-china-dynasty .wb-badge.wb-st-mutasi,
body.theme-gold-imperial .wb-badge.wb-st-mutasi,
body[class*="theme-"] .wb-badge.wb-st-mutasi {
    color: #bfdbfe !important;
    border: 1px solid rgba(59, 130, 246, 0.7) !important;
    background: rgba(37, 99, 235, 0.3) !important;
    background-image: none !important;
}

.wb-badge--ok {
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    background: rgba(34, 197, 94, 0.12) !important;
    background-image: none !important;
}

.wb-badge--warn {
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    background: rgba(245, 158, 11, 0.12) !important;
    background-image: none !important;
}

.wb-badge.wb-st-persetujuan-tunggu,
body.theme-china-dynasty .wb-badge.wb-st-persetujuan-tunggu,
body.theme-gold-imperial .wb-badge.wb-st-persetujuan-tunggu {
    color: #422006 !important;
    border-color: rgba(250, 204, 21, 0.65) !important;
    background: linear-gradient(145deg, #fde047, #eab308) !important;
    background-image: linear-gradient(145deg, #fde047, #eab308) !important;
}

.wb-badge.wb-st-persetujuan-ok,
body.theme-china-dynasty .wb-badge.wb-st-persetujuan-ok,
body.theme-gold-imperial .wb-badge.wb-st-persetujuan-ok {
    color: #052e16 !important;
    border-color: rgba(34, 197, 94, 0.65) !important;
    background: linear-gradient(145deg, #86efac, #22c55e) !important;
    background-image: linear-gradient(145deg, #86efac, #22c55e) !important;
}

.wb-badge.wb-st-persetujuan-tolak,
body.theme-china-dynasty .wb-badge.wb-st-persetujuan-tolak,
body.theme-gold-imperial .wb-badge.wb-st-persetujuan-tolak {
    color: #450a0a !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
    background: linear-gradient(145deg, #fca5a5, #ef4444) !important;
    background-image: linear-gradient(145deg, #fca5a5, #ef4444) !important;
}

/* Status Persetujuan — compact, menu overlay (tidak mendorong layout) */
.wb-status-dd {
    position: relative;
    width: fit-content;
    min-width: 128px;
    max-width: 148px;
    z-index: 2;
}

.wb-status-dd {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wb-status-dd__btn {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.wb-status-dd__btn > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.wb-status-dd__btn--menunggu {
    color: #422006;
    background: #eab308;
    background-image: linear-gradient(145deg, #fde047, #eab308);
    border-color: rgba(250, 204, 21, 0.8);
}

.wb-status-dd__btn--disetujui {
    color: #052e16;
    background: #22c55e;
    background-image: linear-gradient(145deg, #86efac, #22c55e);
    border-color: rgba(34, 197, 94, 0.8);
}

.wb-status-dd__btn--ditolak {
    color: #450a0a;
    background: #ef4444;
    background-image: linear-gradient(145deg, #fca5a5, #ef4444);
    border-color: rgba(239, 68, 68, 0.8);
}

.wb-status-dd__btn--done-cuti {
    color: #022c22;
    background: #10b981;
    background-image: linear-gradient(145deg, #6ee7b7, #10b981);
    border-color: rgba(16, 185, 129, 0.8);
}

.wb-status-dd__btn--bentrok {
    color: #431407;
    background: #f97316;
    background-image: linear-gradient(145deg, #ff8c00, #f97316);
    border-color: rgba(249, 115, 22, 0.8);
}

.wb-status-dd__btn--belum-waktu {
    color: #2e1065;
    background: #9333ea;
    background-image: linear-gradient(145deg, #c084fc, #9333ea);
    border-color: rgba(147, 51, 234, 0.8);
}

.wb-status-dd__btn--cancel-cuti {
    color: #450a0a;
    background: #dc2626;
    background-image: linear-gradient(145deg, #f87171, #dc2626);
    border-color: rgba(220, 38, 38, 0.8);
}

.wb-status-dd__btn--task-checker {
    color: #082f49;
    background: #0284c7;
    background-image: linear-gradient(145deg, #38bdf8, #0284c7);
    border-color: rgba(2, 132, 199, 0.8);
}

.wb-status-dd__btn:hover,
.wb-status-dd.is-open .wb-status-dd__btn {
    filter: brightness(1.05);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18);
}

.wb-status-dd__chev {
    margin-left: auto;
    font-size: 0.55rem;
    opacity: 0.85;
    transition: transform 0.18s ease;
}

.wb-status-dd.is-open .wb-status-dd__chev {
    transform: rotate(180deg);
}

.wb-status-dd__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    z-index: 130;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    background: #1a0808;
    background-image: linear-gradient(165deg, #3a1010 0%, #1a0808 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 12px 24px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#modalWbCuti #wbCutiStatusPersetujuanBtn {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.82rem !important;
    padding: 0 12px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}

#wbCutiStatusPersetujuanMenu {
    width: max-content !important;
    min-width: 250px !important;
    max-width: 360px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    background: #0f0c18 !important;
    border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 20px rgba(212, 175, 55, 0.2) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    z-index: 1000 !important;
}

#wbCutiStatusPersetujuanMenu .wb-status-dd__opt {
    color: #f5e6b8 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

#wbCutiStatusPersetujuanMenu .wb-status-dd__opt:hover {
    background: rgba(212, 175, 55, 0.22) !important;
    border-color: rgba(212, 175, 55, 0.7) !important;
    color: #ffd700 !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

#wbCutiStatusPersetujuanMenu .wb-status-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(184, 134, 11, 0.2) 100%) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25) !important;
}

.wb-status-dd__menu.hide {
    display: none !important;
}

.wb-status-dd__opt {
    width: 100%;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.wb-status-dd__opt--menunggu {
    color: #422006;
    background: #eab308;
    background-image: linear-gradient(145deg, #fde047, #eab308);
}

.wb-status-dd__opt--disetujui {
    color: #052e16;
    background: #22c55e;
    background-image: linear-gradient(145deg, #86efac, #22c55e);
}

.wb-status-dd__opt--ditolak {
    color: #450a0a;
    background: #ef4444;
    background-image: linear-gradient(145deg, #fca5a5, #ef4444);
}

.wb-status-dd__opt--done-cuti {
    color: #022c22;
    background: #10b981;
    background-image: linear-gradient(145deg, #6ee7b7, #10b981);
}

.wb-status-dd__opt--bentrok {
    color: #431407;
    background: #f97316;
    background-image: linear-gradient(145deg, #ff8c00, #f97316);
}

.wb-status-dd__opt--belum-waktu {
    color: #2e1065;
    background: #9333ea;
    background-image: linear-gradient(145deg, #c084fc, #9333ea);
}

.wb-status-dd__opt--cancel-cuti {
    color: #450a0a;
    background: #dc2626;
    background-image: linear-gradient(145deg, #f87171, #dc2626);
}

.wb-status-dd__opt--task-checker {
    color: #082f49;
    background: #0284c7;
    background-image: linear-gradient(145deg, #38bdf8, #0284c7);
}

.wb-status-dd__opt:hover {
    filter: brightness(1.14);
    transform: translateX(2px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.wb-status-dd__opt.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.wb-status-dd__opt.is-active:hover {
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.45),
        0 0 0 2px rgba(255, 215, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Status Persetujuan di tabel — klik untuk ubah */
.wb-persetujuan-cell {
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

.wb-persetujuan-cell:has(.wb-status-dd--table.is-open) {
    z-index: 40;
}

.wb-status-dd--table {
    width: max-content;
    min-width: 110px;
    max-width: none;
    margin: 0 auto;
}

.wb-status-dd--table .wb-status-dd__btn {
    width: max-content;
    min-width: 110px;
    max-width: none;
    min-height: 26px;
    height: auto;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 999px;
}

/* Menu portal di body — tidak terpotong overflow glass-card/tabel */
#wbCutiTableStatusMenu.wb-status-dd__menu--portal,
.wb-status-dd__menu--portal {
    position: fixed !important;
    width: max-content !important;
    min-width: 230px !important;
    max-width: 360px !important;
    margin: 0;
    box-sizing: border-box;
}

#modalWbCuti label:has(.wb-status-dd) {
    position: relative;
    align-items: flex-start;
    z-index: 2;
}

#modalWbCuti label:has(.wb-status-dd.is-open) {
    z-index: 140;
}

#modalWbCuti .wb-modal-grid {
    position: relative;
    z-index: 2;
    overflow: visible;
}

#modalWbCuti .wb-cuti-block {
    position: relative;
    z-index: 1;
}

.wb-muted {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.wb-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wb-modal-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.wb-modal-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wb-cuti-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wb-cuti-block h4 {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: #7dd3fc;
}

.wb-staff-picker-label {
    position: relative;
    z-index: 5;
}

.wb-staff-picker {
    position: relative;
}

.wb-staff-picker__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    max-height: 280px;
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(0, 0, 0, 0.34) 0%, var(--glass-bg) 22%, var(--glass-bg-hover) 100%);
    border: 1px solid var(--card-border-theme, var(--glass-border));
    border-radius: 12px;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 248, 231, 0.04),
        0 0 0 1px rgba(212, 175, 55, 0.06);
}

.wb-staff-picker__list.hide {
    display: none !important;
}

.wb-staff-picker__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--card-border-theme, var(--glass-border-focus));
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(0, 0, 0, 0.24) 72%);
    color: var(--text-main);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.wb-staff-picker__head span:last-child {
    text-align: right;
}

.wb-staff-picker__table {
    max-height: 236px;
    overflow-y: auto;
    overflow-x: hidden;
}

.wb-staff-picker__group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 12px;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: var(--accent);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, rgba(0, 0, 0, 0.18) 68%);
    border-top: 1px solid rgba(212, 175, 55, 0.28);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.wb-staff-picker__item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.15s ease, transform 0.12s ease;
}

.wb-staff-picker__item:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0.12) 100%);
    transform: translateX(1px);
}

.wb-staff-picker__name {
    font-size: 0.77rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-staff-picker__role {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.wb-staff-picker__empty {
    padding: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 720px) {
    .wb-modal-grid,
    .wb-modal-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ========== SHIFT KERJA BULANAN — kalender lebih jelas ========== */
#shiftCalendarGrid.shift-calendar-grid,
#shiftCalendarGrid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.shift-calendar-weekday {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #ffffff;
    padding: 8px 4px;
    text-transform: uppercase;
    background: #1a2834;
    border: 1px solid #3a4d60;
    border-radius: 8px;
}

.shift-calendar-pad {
    min-height: 1px;
    visibility: hidden;
    pointer-events: none;
}

.shift-day-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 120px;
    padding: 10px 8px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    overflow: hidden;
    opacity: 1;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shift-day-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.shift-day-card > * {
    position: relative;
    z-index: 1;
}

body.theme-wb #shiftView .monitor-header h2 {
    color: #f2f5f8 !important;
    letter-spacing: 0.04em;
}

body.theme-wb #shiftView .luxury-month-selector {
    background: #182430 !important;
    border-color: rgba(142, 196, 220, 0.28) !important;
    box-shadow: none !important;
}

body.theme-wb #shiftScheduleContainer .shift-schedule-card.glass-card,
body.theme-wb #shiftScheduleContainer .shift-schedule-card {
    background: #15202a !important;
    border-color: rgba(142, 196, 220, 0.28) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

body.theme-wb #shiftView .shift-staff-header {
    background: #182430 !important;
    border-color: rgba(201, 211, 106, 0.28) !important;
    box-shadow: none !important;
}

body.theme-wb #shiftStaffName {
    color: #ffffff !important;
    font-size: 1.55rem !important;
    letter-spacing: 0.04em !important;
}

body.theme-wb #shiftStaffRole {
    background: #1a2834 !important;
    border-color: rgba(201, 211, 106, 0.4) !important;
    color: #c9d36a !important;
    border-radius: 8px !important;
}

body.theme-wb #shiftStaffAvatar {
    display: none !important;
}

body.theme-wb .shift-calendar-weekday {
    color: #ffffff !important;
    background: #1a2834 !important;
    border: 1px solid #3a4d60 !important;
    border-radius: 8px;
}

body.theme-wb .wb-kesalahan-alert {
    border-color: rgba(248, 113, 113, 0.35);
    background: linear-gradient(165deg, #2a1a1c 0%, #1a1418 55%, #14181e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
    #shiftCalendarGrid.shift-calendar-grid,
    #shiftCalendarGrid {
        gap: 6px !important;
    }

    .shift-day-card {
        min-height: 96px !important;
        padding: 8px 6px !important;
    }

    .shift-day-card__num {
        font-size: 1.35rem !important;
    }
}

/* ========== Tema WB — hilangkan sisa merah imperial ========== */

/* Data Kesalahan: TAHUN / PERIODE */
body.theme-wb .wb-period-chip {
    background: #182430 !important;
    background-image: none !important;
    border: 1px solid rgba(142, 196, 220, 0.32) !important;
    box-shadow: none !important;
}

body.theme-wb .wb-period-chip__label {
    color: #c9d36a !important;
    text-shadow: none !important;
}

body.theme-wb .wb-year-stepper__btn {
    border-color: rgba(142, 196, 220, 0.35) !important;
    background: #1a2834 !important;
    color: #c9d36a !important;
    box-shadow: none !important;
}

body.theme-wb .wb-year-stepper__btn:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 0 0 1px rgba(201, 211, 106, 0.3) !important;
}

body.theme-wb .wb-year-stepper__value {
    color: #f2f5f8 !important;
    text-shadow: none !important;
}

body.theme-wb .wb-period-dd__btn {
    border-color: rgba(142, 196, 220, 0.35) !important;
    background: #0e161e !important;
    color: #f2f5f8 !important;
    box-shadow: none !important;
}

body.theme-wb .wb-period-dd__btn:hover,
body.theme-wb .wb-period-dd.is-open .wb-period-dd__btn {
    border-color: #c9d36a !important;
    filter: none !important;
    box-shadow: 0 0 0 1px rgba(201, 211, 106, 0.25) !important;
}

body.theme-wb .wb-period-dd__chev {
    color: #c9d36a !important;
}

body.theme-wb .wb-period-dd__menu {
    border-color: rgba(142, 196, 220, 0.3) !important;
    background: #15202a !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

body.theme-wb .wb-period-dd__opt {
    color: #f2f5f8 !important;
}

body.theme-wb .wb-period-dd__opt:hover {
    background: #1a2834 !important;
    border-color: rgba(201, 211, 106, 0.25) !important;
}

body.theme-wb .wb-period-dd__opt.is-active {
    background: rgba(201, 211, 106, 0.18) !important;
    border-color: rgba(201, 211, 106, 0.45) !important;
    box-shadow: none !important;
}

body.theme-wb .wb-period-dd__q {
    color: #c9d36a !important;
}

body.theme-wb .wb-period-dd__m {
    color: #f2f5f8 !important;
}

/* Paspor shift panels — navy/lime (bukan merah/oranye imperial) */
body.theme-wb .paspor-shift-panel--pagi,
body.theme-wb .paspor-shift-panel--malam {
    background: #15202a !important;
    border: 1px solid rgba(142, 196, 220, 0.28) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

body.theme-wb .paspor-shift-panel__header--pagi,
body.theme-wb .paspor-shift-panel__header--malam {
    background: #1a2834 !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.28) !important;
    box-shadow: none !important;
}

body.theme-wb .paspor-shift-panel__header--pagi .paspor-shift-panel__header-icon,
body.theme-wb .paspor-shift-panel__header--malam .paspor-shift-panel__header-icon {
    color: #c9d36a !important;
    filter: none !important;
}

body.theme-wb .paspor-shift-panel__header--pagi .paspor-shift-panel__title,
body.theme-wb .paspor-shift-panel__header--malam .paspor-shift-panel__title {
    color: #f2f5f8 !important;
    text-shadow: none !important;
}

body.theme-wb .paspor-shift-panel__header--pagi .paspor-shift-panel__badge,
body.theme-wb .paspor-shift-panel__header--malam .paspor-shift-panel__badge {
    color: #0b1118 !important;
    background: #c9d36a !important;
    border: 1px solid rgba(201, 211, 106, 0.55) !important;
    box-shadow: none !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-shift-panel__table-wrap,
body.theme-wb .paspor-shift-panel--malam .paspor-shift-panel__table-wrap {
    border: none !important;
    background: #101820 !important;
    box-shadow: none !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table thead th,
body.theme-wb .paspor-shift-panel--malam .paspor-table thead th,
body.theme-wb .paspor-table thead th {
    background: #334556 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(142, 196, 220, 0.18) !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.28) !important;
    box-shadow: none !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-group,
body.theme-wb .paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-group {
    border-bottom: 1px solid rgba(201, 211, 106, 0.22) !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-sub,
body.theme-wb .paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-sub,
body.theme-wb .paspor-table thead .paspor-th-petugas-sub {
    color: #c9d36a !important;
    background: #1a2834 !important;
    border-top: 1px solid rgba(201, 211, 106, 0.22) !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.18) !important;
    border-right: 1px solid rgba(142, 196, 220, 0.16) !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row) td,
body.theme-wb .paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row) td {
    border-bottom: 1px solid #243444 !important;
    border-right: 1px solid #243444 !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row):hover td,
body.theme-wb .paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    background: #1a2834 !important;
    border-bottom-color: rgba(201, 211, 106, 0.22) !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:hover td:first-child,
body.theme-wb .paspor-shift-panel--malam .paspor-table.report-table tbody tr:hover td:first-child {
    border-left: 3px solid #c9d36a !important;
}

body.theme-wb .paspor-shift-panel--pagi .paspor-role-divider,
body.theme-wb .paspor-shift-panel--malam .paspor-role-divider {
    background: #1a2834 !important;
    border-top: 1px solid rgba(201, 211, 106, 0.28) !important;
    border-bottom: 1px solid rgba(201, 211, 106, 0.22) !important;
    color: #c9d36a !important;
}

/* ========== SHIFT KERJA BULANAN — tajam, tidak buram ========== */
#shiftView .shift-schedule-card,
#shiftView .shift-schedule-card.glass-card,
#shiftScheduleContainer .shift-schedule-card,
#shiftScheduleContainer .shift-schedule-card.glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    text-shadow: none !important;
    background: #0f172a !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
}

#shiftView .shift-schedule-card.glass-card::before,
#shiftView .shift-schedule-card.glass-card::after,
#shiftScheduleContainer .shift-schedule-card.glass-card::before,
#shiftScheduleContainer .shift-schedule-card.glass-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

#shiftView #shiftCalendarGrid,
#shiftView .shift-day-card,
#shiftView .shift-legend-bar,
#shiftView .shift-calendar-weekday {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.shift-legend-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    background: #15202a;
    border-radius: 10px;
    border: 1px solid #3a4d60;
}

.shift-legend-bar__title {
    font-size: 0.78rem;
    color: #dbeafe;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}

.shift-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #3a4d60;
    background: #0e161e;
}

.shift-legend-item span:last-child {
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.shift-legend-swatch {
    min-width: 36px;
    height: 30px;
    padding: 0 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    box-sizing: border-box;
    color: #ffffff !important;
}

.shift-legend-item--pagi .shift-legend-swatch {
    background: linear-gradient(180deg, #c9a227, #6b4a10);
    border: 1px solid rgba(245, 230, 184, 0.55);
    color: #fff8e7 !important;
}
.shift-legend-item--malam .shift-legend-swatch {
    background: linear-gradient(180deg, #6366f1, #312e81);
    border: 1px solid rgba(199, 210, 254, 0.5);
    color: #e0e7ff !important;
}
.shift-legend-item--tiga .shift-legend-swatch {
    background: linear-gradient(180deg, #22c55e, #14532d);
    border: 1px solid rgba(187, 247, 208, 0.5);
    color: #dcfce7 !important;
}
.shift-legend-item--empat .shift-legend-swatch {
    background: linear-gradient(180deg, #f97316, #9a3412);
    border: 1px solid rgba(254, 215, 170, 0.5);
    color: #ffedd5 !important;
}
.shift-legend-item--half .shift-legend-swatch {
    background: linear-gradient(180deg, #eab308, #854d0e);
    border: 1px solid rgba(253, 230, 138, 0.55);
    color: #fffbeb !important;
}
.shift-legend-item--off .shift-legend-swatch {
    background: linear-gradient(180deg, #b91c1c, #450a0a);
    border: 1px solid rgba(254, 202, 202, 0.45);
    color: #fee2e2 !important;
}
.shift-legend-item--cuti .shift-legend-swatch {
    background: linear-gradient(180deg, #059669, #064e3b);
    border: 1px solid rgba(167, 243, 208, 0.5);
    color: #d1fae5 !important;
}

.shift-calendar-weekday {
    text-align: center;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    padding: 8px 4px !important;
    text-transform: uppercase;
    background: #1a2834 !important;
    border: 1px solid #3a4d60 !important;
    border-radius: 8px;
}

body.theme-wb .shift-calendar-weekday {
    color: #ffffff !important;
    background: #1a2834 !important;
    border: 1px solid #3a4d60 !important;
}

.shift-day-card {
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 118px;
    border: 2px solid #94a3b8;
    cursor: default;
    overflow: hidden;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.shift-day-card__wd {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 248, 231, 0.92) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.shift-day-card__num {
    font-size: 2.05rem !important;
    font-weight: 900 !important;
    line-height: 1;
    color: #fff8e7 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    -webkit-font-smoothing: antialiased;
}

.shift-day-card__badge {
    width: 100%;
    margin-top: auto;
    padding: 7px 6px !important;
    border-radius: 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(8, 6, 4, 0.72) 0%, rgba(4, 3, 2, 0.88) 100%) !important;
    border: 1px solid rgba(245, 230, 184, 0.18) !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.08) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.shift-day-card__code {
    display: block;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    color: #f5e6b8 !important;
    text-shadow: none !important;
}

.shift-day-card__label {
    display: block;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(245, 230, 184, 0.78) !important;
    line-height: 1.25;
    text-shadow: none !important;
}

/* Shift PAGI — champagne / gold */
.shift-day-card--pagi,
#shiftView .shift-day-card.shift-day-card--pagi {
    background:
        linear-gradient(165deg, rgba(212, 175, 55, 0.55) 0%, rgba(120, 82, 18, 0.92) 42%, rgba(28, 18, 6, 0.98) 100%) !important;
    border-color: rgba(245, 230, 184, 0.42) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 248, 231, 0.18) !important;
}

/* Shift MALAM — deep indigo */
.shift-day-card--malam,
#shiftView .shift-day-card.shift-day-card--malam {
    background:
        linear-gradient(165deg, rgba(129, 140, 248, 0.48) 0%, rgba(49, 46, 129, 0.92) 45%, rgba(10, 12, 28, 0.98) 100%) !important;
    border-color: rgba(199, 210, 254, 0.4) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(199, 210, 254, 0.16) !important;
}

.shift-day-card--malam .shift-day-card__code,
#shiftView .shift-day-card--malam .shift-day-card__code {
    color: #c7d2fe !important;
}

.shift-day-card--malam .shift-day-card__label,
#shiftView .shift-day-card--malam .shift-day-card__label {
    color: rgba(199, 210, 254, 0.78) !important;
}

.shift-day-card--malam .shift-day-card__badge,
#shiftView .shift-day-card--malam .shift-day-card__badge {
    border-color: rgba(165, 180, 252, 0.22) !important;
}

/* Shift SIANG — emerald (legacy: tiga) */
.shift-day-card--siang,
.shift-day-card--tiga,
#shiftView .shift-day-card.shift-day-card--siang,
#shiftView .shift-day-card.shift-day-card--tiga {
    background:
        linear-gradient(165deg, rgba(74, 222, 128, 0.42) 0%, rgba(22, 101, 52, 0.92) 45%, rgba(6, 18, 10, 0.98) 100%) !important;
    border-color: rgba(187, 247, 208, 0.4) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(187, 247, 208, 0.14) !important;
}

.shift-day-card--siang .shift-day-card__code,
.shift-day-card--tiga .shift-day-card__code {
    color: #bbf7d0 !important;
}

.shift-day-card--siang .shift-day-card__label,
.shift-day-card--tiga .shift-day-card__label {
    color: rgba(187, 247, 208, 0.78) !important;
}

/* Shift SORE — warm amber (legacy: empat) */
.shift-day-card--sore,
.shift-day-card--empat,
#shiftView .shift-day-card.shift-day-card--sore,
#shiftView .shift-day-card.shift-day-card--empat {
    background:
        linear-gradient(165deg, rgba(251, 146, 60, 0.48) 0%, rgba(154, 52, 18, 0.92) 45%, rgba(24, 10, 4, 0.98) 100%) !important;
    border-color: rgba(254, 215, 170, 0.42) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(254, 215, 170, 0.14) !important;
}

.shift-day-card--sore .shift-day-card__code,
.shift-day-card--empat .shift-day-card__code {
    color: #fed7aa !important;
}

.shift-day-card--sore .shift-day-card__label,
.shift-day-card--empat .shift-day-card__label {
    color: rgba(254, 215, 170, 0.8) !important;
}

/* HALF DAY — soft champagne */
.shift-day-card--half,
#shiftView .shift-day-card.shift-day-card--half {
    background:
        linear-gradient(165deg, rgba(253, 230, 138, 0.5) 0%, rgba(161, 120, 28, 0.9) 45%, rgba(28, 20, 6, 0.98) 100%) !important;
    border-color: rgba(253, 230, 138, 0.45) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 248, 231, 0.16) !important;
}

/* OFF DAY — muted wine */
.shift-day-card--off,
#shiftView .shift-day-card.shift-day-card--off {
    background:
        linear-gradient(165deg, rgba(248, 113, 113, 0.38) 0%, rgba(127, 29, 29, 0.9) 45%, rgba(24, 8, 10, 0.98) 100%) !important;
    border-color: rgba(254, 202, 202, 0.35) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(254, 202, 202, 0.12) !important;
}

.shift-day-card--off .shift-day-card__code {
    color: #fecaca !important;
}

.shift-day-card--off .shift-day-card__label {
    color: rgba(254, 202, 202, 0.78) !important;
}

/* CUTI — deep forest */
.shift-day-card--cuti,
#shiftView .shift-day-card.shift-day-card--cuti {
    background:
        linear-gradient(165deg, rgba(52, 211, 153, 0.4) 0%, rgba(6, 78, 59, 0.92) 45%, rgba(4, 16, 12, 0.98) 100%) !important;
    border-color: rgba(167, 243, 208, 0.38) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(167, 243, 208, 0.12) !important;
}

.shift-day-card--cuti .shift-day-card__code {
    color: #a7f3d0 !important;
}

.shift-day-card--cuti .shift-day-card__label {
    color: rgba(167, 243, 208, 0.78) !important;
}

/* Bingkai + garis glow tanggal hari ini */
.shift-day-card.is-today {
    overflow: visible !important;
    border: 2px solid #f5e6b8 !important;
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.55),
        0 0 14px 3px rgba(245, 230, 184, 0.55),
        0 0 28px 6px rgba(212, 175, 55, 0.35),
        0 10px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 248, 231, 0.35),
        inset 0 1px 0 rgba(255, 248, 231, 0.4) !important;
    transform: translateZ(0);
    z-index: 2;
    animation: shift-today-glow 2.4s ease-in-out infinite;
}

.shift-day-card.is-today::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 1.5px solid rgba(255, 248, 231, 0.75);
    box-shadow:
        0 0 10px rgba(245, 230, 184, 0.65),
        inset 0 0 8px rgba(212, 175, 55, 0.25);
    pointer-events: none;
    z-index: 2;
}

@keyframes shift-today-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(212, 175, 55, 0.5),
            0 0 12px 2px rgba(245, 230, 184, 0.45),
            0 0 24px 4px rgba(212, 175, 55, 0.28),
            0 10px 28px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 248, 231, 0.3),
            inset 0 1px 0 rgba(255, 248, 231, 0.35);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(245, 230, 184, 0.7),
            0 0 18px 4px rgba(245, 230, 184, 0.7),
            0 0 34px 8px rgba(212, 175, 55, 0.45),
            0 10px 28px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 248, 231, 0.45),
            inset 0 1px 0 rgba(255, 248, 231, 0.5);
    }
}

.shift-day-card__today-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1408;
    background: linear-gradient(135deg, #fff8e7 0%, #f5e6b8 45%, #d4af37 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 8px rgba(245, 230, 184, 0.45);
    pointer-events: none;
}

body.theme-wb .shift-day-card.is-today {
    border-color: #f5e6b8 !important;
}

body.theme-gold-imperial .shift-day-card.is-today {
    border-color: #ffd700 !important;
}

body.theme-gold-imperial .shift-day-card__today-tag {
    color: #1a1408;
    background: linear-gradient(135deg, #fff8e7 0%, #f5e6b8 45%, #d4af37 100%);
}

#shiftView #shiftOffDates,
#shiftView #shiftHalfDates {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Ringkasan OFF — teks lebih terang */
#shiftView #shiftMonthDisplay,
#shiftView #shiftSummaryOff,
#shiftView #shiftSummaryHalf,
#shiftView #shiftStaffName {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
}

@media (max-width: 720px) {
    .shift-day-card {
        min-height: 100px;
        padding: 8px 5px;
        gap: 4px;
    }
    .shift-day-card__num { font-size: 1.5rem !important; }
    .shift-day-card__label { font-size: 0.58rem !important; }
    .shift-day-card__code { font-size: 0.78rem !important; }
    .shift-legend-item span:last-child { font-size: 0.68rem; }
}

/* Banner unduhan APK — samping Pilih Periode (PC only) */
.shift-view-header__right {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 auto;
    justify-content: flex-end;
    max-width: min(920px, 100%);
}

.shift-apk-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #182430;
    border: 1px solid rgba(201, 211, 106, 0.32);
    box-sizing: border-box;
    min-width: 0;
    text-transform: none !important;
}

.shift-apk-banner--compact {
    flex: 1 1 380px;
    max-width: 580px;
    margin: 0;
}

.shift-apk-banner__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #243444;
    color: #c9d36a;
    font-size: 1rem;
}

.shift-apk-banner__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shift-apk-banner__lead,
.shift-apk-banner__meta,
.shift-apk-banner__note,
.shift-apk-banner__text {
    margin: 0;
    text-transform: none !important;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.shift-apk-banner__lead {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f2f5f8;
}

.shift-apk-banner__lead strong {
    color: #c9d36a;
    font-weight: 800;
}

.shift-apk-banner__meta {
    font-size: 0.74rem;
    font-weight: 600;
    color: #b8c5d1;
}

.shift-apk-banner__meta a,
.shift-apk-banner__text a {
    color: #c9d36a;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.shift-apk-banner__meta a:hover,
.shift-apk-banner__text a:hover {
    color: #e4ef9a;
}

.shift-apk-banner__note {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8ec4dc;
}

.shift-apk-banner__copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(201, 211, 106, 0.45);
    background: #243444;
    color: #c9d36a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
}

.shift-apk-banner__copy:hover {
    background: #2d4050;
    border-color: #c9d36a;
}

.shift-apk-banner__copy.is-copied {
    color: #0b1118;
    background: #c9d36a;
    border-color: #c9d36a;
}

/* Sembunyikan di mobile / layar kecil / mode fokus mobile */
@media (max-width: 980px) {
    .shift-apk-banner,
    .shift-apk-banner--compact {
        display: none !important;
    }
}

body.mobile-shift-focus .shift-apk-banner,
html.mobile-shift-focus .shift-apk-banner {
    display: none !important;
}

/* ── Luxury filter dropdown (jabatan / shift) ── */
.lux-filter-dd {
    position: relative;
    display: inline-block;
    min-width: 168px;
    vertical-align: middle;
    z-index: 30;
}

.filter-row-mini .lux-filter-dd {
    flex: 1;
    min-width: 140px;
}

.lux-filter-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
}

.lux-filter-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 14px 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(201, 211, 106, 0.42);
    background:
        linear-gradient(145deg, rgba(26, 40, 52, 0.96) 0%, rgba(11, 17, 24, 0.98) 100%);
    color: #f2f5f8;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(142, 196, 220, 0.08);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, filter 0.18s ease;
}

.lux-filter-dd__btn:hover,
.lux-filter-dd.is-open .lux-filter-dd__btn {
    border-color: rgba(201, 211, 106, 0.72);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 2px rgba(201, 211, 106, 0.16),
        0 10px 28px rgba(0, 0, 0, 0.42);
}

.lux-filter-dd__label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, #f4f7e8 0%, #e8efc4 40%, #c9d36a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lux-filter-dd__chev {
    font-size: 0.62rem;
    color: #c9d36a;
    transition: transform 0.18s ease;
}

.lux-filter-dd.is-open .lux-filter-dd__chev {
    transform: rotate(180deg);
}

.lux-filter-dd__menu {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 188px;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(142, 196, 220, 0.28);
    background:
        linear-gradient(165deg, rgba(21, 32, 42, 0.98) 0%, rgba(11, 17, 24, 0.99) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 211, 106, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 100000;
    animation: luxFilterIn 0.16s ease;
}

.lux-filter-dd__menu.hide {
    display: none !important;
}

@keyframes luxFilterIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lux-filter-dd__opt {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    margin: 0 0 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #f2f5f8;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lux-filter-dd__opt:last-child {
    margin-bottom: 0;
}

.lux-filter-dd__opt:hover {
    background: rgba(142, 196, 220, 0.10);
    border-color: rgba(142, 196, 220, 0.22);
    color: #e8efc4;
}

.lux-filter-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(213, 223, 138, 0.22) 0%, rgba(142, 196, 220, 0.18) 100%);
    border-color: rgba(201, 211, 106, 0.45);
    color: #e8efc4;
    box-shadow: inset 0 0 0 1px rgba(201, 211, 106, 0.12);
}

body.theme-wb .lux-filter-dd__btn {
    border-color: rgba(142, 196, 220, 0.32) !important;
    background: linear-gradient(145deg, #182430 0%, #0b1118 100%) !important;
}

body.theme-wb .lux-filter-dd__btn:hover,
body.theme-wb .lux-filter-dd.is-open .lux-filter-dd__btn {
    border-color: #c9d36a !important;
}

body.theme-wb .lux-filter-dd__menu {
    border-color: rgba(142, 196, 220, 0.28) !important;
    background: linear-gradient(165deg, #15202a 0%, #0b1118 100%) !important;
}

body.theme-gold-imperial .lux-filter-dd__btn {
    border-color: rgba(212, 175, 55, 0.5) !important;
    background: linear-gradient(145deg, rgba(70, 14, 12, 0.95), rgba(28, 6, 6, 0.98)) !important;
}

body.theme-gold-imperial .lux-filter-dd__label {
    background: linear-gradient(135deg, #fff8e7 0%, #f5e6b8 40%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-gold-imperial .lux-filter-dd__chev {
    color: #d4af37;
}

body.theme-gold-imperial .lux-filter-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(185, 28, 28, 0.18)) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #f5e6b8 !important;
}


/* ==========================================================================
   THEME: BLACK NAVY — abyss navy + ice steel, no gold
   ========================================================================== */
body.theme-black-gold {
    --bg-bg: #121c32;
    --bg-panel: #152238;
    --bg-elevated: #1c2c48;
    --bg-row: #101c2c;
    --gold: #8eb8dc;
    --gold-line: rgba(142, 180, 220, 0.42);
    --ice-bright: #eef3f8;
    --ice-deep: #6a9cc4;
    --ice-line: rgba(142, 180, 220, 0.42);
    color: #eef3f8 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html {
    background-color: #121c32;
}

body.theme-black-gold .background-overlay {
    z-index: -1 !important;
    pointer-events: none !important;
    isolation: isolate;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #121c32 !important;
}

body.theme-black-gold .monitor-header h2,
body.theme-black-gold .section-title-row h3,
body.theme-black-gold .section-title,
body.theme-black-gold #monitorView .section-title-row,
body.theme-black-gold #izinView .monitor-header h2,
body.theme-black-gold #izinView .monitor-header p {
    color: #f8fbff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.55);
    -webkit-text-fill-color: #f8fbff !important;
}

body.theme-black-gold .glass-card:not(.active-break-card):not(.staff-console-card):not(.break-notification) {
    background: linear-gradient(145deg, #142036 0%, #0c1524 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-black-gold .table-responsive,
body.theme-black-gold .table-scroll-container,
body.theme-black-gold .paspor-shift-panel__table-wrap,
body.theme-black-gold .absensi-daily-role-table-wrap,
body.theme-black-gold .absensi-daily-role-table-wrap .table-responsive {
    background: #0c1524 !important;
    background-image: none !important;
}

body.theme-black-gold::before,
body.theme-black-gold::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Shell */
body.theme-black-gold .app-sidebar {
    background: linear-gradient(180deg, #121c30 0%, #09101c 100%) !important;
    border-right: 1px solid var(--gold-line) !important;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45) !important;
}

body.theme-black-gold .app-header {
    background: linear-gradient(180deg, #152238 0%, #0c1524 100%) !important;
    border-bottom: 1px solid var(--gold-line) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.theme-black-gold .dashboard-mading-bar__panel {
    border-bottom-color: rgba(142, 180, 220, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(238, 243, 248, 0.07) 0%, rgba(238, 243, 248, 0) 34%),
        linear-gradient(90deg, rgba(142, 184, 220, 0.08) 0%, transparent 22%),
        linear-gradient(180deg, #152238 0%, #0c1524 58%, #09101c 100%) !important;
}

body.theme-black-gold .dashboard-mading-bar__panel::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(106, 156, 196, 0.22) 10%,
        rgba(142, 184, 220, 0.72) 36%,
        rgba(238, 243, 248, 0.92) 50%,
        rgba(142, 184, 220, 0.72) 64%,
        rgba(106, 156, 196, 0.22) 90%,
        transparent 100%
    ) !important;
    box-shadow: 0 0 14px rgba(142, 184, 220, 0.38) !important;
}

body.theme-black-gold .dash-staff-luxe__frame {
    background: linear-gradient(
        135deg,
        rgba(238, 243, 248, 0.72) 0%,
        rgba(142, 184, 220, 0.48) 28%,
        rgba(80, 120, 170, 0.32) 52%,
        rgba(142, 184, 220, 0.42) 76%,
        rgba(238, 243, 248, 0.58) 100%
    ) !important;
}

body.theme-black-gold .dash-staff-luxe__content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(21, 34, 56, 0.96) 0%, rgba(12, 21, 36, 0.98) 55%, rgba(7, 11, 22, 0.99) 100%) !important;
}

body.theme-black-gold .dash-staff-luxe__content--minimal .dash-staff-luxe__name {
    color: #eef3f8 !important;
    -webkit-text-fill-color: #eef3f8 !important;
    background: none !important;
}

body.theme-black-gold .sidebar-top-accent {
    background: linear-gradient(90deg, transparent, rgba(200,220,240,0.55), rgba(110,160,210,0.75), rgba(70,120,180,0.45), transparent) !important;
    height: 2px !important;
    filter: none !important;
}

body.theme-black-gold .sidebar-logo-container {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse 80% 120% at 50% -30%, rgba(200, 220, 240, 0.14), transparent 55%),
        radial-gradient(ellipse 55% 80% at 100% 120%, rgba(70, 120, 180, 0.10), transparent 50%),
        linear-gradient(155deg, #1e304c 0%, #121c30 48%, #0b1422 100%) !important;
    border: 1px solid rgba(110, 160, 210, 0.48) !important;
    border-radius: 14px !important;
    padding: 12px 10px !important;
    margin: 4px 2px 12px !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(110, 160, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45) !important;
}

body.theme-black-gold .sidebar-logo-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 238, 246, 0.85), rgba(110, 160, 210, 0.95), rgba(70, 120, 180, 0.55), transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.theme-black-gold .sidebar-logo-container::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(115deg, transparent 40%, rgba(232, 238, 246, 0.06) 50%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 50% -20%, rgba(110, 160, 210, 0.12), transparent 55%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body.theme-black-gold .sidebar-logo-clickable {
    position: relative !important;
    z-index: 1 !important;
}

body.theme-black-gold .sidebar-logo-title,
body.theme-black-gold .sidebar-logo-title-collapsed {
    position: relative !important;
    z-index: 1 !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    background: linear-gradient(115deg, #ffffff 0%, #eef3f8 18%, #d7e4f0 38%, #6a9cc4 68%, #4a7aa8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 10px rgba(110, 160, 210, 0.22)) !important;
}

body.theme-black-gold .sidebar-logo-title-collapsed {
    font-size: 0.98rem !important;
    letter-spacing: 1.5px !important;
}

body.theme-black-gold .brand-text h1,
body.theme-black-gold .live-clock .time {
    background: linear-gradient(135deg, #eef3f8 0%, #d7e4f0 28%, #6a9cc4 62%, #4a7aa8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) !important;
}

body.theme-black-gold .sidebar-toggle-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    color: #d7e4f0 !important;
    border: 1px solid rgba(110, 160, 210, 0.55) !important;
    background:
        linear-gradient(145deg, #243656 0%, #121c30 55%, #0c1524 100%) !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(110, 160, 210, 0.08) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

body.theme-black-gold .sidebar-toggle-btn:hover {
    color: #eef3f8 !important;
    border-color: #d7e4f0 !important;
    background: linear-gradient(145deg, #2a4064 0%, #182640 55%, #101c2c 100%) !important;
    box-shadow:
        0 0 16px rgba(110, 160, 210, 0.28),
        0 6px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: scale(1.06) !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-logo-container {
    padding: 10px 4px !important;
    margin: 4px 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-logo-top,
body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-logo-clickable {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-logo-top {
    flex-direction: column !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-logo-title-collapsed {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-toggle-btn {
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
}

body.theme-black-gold .app-sidebar.sidebar-collapsed .nav-item-main,
body.theme-black-gold .app-sidebar.sidebar-collapsed .nav-item-main.nav-item-sub,
body.theme-black-gold .app-sidebar.sidebar-collapsed .sidebar-group-toggle {
    padding: 6px 0 !important;
    justify-content: center !important;
}

body.theme-black-gold .live-clock {
    background: linear-gradient(160deg, #1c2c48 0%, #101c2c 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.42) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(110, 160, 210, 0.08) !important;
}

body.theme-black-gold .live-clock .date {
    color: rgba(232, 238, 246, 0.78) !important;
}

body.theme-black-gold .sidebar-footer,
body.theme-black-gold .sidebar-footer-divider {
    border-color: rgba(142, 180, 220, 0.22) !important;
}

body.theme-black-gold .sidebar-section-label,
body.theme-black-gold .sidebar-section-label--main,
body.theme-black-gold .sidebar-section-label--wb,
body.theme-black-gold .sidebar-section-label--ops {
    color: #8eb8dc !important;
    letter-spacing: 0.14em !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(142, 180, 220, 0.25) !important;
    opacity: 1 !important;
    filter: none !important;
}

body.theme-black-gold .sidebar-section-label::before,
body.theme-black-gold .sidebar-section-label--main::before,
body.theme-black-gold .sidebar-section-label--wb::before,
body.theme-black-gold .sidebar-section-label--ops::before {
    background: linear-gradient(90deg, #8eb8dc, rgba(142, 180, 220, 0.25)) !important;
    box-shadow: 0 0 8px rgba(142, 180, 220, 0.28) !important;
}

body.theme-black-gold .sidebar-divider,
body.theme-black-gold .sidebar-divider--section {
    background: linear-gradient(90deg, transparent, rgba(142, 180, 220, 0.55), transparent) !important;
    border: none !important;
}
body.theme-black-gold .sidebar-divider--section::after {
    background: #8eb8dc !important;
    box-shadow: 0 0 8px rgba(142, 180, 220, 0.55) !important;
}

/* Typography — keep headings cream; nav handled below */
body.theme-black-gold h1,
body.theme-black-gold h2,
body.theme-black-gold h3,
body.theme-black-gold h4,
body.theme-black-gold label,
body.theme-black-gold .app-header__title,
body.theme-black-gold .nav-section-label,
body.theme-black-gold .header-staff-profile,
body.theme-black-gold .wb-team-header h2,
body.theme-black-gold .wb-team-header p {
    color: #eef3f8 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #eef3f8 !important;
    background: none !important;
}

body.theme-black-gold .sidebar-staff-card {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(110, 160, 210, 0.1) !important;
}

body.theme-black-gold .sidebar-staff-card-border {
    background: linear-gradient(
        145deg,
        rgba(200, 220, 240, 0.55) 0%,
        rgba(110, 160, 210, 0.45) 45%,
        rgba(70, 120, 180, 0.38) 100%
    ) !important;
}

body.theme-black-gold .sidebar-staff-card-inner {
    background:
        radial-gradient(ellipse 90% 60% at 50% -20%, rgba(110, 160, 210, 0.1) 0%, transparent 52%),
        linear-gradient(155deg, rgba(24, 36, 56, 0.96) 0%, rgba(10, 18, 32, 0.98) 100%) !important;
}

body.theme-black-gold .sidebar-staff-inner-frame {
    border-color: rgba(110, 160, 210, 0.16) !important;
    box-shadow: inset 0 0 16px rgba(110, 160, 210, 0.06) !important;
}

body.theme-black-gold .sidebar-staff-card .sidebar-staff-name,
body.theme-black-gold .sidebar-staff-card #headerStaffName {
    background: linear-gradient(135deg, var(--text-main) 0%, var(--accent) 40%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}

body.theme-black-gold .sidebar-staff-name-accent {
    background: linear-gradient(180deg, transparent, var(--accent) 30%, var(--primary) 70%, transparent) !important;
    box-shadow: 0 0 8px var(--primary-glow) !important;
}

body.theme-black-gold .sidebar-staff-corner {
    border-color: rgba(110, 160, 210, 0.42) !important;
}

body.theme-black-gold .sidebar-staff-edit-btn {
    border-color: rgba(110, 160, 210, 0.32) !important;
    background: linear-gradient(155deg, rgba(24, 36, 56, 0.94) 0%, rgba(10, 18, 32, 0.98) 100%) !important;
    color: var(--accent) !important;
}

body.theme-black-gold .wb-team-header h2 {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

body.theme-black-gold .wb-team-header__icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.45rem !important;
    color: #0a1220 !important;
    background: linear-gradient(135deg, #d7e4f0, #6a9cc4, #4a7aa8) !important;
    border-color: rgba(200, 220, 240, 0.4) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

body.theme-black-gold .text-muted,
body.theme-black-gold [style*="color: var(--text-muted)"] {
    color: #9aadb8 !important;
}

/* ========== SIDEBAR NAV — bright metallic gold (all items) ========== */
body.theme-black-gold .app-sidebar .nav-item-main,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub,
body.theme-black-gold .app-sidebar .sidebar-group-toggle {
    border: 1px solid rgba(142, 180, 220, 0.20) !important;
    border-radius: 10px !important;
    color: #d4e4f4 !important;
    background:
        linear-gradient(155deg, rgba(232, 238, 246, 0.03) 0%, rgba(12, 18, 32, 0.94) 45%, rgba(7, 11, 22, 0.97) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 3px 10px rgba(0, 0, 0, 0.32) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
    padding-right: 20px !important;
}

body.theme-black-gold .app-sidebar .nav-item-main span:not(.chat-unread-badge),
body.theme-black-gold .app-sidebar .sidebar-group-toggle__label span {
    color: #d4e4f4 !important;
    -webkit-text-fill-color: #d4e4f4 !important;
    opacity: 1 !important;
}

body.theme-black-gold .app-sidebar .nav-item-main i,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub i,
body.theme-black-gold .app-sidebar .sidebar-group-toggle__label i {
    color: #8eb8dc !important;
    background: rgba(142, 180, 220, 0.08) !important;
    border: 1px solid rgba(142, 180, 220, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    opacity: 1 !important;
    filter: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

body.theme-black-gold .app-sidebar .sidebar-group-toggle__arrow {
    color: #8eb8dc !important;
    opacity: 0.95 !important;
}

/* Soft hover — no bright flash / no bounce transform */
body.theme-black-gold .app-sidebar .nav-item-main:hover,
body.theme-black-gold .app-sidebar .nav-item-main:not(.active):hover,
body.theme-black-gold .app-sidebar .sidebar-group-toggle:hover {
    color: #d4e4f4 !important;
    background:
        linear-gradient(155deg, rgba(142, 180, 220, 0.08) 0%, rgba(12, 18, 32, 0.96) 50%, rgba(7, 11, 22, 0.98) 100%) !important;
    border-color: rgba(142, 180, 220, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
    filter: none !important;
}

body.theme-black-gold .app-sidebar .nav-item-main:hover span:not(.chat-unread-badge),
body.theme-black-gold .app-sidebar .nav-item-main:not(.active):hover span:not(.chat-unread-badge),
body.theme-black-gold .app-sidebar .sidebar-group-toggle:hover .sidebar-group-toggle__label span {
    color: #d4e4f4 !important;
    -webkit-text-fill-color: #d4e4f4 !important;
}

body.theme-black-gold .app-sidebar .nav-item-main:hover i,
body.theme-black-gold .app-sidebar .nav-item-main:not(.active):hover i,
body.theme-black-gold .app-sidebar .sidebar-group-toggle:hover .sidebar-group-toggle__label i {
    color: #8eb8dc !important;
    background: rgba(142, 180, 220, 0.2) !important;
    border-color: rgba(142, 180, 220, 0.45) !important;
    filter: none !important;
}

body.theme-black-gold .app-sidebar .sidebar-group-toggle.is-open {
    color: #eef3f8 !important;
    background:
        linear-gradient(155deg, rgba(142, 180, 220, 0.08) 0%, rgba(12, 20, 34, 0.96) 50%, rgba(7, 11, 22, 0.98) 100%) !important;
    border-color: rgba(142, 180, 220, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
    filter: none !important;
}

/* Halaman aktif: rel es kiri, latar tetap gelap */
body.theme-black-gold .app-sidebar .nav-item-main.active,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub.active {
    color: #eef3f8 !important;
    background:
        linear-gradient(155deg, rgba(142, 184, 220, 0.05) 0%, rgba(10, 16, 28, 0.97) 48%, rgba(6, 10, 18, 0.99) 100%) !important;
    border-color: rgba(142, 184, 220, 0.28) !important;
    box-shadow:
        inset 4px 0 0 0 #8eb8dc,
        inset 0 1px 0 rgba(238, 243, 248, 0.04),
        0 3px 12px rgba(0, 0, 0, 0.36) !important;
    transform: none !important;
    filter: none !important;
}

body.theme-black-gold .app-sidebar .nav-item-main.active span:not(.chat-unread-badge) {
    color: #eef3f8 !important;
    -webkit-text-fill-color: #eef3f8 !important;
}

body.theme-black-gold .app-sidebar .nav-item-main.active i,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub.active i {
    color: #c8dceb !important;
    background: rgba(142, 180, 220, 0.16) !important;
    border-color: rgba(142, 184, 220, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-black-gold .app-sidebar .nav-item-main::before,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 0;
    height: auto !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #eef3f8 0%, #8eb8dc 45%, #6a9cc4 100%) !important;
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center left;
    box-shadow: none;
    z-index: 3 !important;
    pointer-events: none !important;
    transition: none;
}

body.theme-black-gold .app-sidebar .nav-item-main:hover::before,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub:hover::before {
    width: 3px;
    opacity: 0.55;
    transform: scaleY(0.75);
    box-shadow: 0 0 8px rgba(142, 184, 220, 0.35);
    transition: width 0.28s ease, opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

body.theme-black-gold .app-sidebar .nav-item-main.active::before,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub.active::before,
body.theme-black-gold .app-sidebar .nav-item-main.nav-just-activated::before {
    width: 4px;
    opacity: 1;
    transform: scaleY(1);
    box-shadow:
        0 0 10px rgba(142, 184, 220, 0.85),
        0 0 18px rgba(142, 184, 220, 0.4);
    animation: navIceRailIn 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-black-gold .app-sidebar .nav-item-main::after {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    width: 9px !important;
    height: 10px !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, #eef3f8 0%, #8eb8dc 50%, #6a9cc4 100%);
    opacity: 0;
    transform: translateY(-50%) scale(0.2);
    transform-origin: center;
    pointer-events: none;
    z-index: 3;
}

body.theme-black-gold .app-sidebar .nav-item-main.active::after,
body.theme-black-gold .app-sidebar .nav-item-main.nav-just-activated::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 10px rgba(142, 184, 220, 0.65);
    animation: navIceHexIn 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-black-gold .app-sidebar .nav-item-main.active i,
body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub.active i,
body.theme-black-gold .app-sidebar .nav-item-main.nav-just-activated i {
    animation: navIceIconIn 0.5s ease-out;
}

@keyframes navIceRailIn {
    0% {
        width: 0;
        opacity: 0;
        transform: scaleY(0.12);
        box-shadow: none;
    }
    58% {
        width: 5px;
        opacity: 1;
        transform: scaleY(1.08);
        box-shadow: 0 0 16px rgba(142, 184, 220, 0.9);
    }
    100% {
        width: 4px;
        opacity: 1;
        transform: scaleY(1);
        box-shadow:
            0 0 10px rgba(142, 184, 220, 0.85),
            0 0 18px rgba(142, 184, 220, 0.4);
    }
}

@keyframes navIceHexIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.15) rotate(-40deg);
    }
    62% {
        opacity: 1;
        transform: translateY(-50%) scale(1.28) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes navIceIconIn {
    0% {
        box-shadow: 0 0 0 0 rgba(142, 184, 220, 0);
    }
    40% {
        box-shadow: 0 0 0 5px rgba(142, 184, 220, 0.28), 0 0 14px rgba(142, 184, 220, 0.45);
    }
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

body.theme-black-gold .app-sidebar .nav-item-main.nav-item-sub::after,
body.theme-black-gold .app-sidebar .sidebar-logout-btn::after,
body.theme-black-gold .app-sidebar.sidebar-collapsed .nav-item-main::after {
    content: none !important;
    display: none !important;
}

/* Kill CS cyan / ST purple / role-specific teal-green leftovers */
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle,
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle:hover,
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle.is-open,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle:hover,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle.is-open {
    border-color: rgba(142, 180, 220, 0.38) !important;
}
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle.is-open,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle.is-open {
    border-color: rgba(190, 215, 240, 0.72) !important;
}

body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle__label i,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle__label i {
    color: #8eb8dc !important;
    background: rgba(142, 180, 220, 0.14) !important;
    border-color: rgba(142, 180, 220, 0.35) !important;
}
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .sidebar-group-toggle__arrow,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .sidebar-group-toggle__arrow {
    color: #8eb8dc !important;
}
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs.is-open .sidebar-group-menu,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st.is-open .sidebar-group-menu {
    border-left-color: rgba(142, 180, 220, 0.45) !important;
}

body.theme-black-gold .app-sidebar #btnSerahTerimaCSLine.active,
body.theme-black-gold .app-sidebar #btnSerahTerimaKapten.active,
body.theme-black-gold .app-sidebar #btnSerahTerimaKasir.active,
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .nav-item-sub.active,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .nav-item-sub.active {
    background:
        linear-gradient(155deg, rgba(142, 184, 220, 0.05) 0%, rgba(10, 16, 28, 0.97) 48%, rgba(6, 10, 18, 0.99) 100%) !important;
    border-color: rgba(142, 184, 220, 0.28) !important;
    color: #eef3f8 !important;
    box-shadow:
        inset 4px 0 0 0 #8eb8dc,
        inset 0 1px 0 rgba(238, 243, 248, 0.04),
        0 3px 12px rgba(0, 0, 0, 0.36) !important;
}

body.theme-black-gold .app-sidebar #btnSerahTerimaCSLine:not(.active),
body.theme-black-gold .app-sidebar #btnSerahTerimaKapten:not(.active),
body.theme-black-gold .app-sidebar #btnSerahTerimaKasir:not(.active) {
    background:
        linear-gradient(155deg, rgba(232, 238, 246, 0.03) 0%, rgba(12, 18, 32, 0.94) 45%, rgba(7, 11, 22, 0.97) 100%) !important;
    border-color: rgba(142, 180, 220, 0.20) !important;
    color: #d4e4f4 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 3px 12px rgba(0, 0, 0, 0.35) !important;
}

body.theme-black-gold .app-sidebar #btnSerahTerimaCSLine i,
body.theme-black-gold .app-sidebar #btnSerahTerimaCSLine.active i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKapten i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKapten.active i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKasir i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKasir.active i,
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .nav-item-sub.active i,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .nav-item-sub.active i,
body.theme-black-gold .app-sidebar .sidebar-nav-group--cs .nav-item-sub i,
body.theme-black-gold .app-sidebar .sidebar-nav-group--st .nav-item-sub i {
    color: #8eb8dc !important;
    background: rgba(142, 180, 220, 0.14) !important;
    border-color: rgba(142, 180, 220, 0.35) !important;
}
body.theme-black-gold .app-sidebar #btnSerahTerimaCSLine.active i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKapten.active i,
body.theme-black-gold .app-sidebar #btnSerahTerimaKasir.active i {
    color: #c8dceb !important;
    background: rgba(142, 180, 220, 0.16) !important;
    border-color: rgba(142, 184, 220, 0.42) !important;
}

body.theme-black-gold .app-sidebar .chat-unread-badge {
    background: linear-gradient(135deg, #8eb8dc, #6a9cc4) !important;
    color: #0a1220 !important;
    border-color: rgba(190, 215, 240, 0.5) !important;
}

/* Cards — neumorphic depth, gold edge */
body.theme-black-gold .glass-card:not(.staff-console-card):not(.break-notification):not(.active-break-card),
body.theme-black-gold .wb-team-card,
body.theme-black-gold .wb-team-table-wrap,
body.theme-black-gold .inner-card,
body.theme-black-gold .modal-card,
body.theme-black-gold .modal-overlay .glass-card {
    background: linear-gradient(160deg, #182640 0%, #101c2c 100%) !important;
    background-image: none !important;
    border: 1px solid rgba(110, 160, 210, 0.30) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(110, 160, 210, 0.06) !important;
    filter: none !important;
}

body.theme-black-gold #customConfirmModal .confirm-modal-luxe.glass-card,
body.theme-black-gold .modal-overlay .glass-card.confirm-modal-luxe {
    background:
        radial-gradient(120% 70% at 8% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(180, 60, 70, 0.08), transparent 48%),
        linear-gradient(165deg, #182840 0%, #101c30 52%, #0a1220 100%) !important;
    background-image:
        radial-gradient(120% 70% at 8% 0%, rgba(142, 184, 220, 0.16), transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(180, 60, 70, 0.08), transparent 48%),
        linear-gradient(165deg, #182840 0%, #101c30 52%, #0a1220 100%) !important;
    border: none !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(168, 200, 230, 0.22),
        0 0 48px rgba(110, 160, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Forms */
body.theme-black-gold input,
body.theme-black-gold select,
body.theme-black-gold textarea,
body.theme-black-gold .wb-team-search,
body.theme-black-gold .date-picker-input,
body.theme-black-gold .chat-modal-input {
    color: #eef3f8 !important;
    background: #0e1828 !important;
    border: 1px solid rgba(110, 160, 210, 0.30) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.theme-black-gold input:focus,
body.theme-black-gold select:focus,
body.theme-black-gold textarea:focus,
body.theme-black-gold .wb-team-search:focus {
    border-color: rgba(255, 215, 0, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(110, 160, 210, 0.16) !important;
}

body.theme-black-gold input::placeholder,
body.theme-black-gold textarea::placeholder {
    color: rgba(154, 173, 184, 0.55) !important;
}

/* Buttons — ice steel only */
body.theme-black-gold .btn-primary,
body.theme-black-gold button.btn-primary,
body.theme-black-gold .btn.btn-primary {
    color: #0a1220 !important;
    background: linear-gradient(135deg, #eef3f8 0%, #d7e4f0 22%, #6a9cc4 58%, #4a7aa8 100%) !important;
    border: 1px solid rgba(200, 220, 240, 0.35) !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    filter: none !important;
    text-shadow: none !important;
}

body.theme-black-gold .btn-primary:hover {
    filter: none !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef3f8 20%, #8eb8dc 55%, #6a9cc4 100%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

body.theme-black-gold .btn-secondary,
body.theme-black-gold .btn-ghost,
body.theme-black-gold .header-action-pill {
    color: #eef3f8 !important;
    border-color: rgba(110, 160, 210, 0.38) !important;
    background: linear-gradient(145deg, #182640, #0e1828) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.theme-black-gold .btn-secondary:hover,
body.theme-black-gold .btn-ghost:hover,
body.theme-black-gold .header-action-pill:hover {
    color: #d7e4f0 !important;
    border-color: #6a9cc4 !important;
    background: rgba(110, 160, 210, 0.12) !important;
}

body.theme-black-gold .tab-btn,
body.theme-black-gold .btn-tab {
    color: rgba(238, 243, 248, 0.72) !important;
    background: #121c30 !important;
    border-color: rgba(110, 160, 210, 0.22) !important;
}

body.theme-black-gold .tab-btn.is-active {
    color: #eef3f8 !important;
    background:
        linear-gradient(155deg, rgba(142, 184, 220, 0.05) 0%, rgba(10, 16, 28, 0.97) 48%, rgba(6, 10, 18, 0.99) 100%) !important;
    border-color: rgba(142, 184, 220, 0.28) !important;
    box-shadow:
        inset 4px 0 0 0 #8eb8dc,
        inset 0 1px 0 rgba(238, 243, 248, 0.04),
        0 3px 12px rgba(0, 0, 0, 0.36) !important;
}

/* Tab Izin + Absensi: animasi sama dengan sidebar (rel es kiri, hex kanan, isi gelap) */
body.theme-black-gold #izinTabMenu .btn-tab,
body.theme-black-gold #absensiTabMenu .btn-tab {
    position: relative !important;
    overflow: hidden !important;
    padding-right: 26px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    color: #d4e4f4 !important;
    background:
        linear-gradient(155deg, rgba(232, 238, 246, 0.03) 0%, rgba(12, 18, 32, 0.94) 45%, rgba(7, 11, 22, 0.97) 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 3px 10px rgba(0, 0, 0, 0.32) !important;
}

body.theme-black-gold #izinTabMenu .btn-tab:hover,
body.theme-black-gold #absensiTabMenu .btn-tab:hover {
    color: #d4e4f4 !important;
    background:
        linear-gradient(155deg, rgba(142, 180, 220, 0.08) 0%, rgba(12, 18, 32, 0.96) 50%, rgba(7, 11, 22, 0.98) 100%) !important;
    border-color: rgba(142, 180, 220, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
}

body.theme-black-gold #izinTabMenu .btn-tab:active:not(:disabled),
body.theme-black-gold #absensiTabMenu .btn-tab:active:not(:disabled) {
    transform: none !important;
    filter: none !important;
}

body.theme-black-gold #izinTabMenu .btn-tab.active,
body.theme-black-gold #absensiTabMenu .btn-tab.active,
body.theme-black-gold #izinTabMenu .btn-tab.active:hover,
body.theme-black-gold #absensiTabMenu .btn-tab.active:hover {
    color: #eef3f8 !important;
    background:
        linear-gradient(155deg, rgba(142, 184, 220, 0.05) 0%, rgba(10, 16, 28, 0.97) 48%, rgba(6, 10, 18, 0.99) 100%) !important;
    border-color: rgba(142, 184, 220, 0.28) !important;
    box-shadow:
        inset 4px 0 0 0 #8eb8dc,
        inset 0 1px 0 rgba(238, 243, 248, 0.04),
        0 3px 12px rgba(0, 0, 0, 0.36) !important;
    transform: none !important;
    filter: none !important;
}

body.theme-black-gold #izinTabMenu .btn-tab::before,
body.theme-black-gold #absensiTabMenu .btn-tab::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    bottom: 5px !important;
    width: 0;
    height: auto !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #eef3f8 0%, #8eb8dc 45%, #6a9cc4 100%) !important;
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: center left;
    box-shadow: none;
    z-index: 3 !important;
    pointer-events: none !important;
    transition: none;
}

body.theme-black-gold #izinTabMenu .btn-tab:hover::before,
body.theme-black-gold #absensiTabMenu .btn-tab:hover::before {
    width: 3px;
    opacity: 0.55;
    transform: scaleY(0.75);
    box-shadow: 0 0 8px rgba(142, 184, 220, 0.35);
    transition: width 0.28s ease, opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

body.theme-black-gold #izinTabMenu .btn-tab.active::before,
body.theme-black-gold #absensiTabMenu .btn-tab.active::before,
body.theme-black-gold #izinTabMenu .btn-tab.tab-just-activated::before,
body.theme-black-gold #absensiTabMenu .btn-tab.tab-just-activated::before {
    width: 4px;
    opacity: 1;
    transform: scaleY(1);
    box-shadow:
        0 0 10px rgba(142, 184, 220, 0.85),
        0 0 18px rgba(142, 184, 220, 0.4);
    animation: navIceRailIn 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-black-gold #izinTabMenu .btn-tab::after,
body.theme-black-gold #absensiTabMenu .btn-tab::after {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    width: 8px !important;
    height: 9px !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, #eef3f8 0%, #8eb8dc 50%, #6a9cc4 100%);
    opacity: 0;
    transform: translateY(-50%) scale(0.2);
    transform-origin: center;
    pointer-events: none;
    z-index: 3;
}

body.theme-black-gold #izinTabMenu .btn-tab.active::after,
body.theme-black-gold #absensiTabMenu .btn-tab.active::after,
body.theme-black-gold #izinTabMenu .btn-tab.tab-just-activated::after,
body.theme-black-gold #absensiTabMenu .btn-tab.tab-just-activated::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 10px rgba(142, 184, 220, 0.65);
    animation: navIceHexIn 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-black-gold #izinTabMenu .btn-tab i,
body.theme-black-gold #absensiTabMenu .btn-tab i {
    color: #8eb8dc !important;
}

body.theme-black-gold #izinTabMenu .btn-tab.active i,
body.theme-black-gold #absensiTabMenu .btn-tab.active i,
body.theme-black-gold #izinTabMenu .btn-tab.tab-just-activated i,
body.theme-black-gold #absensiTabMenu .btn-tab.tab-just-activated i {
    color: #c8dceb !important;
    animation: navIceIconIn 0.5s ease-out;
}

body.theme-black-gold .badge,
body.theme-black-gold .wb-badge,
body.theme-black-gold .role-badge,
body.theme-black-gold .badge-primary,
body.theme-black-gold .status-badge,
body.theme-black-gold .status-badge.online {
    color: #d7e4f0 !important;
    background: rgba(110, 160, 210, 0.14) !important;
    border-color: rgba(110, 160, 210, 0.4) !important;
    box-shadow: none !important;
}

body.theme-black-gold .status-badge.safe,
body.theme-black-gold .absensi-status-ontime {
    color: #ffffff !important;
    background: #16a34a !important;
    border-color: rgba(74, 222, 128, 0.65) !important;
}

body.theme-black-gold .status-badge.late,
body.theme-black-gold .absensi-status-late {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: rgba(248, 113, 113, 0.65) !important;
}

body.theme-black-gold .absensi-status-waiting,
body.theme-black-gold .status-badge.absensi-status-waiting {
    color: #1c1917 !important;
    background: #eab308 !important;
    border-color: rgba(250, 204, 21, 0.85) !important;
}

body.theme-black-gold .wb-badge--ok {
    color: #d7e4f0 !important;
    background: rgba(110, 160, 210, 0.18) !important;
    border-color: rgba(110, 160, 210, 0.45) !important;
}

body.theme-black-gold .wb-badge--warn {
    color: #eef3f8 !important;
    background: rgba(70, 120, 180, 0.28) !important;
    border-color: rgba(110, 160, 210, 0.5) !important;
}

/* Tables */
body.theme-black-gold th,
body.theme-black-gold .report-table thead th,
body.theme-black-gold .data-table thead th,
body.theme-black-gold table thead th,
body.theme-black-gold .admin-table th,
body.theme-black-gold .wb-team-table thead th,
body.theme-black-gold .absensi-spreadsheet-table thead th,
body.theme-black-gold .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-black-gold .wb-team-table--cuti thead tr:first-child th[colspan] {
    background: linear-gradient(180deg, #1e304c 0%, #152238 100%) !important;
    color: #eef3f8 !important;
    border-color: rgba(142, 180, 220, 0.32) !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(238, 243, 248, 0.08) !important;
    filter: none !important;
}

body.theme-black-gold .wb-team-table thead th,
body.theme-black-gold #wbDataStaffTable thead th,
body.theme-black-gold #wbDataKesalahanTable thead th,
body.theme-black-gold #wbMasaAktifVisaTable thead th {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    padding: 14px 10px !important;
    min-height: 48px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.05em !important;
    vertical-align: middle !important;
}

/* Pengajuan Cuti: tetap ukuran header lama */
body.theme-black-gold .wb-team-table--cuti thead th,
body.theme-black-gold .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-black-gold .wb-team-table--cuti thead tr:first-child th[colspan],
body.theme-black-gold #wbPengajuanCutiTable thead th {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    padding: 5px 6px !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    vertical-align: middle !important;
}

body.theme-black-gold .wb-team-table--cuti thead th.wb-th-rowspan,
body.theme-black-gold #wbPengajuanCutiTable thead th.wb-th-rowspan {
    padding: 0 !important;
    vertical-align: middle !important;
}

body.theme-black-gold .wb-team-table--cuti thead th.wb-th-group,
body.theme-black-gold #wbPengajuanCutiTable thead th.wb-th-group {
    padding: 6px 6px 4px !important;
    vertical-align: middle !important;
}

body.theme-black-gold .wb-team-table--cuti thead tr:nth-child(2) th,
body.theme-black-gold .wb-team-table--cuti thead th.wb-th-sub,
body.theme-black-gold #wbPengajuanCutiTable thead th.wb-th-sub {
    padding: 5px 6px !important;
    vertical-align: middle !important;
}

/* ABSENSI STAFF WDBOS — header/rows lebih tinggi dan premium */
body.theme-black-gold .absensi-spreadsheet-wrapper {
    border-color: rgba(110, 160, 210, 0.4) !important;
    background: linear-gradient(165deg, rgba(17, 17, 17, 0.98) 0%, rgba(11, 11, 11, 0.98) 100%) !important;
}

body.theme-black-gold .absensi-spreadsheet-table thead th {
    background: linear-gradient(180deg, #2a261f 0%, #1a1814 100%) !important;
    color: #eef3f8 !important;
    border-color: rgba(110, 160, 210, 0.42) !important;
    min-height: 38px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 0.62rem !important;
}

body.theme-black-gold .absensi-spreadsheet-table th.absensi-spreadsheet-staff-col {
    background: linear-gradient(180deg, rgba(72, 58, 28, 0.95) 0%, rgba(36, 32, 22, 0.98) 100%) !important;
    color: #d4e4f4 !important;
    border-color: rgba(110, 160, 210, 0.42) !important;
}

body.theme-black-gold .absensi-spreadsheet-table tbody td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(48, 40, 24, 0.92) 0%, rgba(22, 24, 32, 0.96) 48%, rgba(16, 20, 28, 0.98) 100%) !important;
    border-color: rgba(110, 160, 210, 0.34) !important;
    color: #e8eef6 !important;
    background-color: transparent !important;
}

body.theme-black-gold .absensi-spreadsheet-table tbody tr:nth-child(even) td.absensi-spreadsheet-staff-col {
    background: linear-gradient(165deg, rgba(42, 36, 22, 0.94) 0%, rgba(18, 22, 30, 0.98) 100%) !important;
    background-color: transparent !important;
}

body.theme-black-gold .absensi-spreadsheet-table tbody td.col-role-cell {
    color: #e8d5a0 !important;
}

body.theme-black-gold .absensi-spreadsheet-table tbody .absensi-spreadsheet-cell-inner {
    min-height: 33px !important;
}

body.theme-black-gold td,
body.theme-black-gold .report-table tbody td,
body.theme-black-gold .data-table tbody td,
body.theme-black-gold table tbody td,
body.theme-black-gold .admin-table td,
body.theme-black-gold .wb-team-table tbody td,
body.theme-black-gold .absensi-spreadsheet-table tbody td {
    color: #eef3f8 !important;
    background-color: #101c2c !important;
    border-color: #243656 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body.theme-black-gold .wb-team-table tbody tr:nth-child(even) td {
    background-color: #171717 !important;
}

body.theme-black-gold tr:hover td,
body.theme-black-gold .report-table tbody tr:hover td,
body.theme-black-gold .wb-team-table tbody tr:hover td {
    background-color: #1f1f1f !important;
}

body.theme-black-gold .wb-team-table thead th.wb-col-name,
body.theme-black-gold .wb-team-table tbody td.wb-col-name,
body.theme-black-gold .wb-col-sticky,
body.theme-black-gold .wb-team-table tbody td.wb-col-sticky {
    background-color: #152238 !important;
    color: #d7e4f0 !important;
    border-color: rgba(110, 160, 210, 0.32) !important;
}

body.theme-black-gold .wb-team-table tbody td.wb-col-role,
body.theme-black-gold .wb-team-table tbody td[data-col="jabatan"] {
    color: #6a9cc4 !important;
}

body.theme-black-gold .wb-jabatan-divider td,
body.theme-black-gold #wbDataStaffTable tbody tr.wb-jabatan-divider td,
body.theme-black-gold #wbDataKesalahanTable tbody tr.wb-jabatan-divider td,
body.theme-black-gold #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td,
body.theme-black-gold .wb-team-table tbody tr.wb-jabatan-divider td {
    background: #1c2c48 !important;
    border-color: rgba(110, 160, 210, 0.28) !important;
}

body.theme-black-gold .wb-jabatan-divider td span,
body.theme-black-gold #wbDataStaffTable tbody tr.wb-jabatan-divider td span,
body.theme-black-gold #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span,
body.theme-black-gold #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span,
body.theme-black-gold .wb-team-table tbody tr.wb-jabatan-divider td span {
    color: #6a9cc4 !important;
}

body.theme-black-gold .wb-jabatan-divider td span::before,
body.theme-black-gold #wbDataStaffTable tbody tr.wb-jabatan-divider td span::before,
body.theme-black-gold #wbDataKesalahanTable tbody tr.wb-jabatan-divider td span::before,
body.theme-black-gold #wbMasaAktifVisaTable tbody tr.wb-jabatan-divider td span::before {
    background: #6a9cc4 !important;
}

/* Keep shift color coding */
body.theme-black-gold td.shift-cell,
body.theme-black-gold .absensi-spreadsheet-table tbody td.shift-cell {
    background-color: transparent !important;
    border-color: inherit !important;
}
body.theme-black-gold td.shift-cell.shift-pagi,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-pagi {
    background: var(--shift-pagi-bg) !important; color: var(--shift-pagi-text) !important; border-color: var(--shift-pagi-border) !important;
}
body.theme-black-gold td.shift-cell.shift-malam,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-malam {
    background: var(--shift-malam-bg) !important; color: var(--shift-malam-text) !important; border-color: var(--shift-malam-border) !important;
}
body.theme-black-gold td.shift-cell.shift-tiga,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-tiga {
    background: var(--shift-tiga-bg) !important; color: var(--shift-tiga-text) !important; border-color: var(--shift-tiga-border) !important;
}
body.theme-black-gold td.shift-cell.shift-empat,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-empat {
    background: var(--shift-empat-bg) !important; color: var(--shift-empat-text) !important; border-color: var(--shift-empat-border) !important;
}
body.theme-black-gold td.shift-cell.shift-half,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-half {
    background: var(--shift-half-bg) !important; color: var(--shift-half-text) !important; border-color: var(--shift-half-border) !important;
}
body.theme-black-gold td.shift-cell.shift-off,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-off {
    background: var(--shift-off-bg) !important; color: var(--shift-off-text) !important; border-color: var(--shift-off-border) !important;
}
body.theme-black-gold td.shift-cell.shift-cuti,
body.theme-black-gold .absensi-spreadsheet-table td.shift-cell.shift-cuti {
    background: var(--shift-cuti-bg) !important; color: var(--shift-cuti-text) !important; border-color: var(--shift-cuti-border) !important;
}
body.theme-black-gold tr:hover td.shift-cell,
body.theme-black-gold .absensi-spreadsheet-table tbody tr:hover td.shift-cell {
    background-color: transparent !important;
}

/* Calendar / shift */
body.theme-black-gold .shift-calendar-weekday {
    color: #d7e4f0 !important;
    background: linear-gradient(180deg, #182640, #101c2c) !important;
    border: 1px solid rgba(110, 160, 210, 0.32) !important;
}

body.theme-black-gold .shift-day-card.is-today {
    border-color: #d7e4f0 !important;
}

body.theme-black-gold .shift-day-card__today-tag {
    color: #0a1220;
    background: linear-gradient(135deg, #eef3f8 0%, #d7e4f0 42%, #6a9cc4 100%);
}

/* ========== SHIFT KERJA BULANAN — BLACK & GOLD ========== */
body.theme-black-gold #shiftView .monitor-header h2,
body.theme-black-gold #shiftView .shift-view-header h2 {
    color: #eef3f8 !important;
    background: linear-gradient(115deg, #ffffff 0%, #eef3f8 30%, #6a9cc4 85%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.theme-black-gold #shiftView .shift-view-icon {
    background: linear-gradient(145deg, #243656 0%, #101c2c 100%) !important;
    color: #6a9cc4 !important;
    border: 1px solid rgba(110, 160, 210, 0.4) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.theme-black-gold #shiftView .shift-apk-banner {
    background: linear-gradient(145deg, #182640, #0e1828) !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
}
body.theme-black-gold #shiftView .shift-apk-banner__icon {
    background: #1c2c48 !important;
    color: #6a9cc4 !important;
    border: 1px solid rgba(110, 160, 210, 0.3);
}
body.theme-black-gold #shiftView .shift-apk-banner__lead { color: #eef3f8 !important; }
body.theme-black-gold #shiftView .shift-apk-banner__lead strong { color: #6a9cc4 !important; }
body.theme-black-gold #shiftView .shift-apk-banner__meta { color: #6f8496 !important; }
body.theme-black-gold #shiftView .shift-apk-banner__meta a,
body.theme-black-gold #shiftView .shift-apk-banner__text a {
    color: #6a9cc4 !important;
}
body.theme-black-gold #shiftView .shift-apk-banner__meta a:hover {
    color: #d7e4f0 !important;
}
body.theme-black-gold #shiftView .shift-apk-banner__note { color: #9e9178 !important; }
body.theme-black-gold #shiftView .shift-apk-banner__copy {
    background: #152238 !important;
    border-color: rgba(110, 160, 210, 0.45) !important;
    color: #6a9cc4 !important;
}
body.theme-black-gold #shiftView .shift-apk-banner__copy:hover {
    background: #1e304c !important;
    border-color: #6a9cc4 !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold #shiftView .shift-apk-banner__copy.is-copied {
    color: #0a1220 !important;
    background: linear-gradient(135deg, #d7e4f0, #6a9cc4) !important;
    border-color: #6a9cc4 !important;
}

body.theme-black-gold #shiftView .luxury-month-selector {
    background: linear-gradient(145deg, #182640 0%, #0e1828 100%) !important;
    border: 1px solid rgba(110, 160, 210, 0.32) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.theme-black-gold #shiftView .month-selector-label {
    color: #6a9cc4 !important;
}
body.theme-black-gold #shiftView .month-selector-label::before {
    background: #6a9cc4 !important;
}
body.theme-black-gold #shiftView .month-selector-label i,
body.theme-black-gold #shiftView .luxury-month-selector:hover .month-selector-label i {
    color: #d7e4f0 !important;
}

body.theme-black-gold #shiftView .shift-schedule-card,
body.theme-black-gold #shiftView .shift-schedule-card.glass-card,
body.theme-black-gold #shiftScheduleContainer .shift-schedule-card,
body.theme-black-gold #shiftScheduleContainer .shift-schedule-card.glass-card {
    background: linear-gradient(160deg, #182640 0%, #0e1828 100%) !important;
    border: 1px solid rgba(110, 160, 210, 0.34) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(110, 160, 210, 0.06) !important;
}

body.theme-black-gold #shiftView .shift-staff-header {
    background: linear-gradient(145deg, #1c2c48 0%, #101c2c 100%) !important;
    border: 1px solid rgba(110, 160, 210, 0.32) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.theme-black-gold #shiftView #shiftStaffAvatar,
#shiftView #shiftStaffAvatar {
    display: none !important;
}

body.theme-black-gold #shiftView #shiftStaffName {
    color: #eef3f8 !important;
    -webkit-text-fill-color: #eef3f8 !important;
}

body.theme-black-gold #shiftView #shiftStaffRole {
    background: rgba(110, 160, 210, 0.16) !important;
    border-color: rgba(110, 160, 210, 0.42) !important;
    color: #d7e4f0 !important;
    border-radius: 8px !important;
}

/* Periode chip (was purple) */
body.theme-black-gold #shiftView .shift-staff-header > div:last-child > div:first-child {
    background: linear-gradient(145deg, #1e304c 0%, #121c30 100%) !important;
    border: 1.5px solid rgba(110, 160, 210, 0.45) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}
body.theme-black-gold #shiftView .shift-staff-header > div:last-child > div:first-child > div:first-child {
    color: rgba(110, 160, 210, 0.9) !important;
}
body.theme-black-gold #shiftView #shiftMonthDisplay {
    color: #6a9cc4 !important;
    -webkit-text-fill-color: #6a9cc4 !important;
}

/* OFF summary chip — charcoal, not blue-slate */
body.theme-black-gold #shiftView .shift-staff-header > div:last-child > div:nth-child(2) {
    background: linear-gradient(145deg, #152238 0%, #0e1828 100%) !important;
    border: 1.5px dashed rgba(154, 173, 184, 0.4) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}
body.theme-black-gold #shiftView .shift-staff-header > div:last-child > div:nth-child(2) > div:first-child {
    color: #6f8496 !important;
}
body.theme-black-gold #shiftView #shiftSummaryOff {
    color: #eef3f8 !important;
}

/* Half-day chip — keep warm amber (functional), deepen for black ground */
body.theme-black-gold #shiftView .shift-staff-header > div:last-child > div:nth-child(3) {
    background: linear-gradient(145deg, #2a2010 0%, #1a140a 100%) !important;
    border-color: rgba(110, 160, 210, 0.4) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}
body.theme-black-gold #shiftView #shiftSummaryHalf {
    color: #d7e4f0 !important;
}

body.theme-black-gold #shiftView .shift-legend-bar {
    background: #121c30 !important;
    border-color: rgba(110, 160, 210, 0.28) !important;
}
body.theme-black-gold #shiftView .shift-legend-bar__title {
    color: #6a9cc4 !important;
}
body.theme-black-gold #shiftView .shift-legend-item {
    background: #0c1524 !important;
    border-color: rgba(110, 160, 210, 0.22) !important;
}
body.theme-black-gold #shiftView .shift-legend-item span:last-child {
    color: #eef3f8 !important;
}

body.theme-black-gold #shiftView .shift-staff-picker__input,
body.theme-black-gold #shiftView .shift-staff-picker__dropdown {
    background: #101c2c !important;
    border-color: rgba(110, 160, 210, 0.32) !important;
    color: #eef3f8 !important;
}
body.theme-black-gold #shiftView .shift-staff-picker__input:focus {
    border-color: rgba(255, 215, 0, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(110, 160, 210, 0.16) !important;
}
body.theme-black-gold #shiftView .shift-staff-picker__item:hover,
body.theme-black-gold #shiftView .shift-staff-picker__item.is-active {
    background: rgba(110, 160, 210, 0.14) !important;
}
body.theme-black-gold #shiftView .shift-staff-picker__label,
body.theme-black-gold #shiftView .shift-staff-picker__chevron,
body.theme-black-gold #shiftView .shift-staff-picker__role {
    color: #6a9cc4 !important;
}

body.theme-black-gold #shiftEmptyState {
    background: linear-gradient(160deg, #182640, #0e1828) !important;
    border-color: rgba(110, 160, 210, 0.3) !important;
}
body.theme-black-gold #shiftEmptyState [style*="139, 92, 246"],
body.theme-black-gold #shiftEmptyState > div:first-child {
    color: rgba(110, 160, 210, 0.35) !important;
}

/* Tanggal OFF / Half cards di bawah header */
body.theme-black-gold #shiftView #shiftOffDates,
body.theme-black-gold #shiftView #shiftHalfDates {
    color: #eef3f8 !important;
}
body.theme-black-gold #shiftView #shiftScheduleContainer > .shift-schedule-card > div[style*="grid-template-columns: 1fr 1fr"] > div:first-child {
    background: linear-gradient(145deg, #152238 0%, #0e1828 100%) !important;
    border-color: rgba(154, 173, 184, 0.35) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}
body.theme-black-gold #shiftView #shiftScheduleContainer > .shift-schedule-card > div[style*="grid-template-columns: 1fr 1fr"] > div:last-child {
    background: linear-gradient(145deg, #2a2010 0%, #1a140a 100%) !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Pagers & pickers */
body.theme-black-gold .wb-pager {
    border-color: rgba(110, 160, 210, 0.25) !important;
    background: #121c30 !important;
}
body.theme-black-gold .wb-pager__label,
body.theme-black-gold .wb-pager__info,
body.theme-black-gold .wb-pager__page {
    color: #6a9cc4 !important;
}
body.theme-black-gold .wb-pager-dd__btn,
body.theme-black-gold .wb-pager__btn {
    color: #eef3f8 !important;
    background: #152238 !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
}
body.theme-black-gold .wb-pager-dd__btn:hover,
body.theme-black-gold .wb-pager-dd.is-open .wb-pager-dd__btn,
body.theme-black-gold .wb-pager__btn:hover:not(:disabled) {
    border-color: #6a9cc4 !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold .wb-pager-dd__menu {
    background: #152238 !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
}
body.theme-black-gold .wb-pager-dd__opt { color: #eef3f8 !important; }
body.theme-black-gold .wb-pager-dd__opt:hover,
body.theme-black-gold .wb-pager-dd__opt.is-active {
    background: rgba(110, 160, 210, 0.16) !important;
    color: #d7e4f0 !important;
}

body.theme-black-gold .wb-team-search-clear {
    color: #6a9cc4 !important;
    background: rgba(110, 160, 210, 0.12) !important;
    border-color: rgba(110, 160, 210, 0.3) !important;
}

/* Luxury filters */
body.theme-black-gold .lux-filter-dd__btn {
    border-color: rgba(110, 160, 210, 0.48) !important;
    background: linear-gradient(145deg, #1e1e1e 0%, #0e1828 100%) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.theme-black-gold .lux-filter-dd__btn:hover,
body.theme-black-gold .lux-filter-dd.is-open .lux-filter-dd__btn {
    border-color: #6a9cc4 !important;
    box-shadow: 0 0 0 2px rgba(110,160,210,0.18), 0 10px 24px rgba(0,0,0,0.45) !important;
}
body.theme-black-gold .lux-filter-dd__label {
    background: linear-gradient(135deg, #eef3f8 0%, #d7e4f0 40%, #6a9cc4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-black-gold .lux-filter-dd__chev { color: #6a9cc4; }
body.theme-black-gold .lux-filter-dd__menu {
    border-color: rgba(110, 160, 210, 0.38) !important;
    background: linear-gradient(165deg, #182640 0%, #0c1524 100%) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(110,160,210,0.1) !important;
}
body.theme-black-gold .lux-filter-dd__opt { color: #eef3f8 !important; }
body.theme-black-gold .lux-filter-dd__opt:hover {
    background: rgba(110, 160, 210, 0.12) !important;
    border-color: rgba(110, 160, 210, 0.3) !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold .lux-filter-dd__opt.is-active {
    background: linear-gradient(135deg, rgba(200,220,240,0.22), rgba(110,160,210,0.18)) !important;
    border-color: rgba(110, 160, 210, 0.55) !important;
    color: #d7e4f0 !important;
}

body.theme-black-gold .wb-period-dd__btn {
    border-color: rgba(142, 180, 220, 0.55) !important;
    background: linear-gradient(145deg, #1c2c48, #101c2c) !important;
    color: #eef3f8 !important;
}
body.theme-black-gold .wb-period-dd__btn:hover,
body.theme-black-gold .wb-period-dd.is-open .wb-period-dd__btn {
    border-color: #8eb8dc !important;
    box-shadow: 0 0 0 2px rgba(142, 180, 220, 0.18) !important;
}
body.theme-black-gold .wb-period-dd__chev { color: #8eb8dc !important; }
body.theme-black-gold .wb-period-dd__menu {
    border-color: rgba(142, 180, 220, 0.4) !important;
    background: #152238 !important;
}
body.theme-black-gold .wb-period-dd__opt { color: #eef3f8 !important; }
body.theme-black-gold .wb-period-dd__opt.is-active {
    background: rgba(142, 180, 220, 0.2) !important;
    border-color: rgba(142, 180, 220, 0.5) !important;
}
body.theme-black-gold .wb-period-dd__q { color: #8eb8dc !important; }
body.theme-black-gold .wb-period-dd__m { color: #eef3f8 !important; }

/* Period chips TAHUN / PERIODE — no burgundy, bright gold */
body.theme-black-gold .wb-period-chip,
body.theme-black-gold .wb-period-chip--quarter {
    background: linear-gradient(165deg, #1c2c48 0%, #101c2c 55%, #0b1422 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.5) !important;
    box-shadow:
        0 0 0 1px rgba(142, 180, 220, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.theme-black-gold .wb-period-chip__label {
    color: #8eb8dc !important;
    text-shadow: 0 0 10px rgba(142, 180, 220, 0.35) !important;
}
body.theme-black-gold .wb-year-stepper__btn {
    border-color: rgba(142, 180, 220, 0.5) !important;
    background: linear-gradient(145deg, rgba(142, 180, 220, 0.28), rgba(70, 120, 180, 0.18)) !important;
    color: #eef3f8 !important;
}
body.theme-black-gold .wb-year-stepper__btn:hover {
    box-shadow: 0 0 12px rgba(142, 180, 220, 0.4) !important;
}
body.theme-black-gold .wb-year-stepper__value {
    color: #eef3f8 !important;
    text-shadow: none !important;
}

/* Paspor panels — pagi cyan-navy vs malam indigo */
body.theme-black-gold .paspor-shift-panel--pagi {
    background: #0e1c24 !important;
    border: 1px solid rgba(110, 180, 200, 0.4) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(180, 220, 230, 0.08) !important;
}
body.theme-black-gold .paspor-shift-panel--malam {
    background: #101428 !important;
    border: 1px solid rgba(129, 140, 248, 0.42) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(199, 210, 254, 0.08) !important;
}
body.theme-black-gold .paspor-shift-panel__header--pagi {
    background: linear-gradient(90deg, #1a3848 0%, #142c38 55%, #0e1c24 100%) !important;
    border-bottom: 1px solid rgba(110, 180, 200, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(180, 220, 230, 0.1) !important;
}
body.theme-black-gold .paspor-shift-panel__header--malam {
    background: linear-gradient(90deg, #222c50 0%, #181e38 55%, #101428 100%) !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.1) !important;
}
body.theme-black-gold .paspor-shift-panel__header--pagi .paspor-shift-panel__header-icon {
    color: #9ed4e4 !important;
    filter: drop-shadow(0 0 6px rgba(110, 180, 200, 0.4)) !important;
}
body.theme-black-gold .paspor-shift-panel__header--malam .paspor-shift-panel__header-icon {
    color: #c7d2fe !important;
    filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.4)) !important;
}
body.theme-black-gold .paspor-shift-panel__header--pagi .paspor-shift-panel__title,
body.theme-black-gold .paspor-shift-panel__header--malam .paspor-shift-panel__title {
    color: #eef3f8 !important;
    text-shadow: none !important;
}
body.theme-black-gold .paspor-shift-panel__header--pagi .paspor-shift-panel__badge {
    color: #0a1820 !important;
    background: linear-gradient(135deg, #e8f4f8, #7eb8c8) !important;
    border: 1px solid rgba(180, 220, 230, 0.55) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
body.theme-black-gold .paspor-shift-panel__header--malam .paspor-shift-panel__badge {
    color: #0a1020 !important;
    background: linear-gradient(135deg, #e0e7ff, #818cf8) !important;
    border: 1px solid rgba(199, 210, 254, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
body.theme-black-gold .paspor-shift-panel--pagi .paspor-shift-panel__table-wrap {
    border: none !important;
    background: #0c1820 !important;
    box-shadow: none !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-shift-panel__table-wrap {
    border: none !important;
    background: #0c1024 !important;
    box-shadow: none !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-table thead th,
body.theme-black-gold .paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-group,
body.theme-black-gold .paspor-shift-panel--pagi th {
    background: linear-gradient(180deg, #1a3848 0%, #142c38 100%) !important;
    color: #d7eef4 !important;
    border-right: 1px solid rgba(110, 180, 200, 0.22) !important;
    border-bottom: 1px solid rgba(110, 180, 200, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(180, 220, 230, 0.1) !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-table thead th,
body.theme-black-gold .paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-group,
body.theme-black-gold .paspor-shift-panel--malam th {
    background: linear-gradient(180deg, #222c50 0%, #181e38 100%) !important;
    color: #e0e7ff !important;
    border-right: 1px solid rgba(129, 140, 248, 0.24) !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.1) !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-table thead .paspor-th-petugas-sub {
    background: #142830 !important;
    color: #c5e4ee !important;
    border-right: 1px solid rgba(110, 180, 200, 0.2) !important;
    border-color: rgba(110, 180, 200, 0.28) !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-table thead .paspor-th-petugas-sub {
    background: #161c34 !important;
    color: #c7d2fe !important;
    border-right: 1px solid rgba(129, 140, 248, 0.22) !important;
    border-color: rgba(129, 140, 248, 0.3) !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row) td,
body.theme-black-gold .paspor-shift-panel--pagi td {
    border-bottom: 1px solid #1a3040 !important;
    border-right: 1px solid #142830 !important;
    background: #101c24 !important;
    color: #eef3f8 !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row) td,
body.theme-black-gold .paspor-shift-panel--malam td {
    border-bottom: 1px solid #1c2444 !important;
    border-right: 1px solid #161c38 !important;
    background: #101428 !important;
    color: #eef3f8 !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    background: #163038 !important;
    border-bottom-color: rgba(110, 180, 200, 0.28) !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-table.report-table tbody tr:not(.category-divider-row):hover td {
    background: #1a2040 !important;
    border-bottom-color: rgba(129, 140, 248, 0.28) !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-table.report-table tbody tr:hover td:first-child {
    border-left: 3px solid #7eb8c8 !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-table.report-table tbody tr:hover td:first-child {
    border-left: 3px solid #818cf8 !important;
}

body.theme-black-gold .paspor-shift-panel--pagi .paspor-role-divider {
    background: #152830 !important;
    border-top: 1px solid rgba(110, 180, 200, 0.32) !important;
    border-bottom: 1px solid rgba(110, 180, 200, 0.22) !important;
    color: #b8dce8 !important;
}
body.theme-black-gold .paspor-shift-panel--malam .paspor-role-divider {
    background: #181e38 !important;
    border-top: 1px solid rgba(129, 140, 248, 0.32) !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.22) !important;
    color: #c7d2fe !important;
}

/* Status / toast / scroll — gold instead of purple */
body.theme-black-gold .status-indicator.connected,
body.theme-black-gold .status-dot {
    background: #6a9cc4 !important;
    box-shadow: 0 0 8px rgba(110, 160, 210, 0.45) !important;
}

body.theme-black-gold ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #d7e4f0, #6a9cc4, #4a7aa8) !important;
}
body.theme-black-gold ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #eef3f8, #6a9cc4) !important;
}
body.theme-black-gold ::-webkit-scrollbar-track {
    background: #0c1524 !important;
}

/* Absensi / ops panels — wrapper transparan, frame hanya di tombol */
body.theme-black-gold .absensi-tab-menu,
body.theme-black-gold #izinTabMenu,
body.theme-black-gold #absensiTabMenu,
body.theme-black-gold #buktiTabMenu,
body.theme-black-gold #pasporShiftTabs,
body.theme-black-gold #pasporStatusFilter,
body.theme-black-gold #pasporRoleFilter,
body.theme-black-gold #jobdeskShiftSelector,
body.theme-black-gold .filter-group,
body.theme-wb .absensi-tab-menu,
body.theme-wb #izinTabMenu,
body.theme-wb #absensiTabMenu,
body.theme-wb #buktiTabMenu,
body.theme-wb #pasporShiftTabs,
body.theme-wb #pasporStatusFilter,
body.theme-wb #pasporRoleFilter,
body.theme-wb #jobdeskShiftSelector,
body.theme-wb .filter-group {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-black-gold #buktiTabMenu,
body.theme-wb #buktiTabMenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-wb #buktiTabMenu .btn-tab {
    background: #15202a !important;
    border-color: rgba(142, 196, 220, 0.22) !important;
}

body.theme-black-gold #buktiTabMenu .btn-tab {
    background: #121c30 !important;
    border-color: rgba(110, 160, 210, 0.28) !important;
}

body.theme-black-gold .staff-console-card {
    border-color: rgba(110, 160, 210, 0.32) !important;
}

body.theme-black-gold a {
    color: #6a9cc4 !important;
}
body.theme-black-gold a:hover {
    color: #d7e4f0 !important;
}

/* —— Neutralize purple / cyan / sky leftovers —— */
body.theme-black-gold .chat-mention-dropdown {
    background: rgba(12, 20, 36, 0.98) !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
}
body.theme-black-gold .chat-mention-item:hover,
body.theme-black-gold .chat-mention-item.selected {
    background: rgba(110, 160, 210, 0.18) !important;
}
body.theme-black-gold .chat-mention-avatar {
    background: linear-gradient(135deg, #6a9cc4, #4a7aa8) !important;
    color: #0a1220 !important;
}

body.theme-black-gold .luxury-month-selector input[type="month"] {
    background: linear-gradient(135deg, rgba(110, 160, 210, 0.16) 0%, rgba(70, 120, 180, 0.08) 100%) !important;
    border: 2px solid rgba(110, 160, 210, 0.42) !important;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 18px rgba(110, 160, 210, 0.1) !important;
}
body.theme-black-gold .luxury-month-selector input[type="month"]:hover {
    background: linear-gradient(135deg, rgba(110, 160, 210, 0.24) 0%, rgba(70, 120, 180, 0.14) 100%) !important;
    border-color: rgba(200, 220, 240, 0.65) !important;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 24px rgba(110, 160, 210, 0.16) !important;
}
body.theme-black-gold .luxury-month-selector input[type="month"]:focus {
    border-color: rgba(255, 215, 0, 0.75) !important;
    box-shadow:
        0 0 0 4px rgba(110, 160, 210, 0.22),
        0 14px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
body.theme-black-gold .luxury-month-selector input[type="month"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(78%) sepia(45%) saturate(600%) hue-rotate(5deg) brightness(105%) contrast(95%) !important;
}

body.theme-black-gold .paspor-petugas-picker__trigger:hover {
    border-color: rgba(110, 160, 210, 0.5) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.theme-black-gold .paspor-petugas-picker.is-open .paspor-petugas-picker__trigger,
body.theme-black-gold .paspor-petugas-picker__trigger:focus-visible {
    border-color: rgba(200, 220, 240, 0.55) !important;
    box-shadow:
        0 0 0 3px rgba(110, 160, 210, 0.18),
        0 14px 36px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.theme-black-gold .paspor-petugas-picker__icon {
    background: linear-gradient(135deg, rgba(110, 160, 210, 0.28), rgba(70, 120, 180, 0.18)) !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold .paspor-petugas-picker__chevron,
body.theme-black-gold .paspor-petugas-picker.is-open .paspor-petugas-picker__chevron {
    color: #6a9cc4 !important;
}
body.theme-black-gold .paspor-petugas-picker__menu {
    border-color: rgba(110, 160, 210, 0.32) !important;
    background: linear-gradient(160deg, #182640 0%, #0c1524 100%) !important;
}
body.theme-black-gold .paspor-petugas-picker__option:hover {
    background: rgba(110, 160, 210, 0.14) !important;
}
body.theme-black-gold .paspor-petugas-picker__option.is-selected {
    background: linear-gradient(90deg, rgba(110, 160, 210, 0.28), rgba(70, 120, 180, 0.12)) !important;
    color: #d7e4f0 !important;
    box-shadow: inset 3px 0 0 #6a9cc4 !important;
}

/* Sidebar groups handled in SIDEBAR NAV block above */

/* Theme modal upload (inline purple) */
body.theme-black-gold #inputStaffBgFile + .btn,
body.theme-black-gold button.btn-secondary[onclick*="inputStaffBgFile"],
body.theme-black-gold .theme-preset-card + div ~ label + div .btn-secondary {
    border-color: rgba(110, 160, 210, 0.4) !important;
    background: rgba(110, 160, 210, 0.06) !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold button.btn-secondary[onclick*="inputStaffBgFile"] i {
    color: #6a9cc4 !important;
}

body.theme-black-gold .header-staff-profile,
body.theme-black-gold .header-action-pill {
    border-color: rgba(110, 160, 210, 0.38) !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold .header-staff-profile .header-staff-avatar-icon,
body.theme-black-gold .header-action-pill i {
    color: #6a9cc4 !important;
}

body.theme-black-gold .modal-overlay {
    background: rgba(0, 0, 0, 0.72) !important;
}
body.theme-black-gold .toast,
body.theme-black-gold .notification-toast,
body.theme-black-gold .app-toast {
    background: #152238 !important;
    border-color: rgba(110, 160, 210, 0.4) !important;
    color: #eef3f8 !important;
}

body.theme-black-gold .break-notification {
    border-color: rgba(110, 160, 210, 0.4) !important;
    background: linear-gradient(145deg, #182640, #0e1828) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

body.theme-black-gold .active-break-card {
    border: none !important;
    background: #000814 !important;
}

html body.theme-black-gold #monitorView .glass-card.active-break-card {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.35) !important;
}

html body.theme-black-gold #monitorView .glass-card.active-break-card::before {
    animation: glowing_401 5s linear infinite !important;
    inset: -80% !important;
}

html body.theme-black-gold #monitorView .glass-card.active-break-card::after {
    inset: 3px !important;
    transform: none !important;
}

body.theme-black-gold .theme-preset-card[data-theme="black-gold"] {
    border-color: rgba(200, 220, 240, 0.65) !important;
    box-shadow: 0 0 0 1px rgba(110, 160, 210, 0.25), 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

body.theme-black-gold .focus-ring:focus,
body.theme-black-gold *:focus-visible {
    outline-color: rgba(110, 160, 210, 0.65) !important;
}

body.theme-black-gold .quota-tracker .quota-fill,
body.theme-black-gold .progress-fill {
    background: linear-gradient(90deg, #4a7aa8, #6a9cc4, #d7e4f0) !important;
}

/* Inline purple / violet remnants → gold borders only (jangan override background — biar tidak loncat/flash) */
body.theme-black-gold [style*="139, 92, 246"],
body.theme-black-gold [style*="139,92,246"],
body.theme-black-gold [style*="124, 58, 237"],
body.theme-black-gold [style*="124,58,237"],
body.theme-black-gold [style*="88, 28, 135"],
body.theme-black-gold [style*="8b5cf6"],
body.theme-black-gold [style*="7c3aed"],
body.theme-black-gold [style*="#a78bfa"],
body.theme-black-gold [style*="#c4b5fd"],
body.theme-black-gold [style*="#ede9fe"] {
    border-color: rgba(142, 180, 220, 0.38) !important;
}

body.theme-black-gold [style*="color: #a78bfa"],
body.theme-black-gold [style*="color:#a78bfa"],
body.theme-black-gold [style*="color: #c4b5fd"],
body.theme-black-gold [style*="color:#c4b5fd"] {
    color: #8eb8dc !important;
}

body.theme-black-gold .glass-card:hover {
    transform: none !important;
    filter: none !important;
}

body.theme-black-gold #quotaSearchInput,
body.theme-black-gold #quotaRoleFilter,
body.theme-black-gold #quotaShiftFilter {
    background: #0e1828 !important;
    border-color: rgba(110, 160, 210, 0.35) !important;
    color: #eef3f8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
body.theme-black-gold #quotaSearchInput:focus {
    border-color: rgba(255, 215, 0, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(110, 160, 210, 0.18) !important;
}

body.theme-black-gold #shiftStaffAvatar {
    display: none !important;
}
body.theme-black-gold #shiftStaffRole {
    background: rgba(110, 160, 210, 0.16) !important;
    border-color: rgba(110, 160, 210, 0.4) !important;
    color: #d7e4f0 !important;
}

body.theme-black-gold .luxury-month-selector {
    background: linear-gradient(135deg, rgba(110, 160, 210, 0.08) 0%, rgba(70, 120, 180, 0.03) 100%) !important;
    border-color: rgba(110, 160, 210, 0.22) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.theme-black-gold button.btn-secondary[onclick*="inputStaffBgFile"] {
    border-color: rgba(110, 160, 210, 0.4) !important;
    background: rgba(110, 160, 210, 0.06) !important;
    color: #d7e4f0 !important;
}
body.theme-black-gold button.btn-secondary[onclick*="inputStaffBgFile"] i {
    color: #6a9cc4 !important;
}

/* ========== JOBDESK / MY JOBDESK — BLACK & GOLD ========== */
body.theme-black-gold #jobdeskView > .glass-card,
body.theme-black-gold #myJobdeskView > .glass-card {
    background: linear-gradient(160deg, #182640 0%, #0e1828 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.34) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Kill glass-card hover jump/flash inside jobdesk */
body.theme-black-gold #jobdeskView .glass-card,
body.theme-black-gold #myJobdeskView .glass-card,
body.theme-black-gold #jobdeskView .jd-category-card,
body.theme-black-gold #jobdeskView .jd-assigned-card {
    transform: none !important;
    filter: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.theme-black-gold #jobdeskView .glass-card:hover,
body.theme-black-gold #myJobdeskView .glass-card:hover,
body.theme-black-gold #jobdeskView .jd-category-card:hover,
body.theme-black-gold #jobdeskView .jd-assigned-card:hover {
    transform: none !important;
    filter: none !important;
    border-color: rgba(142, 180, 220, 0.45) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.theme-black-gold #jobdeskView h1,
body.theme-black-gold #myJobdeskView h1 {
    color: #eef3f8 !important;
}

body.theme-black-gold #jobdeskView h3,
body.theme-black-gold #jobdeskView .jd-section-title {
    color: #8eb8dc !important;
}

body.theme-black-gold #jobdeskView .jd-header-icon,
body.theme-black-gold #myJobdeskView .jd-header-icon {
    background: rgba(142, 180, 220, 0.12) !important;
    border: 1px solid rgba(142, 180, 220, 0.4) !important;
    color: #8eb8dc !important;
}

body.theme-black-gold #jobdeskView .jd-add-panel {
    background: rgba(142, 180, 220, 0.04) !important;
    border: 1px solid rgba(142, 180, 220, 0.28) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
}

body.theme-black-gold #jobdeskShiftSelector {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn,
body.theme-black-gold #jobdeskShiftSelector .btn-tab.jd-shift-btn {
    color: #d4e4f4 !important;
    background: linear-gradient(165deg, #152238 0%, #0e1828 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.3) !important;
    filter: none !important;
    transform: none !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn:hover {
    color: #eef3f8 !important;
    background: linear-gradient(165deg, #1c2c48 0%, #121c30 100%) !important;
    border-color: rgba(142, 180, 220, 0.5) !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--pagi.active,
body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--pagi.active:hover {
    color: #0a1220 !important;
    background: linear-gradient(135deg, #d7e4f0 0%, #8eb8dc 45%, #6a9cc4 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--pagi.active i {
    color: #3f2e0a !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--malam.active,
body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--malam.active:hover {
    color: #e0e7ff !important;
    background: linear-gradient(165deg, rgba(129, 140, 248, 0.35) 0%, rgba(49, 46, 129, 0.75) 100%) !important;
    border-color: rgba(199, 210, 254, 0.45) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

body.theme-black-gold #jobdeskShiftSelector .jd-shift-btn--malam.active i {
    color: #c7d2fe !important;
}

body.theme-black-gold .jd-category-card {
    background:
        linear-gradient(180deg, rgba(142, 180, 220, 0.07) 0%, transparent 28%),
        linear-gradient(165deg, #121c30 0%, #09101c 55%, #070b16 100%) !important;
    border: 1px solid rgba(142, 180, 220, 0.42) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(232, 238, 246, 0.08),
        0 0 0 1px rgba(110, 160, 210, 0.08) !important;
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hapus wash kuning kusam dari glass-tint — bikin kolom terlihat buram */
body.theme-black-gold #jobdeskContainer .jd-category-card.glass-card::after,
body.theme-black-gold #jobdeskView .jd-assigned-card.glass-card::after,
body.theme-black-gold #jobdeskView .jd-category-card::after {
    background: transparent !important;
    opacity: 0 !important;
}

body.theme-black-gold .jd-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4e4f4 20%, #8eb8dc 50%, #6a9cc4 80%, transparent);
    pointer-events: none;
    z-index: 2;
}

body.theme-black-gold #jobdeskContainer .jd-category-card > * {
    position: relative;
    z-index: 1;
}

body.theme-black-gold .jd-category-head,
body.theme-black-gold .jd-category-head--deposit,
body.theme-black-gold .jd-category-head--withdraw,
body.theme-black-gold .jd-category-head--lain,
body.theme-black-gold .jd-category-head--default {
    color: #eef3f8 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    padding: 16px 22px !important;
    margin: -24px -24px 16px -24px !important;
    background:
        linear-gradient(135deg, rgba(142, 180, 220, 0.22) 0%, rgba(14, 22, 40, 0.98) 42%, #0b1422 100%) !important;
    border-bottom: none !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65) !important;
    gap: 12px !important;
}

body.theme-black-gold .jd-category-head i {
    width: 30px;
    height: 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem !important;
    color: #0a1220 !important;
    background: linear-gradient(135deg, #eef3f8 0%, #8eb8dc 45%, #6a9cc4 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    flex-shrink: 0;
}

body.theme-black-gold #jobdeskContainer .jd-category-body {
    gap: 10px !important;
}

body.theme-black-gold #jobdeskContainer .jd-item-row {
    gap: 10px !important;
    padding: 12px 12px !important;
    border: 1px solid rgba(142, 180, 220, 0.18) !important;
    border-bottom: 1px solid rgba(142, 180, 220, 0.18) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(160deg, rgba(142, 180, 220, 0.07) 0%, rgba(0, 0, 0, 0.28) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(232, 238, 246, 0.06) !important;
}

body.theme-black-gold #jobdeskContainer .jd-item-row--assigned {
    border-color: rgba(142, 180, 220, 0.32) !important;
    background:
        linear-gradient(160deg, rgba(142, 180, 220, 0.12) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
}

body.theme-black-gold .jd-item-name {
    color: #eef3f8 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

body.theme-black-gold .jd-tugas-badge {
    background: linear-gradient(135deg, rgba(142, 180, 220, 0.28), rgba(110, 160, 210, 0.14)) !important;
    border: 1px solid rgba(142, 180, 220, 0.55) !important;
    color: #8eb8dc !important;
    font-size: 0.58rem !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    letter-spacing: 0.08em !important;
    box-shadow:
        inset 0 1px 0 rgba(232, 238, 246, 0.18),
        0 2px 8px rgba(110, 160, 210, 0.12) !important;
}

body.theme-black-gold .jd-trigger.date-picker-input,
body.theme-black-gold #jobdeskCategoryTrigger,
body.theme-black-gold #newJobdeskName {
    background: linear-gradient(180deg, #101c2c 0%, #080e1a 100%) !important;
    color: #eef3f8 !important;
    border: 1px solid rgba(142, 180, 220, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.theme-black-gold #jobdeskContainer .jd-trigger.date-picker-input {
    font-size: 0.84rem !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    min-height: 42px !important;
}

body.theme-black-gold #jobdeskContainer .jd-trigger .selected-text {
    color: #eef3f8 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

body.theme-black-gold #jobdeskContainer .jd-trigger i {
    color: #8eb8dc !important;
    opacity: 0.85 !important;
}

body.theme-black-gold .jd-trigger.date-picker-input:hover,
body.theme-black-gold #jobdeskCategoryTrigger:hover,
body.theme-black-gold #jobdeskContainer .jd-trigger.date-picker-input:hover {
    border-color: rgba(190, 215, 240, 0.75) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(142, 180, 220, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
    filter: none !important;
    transform: none !important;
}

body.theme-black-gold .jd-assigned-card {
    background: linear-gradient(145deg, #182640, #101c2c) !important;
    border: 1px solid rgba(142, 180, 220, 0.32) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

body.theme-black-gold .jd-assigned-name {
    color: #eef3f8 !important;
}

body.theme-black-gold .jd-staff-dot {
    background: #8eb8dc !important;
    box-shadow: 0 0 6px rgba(142, 180, 220, 0.4) !important;
}

body.theme-black-gold .jd-assigned-tasks {
    color: #9aadb8 !important;
}

body.theme-black-gold .jd-assigned-empty {
    border-color: rgba(142, 180, 220, 0.25) !important;
    color: #9aadb8 !important;
    background: rgba(142, 180, 220, 0.04) !important;
}

body.theme-black-gold #jobdeskCategoryPortal,
body.theme-black-gold #jdGlobalDropdown {
    background: #152238 !important;
    border-color: rgba(142, 180, 220, 0.38) !important;
}

/* ============================================================
   LUXURY SELECT & DROPDOWN STYLING
   ============================================================ */
select,
.luxury-select,
.date-picker-input select {
    color-scheme: dark !important;
}

select option,
select optgroup {
    background-color: #0b0f19 !important;
    color: #f1f5f9 !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(110, 160, 210, 0.4)) !important;
    background-color: #2e1065 !important;
    color: #fbbf24 !important;
}

/* Luxurious dropdown trigger style */
.luxury-select,
select.luxury-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: rgba(11, 15, 25, 0.9) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    border: 1px solid rgba(110, 160, 210, 0.4) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 10px 38px 10px 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.luxury-select:hover,
select.luxury-select:hover {
    border-color: rgba(251, 191, 36, 0.75) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25), 0 0 12px rgba(251, 191, 36, 0.25) !important;
    transform: translateY(-1px) !important;
}

.luxury-select:focus,
select.luxury-select:focus {
    outline: none !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3), 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}
body.theme-black-gold #jobdeskCategoryPortal .category-option,
body.theme-black-gold #jdGlobalDropdown .jd-opt {
    color: #d4e4f4 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
body.theme-black-gold #jobdeskCategoryPortal .category-option:hover,
body.theme-black-gold #jdGlobalDropdown .jd-opt:hover {
    background: rgba(142, 180, 220, 0.12) !important;
    color: #eef3f8 !important;
}
body.theme-black-gold #jobdeskCategoryPortal .category-option.active,
body.theme-black-gold #jdGlobalDropdown .jd-opt.is-selected {
    background: rgba(142, 180, 220, 0.2) !important;
    color: #8eb8dc !important;
    border-color: rgba(142, 180, 220, 0.45) !important;
}
body.theme-black-gold #jobdeskCategoryPortal::-webkit-scrollbar-thumb {
    background: rgba(142, 180, 220, 0.4) !important;
}

/* Auto-refresh live — jangan sentuh .view-section (animation:none lalu dilepas = slideUp/reload) */
body.silent-live-sync .view-section.active .admin-tab-panel,
body.silent-live-sync .view-section.active table tbody tr,
body.silent-live-sync .glass-card.active-break-card,
body.silent-live-sync .role-slot-row,
body.silent-live-sync .late-staff-item,
body.silent-live-sync .no-breaks-state,
body.silent-live-sync #monitorView,
body.silent-live-sync #monitorView .monitor-grid,
body.silent-live-sync #monitorView .monitor-sidebar,
body.silent-live-sync #monitorView .monitor-main,
body.silent-live-sync .absensi-daily-staff-row,
body.silent-live-sync .paspor-table-wrap,
body.silent-live-sync #quotaView,
body.silent-live-sync #quotaView .glass-card,
body.silent-live-sync #quotaGridContainer,
body.silent-live-sync #quotaSummaryBar,
body.silent-live-sync #quotaSummaryBar > div,
body.silent-live-sync .quota-staff-card,
body.silent-live-sync .quota-summary-card,
body.silent-live-sync #staffView,
body.silent-live-sync #staffConsoleCard {
    animation: none !important;
    transition: none !important;
}

body.silent-live-sync .dashboard-top-bar,
body.silent-live-sync .dashboard-mading-bar,
body.silent-live-sync .monitor-summary-card,
body.silent-live-sync .monitor-stat-card,
body.silent-live-sync #statActiveCount,
body.silent-live-sync #statLateCount,
body.silent-live-sync #statTotalTodayCount,
body.silent-live-sync .active-breaks-grid,
body.silent-live-sync .app-content {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   WB AUTH — Uiverse login box (scoped) — premium enlarged
   ========================================================================== */
#dashboardAuthScreen {
    --form-width: 440px;
    --auth-bg: #0b1118;
    --auth-card-outer: #0e1620;
    --auth-card-inner: #111c28;
    --auth-input-bg: rgba(8, 14, 24, 0.92);
    --auth-border: rgba(120, 145, 168, 0.16);
    --auth-border-focus: rgba(176, 152, 98, 0.42);
    --auth-text-muted: rgba(168, 184, 200, 0.55);
    --auth-gold: #b89b5e;
    --auth-gold-soft: rgba(184, 155, 94, 0.22);
    --auth-gold-glow: rgba(184, 155, 94, 0.12);
    --footer-color: rgba(168, 184, 200, 0.62);
    --button-color: linear-gradient(145deg, #6e5c38 0%, #a08850 38%, #c4a862 62%, #7a6640 100%);
}

#dashboardAuthScreen .wb-auth-stage {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: min(100vh, 100dvh);
    padding: 32px 20px;
    box-sizing: border-box;
}

#dashboardAuthScreen .container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: var(--auth-card-outer);
    border-radius: 28px;
    width: calc(var(--form-width) + 2px);
    height: auto;
    z-index: 8;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(120, 145, 168, 0.1),
        0 0 28px rgba(8, 16, 28, 0.65);
}

#dashboardAuthScreen .container::before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: -2;
    background: conic-gradient(
        from 45deg,
        transparent 72%,
        rgba(184, 155, 94, 0.55) 84%,
        rgba(210, 198, 170, 0.75) 88%,
        rgba(184, 155, 94, 0.45) 92%,
        transparent 100%
    );
    animation: wbAuthSpin 6s linear infinite;
    opacity: 0.85;
}

#dashboardAuthScreen .container::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    z-index: -1;
    background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(142, 160, 180, 0.07) 0%, transparent 58%);
    pointer-events: none;
}

@keyframes wbAuthSpin {
    100% {
        transform: rotate(360deg);
    }
}

#dashboardAuthScreen .login-box {
    background:
        linear-gradient(168deg, rgba(142, 184, 220, 0.08) 0%, transparent 38%),
        linear-gradient(180deg, #152238 0%, #0c1524 100%);
    border-radius: 27px;
    padding: 36px 34px 32px;
    width: var(--form-width);
    height: auto;
    position: relative;
    z-index: 10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 rgba(142, 184, 220, 0.10),
        inset 0 32px 48px -16px rgba(255, 255, 255, 0.04),
        inset 0 0 20px -6px rgba(8, 16, 28, 0.55);
}

#dashboardAuthScreen .login-box.is-register {
    padding: 30px 34px 26px;
}

#dashboardAuthScreen .login-box.is-register .wb-auth-form {
    gap: 10px;
}

#dashboardAuthScreen .login-box.is-register .form {
    gap: 12px;
}

#dashboardAuthScreen .form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

#dashboardAuthScreen .wb-auth-brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 8px 2px;
    margin-bottom: 2px;
}

#dashboardAuthScreen .wb-auth-logo-img {
    width: min(220px, 72%);
    height: auto;
    max-height: 88px;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 18px rgba(142, 160, 180, 0.08));
}

#dashboardAuthScreen .header {
    width: 100%;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0 6px 6px;
    color: rgba(210, 220, 230, 0.82);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

#dashboardAuthScreen .wb-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 5px;
    border-radius: 16px;
    background: rgba(6, 10, 18, 0.55);
    box-shadow: inset 0 1px 0 rgba(142, 160, 180, 0.06);
    border: 1px solid rgba(120, 145, 168, 0.1);
}

#dashboardAuthScreen .wb-auth-tab {
    border: none;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: transparent;
    color: var(--auth-text-muted);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

#dashboardAuthScreen .wb-auth-tab.is-active {
    background: linear-gradient(135deg, rgba(184, 155, 94, 0.14) 0%, rgba(142, 160, 180, 0.06) 100%);
    color: rgba(232, 238, 244, 0.95);
    box-shadow:
        inset 0 0 0 1px rgba(184, 155, 94, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.22);
}

#dashboardAuthScreen .wb-auth-card {
    width: 100%;
}

#dashboardAuthScreen .wb-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

#dashboardAuthScreen .input,
#dashboardAuthScreen input[type="text"],
#dashboardAuthScreen input[type="password"],
#dashboardAuthScreen input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--auth-border) !important;
    border-radius: 14px;
    background: var(--auth-input-bg) !important;
    color: rgba(232, 238, 244, 0.94) !important;
    outline: none !important;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#dashboardAuthScreen .input::placeholder,
#dashboardAuthScreen input::placeholder {
    color: var(--auth-text-muted);
}

#dashboardAuthScreen .input:focus,
#dashboardAuthScreen input[type="text"]:focus,
#dashboardAuthScreen input[type="password"]:focus,
#dashboardAuthScreen input[type="email"]:focus {
    border-color: var(--auth-border-focus) !important;
    background: rgba(10, 18, 30, 0.96) !important;
    box-shadow:
        0 0 0 3px var(--auth-gold-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#dashboardAuthScreen .input:-webkit-autofill,
#dashboardAuthScreen .input:-webkit-autofill:hover,
#dashboardAuthScreen .input:-webkit-autofill:focus,
#dashboardAuthScreen input:-webkit-autofill,
#dashboardAuthScreen input:-webkit-autofill:hover,
#dashboardAuthScreen input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(10, 18, 30, 0.96) inset !important;
    -webkit-text-fill-color: rgba(232, 238, 244, 0.94) !important;
    border-color: rgba(120, 145, 168, 0.22) !important;
    caret-color: #c4b896;
    transition: background-color 99999s ease-out 0s;
}

#dashboardAuthScreen .input[readonly] {
    opacity: 0.72;
    cursor: default;
}

#dashboardAuthScreen .wb-auth-password-wrap {
    position: relative;
    width: 100%;
}

#dashboardAuthScreen .wb-auth-password-wrap .input {
    padding-right: 48px;
}

#dashboardAuthScreen .wb-auth-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--auth-text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-content: center;
    font-size: 0.95rem;
}

#dashboardAuthScreen .wb-auth-password-toggle:hover {
    color: #c4b896;
    background: rgba(184, 155, 94, 0.1);
}

#dashboardAuthScreen .button {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: grid;
    place-content: center;
    gap: 10px;
    background: var(--button-color);
    color: #101820;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 5px rgba(0, 0, 0, 0.18);
}

#dashboardAuthScreen .sign-in {
    margin-top: 6px;
}

#dashboardAuthScreen .button:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 0 16px rgba(184, 155, 94, 0.14);
}

#dashboardAuthScreen .button:active {
    transform: translateY(0);
}

#dashboardAuthScreen .button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

#dashboardAuthScreen .footer {
    width: 100%;
    text-align: center;
    color: var(--footer-color);
    font-size: 13px;
    margin-top: 6px;
    letter-spacing: 0.02em;
}

#dashboardAuthScreen .footer .link {
    position: relative;
    color: var(--auth-gold);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

#dashboardAuthScreen .footer .link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    border-radius: 6px;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

#dashboardAuthScreen .footer .link:hover {
    color: rgba(232, 238, 244, 0.92);
}

#dashboardAuthScreen .footer .link:hover::after {
    width: 100%;
}

#dashboardAuthScreen .wb-auth-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--auth-text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

#dashboardAuthScreen .wb-auth-autocomplete {
    position: relative;
    width: 100%;
}

#dashboardAuthScreen .autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    max-height: 200px;
    overflow-y: auto;
    background: #101a26;
    border: 1px solid rgba(120, 145, 168, 0.18);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

@media (max-width: 520px) {
    #dashboardAuthScreen {
        --form-width: min(94vw, 400px);
    }

    #dashboardAuthScreen .login-box {
        padding: 30px 22px 26px;
    }

    #dashboardAuthScreen .wb-auth-logo-img {
        width: min(200px, 78%);
        max-height: 76px;
    }
}

/* ========== SHIFT KERJA BULANAN — luxury navy / ice ========== */
#shiftView .shift-schedule-card.shift-schedule-card--luxe,
#shiftScheduleContainer .shift-schedule-card.shift-schedule-card--luxe {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    padding: 32px 34px 30px !important;
    border-radius: 22px !important;
    border: none !important;
    background:
        radial-gradient(120% 70% at 6% -10%, rgba(142, 184, 220, 0.14), transparent 48%),
        radial-gradient(80% 50% at 100% 100%, rgba(90, 130, 180, 0.08), transparent 46%),
        #0e1828 !important;
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(168, 200, 230, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#shiftView .shift-schedule-card.shift-schedule-card--luxe.glass-card::before,
#shiftScheduleContainer .shift-schedule-card.shift-schedule-card--luxe.glass-card::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(232, 238, 246, 0.72) 0%,
        rgba(142, 184, 220, 0.48) 28%,
        rgba(80, 120, 170, 0.18) 54%,
        rgba(142, 184, 220, 0.42) 100%
    ) !important;
    opacity: 1 !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: 2;
}

#shiftView .shift-schedule-card.shift-schedule-card--luxe.glass-card::after,
#shiftScheduleContainer .shift-schedule-card.shift-schedule-card--luxe.glass-card::after {
    display: block !important;
    content: "" !important;
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(232, 238, 246, 0.7), transparent) !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 3;
}

#shiftView .shift-schedule-card--luxe > * {
    position: relative;
    z-index: 4;
}

#shiftView .shift-staff-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 22px 24px;
    border-radius: 18px;
    background:
        radial-gradient(90% 80% at 0% 0%, rgba(142, 184, 220, 0.1), transparent 46%),
        #121c30 !important;
    border: 1px solid rgba(142, 184, 220, 0.28) !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#shiftView .shift-staff-header__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 240px;
}

#shiftView #shiftStaffName {
    margin: 0 0 10px 0;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #eef3f8 !important;
    text-transform: uppercase;
}

#shiftView #shiftStaffRole {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d7e4f0 !important;
    background: linear-gradient(180deg, #1e304c 0%, #152238 100%) !important;
    border: 1px solid rgba(168, 200, 230, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#shiftView .shift-staff-header__stats {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

#shiftView .shift-stat-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 132px;
    padding: 12px 18px;
    text-align: center;
    border-radius: 14px;
    background: #0c1524 !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#shiftView .shift-stat-chip__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 7px;
}

#shiftView .shift-stat-chip__label i {
    margin-right: 5px;
}

#shiftView .shift-stat-chip__value,
#shiftView .shift-stat-chip__metric {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

#shiftView .shift-stat-chip--period {
    border: 1px solid rgba(142, 184, 220, 0.42) !important;
    background: linear-gradient(165deg, #1c2c48 0%, #101c2c 100%) !important;
}
#shiftView .shift-stat-chip--period .shift-stat-chip__label { color: #8eb8dc; }
#shiftView #shiftMonthDisplay {
    font-size: 1.05rem !important;
    font-weight: 900;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: #d7e4f0 !important;
}

#shiftView .shift-stat-chip--off {
    border: 1px dashed rgba(154, 173, 184, 0.42) !important;
}
#shiftView .shift-stat-chip--off .shift-stat-chip__label,
#shiftView .shift-stat-chip--off .shift-stat-chip__unit { color: #8a9aab; }
#shiftView #shiftSummaryOff {
    font-size: 1.85rem !important;
    font-weight: 900;
    line-height: 1;
    color: #eef3f8 !important;
}

#shiftView .shift-stat-chip--half {
    border: 1px solid rgba(212, 175, 95, 0.38) !important;
    background: linear-gradient(165deg, #241c10 0%, #16110a 100%) !important;
}
#shiftView .shift-stat-chip--half .shift-stat-chip__label,
#shiftView .shift-stat-chip--half .shift-stat-chip__unit { color: #d4c09a; }
#shiftView #shiftSummaryHalf {
    font-size: 1.85rem !important;
    font-weight: 900;
    line-height: 1;
    color: #f3e6c4 !important;
}

#shiftView .shift-stat-chip__unit {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#shiftView .shift-off-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

#shiftView .shift-off-dates__card {
    position: relative;
    overflow: hidden;
    padding: 18px 22px;
    border-radius: 16px;
    min-height: 108px;
    background: #0c1524 !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#shiftView .shift-off-dates__card::before {
    content: "";
    position: absolute;
    top: -36px;
    right: -28px;
    width: 120px;
    height: 120px;
    pointer-events: none;
    border-radius: 50%;
}

#shiftView .shift-off-dates__card--off {
    border: 1px solid rgba(154, 173, 184, 0.32) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#shiftView .shift-off-dates__card--off::before {
    background: radial-gradient(circle, rgba(142, 184, 220, 0.16) 0%, transparent 70%);
}

#shiftView .shift-off-dates__card--half {
    border: 1px solid rgba(212, 175, 95, 0.32) !important;
    background: linear-gradient(165deg, #221a10 0%, #14100a 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 248, 231, 0.06);
}
#shiftView .shift-off-dates__card--half::before {
    background: radial-gradient(circle, rgba(212, 175, 95, 0.16) 0%, transparent 70%);
}

#shiftView .shift-off-dates__card:hover {
    transform: translateY(-2px);
}

#shiftView .shift-off-dates__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

#shiftView .shift-off-dates__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

#shiftView .shift-off-dates__card--off .shift-off-dates__icon {
    color: #c5d6e6;
    background: linear-gradient(180deg, #243656, #152238);
    border: 1px solid rgba(168, 200, 230, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#shiftView .shift-off-dates__card--off .shift-off-dates__label { color: #8eb8dc; }

#shiftView .shift-off-dates__card--half .shift-off-dates__icon {
    color: #f3e6c4;
    background: linear-gradient(180deg, #3a2c14, #22180c);
    border: 1px solid rgba(212, 175, 95, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.12);
}
#shiftView .shift-off-dates__card--half .shift-off-dates__label { color: #d4c09a; }

#shiftView .shift-off-dates__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
}

#shiftView .shift-off-dates__value,
#shiftView #shiftOffDates,
#shiftView #shiftHalfDates {
    position: relative;
    z-index: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #eef3f8 !important;
    text-shadow: none !important;
}

#shiftView .shift-legend-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: #0c1524 !important;
    border: 1px solid rgba(142, 184, 220, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#shiftView .shift-legend-bar__title {
    font-size: 0.7rem;
    color: #8eb8dc !important;
    letter-spacing: 0.14em;
    font-weight: 900;
}

#shiftView .shift-legend-item {
    padding: 5px 9px 5px 6px;
    border-radius: 999px;
    background: #101c2c !important;
    border: 1px solid rgba(142, 184, 220, 0.16) !important;
}

#shiftView .shift-legend-item span:last-child {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #eef3f8 !important;
}

#shiftView .shift-legend-swatch {
    min-width: 34px;
    height: 26px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#shiftView #shiftCalendarGrid.shift-calendar-grid,
#shiftView #shiftCalendarGrid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 11px !important;
}

#shiftView .shift-calendar-weekday {
    padding: 9px 4px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em;
    color: #c5d6e6 !important;
    background: linear-gradient(180deg, #1c2c48 0%, #121c30 100%) !important;
    border: 1px solid rgba(142, 184, 220, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#shiftView .shift-day-card {
    min-height: 132px;
    padding: 0 !important;
    gap: 0;
    border-radius: 16px;
    border-width: 1px !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#shiftView .shift-day-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 46%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

#shiftView .shift-day-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px 8px;
    flex: 1;
}

#shiftView .shift-day-card__wd {
    font-size: 0.68rem !important;
    letter-spacing: 0.16em;
    font-weight: 800 !important;
}

#shiftView .shift-day-card__num {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

#shiftView .shift-day-card__badge {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0;
    padding: 8px 6px 10px !important;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, rgba(6, 10, 16, 0.55) 0%, rgba(4, 8, 14, 0.78) 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#shiftView .shift-day-card__code {
    font-size: 0.92rem !important;
    letter-spacing: 0.08em;
}

#shiftView .shift-day-card__label {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em;
}

#shiftView .shift-day-card--pagi {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(255, 236, 179, 0.42), transparent 48%),
        linear-gradient(180deg, #c9a227 0%, #8a6414 46%, #3a280c 100%) !important;
    border-color: rgba(245, 230, 184, 0.5) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 248, 231, 0.28) !important;
}
#shiftView .shift-day-card--malam {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(196, 181, 253, 0.38), transparent 48%),
        linear-gradient(180deg, #6366f1 0%, #3730a3 48%, #12122a 100%) !important;
    border-color: rgba(199, 210, 254, 0.48) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(199, 210, 254, 0.24) !important;
}
#shiftView .shift-day-card--siang,
#shiftView .shift-day-card--tiga {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(187, 247, 208, 0.34), transparent 48%),
        linear-gradient(180deg, #22c55e 0%, #166534 48%, #0a1c12 100%) !important;
    border-color: rgba(187, 247, 208, 0.45) !important;
}
#shiftView .shift-day-card--sore,
#shiftView .shift-day-card--empat {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(254, 215, 170, 0.36), transparent 48%),
        linear-gradient(180deg, #f97316 0%, #c2410c 48%, #2a1208 100%) !important;
    border-color: rgba(254, 215, 170, 0.48) !important;
}
#shiftView .shift-day-card--half {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(253, 230, 138, 0.4), transparent 48%),
        linear-gradient(180deg, #eab308 0%, #a16207 48%, #2a1c08 100%) !important;
    border-color: rgba(253, 230, 138, 0.5) !important;
}
#shiftView .shift-day-card--off {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(254, 202, 202, 0.28), transparent 48%),
        linear-gradient(180deg, #b91c1c 0%, #7f1d1d 48%, #22080c 100%) !important;
    border-color: rgba(254, 202, 202, 0.4) !important;
}
#shiftView .shift-day-card--cuti {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(167, 243, 208, 0.32), transparent 48%),
        linear-gradient(180deg, #059669 0%, #065f46 48%, #062018 100%) !important;
    border-color: rgba(167, 243, 208, 0.42) !important;
}

#shiftView .shift-day-card.is-today {
    overflow: visible !important;
    z-index: 3;
    animation: none !important;
    transform: translateY(-1px);
    border-color: #d7e4f0 !important;
    box-shadow:
        0 0 0 1px rgba(215, 228, 240, 0.55),
        0 0 22px rgba(106, 156, 196, 0.35),
        0 14px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#shiftView .shift-day-card.is-today::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    border: 1.5px solid rgba(232, 238, 246, 0.78);
    background: none;
    box-shadow:
        0 0 0 1px rgba(106, 156, 196, 0.28),
        0 0 18px rgba(106, 156, 196, 0.32),
        inset 0 0 10px rgba(215, 228, 240, 0.12);
    animation: none;
    z-index: 2;
    pointer-events: none;
}

#shiftView .shift-day-card__today-tag {
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    color: #0a1220;
    background: linear-gradient(135deg, #eef3f8 0%, #d7e4f0 48%, #6a9cc4 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

@media (max-width: 860px) {
    #shiftView .shift-off-dates {
        grid-template-columns: 1fr;
    }
    #shiftView .shift-staff-header__stats {
        width: 100%;
    }
}

@media (max-width: 720px) {
    #shiftView .shift-schedule-card.shift-schedule-card--luxe {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    #shiftView .shift-day-card {
        min-height: 104px;
    }
    #shiftView .shift-day-card__num {
        font-size: 1.4rem !important;
    }
}

/* ========== TAB MENU — garis mewah ice steel + logo tengah ========== */
#izinTabMenu,
#absensiTabMenu {
    position: relative !important;
    padding-bottom: 34px !important;
}

#izinTabMenu::before,
#izinTabMenu::after,
#absensiTabMenu::before,
#absensiTabMenu::after {
    content: none !important;
    display: none !important;
}

.tab-luxe-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.tab-luxe-divider::before,
.tab-luxe-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 5px;
    max-width: none;
    border-radius: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

.tab-luxe-divider::before {
    margin: 0 12px 0 3%;
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(80, 120, 170, 0.2) 12%, rgba(168, 200, 230, 0.75) 48%, rgba(232, 238, 246, 0.98) 100%),
        linear-gradient(90deg, transparent 0%, rgba(80, 120, 170, 0.12) 18%, rgba(142, 184, 220, 0.4) 100%);
    background-size: 100% 1.5px, 100% 1px;
    background-position: 0 1px, 0 4px;
    box-shadow: 0 0 12px rgba(142, 184, 220, 0.28);
}

.tab-luxe-divider::after {
    margin: 0 3% 0 12px;
    background-image:
        linear-gradient(90deg, rgba(232, 238, 246, 0.98) 0%, rgba(168, 200, 230, 0.75) 52%, rgba(80, 120, 170, 0.2) 88%, transparent 100%),
        linear-gradient(90deg, rgba(142, 184, 220, 0.4) 0%, rgba(80, 120, 170, 0.12) 82%, transparent 100%);
    background-size: 100% 1.5px, 100% 1px;
    background-position: 0 1px, 0 4px;
    box-shadow: 0 0 12px rgba(142, 184, 220, 0.28);
}

.tab-luxe-divider__mark {
    width: 34px;
    height: auto;
    flex: 0 0 auto;
    display: block;
    filter:
        drop-shadow(0 0 7px rgba(180, 210, 235, 0.55))
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* Hapus Data — dropdown teks utuh, kontras ice, tanpa ikon yang menimpa tulisan */
#tabDeleteData .delete-data-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 980px;
}

#tabDeleteData .delete-data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}

#tabDeleteData .delete-data-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#tabDeleteData .delete-data-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c5d6e8;
}

#tabDeleteData .delete-data-field-month {
    flex: 0 0 220px;
    width: 220px;
}

#tabDeleteData .delete-data-action {
    margin-top: 0;
    white-space: nowrap;
    min-height: 44px;
}

#tabDeleteData .delete-data-field-date {
    flex: 0 0 210px;
    width: 210px;
}

#tabDeleteData .delete-data-field-date .date-picker-input,
#tabDeleteData .delete-data-field-month .date-picker-input {
    padding: 10px 12px !important;
    color-scheme: dark;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #eef3f8 !important;
    -webkit-text-fill-color: #eef3f8 !important;
    background-color: #101a2c !important;
    border: 1px solid rgba(142, 184, 220, 0.45) !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   HEADER MADING — LUXE PREVIEW (platinum ice)
   ========================================================================== */
.dashboard-mading-bar__panel {
    min-height: 52px !important;
    border-bottom-color: rgba(186, 214, 236, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(238, 243, 248, 0.02) 28%, transparent 52%),
        linear-gradient(90deg, rgba(142, 184, 220, 0.14) 0%, transparent 18%, transparent 82%, rgba(142, 184, 220, 0.1) 100%),
        radial-gradient(ellipse 55% 120% at 50% -40%, rgba(186, 214, 232, 0.18) 0%, transparent 70%),
        linear-gradient(180deg, #1a2b44 0%, #101c30 42%, #0a1320 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 14px 36px rgba(0, 0, 0, 0.45) !important;
}
.dashboard-mading-bar__panel::before {
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%) !important;
    background-size: 220% 100% !important;
    animation: madingBarSweepLuxe 9s ease-in-out infinite !important;
    opacity: 1 !important;
}
.dashboard-mading-bar__panel::after {
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(106, 156, 196, 0.3) 8%, rgba(186, 214, 236, 0.9) 34%, rgba(255, 255, 255, 0.98) 50%, rgba(186, 214, 236, 0.9) 66%, rgba(106, 156, 196, 0.3) 92%, transparent 100%) !important;
    box-shadow: 0 0 18px rgba(142, 184, 220, 0.55) !important;
    animation: madingEdgePulseLuxe 4.8s ease-in-out infinite !important;
}
@keyframes madingBarSweepLuxe {
    0%, 100% { background-position: 120% 0; opacity: 0.35; }
    45% { background-position: -20% 0; opacity: 0.9; }
}
@keyframes madingEdgePulseLuxe {
    0%, 100% { opacity: 0.72; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.18); }
}
.dashboard-mading-bar__inner {
    min-height: 52px !important;
    padding: 7px 18px !important;
    gap: 14px !important;
}
.dashboard-mading-bar__pin {
    width: 9px !important;
    height: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #c5dced 40%, #6a9cc4 100%) !important;
    box-shadow: 0 0 14px rgba(186, 214, 236, 0.75), 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    animation: headerPinTwinkleLuxe 3.6s ease-in-out infinite !important;
}
@keyframes headerPinTwinkleLuxe {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.35); transform: scale(1.06); }
}
.dashboard-mading-bar__rule {
    background: linear-gradient(90deg, rgba(186, 214, 236, 0.72) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(142, 184, 220, 0.05) 100%) !important;
    box-shadow: 0 0 8px rgba(142, 184, 220, 0.25) !important;
}
.dashboard-top-bar .live-clock--header .live-clock__glow {
    inset: -16px -26px !important;
    background:
        radial-gradient(ellipse 62% 70% at 50% 50%, rgba(186, 214, 232, 0.36) 0%, transparent 72%),
        radial-gradient(ellipse 90% 90% at 18% 28%, rgba(255, 255, 255, 0.1) 0%, transparent 58%) !important;
    animation: headerClockGlowLuxe 5.5s ease-in-out infinite !important;
}
@keyframes headerClockGlowLuxe {
    0%, 100% { opacity: 0.75; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.02); }
}
.dashboard-top-bar .live-clock--header .live-clock__frame {
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #d7e7f4 16%, #8eb8dc 38%, #3a6188 55%, #9fc4e0 78%, #f4f8fc 100%) !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.14),
        0 0 36px rgba(142, 184, 220, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
.dashboard-top-bar .live-clock--header .live-clock__ornament {
    position: absolute; width: 10px; height: 10px; z-index: 3; pointer-events: none;
    border-color: rgba(238, 243, 248, 0.78); border-style: solid; opacity: 0.88;
}
.dashboard-top-bar .live-clock--header .live-clock__ornament--tl {
    top: 5px; left: 5px; border-width: 1.5px 0 0 1.5px; border-radius: 3px 0 0 0;
}
.dashboard-top-bar .live-clock--header .live-clock__ornament--br {
    right: 5px; bottom: 5px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 3px 0;
}
.dashboard-top-bar .live-clock--header .live-clock__content {
    gap: 10px !important; padding: 8px 18px 8px 12px !important; border-radius: 16.5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 30%, transparent 48%),
        linear-gradient(145deg, #274064 0%, #162840 48%, #0b1526 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 10px rgba(0, 0, 0, 0.45) !important;
}
.dashboard-top-bar .live-clock.live-clock--header .time {
    font-size: 1.22rem !important; font-weight: 700 !important;
    font-family: "Cormorant Garamond", "Times New Roman", serif !important;
    letter-spacing: 0.12em !important;
}
.dashboard-top-bar .live-clock--header .live-clock__tz {
    font-size: 0.55rem !important; letter-spacing: 0.2em !important; color: #a8cce4 !important;
}
.dashboard-top-bar .live-clock--header .live-clock__live {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 2px 7px;
    border-radius: 999px; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.16em; color: #d1fae5;
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.28) 0%, rgba(6, 95, 70, 0.45) 100%);
    border: 1px solid rgba(110, 231, 183, 0.35); box-shadow: 0 0 12px rgba(52, 211, 153, 0.25);
}
.dashboard-top-bar .live-clock--header .live-clock__live i {
    font-size: 0.32rem; color: #6ee7b7; animation: headerLiveDotLuxe 1.8s ease-in-out infinite;
}
@keyframes headerLiveDotLuxe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.dashboard-top-bar .live-clock.live-clock--header .date {
    font-size: 0.52rem !important; letter-spacing: 0.16em !important; color: rgba(210, 228, 242, 0.94) !important;
}
.dash-staff-luxe__corner {
    position: absolute; width: 9px; height: 9px; z-index: 4; pointer-events: none;
    border-color: rgba(238, 243, 248, 0.72); border-style: solid; opacity: 0.82;
}
.dash-staff-luxe__corner--tl { top: 4px; left: 4px; border-width: 1.5px 0 0 1.5px; border-radius: 2px 0 0 0; }
.dash-staff-luxe__corner--br { right: 4px; bottom: 4px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 2px 0; }
.dash-staff-luxe__frame {
    border-radius: 16px !important; padding: 1.5px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(186, 214, 236, 0.62) 24%, rgba(80, 120, 170, 0.38) 52%, rgba(142, 184, 220, 0.55) 76%, rgba(255, 255, 255, 0.72) 100%) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(186, 214, 236, 0.18), 0 0 24px rgba(142, 184, 220, 0.22) !important;
}
.dash-staff-luxe__content {
    border-radius: 14.5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(28, 44, 68, 0.98) 0%, rgba(14, 24, 40, 0.99) 55%, rgba(8, 14, 24, 1) 100%) !important;
}
.dash-staff-luxe__content--minimal { gap: 10px !important; padding: 6px 8px 6px 11px !important; }
.dash-staff-luxe__status { width: 8px !important; height: 8px !important; animation: dashStaffStatusPulse 2.4s ease-in-out infinite !important; }
.dash-staff-luxe__name-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.dash-staff-luxe__eyebrow {
    font-size: 0.42rem !important; font-weight: 800 !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important; color: rgba(168, 204, 228, 0.9) !important;
}
.dash-staff-luxe__content--minimal .dash-staff-luxe__name {
    font-family: "Cormorant Garamond", "Times New Roman", serif !important;
    font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important;
    max-width: 300px !important; text-transform: uppercase !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 45%, #b7d0e6 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) !important; text-shadow: none !important;
}
.dash-staff-luxe--inline .dash-staff-luxe__glow {
    inset: -12px -14px !important;
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, rgba(142, 184, 220, 0.3) 0%, transparent 68%),
        radial-gradient(ellipse 45% 40% at 88% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 50%) !important;
    animation: dashStaffGlow 4.8s ease-in-out infinite !important;
}
.dash-staff-luxe__sheen::after { animation: dashStaffSheen 7s ease-in-out infinite !important; }
.dash-staff-luxe__logout {
    height: 38px !important; padding: 0 16px 0 7px !important; border-radius: 14px !important; letter-spacing: 0.16em !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(145deg, #b33a4a 0%, #7a1c2a 48%, #3f0d16 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 8px rgba(0, 0, 0, 0.38),
        0 8px 22px rgba(0, 0, 0, 0.42), 0 0 22px rgba(155, 43, 58, 0.32) !important;
}
.dash-staff-luxe__logout-aura { animation: dashLogoutAura 3.2s ease-in-out infinite !important; }
.dash-staff-luxe__logout-ring { border-radius: 14px !important; }
.dash-staff-luxe__logout-shine { animation: dashLogoutShine 5.5s ease-in-out infinite !important; }
.dash-staff-luxe__logout-icon-wrap { width: 26px !important; height: 26px !important; }
@media (max-width: 768px) {
    .dashboard-top-bar .live-clock--header .live-clock__live { display: none; }
    .dash-staff-luxe__content--minimal .dash-staff-luxe__name { font-size: 0.72rem !important; }
    .dashboard-top-bar .live-clock.live-clock--header .time { font-size: 0.92rem !important; }
}

/* ==========================================================================
   HEADER — FRAMELESS LUXE (tanpa bingkai metal)
   Spesifisitas tinggi agar mengalahkan rule LUXE di atas.
   ========================================================================== */
.dashboard-top-bar .live-clock--frameless.live-clock--header .live-clock__frame,
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__frame {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__ornament,
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__corner {
    display: none !important;
}
.dashboard-top-bar .live-clock--frameless.live-clock--header .live-clock__content {
    gap: 10px !important;
    padding: 2px 4px 2px 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__content::before,
.dashboard-top-bar .live-clock--frameless .live-clock__sheen {
    display: none !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__glow {
    inset: -8px -20px !important;
    opacity: 0.22 !important;
    filter: blur(22px);
    animation: none !important;
    background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(186, 214, 232, 0.28) 0%, transparent 72%) !important;
}
.dashboard-top-bar .live-clock--frameless.live-clock--header .time {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.05 !important;
    background: linear-gradient(180deg, #ffffff 0%, #e8f1f8 55%, #b7d0e6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 6px rgba(142, 184, 220, 0.28)) !important;
    white-space: nowrap !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__time-row {
    align-items: center !important;
    gap: 8px !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__tz {
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 0.48rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    color: rgba(168, 204, 228, 0.88) !important;
    text-shadow: none !important;
    align-self: center !important;
    line-height: 1 !important;
    padding-top: 1px;
}
.dashboard-top-bar .live-clock--frameless .live-clock__live {
    margin-left: 2px !important;
    align-self: center !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__accent {
    display: none !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__jewel {
    display: none !important;
}
.dashboard-top-bar .live-clock--frameless.live-clock--header .date {
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 0.46rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: rgba(186, 210, 228, 0.7) !important;
    margin-top: 3px !important;
}
.dashboard-top-bar .live-clock--frameless .live-clock__readout {
    gap: 2px !important;
}

.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__content,
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__content--minimal {
    gap: 10px !important;
    padding: 2px 2px 2px 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__sheen {
    display: none !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__glow {
    inset: -10px -16px !important;
    opacity: 0.2 !important;
    filter: blur(20px);
    animation: none !important;
    background: radial-gradient(ellipse 70% 80% at 40% 50%, rgba(142, 184, 220, 0.26) 0%, transparent 70%) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless.dash-staff-luxe--inline .dash-staff-luxe__frame {
    box-shadow: none !important;
    background: none !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__status {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 0 0 transparent, 0 0 10px rgba(52, 211, 153, 0.7) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__name-accent {
    width: 1px !important;
    min-height: 26px !important;
    box-shadow: none !important;
    opacity: 0.8;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__name-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
    position: relative;
    padding-bottom: 1px;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__name-wrap::after {
    content: "";
    display: block;
    width: 100%;
    max-width: 72%;
    height: 1px;
    margin-top: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(168, 204, 228, 0.45) 42%,
        transparent 100%
    );
    opacity: 0.7;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__eyebrow {
    display: block !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    color: rgba(168, 204, 228, 0.95) !important;
    -webkit-text-fill-color: rgba(168, 204, 228, 0.95) !important;
    background: none !important;
    filter: none !important;
    white-space: nowrap !important;
    max-width: min(340px, 42vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__content--minimal .dash-staff-luxe__name {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0.14em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    max-width: min(340px, 42vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: linear-gradient(
        175deg,
        #ffffff 0%,
        #f7fbff 28%,
        #dceaf5 58%,
        #9ebfdc 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(186, 214, 236, 0.28)) !important;
    text-shadow: none !important;
}
/* Profile — kotak platinum-ice glass */
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        linear-gradient(145deg, rgba(52, 72, 98, 0.95) 0%, rgba(18, 28, 44, 0.97) 52%, rgba(8, 14, 24, 0.99) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(186, 214, 236, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 4px rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.38),
        0 0 14px rgba(142, 184, 220, 0.14) !important;
    color: #e8f2fa !important;
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.34s ease,
        color 0.28s ease,
        background 0.34s ease,
        border-color 0.28s ease,
        filter 0.34s ease !important;
    animation: dashActionIdleGlow 3.6s ease-in-out infinite !important;
}
/* Corner ticks — tech box accent */
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    border-top-color: rgba(232, 242, 250, 0.35);
    border-left-color: rgba(168, 204, 228, 0.22);
    border-right-color: rgba(142, 184, 220, 0.08);
    border-bottom-color: rgba(142, 184, 220, 0.08);
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    clip-path: none;
    background: linear-gradient(
        112deg,
        transparent 38%,
        rgba(255, 255, 255, 0.06) 46%,
        rgba(232, 242, 250, 0.42) 50%,
        rgba(255, 255, 255, 0.06) 54%,
        transparent 62%
    );
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 0;
    animation: dashActionSheen 5.8s ease-in-out infinite !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action i {
    z-index: 2;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s ease !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action-ring {
    opacity: 0.95 !important;
    inset: -2px !important;
    border-radius: 10px !important;
    padding: 1.25px !important;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.95) 0%,
        #c5dced 28%,
        #8eb8dc 52%,
        #4a7aa8 78%,
        rgba(238, 243, 248, 0.75) 100%
    ) !important;
    animation: dashActionRingPulse 3.2s ease-in-out infinite !important;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:hover {
    color: #fff !important;
    border-color: rgba(210, 230, 245, 0.55) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 44%),
        linear-gradient(145deg, rgba(68, 94, 126, 1) 0%, rgba(26, 40, 60, 1) 52%, rgba(12, 20, 34, 1) 100%) !important;
    transform: translateY(-2px) scale(1.06) !important;
    filter: brightness(1.06) !important;
    animation: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 4px rgba(0, 0, 0, 0.28),
        0 10px 22px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(142, 184, 220, 0.36) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:hover::before {
    border-top-color: rgba(255, 255, 255, 0.55);
    border-left-color: rgba(186, 214, 236, 0.4);
    opacity: 1;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:hover::after {
    animation: dashActionSheenHover 0.75s ease-out 1 !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:hover i {
    transform: rotate(10deg) scale(1.06) !important;
    filter: drop-shadow(0 0 6px rgba(186, 214, 236, 0.55)) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:hover .dash-staff-luxe__action-ring {
    opacity: 1 !important;
    filter: brightness(1.18) !important;
    animation: none !important;
    transform: scale(1.03) !important;
}
.dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action:active {
    transform: translateY(0) scale(0.96) !important;
}

/* Keluar — kotak glass crimson */
.dashboard-top-bar .dash-staff-luxe__logout--frameless {
    height: 34px !important;
    min-width: 108px !important;
    padding: 0 14px 0 8px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(254, 202, 202, 0.38) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 38%, transparent 55%),
        linear-gradient(135deg, rgba(153, 35, 48, 0.68) 0%, rgba(100, 18, 28, 0.78) 48%, rgba(55, 10, 16, 0.88) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 5px rgba(0, 0, 0, 0.28),
        0 6px 18px rgba(0, 0, 0, 0.36),
        0 0 16px rgba(185, 28, 28, 0.18) !important;
    letter-spacing: 0.18em !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.34s ease,
        border-color 0.28s ease,
        background 0.34s ease,
        filter 0.34s ease !important;
    animation: dashLogoutIdleGlow 3.8s ease-in-out infinite !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-ring {
    display: none !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-aura {
    display: block !important;
    inset: -24% -14% !important;
    border-radius: 12px !important;
    opacity: 0.42 !important;
    background: radial-gradient(
        ellipse 70% 80% at 50% 50%,
        rgba(248, 113, 113, 0.32) 0%,
        rgba(185, 28, 28, 0.12) 42%,
        transparent 72%
    ) !important;
    animation: dashLogoutAura 3.4s ease-in-out infinite !important;
    filter: blur(6px);
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-shine {
    opacity: 0.7 !important;
    border-radius: inherit !important;
    background: linear-gradient(
        108deg,
        transparent 36%,
        rgba(255, 255, 255, 0.06) 46%,
        rgba(255, 240, 240, 0.34) 50%,
        rgba(255, 255, 255, 0.06) 54%,
        transparent 64%
    ) !important;
    animation: dashLogoutShine 5.6s ease-in-out infinite !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:hover .dash-staff-luxe__logout-shine {
    animation: dashLogoutShine 0.7s ease-out 1 !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-icon-wrap {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(254, 202, 202, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    padding: 0 !important;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, background 0.28s ease !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-icon-wrap i {
    font-size: 0.62rem !important;
    color: #fecaca !important;
    filter: drop-shadow(0 0 7px rgba(252, 165, 165, 0.5)) !important;
    transition: color 0.28s ease, filter 0.28s ease, transform 0.34s ease !important;
    animation: dashLogoutIconPulse 2.8s ease-in-out infinite !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-label {
    color: #fff8f8 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.1) !important;
    animation: none !important;
    border-color: rgba(254, 226, 226, 0.62) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 58%),
        linear-gradient(135deg, rgba(185, 42, 56, 0.82) 0%, rgba(120, 22, 32, 0.9) 48%, rgba(70, 12, 20, 0.94) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 5px rgba(0, 0, 0, 0.22),
        0 12px 26px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(185, 28, 28, 0.32) !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:hover .dash-staff-luxe__logout-aura {
    opacity: 0.62 !important;
    animation: dashLogoutAura 1.8s ease-in-out infinite !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:hover .dash-staff-luxe__logout-icon-wrap {
    transform: translateY(-1px) !important;
    border-color: rgba(254, 226, 226, 0.5) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 55%),
        rgba(0, 0, 0, 0.22) !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:hover .dash-staff-luxe__logout-icon-wrap i {
    color: #fff !important;
    filter: drop-shadow(0 0 10px rgba(254, 202, 202, 0.7)) !important;
    animation: none !important;
    transform: rotate(-12deg) scale(1.06) !important;
}
.dashboard-top-bar .dash-staff-luxe__logout--frameless:active {
    transform: translateY(0) scale(0.98) !important;
}

@keyframes dashActionIdleGlow {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 4px rgba(0, 0, 0, 0.35),
            0 4px 14px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(186, 214, 236, 0.12),
            0 0 12px rgba(142, 184, 220, 0.14);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 -1px 4px rgba(0, 0, 0, 0.32),
            0 5px 16px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(186, 214, 236, 0.2),
            0 0 18px rgba(142, 184, 220, 0.28);
    }
}
@keyframes dashActionRingPulse {
    0%, 100% { opacity: 0.82; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.12); }
}
@keyframes dashActionSheen {
    0%, 70% { transform: translateX(-130%); opacity: 0; }
    76% { opacity: 1; }
    92% { transform: translateX(130%); opacity: 0; }
    100% { transform: translateX(130%); opacity: 0; }
}
@keyframes dashActionSheenHover {
    0% { transform: translateX(-130%); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}
@keyframes dashLogoutIdleGlow {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 -1px 5px rgba(0, 0, 0, 0.28),
            0 6px 18px rgba(0, 0, 0, 0.36),
            0 0 14px rgba(185, 28, 28, 0.14);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 5px rgba(0, 0, 0, 0.26),
            0 7px 20px rgba(0, 0, 0, 0.38),
            0 0 20px rgba(185, 28, 28, 0.26);
    }
}
@keyframes dashLogoutIconPulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(252, 165, 165, 0.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 9px rgba(252, 165, 165, 0.65)); transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action,
    .dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action::after,
    .dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__action-ring,
    .dashboard-top-bar .dash-staff-luxe__logout--frameless,
    .dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-aura,
    .dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-shine,
    .dashboard-top-bar .dash-staff-luxe__logout--frameless .dash-staff-luxe__logout-icon-wrap i {
        animation: none !important;
    }
}

/* Rapikan bar keseluruhan */
.dashboard-top-bar .dashboard-mading-bar__inner {
    min-height: 48px !important;
    padding: 6px 20px !important;
}
.dashboard-top-bar .dashboard-staff-block__row {
    gap: 12px !important;
}
.dashboard-top-bar .dashboard-mading-bar__pin {
    opacity: 0.85;
}
@media (max-width: 768px) {
    .dashboard-top-bar .live-clock--frameless .live-clock__live { display: none !important; }
    .dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__eyebrow {
        display: block !important;
        font-size: 0.4rem !important;
        letter-spacing: 0.16em !important;
    }
    .dashboard-top-bar .live-clock--frameless.live-clock--header .time { font-size: 1.02rem !important; }
    .dashboard-top-bar .dash-staff-luxe--frameless .dash-staff-luxe__content--minimal .dash-staff-luxe__name {
        font-size: 0.82rem !important;
    }
}