/*!
 * Skyline Admin Theme Overlay
 * Mengadopsi design system dari Skyline Admin.html di atas markup SB Admin 2 (Bootstrap 4)
 * tanpa mengubah struktur HTML view, susunan konten, maupun alur MVC.
 */

/* ============ Design Tokens (Skyline) ============ */
:root {
    --brand: #2563eb;
    --brand-2: #1d4ed8;
    --brand-soft: #dbeafe;
    --accent: #06b6d4;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #fafbff;
    --border: #e5e7eb;
    --text: #0f172a;
    --text-muted: #64748b;
    --sidebar-bg: rgba(255, 255, 255, 0.88);
    --sidebar-border: rgba(229, 231, 235, 0.6);
    --card-bg: rgba(255, 255, 255, 0.88);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --sky-success: #10b981;
    --sky-danger: #ef4444;
    --sky-warning: #f59e0b;
    --sky-info: #06b6d4;
}

/* Dark mode (mengikuti [data-bs-theme="dark"] pada Skyline Admin.html) */
html[data-theme="dark"] {
    --brand: #60a5fa;
    --brand-2: #3b82f6;
    --brand-soft: #1e3a8a;
    --accent: #22d3ee;
    --bg: #0b1220;
    --surface: #0f172a;
    --surface-2: #111c33;
    --border: #1f2a44;
    --text: #e5e7eb;
    --text-muted: #94a3b8;
    --sidebar-bg: rgba(15, 23, 42, 0.88);
    --sidebar-border: rgba(31, 42, 68, 0.6);
    --card-bg: rgba(17, 28, 51, 0.88);
}

/* Remap token dashboard (admin/index.php) ke palet Skyline.
   html:root lebih spesifik dari :root pada <style> inline view. */
html:root {
    --dash-primary: #2563eb;
    --dash-primary-light: #60a5fa;
    --dash-success: #10b981;
    --dash-success-dark: #059669;
    --dash-info: #06b6d4;
    --dash-warning: #f59e0b;
    --dash-danger: #ef4444;
    --dash-bg: transparent;
    --dash-card: rgba(255, 255, 255, 0.88);
    --dash-text: #0f172a;
    --dash-text-muted: #64748b;
    --dash-border: #e5e7eb;
    --dash-shadow: none;
    --dash-shadow-hover: none;
    --dash-radius: 12px;
    --dash-radius-sm: 8px;
}

html[data-theme="dark"]:root {
    --dash-primary: #60a5fa;
    --dash-primary-light: #93c5fd;
    --dash-card: rgba(17, 28, 51, 0.88);
    --dash-text: #e5e7eb;
    --dash-text-muted: #94a3b8;
    --dash-border: #1f2a44;
}

/* ============ Base ============ */
html,
body {
    font-family: 'Roboto', system-ui, sans-serif !important;
    background-color: var(--bg) !important;
    color: var(--text);
}

body#page-top {
    overflow-x: clip;
}

/* SB Admin 2 memberi overflow-x:hidden pada #content-wrapper yang menjadikannya
   scroll container baru dan mematikan position:sticky pada topbar.
   overflow-x:clip mencegah overflow horizontal TANPA membuat scroll container. */
#content-wrapper {
    overflow-x: clip !important;
}

/* Latar radial lembut khas Skyline — langsung pada background body
   (bukan ::before ber-z-index, yang memaksa #wrapper punya z-index sendiri
   dan membuat stacking context yang mengunci modal di bawah .modal-backdrop) */
body#page-top {
    background:
        radial-gradient(1200px 600px at -10% -20%, rgba(37, 99, 235, .10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(6, 182, 212, .10), transparent 60%),
        radial-gradient(900px 500px at 50% 120%, rgba(37, 99, 235, .08), transparent 60%),
        var(--bg) !important;
    background-attachment: fixed !important;
}

html[data-theme="dark"] body#page-top {
    background:
        radial-gradient(1200px 600px at -10% -20%, rgba(96, 165, 250, .14), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(900px 500px at 50% 120%, rgba(96, 165, 250, .08), transparent 60%),
        var(--bg) !important;
    background-attachment: fixed !important;
}

#wrapper,
#content-wrapper {
    background: transparent !important;
}

code,
pre {
    font-family: 'JetBrains Mono', monospace;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============ Sidebar ============ */
/* Sidebar tetap terlihat (sticky setinggi viewport) dengan scroll internal
   terpisah dari konten. Sticky dipakai (bukan fixed) agar lebar sidebar saat
   di-toggle tetap dihitung oleh flex layout #wrapper tanpa margin manual. */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Animasi buka/tutup saat hamburger ditekan — konten mengikuti otomatis
       karena lebar dianimasikan di dalam flex layout #wrapper */
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
    will-change: width;
}

/* Label menu memudar halus mengikuti perubahan lebar */
.sidebar .nav-item .nav-link span,
.sidebar .collapse-item span,
.sidebar .sidebar-brand-text {
    transition: font-size .3s ease, opacity .2s ease;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar.bg-gradient-primary {
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar .sidebar-brand {
    height: auto;
    padding: 18px 14px;
    border-bottom: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-dark .sidebar-brand {
    color: var(--text);
}

.sidebar .sidebar-brand-icon i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    transform: none !important;
}

.sidebar .sidebar-brand .sidebar-brand-text {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.sidebar hr.sidebar-divider {
    border-top: 1px solid var(--border);
    margin: 8px 12px;
}

.sidebar-dark .sidebar-heading {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 14px 14px 6px;
}

.sidebar .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 8px;
    padding: 10px 12px !important;
    width: auto;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    transition: all .18s;
}

.sidebar-dark .nav-item .nav-link {
    color: var(--text-muted);
}

.sidebar-dark .nav-item .nav-link i {
    color: var(--text-muted);
    font-size: .85rem;
    margin-right: 0;
    transition: color .18s;
}

.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:focus,
.sidebar-dark .nav-item .nav-link:active {
    background: var(--brand-soft);
    color: var(--brand);
}

.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item .nav-link:active i {
    color: var(--brand);
}

.sidebar-dark .nav-item.active .nav-link {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.sidebar-dark .nav-item.active .nav-link i {
    color: var(--brand);
}

.sidebar-dark #sidebarToggle {
    background-color: var(--surface-2);
    border: 1px solid var(--border) !important;
}

.sidebar-dark #sidebarToggle::after {
    color: var(--text-muted);
}

.sidebar-dark #sidebarToggle:hover {
    background-color: var(--brand-soft);
}

/* ============ Sidebar dropdown (menu grup collapsible) ============ */
/* Caret panah pada link grup — nav-link kita flex, jadi pakai margin auto
   (float bawaan SB Admin 2 tidak berlaku di flex) */
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    float: none;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform .18s;
}

.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
    color: var(--text-muted);
}

.sidebar .nav-item .nav-link[data-toggle="collapse"]:hover::after {
    color: var(--brand);
}

/* Panel sub-menu: garis penanda kiri ala tree, tanpa kartu putih SB Admin 2 */
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
    background: transparent;
    box-shadow: none;
    margin: 0 8px 6px 26px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid var(--border);
    min-width: 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
    transition: all .18s;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item i,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item i {
    color: var(--text-muted);
    font-size: .8rem;
    transition: color .18s;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover i {
    color: var(--brand);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    background-color: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active i {
    color: var(--brand);
}

/* ============ Sidebar mode mini (toggled via hamburger) ============ */
/* SB Admin 2 memberi overflow:visible pada .sidebar.toggled yang mematikan
   scroll internal — kembalikan agar sidebar mini tetap fix dan bisa
   di-scroll sendiri tanpa menyentuh scroll konten. */
.sidebar.toggled {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Selaraskan tampilan collapsed SB Admin 2 dengan gaya Skyline:
   ikon di tengah + label kecil di bawahnya. */
.sidebar.toggled .nav-item .nav-link {
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    width: auto;
    margin: 2px 8px;
    padding: 10px 6px !important;
}

.sidebar.toggled .nav-item .nav-link span {
    font-size: .62rem;
    line-height: 1.2;
}

/* Cegah SB Admin 2 memperbesar ikon brand "AK" saat mini */
.sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
    font-size: 14px;
}

.sidebar.toggled .sidebar-heading {
    padding: 14px 4px 6px;
    letter-spacing: 1px;
}

/* Mode mini: flyout absolut SB Admin 2 terpotong oleh scroll internal sidebar,
   jadi dropdown dibuka inline di dalam sidebar mini */
.sidebar.toggled .nav-item .collapse,
.sidebar.toggled .nav-item .collapsing {
    position: static !important;
    left: auto;
    top: auto;
    animation: none;
}

.sidebar.toggled .nav-item .collapse .collapse-inner {
    box-shadow: none;
    margin: 0 6px 6px;
    padding: 2px;
    border-left: none;
}

/* Item sub-menu mini: ikon di atas, label kecil di bawah (selaras nav-link mini) */
.sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item {
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
}

.sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item span {
    font-size: .62rem;
    line-height: 1.2;
}

/* ============ Topbar ============ */
/* Sticky di atas konten seperti .app-topbar Skyline (fix: topbar tertimpa/berada di bawah konten) */
.topbar,
.topbar.bg-white {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: transparent !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
}

/* Blur topbar ditaruh di ::before (bukan elemen topbar itu sendiri):
   ancestor ber-backdrop-filter membuat backdrop root baru yang mematikan
   efek blur pada dropdown di dalamnya (search bar & profil) */
.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sidebar-bg);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

/* Dropdown di topbar (profil, notifikasi) ikut kadar blur topbar */
.topbar .dropdown-menu {
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.topbar .nav-item .nav-link {
    color: var(--text-muted);
}

.topbar .nav-item .nav-link:hover {
    color: var(--brand);
}

.topbar .topbar-divider {
    border-right: 1px solid var(--border);
}

.topbar .img-profile {
    border: 2px solid var(--border);
}

.topbar #sidebarToggleTop {
    color: var(--text-muted);
}

/* Ikon hamburger berputar halus mengikuti status sidebar */
#sidebarToggleTop i {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

body.sidebar-toggled #sidebarToggleTop i {
    transform: rotate(90deg);
}

.topbar #sidebarToggleTop:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
}

/* Tombol ikon topbar ala Skyline (.icon-btn) — dipakai tombol dark/light mode */
.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    cursor: pointer;
    transition: transform .18s, background .18s;
    position: relative;
}

.icon-btn:hover {
    transform: translateY(-2px);
    background: var(--brand-soft);
    color: var(--brand);
}

.icon-btn:focus {
    outline: none;
}

/* Badge angka notifikasi menempel di pojok kanan-atas .icon-btn (lonceng topbar) */
.icon-btn .icon-btn-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sky-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
}

/* ============ Dropdown Notifikasi (Skyline) ============ */
.notif-dropdown {
    min-width: 380px;
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

.notif-dropdown .notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.notif-dropdown .notif-header .notif-title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
}

.notif-dropdown .notif-header .notif-title i {
    color: var(--brand);
}

.notif-dropdown .notif-header small {
    color: var(--text-muted);
    font-size: 11.5px;
}

.notif-dropdown .notif-list {
    max-height: 380px;
    overflow-y: auto;
}

/* Baris item notifikasi: garis pemisah pakai token border (ikut dark mode) */
.notif-dropdown .notif-item {
    border-bottom: 1px solid var(--border);
}

.notif-dropdown .notif-item:last-child {
    border-bottom: none;
}

/* Wadah ikon bulat kecil di tiap item notifikasi */
.notif-dropdown .notif-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-dropdown .notif-footer {
    padding: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.notif-dropdown .notif-footer:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

/* ============ Topbar Search (Skyline) ============ */
.topbar-search {
    flex: 1;
    max-width: 460px;
    position: relative;
}

.topbar-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.topbar-search input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 14px 9px 40px;
    width: 100%;
    color: var(--text);
    font-size: 14px;
    transition: border .2s;
}

.topbar-search input::placeholder {
    color: var(--text-muted);
}

.topbar-search input:focus {
    outline: none;
    border-color: var(--brand);
}

/* Dropdown hasil pencarian menu */
.topbar-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1050;
    padding: 6px;
}

.topbar-search-results.show {
    display: block;
}

.topbar-search-results a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 13.5px;
    text-decoration: none;
}

.topbar-search-results a i {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.topbar-search-results a:hover,
.topbar-search-results a.active {
    background: var(--brand-soft);
    color: var(--brand);
}

.topbar-search-results a:hover i,
.topbar-search-results a.active i {
    color: var(--brand);
}

.topbar-search-results .topbar-search-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* ============ Cards ============ */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header {
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
    font-weight: 700;
}

.card-footer {
    background-color: var(--surface-2);
    border-top: 1px solid var(--border);
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}

.card.border-left-primary {
    border-left: .25rem solid var(--brand) !important;
}

.card.border-left-success {
    border-left: .25rem solid var(--sky-success) !important;
}

.card.border-left-info {
    border-left: .25rem solid var(--sky-info) !important;
}

.card.border-left-warning {
    border-left: .25rem solid var(--sky-warning) !important;
}

.card.border-left-danger {
    border-left: .25rem solid var(--sky-danger) !important;
}

/* Form Penjualan (kasir): .form-container tampil sebagai glass card Skyline,
   selaras dengan .card di halaman lain */
.form-container {
    background: var(--card-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 8px;
}

/* ============ Buttons ============ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: transform .15s, background .18s, border-color .18s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-2);
    border-color: var(--brand-2);
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-success {
    background-color: var(--sky-success);
    border-color: var(--sky-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: #059669;
    border-color: #059669;
}

.btn-outline-success {
    color: var(--sky-success);
    border-color: var(--sky-success);
}

.btn-outline-success:hover {
    background-color: var(--sky-success);
    border-color: var(--sky-success);
}

.btn-danger {
    background-color: var(--sky-danger);
    border-color: var(--sky-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: #dc2626;
    border-color: #dc2626;
}

.btn-outline-danger {
    color: var(--sky-danger);
    border-color: var(--sky-danger);
}

.btn-outline-danger:hover {
    background-color: var(--sky-danger);
    border-color: var(--sky-danger);
}

.btn-warning {
    background-color: var(--sky-warning);
    border-color: var(--sky-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: #d97706;
    border-color: #d97706;
}

.btn-outline-warning {
    color: var(--sky-warning);
    border-color: var(--sky-warning);
}

.btn-outline-warning:hover {
    background-color: var(--sky-warning);
    border-color: var(--sky-warning);
}

.btn-info {
    background-color: var(--sky-info);
    border-color: var(--sky-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: #0891b2;
    border-color: #0891b2;
}

.btn-secondary {
    background-color: #64748b;
    border-color: #64748b;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #475569;
    border-color: #475569;
}

.btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: #64748b;
    border-color: #64748b;
    color: #fff;
}

.btn-outline-info {
    color: var(--sky-info);
    border-color: var(--sky-info);
}

.btn-outline-info:hover {
    background-color: var(--sky-info);
    border-color: var(--sky-info);
}

.btn-light {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--brand-soft);
    border-color: var(--border);
    color: var(--brand);
}

.btn-link {
    color: var(--brand);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}

/* ============ Forms ============ */
.form-control,
.custom-select,
select.form-control {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--surface);
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}

/* Input disabled/readonly ikut palet tema (bawaan Bootstrap abu terang,
   mencolok di dark mode) */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--surface-2);
    color: var(--text-muted);
    opacity: .7;
}

label,
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.input-group-text {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

/* ============ Tables (gaya .data-table Skyline) ============ */
.table {
    color: var(--text);
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border) !important;
    border-top: none;
    vertical-align: middle;
}

/* Sudut membulat pada header tabel seperti .data-table Skyline */
.table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

.table thead.thead-light th {
    background-color: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

.table td,
.table th {
    border-top: none;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody td {
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--text);
}

.table-sm tbody td,
.table-sm thead th {
    padding: 8px 10px;
}

/* table-bordered dinetralkan agar seperti .data-table Skyline:
   tanpa garis vertikal/luar, hanya garis bawah antar baris */
.table-bordered {
    border: none;
}

.table-bordered td,
.table-bordered th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* !important: kalahkan table.table-bordered.dataTable td { border-bottom-width:0 } */
    border-bottom: 1px solid var(--border) !important;
}

/* Hover baris berlaku untuk semua tabel data, seperti .data-table Skyline */
.table tbody tr {
    transition: background .15s;
}

.table tbody tr:hover {
    background-color: var(--surface-2);
    color: var(--text);
}

.table-hover tbody tr:hover {
    background-color: var(--surface-2);
    color: var(--text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-2);
}

/* Warna baris kontekstual Bootstrap agar serasi di light/dark */
.table .table-active,
.table .table-light {
    background-color: var(--surface-2);
}

/* ============ Badges (bergaya chip Skyline) ============ */
.badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge-primary {
    background: var(--brand-soft);
    color: var(--brand);
}

.badge-success {
    background: rgba(16, 185, 129, .15);
    color: #059669;
}

.badge-danger {
    background: rgba(239, 68, 68, .15);
    color: #dc2626;
}

.badge-warning {
    background: rgba(245, 158, 11, .15);
    color: #b45309;
}

.badge-info {
    background: rgba(6, 182, 212, .15);
    color: #0e7490;
}

.badge-secondary {
    background: rgba(100, 116, 139, .15);
    color: #64748b;
}

/* ============ Alerts ============ */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.alert-success {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .35);
    color: #047857;
}

.alert-danger {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: #b91c1c;
}

.alert-warning {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .35);
    color: #92400e;
}

.alert-info {
    background: rgba(6, 182, 212, .12);
    border-color: rgba(6, 182, 212, .35);
    color: #155e75;
}

/* ============ Dropdowns ============ */
.dropdown-menu {
    background: var(--card-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.dropdown-item {
    color: var(--text);
    font-size: 13.5px;
    transition: background .15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-soft);
    color: var(--brand);
}

.dropdown-divider {
    border-top: 1px solid var(--border);
}

.dropdown .dropdown-menu .dropdown-header {
    color: var(--text-muted);
}

/* ============ Modals ============ */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.modal-title {
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid var(--border);
}

/* ============ Pagination (termasuk DataTables) ============ */
.page-link {
    color: var(--brand);
    border: 1px solid var(--border);
    background-color: var(--surface);
}

.page-link:hover {
    color: var(--brand-2);
    background-color: var(--brand-soft);
    border-color: var(--border);
}

.page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--surface-2);
    border-color: var(--border);
}

/* ============ Footer ============ */
footer.sticky-footer {
    background: transparent !important;
    border-top: 1px solid var(--border);
}

footer.sticky-footer .copyright {
    color: var(--text-muted);
    font-size: 12px;
}

/* ============ Scroll to top ============ */
.scroll-to-top {
    background: var(--brand);
    border-radius: 10px;
}

.scroll-to-top:hover {
    background: var(--brand-2);
}

/* ============ Teks utilitas SB Admin 2 → palet Skyline ============ */
.text-primary {
    color: var(--brand) !important;
}

.text-success {
    color: var(--sky-success) !important;
}

.text-danger {
    color: var(--sky-danger) !important;
}

.text-warning {
    color: var(--sky-warning) !important;
}

.text-info {
    color: var(--sky-info) !important;
}

.text-gray-800,
.text-gray-900 {
    color: var(--text) !important;
}

.text-gray-600,
.text-gray-700 {
    color: var(--text-muted) !important;
}

.text-gray-300,
.text-gray-400,
.text-gray-500 {
    color: #94a3b8 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
}

/* Heading halaman ala Skyline */
.h3.mb-4.text-gray-800,
h1.h3.mb-4 {
    font-size: 22px;
    font-weight: 700;
}

/* ============ Halaman Auth (login/registrasi/blocked) ============ */
html:has(> body.bg-gradient-primary) {
    background: linear-gradient(135deg, #1e3a8a, #0891b2) fixed;
}

body.bg-gradient-primary {
    background: linear-gradient(135deg, #1e3a8a, #0891b2) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    font-family: 'Roboto', system-ui, sans-serif !important;
}

body.bg-gradient-primary .card {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text);
}

body.bg-gradient-primary .btn-user {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .75rem 1rem;
}

body.bg-gradient-primary .form-control-user {
    border-radius: var(--radius-sm);
    font-size: .9rem;
    padding: 1.2rem 1rem;
}

/* ============ DataTables kecil-kecil ============ */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-muted);
    font-size: 13px;
}

/* ============ Progress ============ */
.progress {
    background: var(--surface-2);
    border-radius: 20px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: 20px;
}

/* ============ Bootstrap bg utilities pada elemen non-sidebar ============ */
.bg-white {
    background-color: var(--surface) !important;
}

.bg-light {
    background-color: var(--surface-2) !important;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--border) !important;
}

/* ============ Penyempurnaan Dark Mode ============ */
.text-black,
.text-dark {
    color: var(--text) !important;
}

.close {
    color: var(--text);
    text-shadow: none;
}

.close:hover {
    color: var(--text);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: .8;
}

select.form-control option,
.custom-select option {
    background-color: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .alert-success {
    color: #6ee7b7;
}

html[data-theme="dark"] .alert-danger {
    color: #fca5a5;
}

html[data-theme="dark"] .alert-warning {
    color: #fcd34d;
}

html[data-theme="dark"] .alert-info {
    color: #67e8f9;
}

html[data-theme="dark"] .badge-success {
    color: #34d399;
}

html[data-theme="dark"] .badge-danger {
    color: #f87171;
}

html[data-theme="dark"] .badge-warning {
    color: #fbbf24;
}

html[data-theme="dark"] .badge-info {
    color: #22d3ee;
}

html[data-theme="dark"] .badge-primary {
    color: #93c5fd;
}

/* SweetAlert2 mengikuti tema */
html[data-theme="dark"] .swal2-popup {
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-content {
    color: var(--text);
}

/* Login/registrasi versi dark */
html[data-theme="dark"] body.bg-gradient-primary .card {
    background: rgba(15, 23, 42, .85);
    color: var(--text);
}

/* Ikon toggle tema */
#skyThemeToggle .fa-sun {
    display: none;
}

html[data-theme="dark"] #skyThemeToggle .fa-sun {
    display: inline-block;
}

html[data-theme="dark"] #skyThemeToggle .fa-moon {
    display: none;
}

/* ============ Sidebar drawer mobile (< 768px) ============ */
/* Di layar kecil SB Admin 2 hanya menyediakan mode mini (6.5rem) atau
   tersembunyi (0) — tidak pernah lebar penuh. Di sini sidebar diubah jadi
   drawer off-canvas: fixed selebar 14rem, geser masuk/keluar via transform
   (bukan width) agar animasi mulus dan isi tidak meremuk. */

/* Backdrop hanya dipakai mode drawer — sembunyikan di semua ukuran lain */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 14rem !important;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    }

    /* .toggled = drawer tertutup; tanpa .toggled = drawer terbuka.
       body.drawer-ready ditambahkan JS (footer) agar drawer tidak sempat
       "berkedip" terbuka sebelum script menambahkan .toggled saat muat awal. */
    body.drawer-ready .sidebar:not(.toggled) {
        transform: translateX(0);
    }

    .sidebar.toggled {
        /* timpa width:0 SB Admin 2 supaya animasinya geser, bukan menyempit */
        width: 14rem !important;
        transform: translateX(-100%);
    }

    /* Backdrop gelap di belakang drawer; klik untuk menutup */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background: rgba(15, 23, 42, .45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.drawer-ready:not(.sidebar-toggled) .sidebar-backdrop {
        display: block;
    }

    /* Drawer terbuka memakai layout lebar penuh (replika aturan >=768px
       SB Admin 2 yang tidak berlaku di mobile) — bukan mode mini ikon */
    .sidebar .sidebar-brand .sidebar-brand-text {
        display: inline;
    }

    .sidebar .sidebar-heading {
        text-align: left;
    }

    .sidebar .nav-item .nav-link span {
        font-size: 13.5px;
        display: inline;
    }

    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        width: 1rem;
        text-align: center;
        vertical-align: 0;
        border: 0;
        font-weight: 900;
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
    }

    .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105';
    }

    /* Sub-menu dibuka inline (accordion), bukan flyout absolut yang terpotong
       oleh scroll internal sidebar */
    .sidebar .nav-item .collapse {
        position: relative;
        left: 0;
        top: 0;
        z-index: 1;
        animation: none;
    }

    .sidebar .nav-item .collapsing {
        display: block;
        position: relative;
        left: 0;
        top: 0;
        transition: height .15s ease;
    }

    /* Ikon hamburger: di mobile rotasi mengikuti drawer TERBUKA (kebalikan
       desktop, karena state default mobile adalah .sidebar-toggled) */
    body.sidebar-toggled #sidebarToggleTop i {
        transform: none;
    }

    body.drawer-ready:not(.sidebar-toggled) #sidebarToggleTop i {
        transform: rotate(90deg);
    }
}