/* ========================================================= */
/* 🌟 GLOBAL SMOOTH SCROLLING & HARDWARE ACCELERATION */
/* ========================================================= */
html { 
    font-size: 14px; 
    scroll-behavior: smooth; /* Bikin scroll antar halaman auto-smooth */
}
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    /* Transisi ganti tema gelap/terang super mulus */
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
}
::selection { background: var(--primary); color: #ffffff; }

/* ========================================================= */
/* ✨ ANIMASI HALUS TINGKAT DEWA (BUTTERY SMOOTH) */
/* ========================================================= */
@keyframes pageFadeIn { 
    from { opacity: 0; transform: translateY(15px) translateZ(0); } /* translateZ(0) paksa VGA kerja */
    to { opacity: 1; transform: translateY(0) translateZ(0); } 
}
@keyframes rowFadeIn { 
    from { opacity: 0; transform: translateX(-10px) translateZ(0); } 
    to { opacity: 1; transform: translateX(0) translateZ(0); } 
}
@keyframes pulseSoft { 
    0% { box-shadow: 0 0 0 0 var(--primary-glow); } 
    70% { box-shadow: 0 0 0 15px rgba(26, 86, 219, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0); } 
}
@keyframes chatSlideUp { 
    from { opacity: 0; transform: translateY(40px) scale(0.95) translateZ(0); } 
    to { opacity: 1; transform: translateY(0) scale(1) translateZ(0); } 
}

/* Memaksa GPU Render pada Elemen Berpindah */
.page-section { 
    display: none; 
    will-change: transform, opacity; 
}
.page-section.active { 
    display: block !important; 
    animation: pageFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

/* Bikin baris tabel muncul satu-satu dengan elegan */
.table-premium tbody tr { 
    animation: rowFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    will-change: transform, opacity;
}
.modal.show .modal-dialog { 
    animation: pageFadeIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
}

/* ========================================================= */
/* 🔥 VAKSIN ANTI-NGUMPET & BOM NUKLIR RATA TENGAH SWEETALERT */
/* ========================================================= */
.swal-overlay, .swal2-container, .sweet-alert, #toast-container, .toast-container { z-index: 9999999 !important; }
.swal-title, .swal-text, .swal-footer { text-align: center !important; justify-content: center !important; }
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-content { text-align: center !important; justify-content: center !important; align-items: center !important; }
.swal2-html-container * { text-align: center !important; }
div[class^="swal"] { text-align: center !important; }
.swal2-container, .toast-container { z-index: 2000 !important; }

/* ========================================================= */
/* 💎 KUNCI SAKTI: FIX ZOOM 80% & LAYOUT TERPOTONG */
/* ========================================================= */
@media (min-width: 992px) {
    body { zoom: 1 !important; }
    .modal-dialog { zoom: 1 !important; }
    #main-wrapper { 
        zoom: 0.8 !important; margin-left: 337.5px !important; 
        width: calc(125vw - 337.5px) !important; min-height: 125vh !important;
    }
}

/* ========================================================= */
/* --- MICRO-INTERACTIONS (EFEK MEMBAL PADA KLIK) --- */
/* ========================================================= */
body { cursor: default; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, .form-select { -webkit-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; cursor: pointer !important; }
.btn, button, select, .form-select, .nav-item-box, label.form-label, .bi, a { 
    cursor: pointer !important; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* 🔥 Ini bikin tombol mendelep/membal pas diklik kaya iPhone! */
.btn:active, .nav-item-box:active, .custom-kanban-card:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
}
.table-premium td, .table-premium th { cursor: default !important; }

/* ========================================================= */
/* PALET WARNA ENTERPRISE PREMIUM   */
/* ========================================================= */
:root {
    --primary: #1a56db; 
    --primary-glow: rgba(26, 86, 219, 0.15);
    --dark-bg: #0b1121; 
    --sidebar-bg: #0b1121;
    --card-bg: #ffffff;
    --text-main: #1e293b; 
    --text-muted: #64748b; 
    --bg-body: #f4f7fb; 
    --border-light: rgba(226, 232, 240, 0.8);
}

/* LOADING SKELETON MEWAH */
.skeleton-box { display: inline-block; height: 1.2em; position: relative; overflow: hidden; background-color: #e2e8f0; border-radius: 8px; width: 100%; }
.skeleton-box::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 20%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0)); animation: shimmer 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1); content: ''; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ========================================================= */
/* LAYAR LOGIN & AUTH OVERLAY (SMOOTH FADE) */
/* ========================================================= */
#login-screen {
    position: fixed !important; height: 100vh !important; width: 100vw !important; overflow: hidden !important; margin: 0 !important; top: 0 !important; left: 0 !important; z-index: 10000 !important;
    background: var(--dark-bg); background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, var(--dark-bg) 60%);
    display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease-out, visibility 0.5s;
}
#auth-overlay {
    position: fixed !important; height: 100vh !important; width: 100vw !important; overflow: hidden !important; top: 0 !important; left: 0 !important; z-index: 10005 !important;
    background: rgba(11, 17, 33, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none !important; align-items: center; justify-content: center; animation: pageFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-card, .auth-card { background: #ffffff; border-radius: 24px; width: 100%; margin: 0 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); text-align: center; border: 1px solid rgba(255,255,255,0.1); }
.login-card { max-width: 380px; padding: 45px 35px; }
.auth-card { max-width: 420px; padding: 45px 35px; }
#app-container { display: none; }

/* ========================================================= */
/* SIDEBAR ELEGAN (KACA & SCROLL HALUS) */
/* ========================================================= */
#sidebar { 
    min-width: 270px; max-width: 270px; background: var(--sidebar-bg); height: 100vh !important; position: fixed; top: 0; left: 0; z-index: 1050; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-right: 1px solid rgba(255,255,255,0.03);
    display: flex; flex-direction: column; 
    will-change: transform;
}
.sidebar-header { padding: 30px 25px 20px 25px; background: var(--sidebar-bg); flex-shrink: 0; z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.05); }
.brand-logo { font-size: 1.3rem; font-weight: 800; color: #ffffff; display: flex; align-items: center; letter-spacing: -0.3px; }
.brand-logo i { color: #3b82f6; margin-right: 12px; font-size: 1.6rem; }

.nav-menu { padding: 15px 15px 50px 15px; overflow-y: auto !important; flex-grow: 1; scroll-behavior: smooth; }
.nav-menu::-webkit-scrollbar { width: 4px; }
.nav-menu::-webkit-scrollbar-track { background: transparent; }
.nav-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
.nav-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.nav-menu .text-muted.fw-bold.small, .sidebar-label-group { color: #64748b !important; font-size: 0.65rem !important; font-weight: 800 !important; letter-spacing: 1.5px !important; padding-left: 20px !important; margin-top: 25px !important; margin-bottom: 10px !important; text-transform: uppercase !important; display: block !important; }
.nav-menu > div:first-child { margin-top: 5px !important; }

.nav-item-box { padding: 14px 20px; margin-bottom: 8px; border-radius: 12px; color: #94a3b8 !important; font-weight: 600; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; border: 1px solid transparent; }
.nav-item-box i { font-size: 1.2rem; margin-right: 14px; color: #64748b !important; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Efek mantul di icon */

@media (hover: hover) {
    .nav-item-box:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.04); transform: translateX(6px); }
    .nav-item-box:hover i { color: #ffffff !important; transform: scale(1.15) rotate(-5deg); }
    .stat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08); border-color: rgba(26, 86, 219, 0.2); }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; }
}

.nav-item-box.active { color: #ffffff !important; background: linear-gradient(135deg, var(--primary) 0%, #1e3a8a 100%); box-shadow: 0 8px 20px var(--primary-glow); border-color: rgba(255,255,255,0.1); transform: translateX(8px); }
.nav-item-box.active i { color: #ffffff !important; }

/* MAIN WRAPPER */
#main-wrapper { margin-left: 270px; padding: 0 45px 35px 45px; min-height: 100vh; transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s; }
.section-title { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.5px; color: #0f172a; }

/* ========================================================= */
/* ✨ STICKY HEADER DESKTOP (BLUR MEWAH) */
/* ========================================================= */
.topbar-desktop { position: sticky; top: 0; z-index: 1030; background-color: var(--bg-body); margin-left: -45px; margin-right: -45px; padding-left: 45px; padding-right: 45px; padding-top: 25px; padding-bottom: 15px; margin-bottom: 30px; transition: background-color 0.4s ease; }
@supports (backdrop-filter: blur(10px)) {
    .topbar-desktop { background-color: rgba(244, 247, 251, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

/* KARTU STATISTIK */
.card, .stat-card { background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-light); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, box-shadow; }
.stat-card { padding: 22px; position: relative; overflow: hidden; height: 100%; }
.stat-card span.text-muted { font-size: 0.75rem !important; display: block; padding-right: 40px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card h2 { font-size: 1.6rem !important; padding-right: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 8px !important; font-weight: 800; letter-spacing: -0.5px; }
.stat-icon { position: absolute; top: 22px; right: 22px; font-size: 2rem; opacity: 0.9; }

/* FORM & INPUT PREMIUM */
.form-control, .form-select { border-radius: 10px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid #cbd5e1; background-color: #f8fafc; padding: 10px 14px; }
.form-control:focus, .form-select:focus { background-color: #ffffff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); transform: translateY(-1px); }
.input-group-text { border: 1px solid #cbd5e1; background-color: #f1f5f9; }

/* RFID SCANNER AREA */
.rfid-card { max-width: 440px; margin: 0 auto; background: var(--card-bg); border-radius: 24px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); overflow: hidden; text-align: center; border: 1px solid var(--border-light); }
.scan-zone { padding: 55px 35px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.rfid-icon-wrapper { width: 96px; height: 96px; background: #eff6ff; color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 3rem; animation: pulseSoft 3s infinite; box-shadow: inset 0 0 20px rgba(26, 86, 219, 0.05); }
#rfid-input { border-radius: 14px; padding: 16px; font-size: 1.15rem; text-align: center; font-weight: 700; letter-spacing: 3px; background: #f1f5f9; border: 2px dashed #cbd5e1; transition: all 0.3s; }
#rfid-input:focus { background: #ffffff; transform: scale(1.03); border-color: var(--primary); border-style: solid; box-shadow: 0 10px 20px rgba(26, 86, 219, 0.1); }
.profile-display { padding: 45px 35px; }
.user-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin-bottom: 24px; border: 4px solid #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); transition: transform 0.4s; }
.user-avatar:hover { transform: scale(1.05) rotate(3deg); }
.status-pill { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 100px; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.status-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.status-late { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }

/* TABEL PREMIUM CLEAN */
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: 16px; width: 100%; overflow-x: auto; scroll-behavior: smooth; }
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.table-premium { border-collapse: collapse; width: 100%; }
.table-premium th { font-weight: 800; color: #475569; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; background-color: #f8fafc; padding: 16px 18px; border-bottom: 2px solid #cbd5e1; white-space: nowrap; }
.table-premium td { padding: 15px 18px; font-weight: 600; vertical-align: middle; border-bottom: 1px solid #e2e8f0 !important; color: #334155; transition: background-color 0.2s ease; }
@media (hover: hover) { .table-premium tbody tr:hover td { background-color: #f1f5f9 !important; } }
.table-premium tbody tr:last-child td { border-bottom: none !important; }

.btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%); border: none; }

/* HEADER MOBILE & OVERLAY HALUS */
.mobile-header { display: none; background: var(--sidebar-bg); padding: 14px 22px; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 1040; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(11, 17, 33, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 1045; display: none; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; }

/* MODAL PREMIUM SMOOTH */
.modal-content { border-radius: 24px !important; overflow: hidden; border: none; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.modal-header { background: #f8fafc !important; border-bottom: 1px solid var(--border-light) !important; padding: 20px 25px !important; }
.modal-footer { background: #f8fafc !important; border-top: 1px solid var(--border-light) !important; padding: 20px 25px !important; }

/* ========================================== */
/* 📱 RESPONSIVE TWEAKS (HP & IPAD AMAN)      */
/* ========================================== */
@media (max-width: 991.98px) {
    .mobile-header { display: flex; }
    #sidebar { transform: translateX(-100%); }
    #sidebar.show-mobile { transform: translateX(0); }
    .sidebar-overlay.show { display: block; opacity: 1; }
    
    #main-wrapper { margin-left: 0 !important; padding: 85px 15px 30px 15px !important; width: 100% !important; overflow-x: hidden; }
    .section-title { font-size: 1.5rem; }
    
    .mobile-header-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px; }
    .mobile-header-actions > button, 
    .mobile-header-actions > div.d-flex:not(.gap-1) { width: 100% !important; max-width: 100% !important; }
    .mobile-header-actions .input-group { width: 100% !important; max-width: 100% !important; }

    .stat-card { padding: 18px; }
    .stat-card h2 { font-size: 1.4rem !important; }
    .stat-icon { font-size: 1.6rem; top: 18px; right: 18px; }
    
    .table-premium th, .table-premium td { padding: 12px; font-size: 0.85rem; }
    .table-premium th { box-shadow: inset 0 -2px 0 #94a3b8 !important; border-bottom: none !important; }
    .table-premium td { box-shadow: inset 0 -1px 0 #cbd5e1 !important; border-bottom: none !important; }
    .table-premium tbody tr:last-child td { box-shadow: none !important; }
    
    .rfid-card { margin: 0; border-radius: 20px; }
    .scan-zone { padding: 35px 20px; }
    .rfid-icon-wrapper { width: 80px; height: 80px; font-size: 2.4rem; margin-bottom: 25px;}
    .modal-body { padding: 20px !important; }
}

@media (max-width: 767.98px) {
    .section-title { font-size: 1.15rem !important; }
    .table-premium th, .table-premium td { padding: 0.6rem 0.5rem !important; font-size: 0.75rem !important; white-space: nowrap; }
    
    .mobile-header-actions { gap: 0.5rem !important; }
    .mobile-header-actions .d-flex.gap-1 { flex-wrap: wrap !important; gap: 5px !important; }
    .mobile-header-actions .d-flex.gap-1 > button { 
        flex: 1 1 45% !important; 
        width: auto !important; 
        font-size: 0.75rem !important; 
        padding: 0.4rem 0.5rem !important; 
        justify-content: center; 
    }

    .stat-card { padding: 1rem 0.75rem !important; }
    .stat-card h2 { font-size: 1.15rem !important; }
    .stat-icon { font-size: 1.5rem !important; }
    .modal-body { padding: 1rem !important; }
    .modal-body .row.g-3 > div { margin-top: 0.5rem !important; }
}

/* ========================================================= */
/* 🔒 ROLE-BASED ACCESS CONTROL                              */
/* ========================================================= */
body.role-intern .nav-item-box,
body.role-intern .collapse,
body.role-intern [data-bs-target="#crm-submenu"],
body.role-produksi .nav-item-box,
body.role-produksi .collapse,
body.role-produksi [data-bs-target="#crm-submenu"],
body.role-intern .text-muted.fw-bold.small, 
body.role-produksi .text-muted.fw-bold.small { display: none !important; }
body.role-intern .nav-item-box[onclick*="home"], body.role-intern .nav-item-box[onclick*="invoice-list"], body.role-intern .btn-logout { display: flex !important; }
body.role-produksi .nav-item-box[onclick*="wo-list"], body.role-produksi .btn-logout { display: flex !important; }

/* SELECT WIDTH FIX */
select.form-select, .form-select { padding-right: 35px !important; background-position: right 12px center !important; min-width: 130px !important; text-align: left !important; font-weight: 700 !important; }

/* 🛡️ PENGAMAN MODAL BOOTSTRAP ANTI NYANGKUT */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }

/* ========================================================= */
/* ✨ FLOATING CHATBOT UI ELASTIS                            */
/* ========================================================= */
#chatbot-fab { 
    position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; z-index: 1040; 
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efek mantul kaya jelly */
    background: linear-gradient(135deg, #1a56db 0%, #1e3a8a 100%); border: none;
}
#chatbot-fab:hover { transform: scale(1.15) translateY(-5px); box-shadow: 0 20px 30px rgba(26, 86, 219, 0.4) !important; }

#chatbot-panel { 
    position: fixed; bottom: 110px; right: 30px; width: 340px; height: 480px; background: #fff; z-index: 1040; border: 1px solid rgba(0,0,0,0.05); 
    animation: chatSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity;
    border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
#chatbot-body::-webkit-scrollbar { width: 5px; }
#chatbot-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.chat-message { display: flex; flex-direction: column; }
.chat-message.user { align-items: flex-end; }
.chat-message.user > div { background: linear-gradient(135deg, #1a56db 0%, #3b82f6 100%); color: white; border: none !important; border-radius: 15px 0 15px 15px !important; box-shadow: 0 6px 15px rgba(26, 86, 219, 0.25) !important; }

@media (max-width: 767.98px) {
    #chatbot-fab { bottom: 20px; right: 20px; width: 55px; height: 55px; }
    #chatbot-panel { bottom: 90px; right: 15px; width: calc(100vw - 30px); height: 60vh; }
}

/* ========================================================= */
/* 🗓️ TEMA KALENDER PERSIS GAMBAR (CARD KANBAN STYLE)        */
/* ========================================================= */
:root { --fc-border-color: #e5e7eb; --fc-today-bg-color: transparent; }
.fc { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.fc-scrollgrid { border-radius: 12px !important; overflow: hidden; border: 1px solid #e5e7eb !important; background: #fff;}
.fc-col-header-cell { padding: 15px 0 !important; background-color: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; }
.fc-col-header-cell-cushion { color: #111827 !important; font-weight: 800 !important; font-size: 0.9rem; text-transform: capitalize !important; text-decoration: none !important; }
.fc-daygrid-day-number { color: #111827 !important; font-weight: 800 !important; font-size: 0.9rem; padding: 10px 12px !important; text-decoration: none !important; float: left; width: 100%; text-align: left;}
.fc-daygrid-event { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; }
.fc-daygrid-event-harness { margin: 0 8px 8px 8px !important; }
.fc-event:hover { background: transparent !important; }

.custom-kanban-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; width: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
.custom-kanban-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 20px -3px rgba(0,0,0,0.1); border-color: #cbd5e1; }
.kanban-title-pill { background: #cbd5e1; color: #475569; font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; width: fit-content; max-width: 100%; }

@media (max-width: 767.98px) {
    .fc-header-toolbar { flex-direction: column !important; gap: 12px !important; }
    .fc-toolbar-chunk { display: flex; justify-content: center; width: 100%; }
    .fc-toolbar-title { font-size: 1.1rem !important; }
    .fc-view-harness { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 10px; border-radius: 8px; }
    .fc-scrollgrid { min-width: 850px !important; }
    #upcoming-contents { max-height: 400px !important; }
}

/* ========================================================= */
/* 🔥 DESAIN GRAFIK KPI MARKETING CONTENT PLANNER            */
/* ========================================================= */
.kpi-brand-card { background: #ffffff; border-radius: 16px; padding: 18px; border: 1px solid #e2e8f0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.kpi-brand-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); border-color: #cbd5e1; }
.kpi-brand-title { font-weight: 900; font-size: 0.8rem; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; }
.kpi-bar-container { margin-bottom: 12px; cursor: pointer; transition: transform 0.2s ease; }
.kpi-bar-container:hover { transform: scale(1.02); }
.kpi-bar-container:last-child { margin-bottom: 0; }
.kpi-label { display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 800; color: #475569; margin-bottom: 5px; text-transform: uppercase; }
.kpi-track { background: #f1f5f9; border-radius: 8px; height: 12px; width: 100%; overflow: hidden; position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.kpi-fill { height: 100%; border-radius: 8px; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;}
.kpi-fill-tiktok { background: linear-gradient(90deg, #ff0050 0%, #00f2fe 100%); }
.kpi-fill-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.kpi-text-inside { font-size: 0.55rem; color: white; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.table-danger-light { background-color: rgba(220, 38, 38, 0.05) !important; border-left: 4px solid #dc2626; }
.btn-danger { background-color: #dc2626 !important; color: white !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-danger:active { transform: scale(0.9) !important; } /* Efek membal maut */

/* Container Utama Card */
#manajemen-user-section { background: #ffffff; border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.4s ease; }
#cto-card-header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); padding: 22px 30px; border-bottom: 1px solid #334155; display: flex; align-items: center; gap: 15px; }
#cto-card-header h5 { color: #ffffff; font-weight: 800; margin: 0; letter-spacing: -0.5px; }

/* Styling Tabel Premium */
.cto-table-wrapper { padding: 15px; max-height: 400px; overflow-y: auto; scroll-behavior: smooth; }
.cto-user-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.cto-user-table thead th { background-color: #f8fafc; color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 12px 20px; border: none; }
.cto-user-table tbody tr { background-color: #ffffff; border-radius: 12px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.cto-user-table tbody tr:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 20px rgba(0,0,0,0.06); background-color: #f1f5f9; z-index: 2; position: relative; }
.cto-user-table td { padding: 18px 20px; border: none; color: #1e293b; }

/* Badges Role */
.badge-premium { padding: 6px 12px; border-radius: 50px; font-weight: 700; font-size: 0.65rem; letter-spacing: 0.5px; }
.bg-cto { background-color: #0f172a; color: #ffffff; border: 1px solid #334155; }
.bg-admin-prem { background-color: #dbeafe; color: #1e40af; }
.bg-intern-prem { background-color: #f1f5f9; color: #64748b; }

/* Gembok Action Button */
.btn-lock-action { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: none; }
.lock-inactive { background-color: #f1f5f9; color: #94a3b8; }
.lock-inactive:hover { background-color: #e2e8f0; color: #64748b; transform: rotate(-10deg); }
.lock-active { background-color: #fee2e2; color: #dc2626; transform: scale(1.1); box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2); }
.lock-active:hover { transform: scale(1.2) rotate(10deg); }
.tr-selected { background-color: #fef2f2 !important; border-left: 4px solid #dc2626; }

/* Area Input Bawah */
.cto-action-area { padding: 30px; background-color: #f8fafc; border-top: 1px solid #e2e8f0; }
.input-prem { border-radius: 14px; padding: 14px 20px; border: 2px solid #e2e8f0; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 600; }
.input-prem:focus { border-color: #dc2626; box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.1); transform: translateY(-2px); }
.input-target-active { border-color: #f87171 !important; background-color: #fff1f1; }
.btn-hajar { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; font-weight: 700; border-radius: 14px; padding: 14px; border: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-hajar:hover { box-shadow: 0 10px 25px rgba(185, 28, 28, 0.35); transform: translateY(-4px); }
.btn-hajar:active { transform: scale(0.95); }

/* ========================================================= */
/* 🌒 EFEK TRANSISI HALUS SAAT GANTI TEMA (DARK MODE) */
/* ========================================================= */
body.dark-theme, 
body.dark-theme .modal-content, 
body.dark-theme .card, 
body.dark-theme .bg-white, 
body.dark-theme .bg-light, 
body.dark-theme .form-control, 
body.dark-theme .form-select { 
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s ease, border-color 0.6s ease !important; 
    will-change: background-color, color;
}

body.dark-theme { background-color: #0f172a !important; color: #f8fafc !important; }
body.dark-theme .bg-white, body.dark-theme .bg-light, body.dark-theme .modal-content, body.dark-theme .card, body.dark-theme .modal-header, body.dark-theme .modal-footer, body.dark-theme .dropdown-menu, body.dark-theme .custom-kanban-card { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
body.dark-theme .text-dark, body.dark-theme .text-muted, body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 { color: #e2e8f0 !important; }
body.dark-theme .form-control, body.dark-theme .form-select { background-color: #0f172a !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-theme .form-control:focus, body.dark-theme .form-select:focus { background-color: #1e293b !important; border-color: #3b82f6 !important; color: #fff !important; }
body.dark-theme .fc .fc-toolbar-title { color: #f8fafc !important; }
body.dark-theme .fc-theme-standard td, body.dark-theme .fc-theme-standard th { border-color: #334155 !important; }
body.dark-theme .fc-day-today { background-color: rgba(59, 130, 246, 0.15) !important; }
body.dark-theme .fc .fc-button-primary { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }
body.dark-theme .fc .fc-button-primary:not(:disabled):active, body.dark-theme .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: #2563eb !important; }