:root{
    --brand:#A8BBA3; --paper:#F7F4EA; --tint:#EBD9D1; --ink:#B87C4C; --rose:#F0CAD6;
    --surface:#fff; --surface-soft: color-mix(in srgb, var(--tint) 20%, #fff);
    --surface-softer: color-mix(in srgb, var(--tint) 32%, #fff);
    --border:rgba(17,17,17,.12);
    --text:#0f172a; --text-muted:#6b7280;
    --radius:12px;
    --date-col-w: 180px;

    /* Layering konsisten */
    --z-colmenu: 900;
    --z-dropdown: 1200;
    --z-modal-top: 1600;
  }

  /* Pastikan spinner global Template (twb-modal-backdrop) selalu di atas modal lokal */
  .twb-modal-backdrop{
    z-index: calc(var(--z-modal-top) + 100);
  }

  html,body{
    margin:0; background:var(--paper); color:var(--text);
    font:500 14px/1.35 Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  }
  .card{ background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.04); padding:12px; }

  /* === Jarak vertikal antar kartu (global) === */
  :root{ --stack-gap: 14px; }
  .card + .card{ margin-top: var(--stack-gap); }

  @media (max-width: 720px){
    :root{ --stack-gap: 10px; }
  }

  .card-soft{ background:var(--surface-soft); }
  .toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .field{ min-width:260px; }
  .field>label{ display:block; font:600 12px/1 Poppins; margin-bottom:6px; color:#111827; }

  .btn{ background:var(--ink); color:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:8px 12px; font:600 13px/1 Poppins; cursor:pointer; transition:.18s; }
  .btn:hover{ filter:brightness(.95) }
  .btn[disabled]{ opacity:.55; cursor:not-allowed; }
  .btn-ghost{ background:var(--surface-soft); color:#0f172a; border:1px solid var(--border); border-radius:10px; padding:6px 10px; font:600 13px/1 Poppins; }
  .btn-danger{ background:#b42318; color:#fff; }

  /* ===== Pressable Buttons & Focus ===== */
  .btn, .btn-ghost, .btn-danger, .dd-icon, .template-item {
    position: relative;
    transform: translateY(0);
    transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
    will-change: transform;
  }
  .btn:active, .btn-ghost:active, .btn-danger:active,
  .dd-icon:active, .template-item:active {
    transform: translateY(1px) scale(0.99);
    filter: brightness(.98);
  }
  .btn:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible,
  .dd-icon:focus-visible, .template-item:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce){
    .btn, .btn-ghost, .btn-danger, .dd-icon, .template-item { transition: none; }
  }

  /* Tombol ghost disabled */
  .btn-ghost[disabled]{
    opacity:.55;
    cursor:not-allowed;
  }

  /* ===== Combobox (selaras Absensi) ===== */
  .combo{ position:relative; }
  .combo input[type="text"]{
    font-size:13px; height:42px; border-radius:12px; border:1px solid #e5e7eb; padding:8px 36px 8px 12px; width:100%; outline:none; background:#fff; color:#0f172a;
    transition: box-shadow .16s, border-color .16s;
  }
  .combo input.is-placeholder{ color:#94a3b8; }
  .combo input:focus{ border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.25); }
  .combo .dd-icon{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:8px; cursor:pointer; color:#64748b; transition: transform .16s; }
  .combo.open .dd-icon .material-icons{ transform: rotate(180deg); transition: transform .16s; }
  .combo-list{
    position:absolute; z-index:var(--z-dropdown); left:0; right:0; margin-top:2px; background:#fff; border:1px solid #eef2f7; border-radius:8px; box-shadow:0 16px 30px rgba(0,0,0,.08); max-height:300px; overflow:auto; padding:6px 0;
  }
  .combo-list[hidden]{ display:none; }
  .combo-item{ padding:10px 12px; font-size:13px; cursor:pointer; }
  .combo-item:hover{ background:#f1f5f9; }

  .actions-right{ margin-left:auto; display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }

  .tbl-wrap{ overflow:auto; border-radius:12px; background:var(--surface-soft); }
  table.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
  .tbl th, .tbl td{ white-space:nowrap; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align: middle; }
  .tbl thead th{ font:700 12px/1 Poppins; color:#334155; background:#fff; position:sticky; top:0; z-index:1; }
  /* sticky tanggal */
  .tbl .sticky-left{ position:sticky; left:0; background:#fff; z-index:2; min-width:var(--date-col-w); max-width:var(--date-col-w); }
  /* Tanggal: nomor & teks sejajar tengah */
  .date-cell{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .row-no{
    position:static;
    width:22px; height:22px;
    border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    font:700 11px/1 Poppins; color:#fff; background:#B87C4C; opacity:.95;
    flex:0 0 22px;
  }
  .date-text{
    margin:0;
    display:inline-block;
  }

  .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--rose); font:700 11px/1 Poppins; color:#0f172a; vertical-align:middle;}

  /* Placeholder */
  .placeholder{
    display:block;
    text-align:center;
    color:var(--text-muted);
    padding:18px;
  }
  .placeholder[hidden]{ display:none !important; }

  .tip{ padding:8px 0px; color:var(--text-muted); }

  /* ===== Modal (di atas sticky) ===== */
  .modal[hidden]{ display:none; }
  .modal{ position:fixed; inset:0; z-index: var(--z-modal-top); }
  .modal-backdrop{ position:absolute; inset:0; background: color-mix(in srgb, #000 40%, transparent); opacity:0; transition:.16s; }
  .modal-dialog{
    position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% + 8px)) scale(.98);
    width:min(900px, calc(100vw - 32px)); background:
      radial-gradient(1200px 500px at 50% -200px,
        var(--surface) 0%,
        var(--surface-soft) 55%,
        var(--surface-softer) 100%);
    border:1px solid var(--border); border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.18); opacity:0; transition:.16s; max-height:min(92dvh, calc(100vh - 24px));
    display:flex; flex-direction:column; overflow:hidden;
  }
  .modal.show .modal-backdrop{ opacity:1; }
  .modal.show .modal-dialog{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef2f7; }
  .modal-title{ font:700 14px/1.2 Poppins; }
  .modal-body{ padding:14px; overflow:auto; flex:1 1 auto; }
  .modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid #eef2f7; }
  .modal-close{ width:32px; height:32px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-size:20px; }

  /* Form jurnal */
  .grid-form{ display:grid; grid-template-columns: 1fr; gap:10px; }
  .g-field{ display:flex; flex-direction:column; gap:6px; }
  .g-label{ font:600 12px/1 Poppins; color:#374151; }
  .g-textarea, .g-input{
    width:100%; border:1px solid var(--border); border-radius:12px; padding:10px 12px; font:500 13px/1.35 Poppins;
    background:#fff; resize:none; min-height:44px;
  }
  .g-input[disabled]{ background:#f5f5f5; color:#6b7280; }
  @media (min-width: 1000px){
    .grid-form{ grid-template-columns: 1fr 1fr; }
  }

  /* View modal rows (lebih lega + zebra) */
  .view-grid{ display:block; }
  .view-row{ display:flex; gap:12px; padding:10px 12px; border-radius:10px; margin-bottom:10px; }
  .view-row:nth-child(odd){ background: var(--surface-soft); }
  .view-key{ flex:0 0 180px; font:700 12px/1.2 Poppins; color:#334155; }
  .view-val{ flex:1; white-space:pre-wrap; }

  /* Counter & Template dropdown */
  .counter{ font:600 11px/1 Poppins; color:#64748b; margin-top:2px; text-align:right; }
  .counter.warn{ color:#ca8a04; }
  .counter.hard{ color:#b42318; }
  .template-wrap{ position:relative; margin-right:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  #templateBtn, #saveTemplateBtn{ background:var(--surface-soft); color:#0f172a; border:1px solid var(--border); }
  .template-list{ position:absolute; z-index:var(--z-dropdown); left:0; top:40px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 16px 30px rgba(0,0,0,.08); min-width:280px; max-height:280px; overflow:auto; }
  .template-list[hidden]{ display:none; }
  .template-item{ padding:10px 12px; cursor:pointer; font-size:13px; }
  .template-item:hover{ background:#f1f5f9; }
  .template-head{ padding:8px 12px; font:700 12px/1 Poppins; color:#334155; border-bottom:1px solid #eef2f7; }
  .card-head .g-input { height: 42px; }
  .card-head { border-bottom: 1px dashed var(--border); padding-bottom: 6px; }

  /* ========== Topbar Head (paritas dengan Absensi/Asesmen) ========== */
  .topbar-head{
    display:block;
    margin: -4px 0 10px;
    background: transparent;
  }
  .topbar-head .head-row{
    display:flex; align-items:center; gap:8px;
    padding: 2px 2px 8px 2px;
  }
  .topbar-head .topbar-icon{
    font-size:20px; line-height:1; color:#0f172a; opacity:.9;
  }
  .topbar-head .topbar-title{
    margin:0; font:700 18px/1 Poppins, sans-serif; color:#0f172a;
  }
  .topbar-head .head-divider{
    height:1px; background:var(--border);
    margin:0; border:0;
  }
  

  /* === TWB UNIFIED UI TYPOGRAPHY & SPINNER MESSAGE === */
  :root{ --twb-ui-font: Poppins, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
  body, input, button, select, textarea, table{
    font-family: var(--twb-ui-font) !important;
  }
  body{ font-size:14px; font-weight:500; line-height:1.35; }
  .btn, .btn-ghost, .btn-danger, .mg-btn, .mg-btn-ghost, .btn-ghost-ink,
  button.menu-item, .combo-item{ font-size:13px !important; font-weight:600 !important; }
  .field > label, .modal-label, .rep-name-label{ font-size:12px !important; font-weight:600 !important; }
  .topbar-h2, .topbar-title h2, .topbar-head .topbar-title{ font-size:16px !important; font-weight:700 !important; line-height:1.2 !important; }
  .tbl, .rep-detail{ font-size:13px !important; font-weight:500 !important; }
  #twbBusyText, .twb-busy-text{ font:600 13px/1.25 var(--twb-ui-font) !important; }

  .template-item.is-empty{ color:#94a3b8; cursor:default; }
  .template-item.is-empty:hover{ background:transparent; }
  .template-meta{ display:block; margin-top:3px; font:500 11px/1.2 Poppins; color:#64748b; }