/* ==========================================================
     BMC CLIENT — DESIGN SYSTEM
     Palette   : deep navy sidebar + teal action color + warm
                 gold accent for signal/active states.
     Type      : Sora for headings/brand, Inter for UI & data
                 (tabular numerals for money columns).
     ========================================================== */
  @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    /* brand */
    --primary:#0d9488;
    --primary-dark:#0f766e;
    --primary-light:#ccfbf1;
    --accent:#c8952c;
    --accent-light:#fbf1dc;

    /* surfaces */
    --bg:#f3f5f8;
    --surface:#ffffff;
    --sidebar-from:#0b1120;
    --sidebar-to:#182338;
    --sidebar-hover:rgba(255,255,255,.06);
    --sidebar-text:#aab4c8;
    --sidebar-text-active:#ffffff;

    /* text */
    --text:#101828;
    --muted:#64748b;
    --border:#e3e7ee;
    --border-soft:#edf0f4;

    /* status */
    --danger:#dc2626;
    --danger-light:#fef2f2;
    --success:#16a34a;
    --success-light:#f0fdf4;
    --warning:#d97706;

    /* system */
    --radius:10px;
    --radius-lg:16px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow-md:0 4px 14px rgba(16,24,40,.08);
    --shadow-lg:0 16px 40px rgba(16,24,40,.16);
    --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    --font-display:'Sora',var(--font-ui);
  }

  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;
    font-family:var(--font-ui);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
    line-height:1.5;
    /* Jaring pengaman: mencegah scroll horizontal tak sengaja di HP kalau
       ada elemen yang sedikit melebihi lebar layar (mis. gambar/badge). */
    overflow-x:hidden;
    width:100%;
  }
  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;color:#0b1220;}
  ::selection{background:var(--primary-light);color:var(--primary-dark);}

  /* custom scrollbar */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#cbd3df;border-radius:20px;border:2.5px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:#adb7c7;}

  /* ---------- Overlay / spinner ---------- */
  .overlay{
    position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:999;
  }
  .spinner{
    width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--primary);
    border-radius:50%;animation:spin .75s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- Login ---------- */
  .login-screen{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:
      radial-gradient(circle at 15% 20%, rgba(13,148,136,.35), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(200,149,44,.25), transparent 45%),
      linear-gradient(160deg, var(--sidebar-from), var(--sidebar-to));
    padding:20px;
  }
  .login-screen > .public-footer-note{margin-top:20px;}
  .login-card{
    background:#fff;padding:40px 34px 32px;border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);width:360px;max-width:100%;
    border:1px solid rgba(255,255,255,.6);
    position:relative;
  }
  .login-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:linear-gradient(90deg,var(--primary),var(--accent));
  }
  .login-logo{display:block;width:76px;height:76px;object-fit:contain;margin:2px auto 14px;}
  .login-title{
    margin:0 0 4px;font-size:24px;font-weight:800;color:#0b1220;font-family:var(--font-display);
    text-align:center;
  }
  .login-subtitle{margin:0 0 22px;font-size:13px;color:var(--muted);text-align:center;}

  /* ---------- Form elements ---------- */
  .field-label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin:14px 0 6px;letter-spacing:.01em;}
  .field-input, select.field-input, textarea.field-input{
    width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:9px;
    font-size:13.5px;font-family:var(--font-ui);color:var(--text);outline:none;
    background:#fff;transition:border-color .15s, box-shadow .15s;
  }
  .field-input::placeholder{color:#a3adc2;}
  .field-input:focus{border-color:var(--primary);box-shadow:0 0 0 3.5px rgba(13,148,136,.14);}
  .field-input:disabled{background:#f4f6f9;color:var(--muted);cursor:not-allowed;}
  select.field-input{cursor:pointer;}

  .btn{
    border:none;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:600;
    cursor:pointer;transition:background .15s, box-shadow .15s, transform .05s, color .15s;
    font-family:var(--font-ui);letter-spacing:.005em;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(13,148,136,.3);}
  .btn-primary:hover{background:var(--primary-dark);}
  .btn-secondary{background:#eef1f5;color:#334155;}
  .btn-secondary:hover{background:#e2e6ec;}
  .btn-danger{background:var(--danger);color:#fff;box-shadow:0 1px 2px rgba(220,38,38,.3);}
  .btn-danger:hover{background:#b91c1c;}
  .btn-block{width:100%;margin-top:20px;padding:11px 16px;}
  .btn-sm{padding:7px 13px;font-size:12.5px;}
  .btn-icon{
    width:38px;height:38px;padding:0;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;background:#eef1f5;color:#475569;
  }
  .btn-icon svg{width:18px;height:18px;}
  .btn-icon:hover{background:var(--danger-light);color:var(--danger);}

  .alert{padding:11px 13px;border-radius:9px;font-size:13px;margin-bottom:14px;font-weight:500;border:1px solid transparent;}
  .alert-error{background:var(--danger-light);color:var(--danger);border-color:#fecaca;}
  .alert-success{background:var(--success-light);color:var(--success);border-color:#bbf7d0;}
  .alert-info{background:var(--primary-light);color:var(--primary-dark);border-color:#99f6e4;}

  /* ---------- App shell ---------- */
  /* height:100vh + overflow:hidden (bukan cuma min-height) supaya sidebar
     TIDAK ikut ter-scroll bersama halaman -- yang scroll hanya konten di
     .content-area (sudah overflow-y:auto) dan .sidebar-menu jika menu
     panjang. Sidebar jadi selalu terlihat penuh & posisinya konsisten. */
  .app-shell{display:flex;height:100vh;overflow:hidden;}

  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(11,17,32,.5);z-index:590;
    opacity:0;transition:opacity .2s;
  }
  .sidebar-backdrop.show{display:block;opacity:1;}

  .sidebar-toggle-btn{
    display:none;flex-direction:column;justify-content:center;gap:4px;
    width:36px;height:36px;border:none;background:transparent;cursor:pointer;
    border-radius:8px;padding:0;
  }
  .sidebar-toggle-btn:hover{background:#f1f3f6;}
  .sidebar-toggle-btn span{display:block;width:18px;height:2px;background:#334155;border-radius:2px;margin:0 auto;}
  .topbar-left{display:flex;align-items:center;gap:6px;}

  .sidebar{
    width:240px;flex-shrink:0;display:flex;flex-direction:column;color:#fff;
    background:linear-gradient(190deg, var(--sidebar-from), var(--sidebar-to));
    position:relative;transition:transform .25s ease;
  }
  .sidebar-brand{
    font-family:var(--font-display);font-size:17px;font-weight:800;
    padding:18px 20px;letter-spacing:-.01em;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;gap:10px;color:#fff;
  }
  .sidebar-brand-logo{width:30px;height:30px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
  .sidebar-menu{flex:1;overflow-y:auto;padding:14px 10px;}
  .sidebar-menu-bottom{
    flex-shrink:0;padding:10px 10px 14px;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .menu-group-title{
    padding:16px 10px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
    color:#5f6c85;font-weight:700;
  }
  .menu-item{
    display:flex;align-items:center;padding:10px 12px;margin:1.5px 0;
    color:var(--sidebar-text);text-decoration:none;font-size:13.5px;font-weight:500;
    cursor:pointer;border-radius:8px;border-left:3px solid transparent;
    transition:background .15s, color .15s;
  }
  .menu-item:hover{background:var(--sidebar-hover);color:#fff;}
  .menu-item.active{
    background:linear-gradient(90deg, rgba(13,148,136,.28), rgba(13,148,136,.06));
    color:var(--sidebar-text-active);
    border-left-color:var(--accent);
    font-weight:600;
  }

  .main-area{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;}
  .topbar{
    height:62px;background:var(--surface);border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 26px;
    flex-shrink:0;gap:10px;
  }
  .topbar-title{font-size:17px;font-weight:700;font-family:var(--font-display);color:#0b1220;}
  .topbar-user{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#334155;font-weight:500;}
  .badge{
    background:var(--primary-light);color:var(--primary-dark);padding:4px 11px;
    border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  }

  .content-area{padding:26px 28px 40px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .page-content h2{margin:0 0 6px;font-size:21px;font-weight:700;}
  .muted{color:var(--muted);font-size:13.5px;}
  .table-loading-row{font-style:italic;}

  .app-footer{
    flex-shrink:0;text-align:center;padding:12px 16px;
    font-size:11.5px;color:var(--muted);
    background:var(--surface);border-top:1px solid var(--border);
    letter-spacing:.01em;
  }

  .form-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:24px;max-width:420px;box-shadow:var(--shadow-sm);
  }

  .dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:20px;}
  .dashboard-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px 20px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  }
  .dashboard-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
  }
  .dashboard-card-label{font-size:12.5px;color:var(--muted);margin-bottom:8px;font-weight:600;}
  .dashboard-card-value{font-size:25px;font-weight:800;font-family:var(--font-display);color:#0b1220;font-variant-numeric:tabular-nums;}

  /* ---------- Dashboard charts ---------- */
  .chart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px;}
  @media (max-width:900px){ .chart-grid{grid-template-columns:1fr;} }
  .chart-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px;box-shadow:var(--shadow-sm);
  }
  .chart-card-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .chart-card-header h4{margin:0;font-size:14.5px;font-weight:700;}
  .chart-card-header .muted{font-size:12px;}
  .chart-canvas-wrapper{position:relative;height:280px;}
  .chart-canvas-wrapper-sm{height:240px;}
  .chart-empty-state{text-align:center;padding:60px 10px;}

  /* ---------- Tables ---------- */
  table.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.3px;background:var(--surface);}
  table.data-table th, table.data-table td{
    border-bottom:1px solid var(--border-soft);padding:11px 13px;text-align:left;
  }
  table.data-table th{
    background:#f8fafc;font-weight:700;color:#475569;font-size:11.5px;
    text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--border);
  }
  table.data-table tbody tr{transition:background .1s;}
  table.data-table tbody tr:hover{background:#f8fafc;}
  table.data-table tbody tr:last-child td{border-bottom:none;}
  table.data-table td{font-variant-numeric:tabular-nums;}
  table.data-table tr.total-row td{background:#f8fafc;font-weight:700;color:#0b1220;border-top:1.5px solid var(--border);}
  /* Kolom "Aksi" tidak ikut melebar rata dengan kolom lain -- dibuat
     seringkas mungkin (shrink-to-fit) supaya sisa kolom mendapat
     proporsi lebar yang wajar. */
  table.data-table th:last-child, table.data-table td:last-child{width:1%;white-space:nowrap;}

  /* ---------- Toolbar (filter + tombol tambah) ---------- */
  .toolbar{
    display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:12px 14px;
  }
  /* Proporsi berbeda per jenis input, bukan lebar sama rata:
     teks pencarian melebar mengisi ruang, tanggal & dropdown secukupnya saja. */
  .toolbar-input{width:auto;}
  .toolbar input[type="text"].toolbar-input{flex:1 1 220px;min-width:180px;}
  .toolbar input[type="date"].toolbar-input{flex:0 0 158px;min-width:0;}
  .toolbar select.toolbar-input{flex:0 1 190px;min-width:140px;}
  .toolbar input[type="number"].toolbar-input{flex:0 0 150px;min-width:0;}
  .toolbar-inline-label{flex:0 0 auto;}
  .toolbar .btn{flex:0 0 auto;}
  .toolbar-spacer{flex:1 1 auto;min-width:8px;}
  #kdFilterValueWrapper{display:contents;}
  @media (max-width:640px){
    .toolbar input[type="text"].toolbar-input,
    .toolbar input[type="date"].toolbar-input,
    .toolbar input[type="number"].toolbar-input,
    .toolbar select.toolbar-input{flex:1 1 100%;}
    .toolbar-spacer{display:none;}
  }

  /* ---------- Sort ikon inline di header kolom Nama Lengkap (Data Kandidat) ---------- */
  table.data-table th.col-nama{position:relative;}
  table.data-table th .th-label{display:block;margin-bottom:4px;}
  table.data-table th .th-label-row{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
  }
  table.data-table th .th-label-row .th-label{margin-bottom:0;}
  /* Tombol ikon sort (A-Z / Z-A) menempel di sebelah kanan label kolom Nama Lengkap */
  table.data-table th .th-sort-btn{
    background:none;border:none;padding:3px;margin:0;cursor:pointer;flex:none;
    display:inline-flex;align-items:center;justify-content:center;border-radius:5px;
  }
  table.data-table th .th-sort-btn:hover{background:#e2e8f0;}
  table.data-table th .th-sort-btn .th-sort-arrow-up,
  table.data-table th .th-sort-btn .th-sort-arrow-down{fill:#cbd5e1;transition:fill .15s;}
  table.data-table th .th-sort-btn.sort-asc .th-sort-arrow-up{fill:var(--primary);}
  table.data-table th .th-sort-btn.sort-desc .th-sort-arrow-down{fill:var(--primary);}

  /* ---------- Paginasi tabel (dipakai di seluruh tabel data) ---------- */
  .pagination-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
    padding:13px 16px;margin-top:14px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius);
  }
  .pagination-bar:empty{display:none;}
  .pagination-info{color:#94a3b8;font-size:12.5px;}
  .pagination-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .pagination-controls .btn-page{
    border:1px solid var(--border);background:var(--surface);color:#475569;
    font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;
    cursor:pointer;transition:border-color .15s,color .15s;
  }
  .pagination-controls .btn-page:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
  .pagination-controls .btn-page:disabled{opacity:.45;cursor:not-allowed;}
  .pagination-current{
    font-size:12.5px;font-weight:700;color:var(--text);padding:0 4px;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
  }
  .pagination-current .pagination-current-label{color:var(--primary);}
  .pagination-current .pagination-page-input{
    width:38px;text-align:center;font-size:12.5px;font-weight:700;color:var(--text);
    border:1px solid var(--border);border-radius:6px;padding:4px 2px;
    background:var(--surface);-moz-appearance:textfield;
  }
  .pagination-current .pagination-page-input:hover{border-color:var(--primary);}
  .pagination-current .pagination-page-input:focus{outline:none;border-color:var(--primary);}
  .pagination-current .pagination-page-input::-webkit-inner-spin-button,
  .pagination-current .pagination-page-input::-webkit-outer-spin-button{margin-left:2px;}
  @media (max-width:640px){
    .pagination-bar{justify-content:center;}
    .pagination-info{width:100%;text-align:center;}
    .pagination-controls{justify-content:center;width:100%;}
  }

  .status-pill{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;}
  .status-pill.aktif{background:var(--success-light);color:var(--success);}
  .status-pill.nonaktif{background:var(--danger-light);color:var(--danger);}
  .status-pill.tepat{background:var(--success-light);color:var(--success);}
  .status-pill.telat, .status-pill.cepat{background:#fef3c7;color:var(--warning);}
  .status-pill.belum{background:var(--border-soft);color:var(--muted);}
  .status-pill.ditempatkan{background:var(--success-light);color:var(--success);}
  .status-pill.belum-ditempatkan{background:var(--danger-light);color:var(--danger);}

  /* ---------- Absensi (Absen Masuk / Pulang via Kamera) ---------- */
  .absen-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:22px;max-width:460px;box-shadow:var(--shadow-sm);margin-top:16px;
  }
  .absen-status-box{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
  .absen-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--bg);border-radius:10px;}
  .absen-status-label{font-size:12.5px;font-weight:700;color:#334155;}
  .absen-status-time{font-size:11.5px;color:var(--muted);margin-right:6px;}

  /* ---------- Dashboard: Kartu Absensi Hari Ini (Home) ---------- */
  .dash-absen-card{
    position:relative;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:26px 28px 24px;margin-top:18px;
  }
  .dash-absen-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
  }
  .dash-absen-glow{
    position:absolute;top:-70px;right:-70px;width:230px;height:230px;border-radius:50%;
    background:radial-gradient(circle,rgba(13,148,136,.12),transparent 70%);
    pointer-events:none;
  }
  .dash-absen-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;position:relative;z-index:1;}
  .dash-absen-header-icon{
    width:42px;height:42px;border-radius:12px;flex:none;
    background:linear-gradient(135deg,var(--primary-light),#fff);
    color:var(--primary-dark);
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(13,148,136,.18);
  }
  .dash-absen-header-icon svg{width:22px;height:22px;}
  .dash-absen-header-text{flex:1;min-width:0;}
  .dash-absen-greeting{
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);margin-bottom:3px;
  }
  .dash-absen-header-text h3{margin:0;font-size:18px;}
  .dash-absen-date{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;}

  .dash-absen-steps{position:relative;z-index:1;display:flex;flex-direction:column;}
  .dash-absen-step{display:flex;gap:14px;}
  .dash-absen-step-line{display:flex;flex-direction:column;align-items:center;flex:none;}
  .dash-absen-step-dot{
    width:26px;height:26px;border-radius:50%;flex:none;position:relative;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--border);background:var(--surface);color:#fff;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .dash-absen-step-dot svg{width:13px;height:13px;opacity:0;transition:opacity .2s ease;}
  .icon-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;}
  .dash-absen-step-connector{width:2px;flex:1;min-height:24px;margin:4px 0;background:var(--border);}
  .dash-absen-step-body{flex:1;min-width:0;padding-bottom:20px;}
  .dash-absen-step:last-child .dash-absen-step-body{padding-bottom:0;}
  .dash-absen-step-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .dash-absen-step-label{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--text);}
  .dash-absen-step-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--muted);}
  .dash-absen-step-pill{
    display:inline-block;margin-top:5px;font-size:11px;font-weight:700;
    padding:3px 10px;border-radius:999px;background:var(--border-soft);color:var(--muted);
  }
  .dash-absen-step-pill.tepat{background:var(--success-light);color:var(--success);}
  .dash-absen-step-pill.telat{background:#fef3c7;color:var(--warning);}
  .dash-absen-step-pill.menunggu{background:var(--accent-light);color:var(--accent);}

  /* status: SUDAH (done) */
  .dash-absen-step[data-state="done"] .dash-absen-step-dot{background:var(--primary);border-color:var(--primary);}
  .dash-absen-step[data-state="done"] .dash-absen-step-dot svg{opacity:1;}
  .dash-absen-step[data-state="done"] .dash-absen-step-connector{background:var(--primary);}
  .dash-absen-step[data-state="done"] .dash-absen-step-time{color:var(--primary-dark);}

  /* status: SEDANG BERLANGSUNG / perlu aksi sekarang */
  .dash-absen-step[data-state="current"] .dash-absen-step-dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-light);}
  .dash-absen-step[data-state="current"] .icon-pulse{opacity:1;animation:dashAbsenPulse 1.8s ease-out infinite;}
  @keyframes dashAbsenPulse{0%{transform:scale(.7);opacity:.55;}100%{transform:scale(1.4);opacity:0;}}
  @media (prefers-reduced-motion:reduce){.icon-pulse{animation:none!important;}}

  /* status: BELUM SAATNYA (menunggu tahap sebelumnya) */
  .dash-absen-step[data-state="future"] .dash-absen-step-dot,
  .dash-absen-step[data-state="future"] .dash-absen-step-body{opacity:.5;}

  .dash-absen-footer{position:relative;z-index:1;margin-top:4px;}
  .dash-absen-cta p{margin:0 0 12px;font-size:13px;color:var(--muted);}
  .btn-absen-cta{
    display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
    border-radius:999px;padding:10px 20px;font-family:var(--font-ui);font-weight:700;font-size:13.5px;
    box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease;
  }
  .btn-absen-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
  .btn-absen-cta svg{width:14px;height:14px;transition:transform .15s ease;}
  .btn-absen-cta:hover svg{transform:translateX(2px);}

  .dash-absen-done{
    display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text);
    background:var(--success-light);padding:12px 14px;border-radius:12px;
  }
  .dash-absen-done svg{width:20px;height:20px;flex:none;}

  @media (max-width:520px){
    .dash-absen-card{padding:22px 18px 20px;}
    /* flex-wrap wajib supaya .dash-absen-date (width:100%; order:3) benar-benar
       pindah ke baris baru di bawah judul, bukan malah menumpuk/overlap dengan
       "Absensi Hari Ini" pada layar sempit (HP). */
    .dash-absen-header{flex-wrap:wrap;row-gap:6px;}
    .dash-absen-date{width:100%;order:3;margin-left:56px;white-space:normal;}
  }
  .table-action-link{color:var(--primary-dark);cursor:pointer;font-size:12.5px;margin-right:14px;font-weight:600;}
  .table-action-link:hover{text-decoration:underline;}
  .table-action-link.danger{color:var(--danger);}

  /* ---------- Modal ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(11,17,32,.55);backdrop-filter:blur(2px);
    display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:500;overflow-y:auto;
  }
  .modal-card{
    background:#fff;border-radius:var(--radius-lg);padding:24px 26px;width:420px;max-width:100%;
    box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.5);
    animation:modalIn .15s ease-out;
  }
  @keyframes modalIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .modal-header h3{margin:0;font-size:16.5px;font-weight:700;}
  .modal-close{cursor:pointer;font-size:22px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px;transition:background .12s;}
  .modal-close:hover{color:var(--text);background:#f1f3f6;}
  .modal-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;}

  /* ---------- Modal Notifikasi (pengganti alert()) ---------- */
  #notifModalOverlay{z-index:600;}
  .modal-card-notif{width:380px;max-width:100%;}
  .notif-modal-body{font-size:13.8px;line-height:1.55;color:var(--text);white-space:pre-line;}

  /* ---------- Modal Konfirmasi (pengganti confirm()) ---------- */
  #confirmModalOverlay{z-index:600;}
  .confirm-modal-body{font-size:13.8px;line-height:1.55;color:var(--text);white-space:pre-line;}

  .password-row{display:flex;gap:8px;}
  .password-row .field-input{flex:1;}

  .menu-checkbox-list{
    border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;max-height:190px;
    overflow-y:auto;margin-top:5px;background:#fbfcfd;
  }
  .menu-checkbox-item{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:13.3px;}
  .menu-checkbox-group-title{font-size:10.5px;text-transform:uppercase;color:var(--muted);margin:9px 0 3px;font-weight:700;letter-spacing:.05em;}

  /* ---------- Jadwal Kerja: jam per-hari (Kelola User) ---------- */
  .jk-hari-list{
    border:1.5px solid var(--border);border-radius:9px;padding:6px 12px;margin-top:5px;background:#fbfcfd;
  }
  .jk-hari-row{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13.3px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
  .jk-hari-row:last-child{border-bottom:none;}
  .jk-hari-row .jk-hari-label{display:flex;align-items:center;gap:8px;min-width:112px;}
  .jk-hari-row .jk-hari-jam{display:flex;align-items:center;gap:6px;}
  .jk-hari-row .jk-hari-jam input[type="time"]{width:118px;padding:5px 7px;}
  .jk-hari-row.jk-hari-nonaktif .jk-hari-jam{opacity:.45;pointer-events:none;}

  /* ---------- HRD - Data Calon Kandidat ---------- */
  .modal-card-wide{width:660px;max-width:100%;max-height:90vh;overflow-y:auto;}
  .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
  .field-row .field-input{width:100%;}
  .unit-input-row{display:flex;align-items:center;gap:8px;}
  .unit-input-row .field-input{flex:1;}
  .unit-suffix{font-size:12.5px;color:var(--muted);font-weight:600;min-width:26px;}

  .table-scroll-wrapper{
    overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--surface);box-shadow:var(--shadow-sm);
  }
  /* HANYA tabel yang benar-benar lebar (Data Calon Kandidat, 19 kolom)
     yang dipaksa min-width & nowrap. Tabel lain (Laporan Keuangan,
     Pemasukan/Pengeluaran, Peserta Pelatihan, dst) memakai lebar wajar
     mengikuti container-nya sendiri -- tidak lagi ikut digeser ke kanan. */
  .table-scroll-wrapper.table-wide table.data-table{min-width:1500px;}
  .table-scroll-wrapper.table-wide table.data-table th,
  .table-scroll-wrapper.table-wide table.data-table td{white-space:nowrap;}

  /* Freeze kolom Checkbox + Nama Lengkap di tabel Data Calon Kandidat supaya
     tetap terlihat saat tabel di-scroll ke kanan (kolomnya sangat banyak). */
  table.kandidat-table th.col-check, table.kandidat-table td.col-check{
    position:sticky;left:0;z-index:2;width:40px;min-width:40px;max-width:40px;
    text-align:center;background:var(--surface);
  }
  table.kandidat-table th.col-nama, table.kandidat-table td.col-nama{
    position:sticky;left:40px;z-index:2;width:200px;min-width:200px;max-width:200px;
    background:var(--surface);overflow:hidden;text-overflow:ellipsis;
    box-shadow:2px 0 4px -2px rgba(15,23,42,.12);
  }
  table.kandidat-table th.col-check, table.kandidat-table th.col-nama{
    z-index:3;background:#f8fafc;
  }
  table.kandidat-table tbody tr:hover td.col-check,
  table.kandidat-table tbody tr:hover td.col-nama{background:#f8fafc;}
  table.kandidat-table td.col-check input[type="checkbox"]{width:15px;height:15px;cursor:pointer;}

  .experience-section{margin-top:16px;}
  .experience-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px;}
  .experience-row .field-input{width:100%;}
  .btn-remove-row{background:none;border:none;color:var(--danger);cursor:pointer;font-size:19px;line-height:1;padding:5px;border-radius:6px;}
  .btn-remove-row:hover{background:var(--danger-light);}

  .emergency-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr auto;gap:8px;align-items:center;margin-bottom:8px;}
  .emergency-row .field-input{width:100%;}

  /* ---------- Foto Selfie (form Pendaftaran publik) ---------- */
  .selfie-box{
    position:relative;width:100%;max-width:320px;aspect-ratio:4/3;
    background:#0f172a;border-radius:12px;overflow:hidden;
    border:1.5px solid var(--border);margin-top:2px;
  }
  .selfie-video, .selfie-preview{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .selfie-video{transform:scaleX(-1);} /* mirror, seperti kaca -- lebih natural saat ambil selfie */
  .selfie-placeholder{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#94a3b8;font-size:12.5px;font-weight:600;text-align:center;padding:0 16px;
  }
  .selfie-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

  .detail-body{font-size:13.5px;}
  .detail-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:18px 0 8px;}
  .detail-section-title:first-child{margin-top:0;}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
  .detail-row{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px dashed var(--border);}
  .detail-row .detail-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
  .detail-row .detail-value{font-weight:600;margin-top:2px;color:#0b1220;}
  .detail-exp-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px;}
  .detail-exp-table th, .detail-exp-table td{border:1px solid var(--border);padding:7px 9px;text-align:left;}
  .detail-exp-table th{background:#f8fafc;font-weight:700;}

  /* ---------- HRD - Rekap Absensi: peta lokasi tampil langsung (embed) ---------- */
  .absensi-map-frame{
    width:100%;height:230px;border:1.5px solid var(--border);border-radius:9px;
    overflow:hidden;margin-top:6px;background:#f1f3f6;
  }
  .absensi-map-frame iframe{width:100%;height:100%;border:0;}
  .absensi-map-empty{
    display:flex;align-items:center;justify-content:center;height:100%;
    color:var(--muted);font-size:12.5px;font-style:italic;
  }
  .absensi-map-caption{font-size:11.5px;color:var(--muted);margin-top:5px;}
  .absensi-map-caption a{color:inherit;text-decoration:underline;}
  .ket-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;}
  .ket-pill.ontime{background:#e6f7ef;color:#0d9488;}
  .ket-pill.late{background:#fdecec;color:#dc2626;}
  .table-row-clickable{cursor:pointer;}
  .table-row-clickable:hover{background:#f8fafc;}

  .absensi-foto-frame{
    width:170px;height:170px;border:1.5px solid var(--border);border-radius:9px;
    overflow:hidden;margin-top:6px;background:#f1f3f6;
  }
  .absensi-foto-frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .absensi-foto-empty{
    display:flex;align-items:center;justify-content:center;height:100%;
    color:var(--muted);font-size:12px;font-style:italic;text-align:center;padding:0 10px;
  }
  .detail-cv-link{color:var(--primary-dark);font-weight:700;text-decoration:none;}
  .detail-cv-link:hover{text-decoration:underline;}

  /* ---------- Keuangan - Laporan Keuangan Harian ---------- */
  .toolbar-inline-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-left:4px;}
  /* Pemasukan & Pengeluaran disusun atas-bawah (bukan berdampingan),
     supaya masing-masing tabel mendapat lebar penuh dan tidak perlu
     digeser ke kanan lagi untuk melihat kolom-kolomnya. */
  .keu-tables-grid{display:flex;flex-direction:column;gap:20px;margin-top:16px;}
  .keu-table-block{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:16px;box-shadow:var(--shadow-sm);
  }
  .keu-table-block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
  .keu-table-block-header h4{margin:0;font-size:14.5px;font-weight:700;}

  /* ---------- Halaman Publik: Pendaftaran (tanpa login) ---------- */
  .public-page{
    min-height:100vh;padding:44px 16px;
    background:
      radial-gradient(circle at 15% 20%, rgba(13,148,136,.35), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(200,149,44,.25), transparent 45%),
      linear-gradient(160deg, var(--sidebar-from), var(--sidebar-to));
  }
  .public-wrap{max-width:760px;margin:0 auto;}
  .public-header{text-align:center;color:#fff;margin-bottom:22px;}
  .public-logo{display:block;width:78px;height:78px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
  .public-header h1{color:#fff;font-size:25px;margin:0 0 8px;font-family:var(--font-display);}
  .public-header p{color:rgba(255,255,255,.72);margin:0;font-size:13.5px;max-width:520px;margin:0 auto;}
  .public-card{
    background:#fff;border-radius:var(--radius-lg);padding:32px 30px 28px;
    box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.5);position:relative;
  }
  .public-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:linear-gradient(90deg,var(--primary),var(--accent));
  }
  .public-card h2{font-size:16px;margin:22px 0 10px;}
  .public-card h2:first-child{margin-top:0;}
  .public-success{text-align:center;padding:46px 20px;}
  .public-success .icon-circle{
    width:60px;height:60px;border-radius:50%;background:var(--success-light);color:var(--success);
    display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px;font-weight:800;
  }
  .public-success .icon-circle.icon-circle-warn{background:var(--accent-light);color:var(--accent);}
  .public-success h2{margin:0 0 8px;font-size:19px;}
  .public-footer-note{text-align:center;color:rgba(255,255,255,.55);font-size:11.5px;margin-top:22px;letter-spacing:.02em;}
  @media (max-width:600px){ .public-card{padding:22px 18px;} }

  /* Honeypot anti-spam: field disembunyikan total dari tampilan (bukan display:none,
     supaya bot yang mendeteksi display:none tetap bisa terjebak), tapi tetap "ada"
     secara DOM untuk pengguna yang memakai automation/bot sederhana. */
  .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

  /* ==========================================================
     RESPONSIVE / MOBILE
     Breakpoint utama 760px: sidebar berubah jadi drawer (off-canvas)
     yang dibuka lewat tombol hamburger, bukan menyempit jadi ikon.
     ========================================================== */
  @media (max-width:760px){
    .sidebar-toggle-btn{display:flex;width:40px;height:40px;}

    .sidebar{
      position:fixed;top:0;bottom:0;left:0;width:250px;max-width:82vw;
      z-index:600;transform:translateX(-100%);box-shadow:var(--shadow-lg);
    }
    .sidebar.open{transform:translateX(0);}

    .topbar{padding:0 14px 0 8px;height:56px;}
    .topbar-title{font-size:15px;}
    .topbar-user{gap:8px;}
    .topbar-user span#userNameLabel{display:none;}
    .topbar-user .badge{padding:3px 8px;font-size:10px;}
    .topbar-user .btn:not(.btn-icon){padding:7px 11px;font-size:12px;}
    .topbar-user .btn-icon{width:38px;height:38px;}

    .content-area{padding:16px 14px 32px;}
    .page-content h2{font-size:18px;}

    /* form & field sizing: 16px mencegah auto-zoom saat fokus di iOS */
    .field-input, select.field-input, textarea.field-input{font-size:16px;padding:11px 12px;}
    .field-row{grid-template-columns:1fr;}
    .btn{min-height:42px;}
    .btn-sm{min-height:36px;}

    .form-card{padding:18px;max-width:100%;}

    .dashboard-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .dashboard-card{padding:14px 14px 12px;}
    .dashboard-card-value{font-size:19px;}
    .dashboard-card-label{font-size:11px;margin-bottom:4px;}

    .chart-grid{gap:14px;}
    .chart-card{padding:14px;}
    .chart-canvas-wrapper{height:220px;}
    .chart-canvas-wrapper-sm{height:200px;}

    .toolbar{padding:10px;gap:8px;}
    .toolbar input[type="text"].toolbar-input,
    .toolbar input[type="date"].toolbar-input,
    .toolbar select.toolbar-input{flex:1 1 100%;font-size:16px;}
    .toolbar .btn{flex:1 1 auto;}
    .toolbar-spacer{display:none;}

    .keu-tables-grid{gap:14px;}
    .keu-table-block{padding:12px;}
    .keu-table-block-header h4{font-size:13.5px;}

    table.data-table{font-size:12.5px;}
    table.data-table th, table.data-table td{padding:9px 10px;}

    /* Kolom Nama Lengkap (sticky) di tabel Data Calon Kandidat: di desktop
       lebar tetapnya (200px) wajar, tapi di layar HP itu bisa memakan lebih
       dari separuh lebar layar sehingga kolom lain jadi nyaris tak terlihat
       saat digeser ke kanan. Dibuat proporsional (ikut menyempit sesuai
       breakpoint) supaya kolom lain tetap kebagian ruang, teks panjang tetap
       aman lewat ellipsis (...) bukan mendorong/menutupi kolom sebelahnya. */
    table.kandidat-table th.col-check, table.kandidat-table td.col-check{
      width:32px;min-width:32px;max-width:32px;
    }
    table.kandidat-table th.col-nama, table.kandidat-table td.col-nama{
      left:32px;width:118px;min-width:118px;max-width:118px;
    }

    .modal-overlay{padding:0;align-items:stretch;}
    .modal-card, .modal-card-wide{
      width:100%;max-width:100%;height:100%;max-height:100%;
      border-radius:0;padding:16px 16px 20px;overflow-y:auto;
    }
    .modal-footer{flex-wrap:wrap;}
    .modal-footer .btn{flex:1 1 auto;}

    .experience-row{grid-template-columns:1fr;gap:6px;padding:10px;background:#f8fafc;border-radius:8px;margin-bottom:10px;}
    .emergency-row{grid-template-columns:1fr;gap:6px;padding:10px;background:#f8fafc;border-radius:8px;margin-bottom:10px;}
    .btn-remove-row{justify-self:end;}

    .detail-grid{grid-template-columns:1fr;}

    .login-card{padding:30px 22px 26px;}

    .public-page{padding:24px 10px;}
    .public-header h1{font-size:20px;}
  }

  @media (max-width:400px){
    .dashboard-grid{grid-template-columns:1fr;}
  }

  @media (max-width:480px){
    table.kandidat-table th.col-nama, table.kandidat-table td.col-nama{
      width:96px;min-width:96px;max-width:96px;
    }
  }

  /* ---------- Rekap Absensi Bulanan (matrix tabel per-hari + cetak) ---------- */
  .data-table-compact th, .data-table-compact td{padding:6px 5px;font-size:12px;text-align:center;white-space:nowrap;}
  .data-table-compact th:nth-child(2), .data-table-compact td:nth-child(2){text-align:left;white-space:normal;}
  .ab-kode-cell.kode-H{background:var(--success-light);color:var(--success);font-weight:700;}
  .ab-kode-cell.kode-T, .ab-kode-cell.kode-C, .ab-kode-cell.kode-TC{background:#fef3c7;color:var(--warning);font-weight:700;}
  .ab-kode-cell.kode-A{background:var(--danger-light);color:var(--danger);font-weight:700;}
  .ab-kode-cell.kode-L{background:#f1f5f9;color:#64748b;font-weight:700;}

  .print-only{display:none;}

  @media print{
    body.printing-ab-bulanan .sidebar,
    body.printing-ab-bulanan .sidebar-backdrop,
    body.printing-ab-bulanan .topbar,
    body.printing-ab-bulanan #abBulananToolbar,
    body.printing-ab-bulanan #btnBackAbRekapBulanan,
    body.printing-ab-bulanan .content-area > .page-content:not(#page-HRD_REKAP_ABSENSI),
    body.printing-ab-bulanan #page-HRD_REKAP_ABSENSI > *:not(#abRekapBulananView),
    body.printing-ab-bulanan #abRekapBulananView > p{
      display:none !important;
    }
    body.printing-ab-bulanan .print-only{display:block !important;}
    body.printing-ab-bulanan .table-scroll-wrapper{overflow:visible !important;}
    body.printing-ab-bulanan .data-table-compact{font-size:10px;}
  }

/* ---------- ID Card Magang: preview & editor foto transparan (hapus background) ---------- */
.icm-checkerboard{
  background-image:
    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  border-radius: 4px;
}
#btnIcmBrushErase.icm-brush-active, #btnIcmBrushRestore.icm-brush-active{
  background: var(--primary, #0d9488);
  color:#fff;
  border-color: var(--primary, #0d9488);
}