/* Font Plus Jakarta Sans di-link + preload langsung di header (anti-geser saat reload). */

/* ==========================================
   DESIGN SYSTEM - LAYOUT & DESIGN TOKENS
   ========================================== */

:root {
    /* One typeface across the application for a consistent NOCTRA voice. */
    --font-sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif;
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-primary: #1E7CFF;
    --bs-primary-rgb: 30, 124, 255;
    --bs-success: #34D95A;
    --bs-success-rgb: 52, 217, 90;

    /* NOCTRA color system */
    --ui-bg: #F8FAFC;
    --ui-card-bg: #FFFFFF;
    --ui-border: #D9E4F7;
    --ui-heading: #081B4B;
    --ui-text: #475569;
    --ui-primary: #1E7CFF;
    --ui-primary-hover: #1268DC;
    --ui-primary-light: rgba(30, 124, 255, 0.10);
    --ui-primary-gradient: linear-gradient(135deg, #1E7CFF 0%, #2BB7F5 100%);
    --ui-success: #34D95A;
    --ui-success-gradient: linear-gradient(135deg, #34D95A 0%, #1CCF8A 100%);
    --noctra-navy: #071A42;
    --noctra-outline: #0F2D6D;
    --noctra-star: #56F58A;

    /* Sidebar Dark Theme Tokens */
    --ui-sidebar-bg: #071A42;
    --ui-sidebar-border: #0F2D6D;
    --ui-sidebar-text: #94A3B8;
    --ui-sidebar-hover: #F8FAFC;
    --ui-sidebar-active: #FFFFFF;

    /* Spacing System (8px Grid Rules) */
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;

    /* Radii & Shadows */
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-pill: 9999px;

    --shadow-soft: 0 4px 12px -2px rgba(15, 45, 109, 0.08), 0 2px 4px -2px rgba(15, 45, 109, 0.04);
    --shadow-hover: 0 12px 24px -4px rgba(15, 45, 109, 0.15), 0 4px 8px -4px rgba(15, 45, 109, 0.06);
    --shadow-sticky: 0 1px 3px 0 rgba(15, 45, 109, 0.2);

    /* Dimensions */
    --sb-topnav-height: 64px;
    --sb-sidenav-width: 280px;

    /* Transitions */
    --transition-200: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode Overrides */
[data-bs-theme="dark"], body.dark-mode {
    --ui-bg: #061535;
    --ui-card-bg: #0B2152;
    --ui-border: #1A438C;
    --ui-heading: #F9FAFB;
    --ui-text: #9CA3AF;
    --ui-primary: #2BB7F5;
    --ui-primary-hover: #68C9F7;
    --ui-primary-light: rgba(43, 183, 245, 0.16);
}

/* Global Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Scrollbar selalu ada sejak cat pertama — cegah geser saat konten melebihi viewport. */
html {
    overflow-y: scroll;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    background: linear-gradient(135deg, #F7FAFF 0%, var(--ui-bg) 48%, #F2FCF6 100%);
    color: var(--ui-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Ruang ikon FA sejak cat pertama (cagah geser bila JS SVG pernah dipakai). */
.fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands, .fa {
    width: 1.25em;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ui-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: var(--space-16);
}

h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; }
h2 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); }
h3 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }

small, .small, .form-text {
    font-size: clamp(0.725rem, 0.68rem + 0.18vw, 0.8125rem);
}

/* Main Layout Grid & Shell */
#layoutSidenav {
    display: flex;
    min-height: calc(100vh - var(--sb-topnav-height));
}

#layoutSidenav_content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#layoutSidenav_content main {
    padding: var(--space-24);
    flex-grow: 1;
}

.container-fluid {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--space-8);
}

/* Sticky Navbar */
.sb-topnav {
    height: var(--sb-topnav-height);
    background: linear-gradient(100deg, rgba(7, 26, 66, 0.98), rgba(15, 45, 109, 0.96)) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1039;
    padding-left: 0;
    padding-right: var(--space-16);
    box-shadow: var(--shadow-sticky);
}

.sb-topnav .navbar-brand {
    width: var(--sb-sidenav-width);
    font-weight: 800;
    font-size: 1.1rem;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-24);
}

.sb-topnav .navbar-brand i {
    color: var(--ui-primary);
}

/* Desktop Sidebar (280px) */
#layoutSidenav_nav {
    flex-basis: var(--sb-sidenav-width);
    flex-shrink: 0;
    background-color: var(--ui-sidebar-bg);
    border-right: 1px solid var(--ui-sidebar-border);
    transition: var(--transition-200);
}

.sb-sidenav {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--ui-sidebar-bg);
}

.sb-sidenav-menu {
    padding: var(--space-16) var(--space-16);
    flex-grow: 1;
    overflow-y: auto;
}

.sb-sidenav-menu .sb-sidenav-menu-heading {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    padding: var(--space-16) var(--space-8) var(--space-8);
}

.sb-sidenav-menu .nav-link {
    display: flex;
    align-items: center;
    padding: 0.7rem var(--space-16);
    color: var(--ui-sidebar-text);
    border-radius: var(--radius-14);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    transition: var(--transition-200);
    text-decoration: none;
}

.sb-sidenav-menu .nav-link:hover {
    color: var(--ui-sidebar-hover);
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

.sb-sidenav-menu .nav-link.active {
    color: #FFFFFF !important;
    background: var(--ui-primary-gradient) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(30, 124, 255, 0.34);
}

.sb-sidenav-menu .nav-link .sb-nav-link-icon {
    width: 24px;
    font-size: 1rem;
    margin-right: var(--space-16);
    display: grid;
    place-items: center;
}

.sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    transition: var(--transition-200);
}

.sb-sidenav-menu .nav-link.collapsed .sb-sidenav-collapse-arrow {
    transform: rotate(-90deg);
}

.sb-sidenav-footer {
    padding: var(--space-16);
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--ui-sidebar-border);
    font-size: 0.8rem;
    color: var(--ui-sidebar-text);
}