:root { --brand: #0d6e6e; --brand-dark: #095050; --brand-light: #e7f4f4; }
  body { background: #f4f6f9; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .app-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; gap:1rem; color:var(--brand); }
  .brand-bg { background: var(--brand); }
  .brand-text { color: var(--brand); }
  .btn-brand { background: var(--brand); border-color: var(--brand); color:#fff; }
  .btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color:#fff; }
  .btn-outline-brand { border-color: var(--brand); color: var(--brand); }
  .btn-outline-brand:hover { background: var(--brand); color:#fff; }
  .topbar { background: var(--brand); color:#fff; position: sticky; top: 0; z-index: 1600; }
  .topbar .navbar-brand, .topbar .nav-link { color:#fff; }
  /* ---- Shell fleksibel (anti melebar ke kanan) ---- */
  .app-shell { display:flex; align-items:flex-start; min-width:0; width:100%; }
  .app-shell > .sidebar {
    flex:0 0 232px; width:232px; background:#fff; border-right:1px solid #e3e8ee;
    min-height: calc(100vh - 56px); position:sticky; top:56px; align-self:flex-start;
    max-height: calc(100vh - 56px); overflow-y:auto;
  }
  .app-shell > .content { flex:1 1 0%; min-width:0; width:100%; }
  .min-w-0 { min-width:0; }
  .backdrop { display:none; position:fixed; top:56px; right:0; bottom:0; left:0; background:rgba(16,24,40,.4); z-index:1400; }
  .backdrop.show { display:block; }
  .sidebar .nav-link { color:#334; border-radius:.5rem; margin:.15rem .5rem; padding:.55rem .75rem; display:flex; align-items:center; gap:.6rem; }
  .sidebar .nav-link:hover { background: var(--brand-light); }
  .sidebar .nav-link.active { background: var(--brand); color:#fff; }
  .content { padding: clamp(.75rem, 1.1vw, 1.4rem) clamp(.75rem, 1.2vw, 1.6rem) 3rem; }
  .card { border:none; box-shadow: 0 1px 3px rgba(16,24,40,.08); border-radius:.75rem; }
  .stat-card { border-left: 4px solid var(--brand); }
  .table thead th { background:#f8fafc; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:#5b6b7b; white-space:nowrap; }
  .table td { vertical-align: middle; }
  .avatar-sm { width:34px; height:34px; object-fit:cover; border-radius:50%; background:#dfe6ee; }
  .form-label { font-size:.85rem; font-weight:600; color:#445; }
  .section-title { font-size:.78rem; font-weight:700; text-transform:uppercase; color:var(--brand); letter-spacing:.06em; border-bottom:1px solid #e3e8ee; padding-bottom:.35rem; margin:1.2rem 0 .8rem; }
  .badge-soft { background:var(--brand-light); color:var(--brand-dark); font-weight:600; }
  .page-link { color: var(--brand); }
  .page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
  .toast-root { position:fixed; top:1rem; right:1rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
  .chart-bar { height: 10px; border-radius: 6px; background: var(--brand); }
  @media (max-width: 991.98px) {
    .app-shell > .sidebar {
      position: fixed; top:56px; bottom:0; left:0; z-index:1500;
      flex-basis:262px; width:262px; height:calc(100vh - 56px); max-height:none;
      transform: translateX(-100%); transition: transform .2s ease; box-shadow:none;
    }
    .app-shell > .sidebar.show { transform:none; box-shadow:0 0 24px rgba(0,0,0,.25); }
  }
  .form-section { margin-bottom: 1.5rem; }
  .kv { display:flex; gap:.5rem; padding:.35rem 0; border-bottom:1px dashed #eef1f5; }
  .kv .k { width:200px; color:#5b6b7b; font-size:.86rem; flex-shrink:0; }
  .kv .v { flex:1; font-weight:500; }

  /* Tabel Data Pegawai: ringkas, tidak melebar ke kanan */
  .table-pegawai { font-size: .875rem; width: 100%; }
  .table-pegawai thead th { white-space: normal; }
  .table-pegawai td, .table-pegawai th { overflow-wrap: anywhere; }
  .table-pegawai > :not(caption) > * > * { padding: .55rem .65rem; }
  .table-pegawai .cell-name { min-width: 175px; }
  .table-pegawai .cell-ellipsis { max-width: 170px; min-width: 0; }
  .table-pegawai .cell-ellipsis > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table-pegawai th:last-child,
  .table-pegawai td:last-child {
    position: sticky; right: 0; background: #fff; z-index: 2;
    box-shadow: -8px 0 8px -8px rgba(16,24,40,.25);
  }
  .table-pegawai thead th:last-child { background: #f8fafc; z-index: 3; }
  .table-pegawai tbody tr:hover td:last-child { background: #f8f9fa; }
  /* baris status (memuat / kosong) tidak ikut menempel */
  .table-pegawai td[colspan]:last-child { position: static; box-shadow: none; }


  /* ================= Animasi & micro-interaction ================= */
  :root { --ease: cubic-bezier(.22,.8,.26,1); }
  html { scroll-behavior: smooth; }

  @keyframes viewIn  { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
  @keyframes rowIn   { from { opacity:0; transform: translateY(6px); }  to { opacity:1; transform:none; } }
  @keyframes cardIn  { from { opacity:0; transform: translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
  @keyframes rippleFx{ to { transform: scale(2.6); opacity:0; } }
  @keyframes toastIn { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }
  @keyframes pulseSoft { 0%,100% { box-shadow:0 0 0 0 rgba(13,110,110,.25); } 50% { box-shadow:0 0 0 6px rgba(13,110,110,0); } }

  .view-anim { animation: viewIn .3s var(--ease) both; }

  /* Tombol & tautan */
  .btn, .nav-link, .page-link, .list-cards .card {
    transition: transform .12s var(--ease), box-shadow .2s var(--ease),
                background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .btn:active, .page-link:active { transform: scale(.96); }
  .btn:hover { box-shadow: 0 2px 10px rgba(16,24,40,.10); }
  .sidebar .nav-link:hover { transform: translateX(2px); }
  .sidebar .nav-link.active { animation: pulseSoft .6s var(--ease); }

  /* Ripple */
  .ripple-host { position: relative; overflow: hidden; }
  .ripple-host > .ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: .25; transform: scale(0);
    animation: rippleFx .55s ease-out forwards;
  }

  /* Baris tabel & kartu masuk berurutan */
  .table-pegawai tbody tr { animation: rowIn .24s var(--ease) both; }
  .table-pegawai tbody tr:nth-child(1) { animation-delay: .01s }
  .table-pegawai tbody tr:nth-child(2) { animation-delay: .03s }
  .table-pegawai tbody tr:nth-child(3) { animation-delay: .05s }
  .table-pegawai tbody tr:nth-child(4) { animation-delay: .07s }
  .table-pegawai tbody tr:nth-child(5) { animation-delay: .09s }
  .table-pegawai tbody tr:nth-child(6) { animation-delay: .11s }
  .table-pegawai tbody tr:nth-child(7) { animation-delay: .13s }
  .table-pegawai tbody tr:nth-child(8) { animation-delay: .15s }
  .list-cards .card { animation: cardIn .26s var(--ease) both; }
  .list-cards .card:nth-child(1) { animation-delay: .01s }
  .list-cards .card:nth-child(2) { animation-delay: .04s }
  .list-cards .card:nth-child(3) { animation-delay: .07s }
  .list-cards .card:nth-child(4) { animation-delay: .10s }
  .list-cards .card:nth-child(5) { animation-delay: .13s }
  .list-cards .card:nth-child(6) { animation-delay: .16s }

  .toast { animation: toastIn .28s var(--ease) both; }
  .modal.fade .modal-dialog { transition: transform .25s var(--ease), opacity .2s; transform: translateY(12px) scale(.99); }
  .modal.show .modal-dialog { transform: none; }

  .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.10); }
  .stat-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-delay: 0ms !important;
      transition-duration: .001ms !important;
    }
  }

  /* Detail pegawai di layar kecil: label di atas nilai */
  @media (max-width: 575.98px) {
    .kv { flex-direction: column; gap: .1rem; padding: .5rem 0; }
    .kv .k { width: auto; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
    .kv .v { font-size: .92rem; }
    .table-pegawai .cell-ellipsis { max-width: none; }
  }

  /* ---- Daftar kartu (mobile) ---- */
  .list-cards .card { border: 1px solid #e6ebf1; box-shadow: none; border-radius: .65rem; }
  .list-cards .card:active { background: #f8fafc; }
  .list-cards .meta { display:flex; gap:.35rem; font-size:.8rem; color:#5b6b7b; }
  .list-cards .meta .lbl { flex:0 0 84px; }
  .list-cards .meta .val { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  @media print {
    .no-print, .topbar, .sidebar { display:none !important; }
    body { background:#fff; }
  }