* { box-sizing: border-box; font-family: 'Inter', sans-serif; }

    /* ===== Topbar — Putih ===== */
    #view-app {
      display: none;
      flex-direction: row;
      flex-grow: 1;
      min-height: 100vh;
    }
    #view-app.flex {
      display: flex;
    }
    .topbar {
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(15,23,42,.06);
    }
    .topbar::after { display: none; }

    /* Navbar Tabs - Minimalis: underline untuk tab aktif */
    .nav-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 100%;
      padding: 0 18px;
      font-size: 13px;
      font-weight: 500;
      color: #cbd5e1;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color 0.15s ease, border-color 0.15s ease;
    }
    .nav-tab:hover { color: #ffffff; }
    .nav-tab.active {
      color: #7dd3fc;
      font-weight: 700;
      border-bottom-color: #38bdf8;
    }

    /* ===== Main Sidebar — Putih + Aksen Hijau ===== */
    /* overflow HIDDEN wajib: satu-satunya yang boleh scroll adalah nav
       di dalamnya. Jika aside ikut scroll, di bawah footer "Versi"
       akan muncul area kosong phantom. */
    #main-sidebar {
      height: 100vh;
      position: sticky;
      top: 0;
      flex-shrink: 0;
      background: #ffffff;
      border-right: 1px solid #e2e8f0;
      transition: width 0.25s ease, opacity 0.2s ease;
      overflow: hidden;
    }
    /* Collapsed state — rail ikon. Sidebar menjadi overlay (fixed) sehingga
       saat hover/expand konten halaman TIDAK bergeser. */
    #main-sidebar.sidebar-collapsed {
      position: fixed;
      left: 0;
      top: 0;
      width: 72px !important;
      height: 100vh;
      z-index: 60;
      overflow: visible;
      opacity: 1;
      pointer-events: auto;
      border-right: 1px solid #e2e8f0;
    }
    /* Sisakan ruang 72px untuk rail agar layout konten tetap stabil */
    #main-sidebar.sidebar-collapsed + main {
      margin-left: 72px;
    }
    #main-sidebar.sidebar-collapsed > div.flex:first-child {
      padding-left: 6px;
      padding-right: 6px;
      gap: 2px;
    }
    #main-sidebar.sidebar-collapsed .w-8.h-8 { width: 28px; height: 28px; }
    #main-sidebar.sidebar-collapsed .sidebar-group-label,
    #main-sidebar.sidebar-collapsed .main-sidebar-btn span,
    #main-sidebar.sidebar-collapsed .sidebar-expand-btn span,
    #main-sidebar.sidebar-collapsed .sidebar-expand-btn .sidebar-chevron,
    #main-sidebar.sidebar-collapsed .sidebar-brand-text {
      display: none;
    }
    #main-sidebar.sidebar-collapsed:not(:hover) .dma-sidebar-sub {
      display: none !important;
    }
    #main-sidebar.sidebar-collapsed .main-sidebar-btn,
    #main-sidebar.sidebar-collapsed .sidebar-expand-btn {
      justify-content: center;
      padding: 10px 0;
    }
    /* Hover: sidebar melebar sebagai overlay di atas konten (tanpa geser layout) */
    #main-sidebar.sidebar-collapsed:hover {
      width: 272px !important;
      overflow: hidden;
      box-shadow: 0 4px 30px rgba(15, 23, 42, 0.25);
    }
    #main-sidebar.sidebar-collapsed:hover .sidebar-group-label,
    #main-sidebar.sidebar-collapsed:hover .sidebar-brand-text {
      display: block;
    }
    #main-sidebar.sidebar-collapsed:hover .main-sidebar-btn span,
    #main-sidebar.sidebar-collapsed:hover .sidebar-expand-btn span,
    #main-sidebar.sidebar-collapsed:hover .sidebar-expand-btn .sidebar-chevron {
      display: inline;
    }
    #main-sidebar.sidebar-collapsed:hover .main-sidebar-btn,
    #main-sidebar.sidebar-collapsed:hover .sidebar-expand-btn {
      justify-content: flex-start;
      padding: 8px 12px;
    }
    /* Satukan scroll di dalam nav saja (aside tidak pernah scroll).
       Tanpa min-height:0, nav flex mendorong footer versi ke bawah dan
       meninggalkan area kosong "phantom" di bawah tulisan versi. */
    #main-sidebar > nav#sidebar-nav {
      min-height: 0;
      overscroll-behavior: contain;
    }
    .main-sidebar-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #ffffff;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
      margin-bottom: 1px;
      border-radius: 8px;
    }
    .main-sidebar-btn span {
      flex: 1;
      min-width: 0;
    }
    .main-sidebar-btn i {
      width: 18px;
      text-align: center;
      font-size: 13px;
      flex-shrink: 0;
      color: rgba(255, 255, 255, 0.85);
    }
    .main-sidebar-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }
    .main-sidebar-btn:hover i { color: #ffffff; }
    /* Active state — hilight putih tipis pada halaman aktif */
    .main-sidebar-btn.active {
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 4px rgba(255, 255, 255, 0.08);
    }
    .main-sidebar-btn.active i { color: #ffffff; }
    .main-sidebar-btn.active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 3px;
      border-radius: 99px;
      background: #ffffff;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .settings-section { padding: 0.75rem 1.5rem 1.5rem; }
    .settings-section:not(.hidden) { animation: secFadeIn 0.15s ease-out; }
    @keyframes secFadeIn { from { opacity: 0; } to { opacity: 1; } }
    #sec-karyawan { padding: 0.75rem 1.5rem 0; min-height: 100%; }
    #sec-karyawan.flex { display: flex; flex-direction: column; }

    /* Navigasi Section Settings (Mobile Only) — Pill Minimalis */
    .settings-nav-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      padding: 7px 14px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      color: #4b5563;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      flex-shrink: 0;
    }
    .settings-nav-pill:hover { background: #e5e7eb; }
    .settings-nav-pill.active {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
    }
    /* Group label */
    .sidebar-group-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.07em;
      color: rgba(255, 255, 255, 0.55);
      text-transform: uppercase;
      padding: 14px 12px 5px;
      display: block;
    }
    .sidebar-group-label:first-child { padding-top: 6px; }
    .tab-content { display: none !important; }
    .tab-content.active { display: block !important; animation: fadeIn 0.3s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* ===== Accordion Collapse/Expand ===== */
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.28s ease;
    }
    .accordion-body.open {
      max-height: 2000px;
    }
    .accordion-chevron {
      transition: transform 0.25s ease;
      flex-shrink: 0;
    }
    .accordion-trigger.open .accordion-chevron {
      transform: rotate(180deg);
    }
    .accordion-trigger {
      outline: none;
    }
    .accordion-trigger:focus-visible {
      box-shadow: inset 0 0 0 2px #3b82f6;
    }

    /* ===== Sidebar Expand/Collapse Sub-menu — Putih di sidebar biru ===== */
    .sidebar-expand-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #ffffff;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
      margin-bottom: 1px;
      border-radius: 8px;
    }
    .sidebar-expand-btn span { flex: 1; min-width: 0; }
    .sidebar-expand-btn i.sidebar-icon {
      width: 18px; text-align: center; font-size: 13px;
      flex-shrink: 0; color: rgba(255, 255, 255, 0.85);
    }
    .sidebar-expand-btn .sidebar-chevron {
      margin-left: auto; font-size: 10px; color: rgba(255, 255, 255, 0.6);
      transition: transform 0.22s ease, color 0.12s ease; flex-shrink: 0;
    }
    .sidebar-expand-btn:hover {
      background: rgba(255, 255, 255, 0.12); color: #ffffff;
    }
    .sidebar-expand-btn:hover .sidebar-icon { color: #ffffff; }
    .sidebar-expand-btn:hover .sidebar-chevron { color: #ffffff; }
    .sidebar-expand-btn.open .sidebar-chevron { transform: rotate(180deg); }
    .sidebar-expand-btn.open { color: #ffffff; }
    .sidebar-expand-btn.open .sidebar-icon { color: #ffffff; }
    .sidebar-expand-btn.active { color: #ffffff; font-weight: 600; background: rgba(255, 255, 255, 0.18); }
    .sidebar-expand-btn.active .sidebar-icon { color: #ffffff; }
    .sidebar-expand-btn.active .sidebar-chevron { color: #ffffff; }

    /* Sub-menu item — putih */
    .sidebar-submenu-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%; text-align: left;
      padding: 6px 12px 6px 32px;
      font-size: 12px; font-weight: 500;
      color: rgba(255, 255, 255, 0.85); background: transparent; border: none;
      cursor: pointer; border-radius: 6px;
      transition: background 0.12s ease, color 0.12s ease; margin-bottom: 1px;
    }
    .sidebar-submenu-btn::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: rgba(255, 255, 255, 0.4); flex-shrink: 0; transition: background 0.12s;
    }
    .sidebar-submenu-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
    .sidebar-submenu-btn:hover::before { background: #ffffff; }
    .sidebar-submenu-btn.active { color: #ffffff; font-weight: 600; background: rgba(255, 255, 255, 0.15); }
    .sidebar-submenu-btn.active::before { background: #ffffff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    /* Sub-menu container */
    .dma-sidebar-sub { display: none !important; }
    .dma-sidebar-sub.open {
      display: block !important; height: auto !important; overflow: visible !important;
      animation: submenuFadeIn 0.18s ease;
    }
    @keyframes submenuFadeIn {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Mobile submenu */
    .mobile-nav-group-btn.active { color: #16a34a !important; }
    .mobile-nav-group-btn .fa-chevron-down { transition: transform 0.2s ease; }
    .mobile-nav-group-btn.active .fa-chevron-down { transform: rotate(180deg); color: #16a34a; }
    .mobile-submenu-btn {
      display: flex; align-items: center; gap: 8px; width: 100%;
      text-align: left; padding: 9px 12px; font-size: 13px; font-weight: 500;
      color: #374151; background: transparent; border: none; cursor: pointer;
      border-radius: 8px; transition: background 0.12s, color 0.12s;
    }
    .mobile-submenu-btn:hover { background: #f0fdf4; color: #15803d; }
    .mobile-submenu-btn.active { color: #15803d; background: #f0fdf4; }
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
    .loader { border: 3px solid #e5e7eb; border-top: 3px solid #16a34a; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; display: inline-block; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes pulse-light { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.03); } }
    .pulse-badge { animation: pulse-light 2s infinite ease-in-out; }
    .dropdown-animate { animation: ddFadeIn 0.15s ease; transform-origin: bottom center; }
    @keyframes ddFadeIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

    .print-page-header-space,
    .print-page-footer-space {
      display: none;
    }

    /* Aturan Cetak PDF khusus */
    @media print {
      @page {
        size: auto;
        margin: 0;
      }

      body {
        background: white !important;
        color: black !important;
        font-size: 11px;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
      }

      #view-app,
      nav,
      main,
      #main-sidebar,
      .app-body,
      #modal-confirm,
      #modal-double-login,
      #modal-view-docs,
      .no-print,
      #modal-annul-auth {
        display: none !important;
      }

      #modal-pdf-report {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      #modal-pdf-report>div {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
      }

      #modal-pdf-report * {
        visibility: visible;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      .print-break-inside-avoid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      .print-page-header-space {
        display: block;
        height: 15mm;
      }

      .print-page-footer-space {
        display: block;
        height: 15mm;
      }

      .print-table-cell {
        padding-left: 15mm;
        padding-right: 15mm;
      }

      .print-table {
        border: none !important;
        border-spacing: 0 !important;
        border-collapse: collapse !important;
        width: 100% !important;
      }

      .print-table td {
        border: none !important;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .print-keep-together {
        page-break-after: avoid !important;
        break-after: avoid !important;
      }

      .print-keep-together {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      thead {
        display: table-header-group !important;
      }
    }


    /* ===================================================
       KAR WIZARD — Form Tambah / Edit Karyawan 3-Step
       =================================================== */

    /* Grid layout */
    .kar-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }
    .kar-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }
    @media (max-width: 560px) {
      .kar-grid-2,
      .kar-grid-3 { grid-template-columns: 1fr; }
    }

    /* Label */
    .kar-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .kar-req { color: #ef4444; }

    /* Input / Select / Textarea */
    .kar-input {
      display: block;
      width: 100%;
      padding: 8px 10px;
      font-size: 12.5px;
      color: #1e293b;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      line-height: 1.4;
    }
    .kar-input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
      background: #fff;
    }
    .kar-input::placeholder { color: #94a3b8; }
    select.kar-input { cursor: pointer; }
    textarea.kar-input { resize: vertical; min-height: 64px; }

    /* Section title */
    .kar-section-title {
      font-size: 12px;
      font-weight: 800;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 20px;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1.5px solid #e2e8f0;
      display: flex;
      align-items: center;
    }

    /* Step panels — JS manages visibility via Tailwind 'hidden' class */
    /* .kar-step-panel tidak perlu display:none di sini — dihandle oleh karGoToStep() */

    /* Stepper dots */
    .kar-step-item .kar-step-dot {
      background: #e2e8f0;
      color: #94a3b8;
    }
    .kar-step-item.active .kar-step-dot {
      background: #2563eb;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
    }
    .kar-step-item.done .kar-step-dot {
      background: #16a34a;
      color: #fff;
    }
    .kar-step-item .kar-step-label { color: #94a3b8; }
    .kar-step-item.active .kar-step-label { color: #2563eb; font-weight: 700; }
    .kar-step-item.done .kar-step-label { color: #16a34a; }

    .kar-step-line { background: #e2e8f0; }
    .kar-step-line.done { background: #16a34a; }
    .kar-step-line.active { background: #93c5fd; }


    /* ===== Detail Karyawan Modal (View-only) ===== */
    .dkar-section-title {
      font-size: 11px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 16px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }
    .dkar-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }
    .dkar-value {
      font-size: 12.5px;
      font-weight: 600;
      color: #1e293b;
      word-break: break-word;
    }
    .dkar-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 4px;
    }
    .dkar-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
      margin-bottom: 4px;
    }
    @media (max-width: 560px) {
      .dkar-grid-2, .dkar-grid-3 { grid-template-columns: 1fr; }
    }

    /* ===================================================
       DKAR — Detail / View Karyawan Modal
       =================================================== */

    /* Grid layout */
    .dkar-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 20px;
      margin-bottom: 8px;
    }
    .dkar-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px 16px;
      margin-bottom: 8px;
    }
    @media (max-width: 560px) {
      .dkar-grid-2,
      .dkar-grid-3 { grid-template-columns: 1fr; }
    }

    /* Label kecil uppercase */
    .dkar-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 2px;
    }

    /* Value */
    .dkar-value {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      word-break: break-word;
    }
    .dkar-value.empty { color: #cbd5e1; font-style: italic; font-weight: 400; }

    /* Section title */
    .dkar-section-title {
      font-size: 11px;
      font-weight: 800;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 20px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1.5px solid #f1f5f9;
      display: flex;
      align-items: center;
    }

    /* Tab panel show/hide via JS (hidden class) */
    .dtab-panel { display: block; }
    .dtab-panel.hidden { display: none !important; }

    /* Input field wajib putih (hindari krem/off-white dari tema browser) */
    .page-content input,
    .page-content select,
    .page-content textarea {
      background: #ffffff !important;
      color: #1e293b !important;
    }