/* Mandays Technical Support - stylesheet
   Every colour is a token so light and dark come from one source.

   Light palette is lifted from the workbook itself (slate 333F4F, accent
   4472C4, label grey D9D9D9, total band EDEDED) so the app looks like the
   artifact it produces.

   Dark keeps the same hues but inverts the value scale: the workbook slate
   becomes the page background family, and the accent is lightened to
   6C9BEF so it still passes contrast on a dark surface. */

:root,
[data-theme="light"] {
  --canvas: #f2f4f7;         /* page background            */
  --paper: #ffffff;          /* cards, inputs              */
  --paper-2: #fafbfc;        /* card headers, toolbars     */
  --zebra: #fbfcfd;          /* even table rows            */
  --hover: #eef3fb;          /* row hover                  */
  --band: #ededed;           /* section + total bands      */
  --line: #d8dde5;
  --line-strong: #b8c0cc;
  --ink: #1c222b;
  --ink-soft: #5b6675;
  --ink-invert: #ffffff;

  --topbar: #333f4f;
  --topbar-ink: #ffffff;
  --topbar-ink-dim: #cfd6e0;
  --thead: #333f4f;
  --thead-line: #44546a;
  --thead-ink: #ffffff;

  --accent: #4472c4;
  --accent-dark: #35589c;
  --accent-ink: #ffffff;
  --accent-soft: #e8edf6;
  --accent-soft-line: #d3dcea;
  --accent-text: #4472c4;    /* aksen sebagai teks di atas kertas      */
  --accent-line: #4472c4;    /* garis tab aktif di atas topbar         */

  --ok: #2e7d32;
  --ok-bg: #f1f9f1;
  --ok-line: #b6ddb8;
  --warn: #b26a00;
  --warn-bg: #fff8ea;
  --warn-line: #e6c99a;
  --danger: #b3261e;
  --danger-bg: #fdf3f2;
  --danger-line: #e3c4c2;

  --shadow: 0 6px 20px rgba(0, 0, 0, .22);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .3);
  --scrim: rgba(20, 26, 34, .5);

  --radius: 6px;
  --topbar-h: 52px;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, "Liberation Sans", Arial, sans-serif;
  color-scheme: light;
}

[data-theme="dark"] {
  --canvas: #10141a;
  --paper: #1a2029;
  --paper-2: #202836;
  --zebra: #1d242e;
  --hover: #26313f;
  --band: #2a3441;
  --line: #2c3644;
  --line-strong: #3d4a5c;
  --ink: #e4e9f0;
  --ink-soft: #97a3b4;
  --ink-invert: #10141a;

  --topbar: #0c1016;
  --topbar-ink: #eef2f7;
  --topbar-ink-dim: #93a0b1;
  --thead: #2b3644;
  --thead-line: #3d4a5c;
  --thead-ink: #e4e9f0;

  --accent: #6c9bef;
  --accent-dark: #85adf5;
  --accent-ink: #0c1016;
  --accent-soft: #23324a;
  --accent-soft-line: #35496b;
  --accent-text: #6c9bef;
  --accent-line: #6c9bef;

  --ok: #74c47a;
  --ok-bg: #17281a;
  --ok-line: #2f5434;
  --warn: #e0a750;
  --warn-bg: #2a2113;
  --warn-line: #5b4520;
  --danger: #f08b83;
  --danger-bg: #2c1917;
  --danger-line: #5c302c;

  --shadow: 0 6px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
  --scrim: rgba(4, 7, 11, .66);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------------------ topbar --- */
header.topbar {
  background: var(--topbar);
  color: var(--topbar-ink);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: none;
}

.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  overflow: hidden;
}

/* logo perusahaan biasanya dibuat untuk latar terang: beri alas putih */
.brand-mark.has-logo { width: auto; min-width: 30px; max-width: 120px; padding: 2px 4px; background: #fff; }
.brand-mark img { display: block; height: 26px; width: auto; max-width: 112px; object-fit: contain; }

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.brand-line strong { font-weight: 700; letter-spacing: .02em; }

.brand-line small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  opacity: .7;
}

.brand-company {
  font-size: 11px;
  color: var(--topbar-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.brand-company:empty { display: none; }

nav.tabs { display: flex; gap: 2px; height: 100%; }

nav.tabs button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--topbar-ink-dim);
  font: inherit;
  padding: 0 14px;
  height: 100%;
  cursor: pointer;
  border-radius: 0;
}

nav.tabs button:hover { color: var(--topbar-ink); }
nav.tabs button.active { color: var(--topbar-ink); border-bottom-color: var(--accent-line); font-weight: 600; }

.topbar .spacer { flex: 1; }

.status-pill {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255, 255, 255, .12);
  padding: 3px 9px;
  border-radius: 99px;
}

#themeToggle {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--topbar-ink);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.3;
}

#themeToggle:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3); }
#themeToggle .ico { display: inline-block; width: 1.1em; text-align: center; margin-right: 4px; }

/* -------------------------------------------------------------- layout - */
main { padding: 20px; max-width: 1680px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.card > h2 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card > h2 .spacer { flex: 1; }
.card-body { padding: 16px; }

.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-actions .spacer { flex: 1; }

/* ------------------------------------------------------------- controls - */
button, .btn {
  font: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  padding: 6px 12px;
  cursor: pointer;
}

button:hover { border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
button.ghost:hover { background: var(--hover); color: var(--ink); }
button.danger { color: var(--danger); border-color: var(--danger-line); }
button.danger:hover { background: var(--danger-bg); }
button.tiny { padding: 2px 7px; font-size: 12px; line-height: 1.4; }

input, select, textarea {
  font: inherit;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 5px 8px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}

input[readonly], input:disabled { background: var(--paper-2); color: var(--ink-soft); }
label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 600;
}

.grid { display: grid; gap: 0 16px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid > .span-2 { grid-column: span 2; }
.grid > .span-3 { grid-column: span 3; }

.hint { font-size: 12px; color: var(--ink-soft); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
a { color: var(--accent-text); }

/* --------------------------------------------------------------- tables - */
table.grid-table { width: 100%; border-collapse: collapse; }

table.grid-table th {
  background: var(--thead);
  color: var(--thead-ink);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--thead-line);
  white-space: nowrap;
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
}

table.grid-table td {
  border: 1px solid var(--line);
  padding: 3px 6px;
  vertical-align: middle;
  background: var(--paper);
}

table.grid-table tbody tr:nth-child(even) td { background: var(--zebra); }
table.grid-table tbody tr:hover td { background: var(--hover); }
table.grid-table td input, table.grid-table td select { border-color: transparent; background: transparent; }
table.grid-table td input:hover, table.grid-table td select:hover { border-color: var(--line-strong); background: var(--paper); }
table.grid-table td input:focus, table.grid-table td select:focus { background: var(--paper); }

tr.section-row td {
  background: var(--band) !important;
  font-weight: 700;
  border-top: 2px solid var(--line-strong);
}

tr.section-row input { font-weight: 700; }

tr.total-row td {
  background: var(--band) !important;
  font-weight: 700;
  border-top: 2px solid var(--line-strong);
}

.cell-no { width: 48px; }
/* kode seperti "HW.7.12" harus terbaca utuh */
.cell-code { width: 104px; }
td.stick-1 > input.mono { padding-left: 6px; padding-right: 4px; }
.cell-md { width: 82px; }
/* empat tombol aksi (duplikat, naik, turun, hapus) harus muat satu baris */
.cell-act { width: 118px; white-space: nowrap; }
.cell-price { width: 150px; }
.cell-bill { width: 78px; }
/* jabatan lengkap spt "Middle Support Engineer - Application" perlu ruang;
   sisa lebar layar tetap diberikan ke kolom Task yang paling panjang isinya */
.cell-role { width: 235px; }
.cell-res { width: 240px; }

/* select di dalam tabel: penuhi lebar sel dan potong dengan elipsis,
   teks lengkapnya tetap bisa dilihat lewat tooltip */
table.grid-table td select {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* dropdown Roles hanya muncul untuk resource dengan lebih dari satu role -
   beri penanda visual supaya jelas ini bisa diganti */
table.grid-table td select[data-f="role_group"] {
  border-color: var(--accent-soft-line);
  background: var(--accent-soft);
}

table.grid-table td select[data-f="role_group"]:hover,
table.grid-table td select[data-f="role_group"]:focus {
  border-color: var(--accent);
  background: var(--paper);
}

/* group divider inside the master task list */
tr.group-row td {
  background: var(--paper-2) !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 2px solid var(--line-strong);
}

tr.group-row .next-code {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-text);
  font-weight: 600;
}

/* ---------------------------------------------------------- sheet tabs -- */
.sheet-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 10px 16px 0; }

.sheet-tab {
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--paper-2);
  border-radius: 5px 5px 0 0;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.sheet-tab.active { background: var(--paper); border-color: var(--line-strong); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
.sheet-tab { white-space: nowrap; }
.sheet-tab .x { color: var(--ink-soft); font-size: 12px; }
.sheet-tab .x:hover { color: var(--danger); }

/* --------------------------------------------------------------- totals - */
.totalbar {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 12px 16px;
  background: var(--band);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-wrap: wrap;
}

.totalbar .spacer { flex: 1; }
.totalbar .metric { display: flex; flex-direction: column; }
.totalbar .metric span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.totalbar .metric strong { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- toast -- */
#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.toast {
  background: var(--thead);
  color: var(--thead-ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  max-width: 380px;
  animation: pop .18s ease-out;
}

.toast.err { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.toast.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }

@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------- modal -- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.modal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: min(560px, 92vw);
  max-height: 88vh;
  max-height: min(88vh, calc(100dvh - 32px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal.wide { width: min(820px, 94vw); }
.modal h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.modal .modal-body { padding: 18px; overflow: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.modal h3, .modal .modal-foot { flex: none; }
.modal .modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

.badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--accent-soft-line);
}

.badge.off { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }

.empty { padding: 40px 16px; text-align: center; color: var(--ink-soft); }
.empty p { margin: 0 0 12px; }

/* ------------------------------------------------- editor toolbar & extras */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  flex-wrap: wrap;
}

.toolbar .spacer { flex: 1; }
.toolbar .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }

details.more {
  border-top: 1px dashed var(--line);
  margin: 4px 0 14px;
  padding-top: 10px;
}

details.more > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  list-style: none;
}

details.more > summary::before { content: "\25B8  "; }
details[open].more > summary::before { content: "\25BE  "; }
details.more > summary:hover { color: var(--accent-text); }

.subtabs { display: flex; gap: 4px; margin-bottom: 14px; }

.subtabs button {
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 5px 14px;
}

.subtabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* pre-export checks */
.checks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.check {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.check.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.check.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }

/* bulk-add dialog */
fieldset.calc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px 2px;
  margin: 0 0 14px;
}

fieldset.calc legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 6px;
}

.calc-out {
  background: var(--band);
  border-radius: 4px;
  padding: 7px 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.calc-out strong { font-family: var(--mono); font-size: 17px; }

.picklist {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 260px;
  overflow: auto;
}

label.pick {
  display: grid;
  grid-template-columns: 20px 100px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}

label.pick:hover { background: var(--hover); }
label.pick input { width: auto; }

/* next-code helper inside the task dialog */
.code-help {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-line);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--ink);
}

.code-help strong { font-family: var(--mono); }
.code-help .gaps { color: var(--warn); }


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* kolom Roles yang terisi otomatis (bukan input) */
.role-auto { color: var(--ink); }
table.grid-table td .role-auto { display: inline-block; padding: 4px 2px; }
.badge.alt { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
textarea { min-height: 42px; resize: vertical; }

/* ===================================================== login & logout === */
#loginOverlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(6px); padding: 20px;
}
#loginOverlay .login-card {
  width: 100%; max-width: 380px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 28px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px;
}
#loginOverlay .login-brand { font-size: 22px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 12px; }
#loginOverlay .login-brand .brand-mark { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
#loginOverlay .login-brand .brand-mark.has-logo { width: auto; height: 48px; max-width: 160px; border: 1px solid var(--line); }
#loginOverlay .login-brand .brand-mark.has-logo img { height: 40px; max-width: 150px; }
#loginOverlay .login-brand.with-logo { flex-direction: column; align-items: flex-start; gap: 10px; }
#loginOverlay .login-company { margin: -8px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
#loginOverlay .login-company:empty { display: none; }
#loginOverlay .login-brand small { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: .5px; }
#loginOverlay .login-sub { margin: -6px 0 2px; color: var(--ink-soft); font-size: 13px; }
#loginOverlay .login-err { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; }
#loginOverlay .login-hint { text-align: center; color: var(--ink-soft); font-size: 12px; margin: 2px 0 0; }
#loginOverlay .login-hint:empty { display: none; }
#loginOverlay button.primary { width: 100%; padding: 11px; font-size: 15px; }
.logout-btn {
  margin-left: 8px; background: transparent; color: var(--topbar-ink-dim);
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.logout-btn:hover { color: var(--topbar-ink); border-color: var(--topbar-ink); }

/* ===================================================== banner & notice === */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
}
.banner[hidden], .notice[hidden] { display: none; }
.banner > span { flex: 1; }

.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.notice strong { font-weight: 700; }
.notice .hint { color: inherit; opacity: .85; display: block; margin-top: 2px; }

/* ============================================================ pengaturan == */
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.settings-grid .card { margin-bottom: 0; }
.settings-side { display: grid; gap: 16px; }
.normal-case { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 600;
}
div.field { margin-bottom: 14px; }

.brand-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.preview-pane {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.preview-pane .pv-top {
  background: var(--topbar);
  color: var(--topbar-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.preview-pane .pv-top .brand-mark { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
.preview-pane .pv-top .brand-mark.has-logo { height: 26px; width: auto; }
.preview-pane .pv-top .brand-mark img { height: 20px; }
.preview-pane .pv-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.preview-pane .pv-tab { margin-left: auto; padding-bottom: 2px; border-bottom: 3px solid var(--accent-line); font-weight: 600; font-size: 12px; }
.preview-pane .pv-body { padding: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--paper); }
.preview-pane .pv-body .badge { font-family: var(--sans); }
.preview-pane .pv-cap { padding: 4px 10px; font-size: 11px; color: var(--ink-soft); background: var(--paper-2); border-top: 1px solid var(--line); }

.color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.color-row input[type="color"] { width: 44px; height: 34px; padding: 2px; cursor: pointer; flex: none; }
.color-row #b_accent { width: 110px; flex: none; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }

.logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-box {
  min-width: 64px;
  height: 48px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: 4px 8px;
  background: #fff;
  color: #5b6675;
  font-size: 11px;
}
.logo-box img { max-height: 40px; max-width: 160px; display: block; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; }
dl.kv dt { color: var(--ink-soft); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#s_list { margin-top: 14px; }
#s_list table { font-size: 13px; }

/* ===================================================== tombol simpan HP == */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  border-radius: 99px;
  padding: 12px 22px;
  min-height: 46px;
  font-weight: 700;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}

/* ============================================== tabel editor (spreadsheet) */
.table-wrap { position: relative; }
.sheet-wrap { --c1: 104px; }
.tname { overflow-wrap: anywhere; }

/* =============================================================== tablet === */
/* Di bawah 1280 px tabel editor tidak muat lagi: jadikan area scroll sendiri
   (seperti spreadsheet) - header & baris total menempel, kolom Task No dan
   Task tetap terlihat saat digeser ke kanan. Desktop lebar tidak berubah. */
@media (max-width: 1279px) {
  .sheet-wrap {
    --c1: 100px;
    overflow: auto;
    max-height: 78vh;
    max-height: min(78dvh, calc(100dvh - var(--topbar-h) - 24px));
    -webkit-overflow-scrolling: touch;
  }
  .sheet-wrap > table.grid-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 1200px;
  }
  .sheet-wrap > table.grid-table th,
  .sheet-wrap > table.grid-table td { border-width: 0 1px 1px 0; }
  .sheet-wrap > table.grid-table thead th { position: sticky; top: 0; z-index: 3; }
  .sheet-wrap .stick-1 { position: sticky; left: 0; z-index: 2; }
  .sheet-wrap .stick-2 { position: sticky; left: var(--c1); z-index: 2; }
  .sheet-wrap .stick-2,
  .sheet-wrap .stick-span { box-shadow: inset -1px 0 0 var(--line-strong), 8px 0 8px -8px rgba(0, 0, 0, .35); }
  .sheet-wrap > table.grid-table thead th.stick-1,
  .sheet-wrap > table.grid-table thead th.stick-2 { z-index: 5; }
  .sheet-wrap thead .stick-2 { box-shadow: inset -1px 0 0 var(--thead-line), 8px 0 8px -8px rgba(0, 0, 0, .35); }
  .sheet-wrap tfoot td { position: sticky; bottom: 0; z-index: 3; box-shadow: inset 0 2px 0 var(--line-strong); }
  .sheet-wrap tfoot .stick-1 { z-index: 4; box-shadow: inset 0 2px 0 var(--line-strong), inset -1px 0 0 var(--line-strong), 8px 0 8px -8px rgba(0, 0, 0, .35); }
  .sheet-wrap tr.section-row td { border-top: 0; box-shadow: inset 0 2px 0 var(--line-strong); }
  .sheet-wrap tr.section-row td.stick-span { box-shadow: inset 0 2px 0 var(--line-strong), inset -1px 0 0 var(--line-strong), 8px 0 8px -8px rgba(0, 0, 0, .35); }
  .sheet-wrap .cell-code { width: var(--c1); }
  .sheet-wrap .cell-res { width: 210px; }
  .sheet-wrap .cell-role { width: 210px; }
  .sheet-wrap .cell-bill { width: 76px; }
  .sheet-wrap .cell-md { width: 88px; }
  .sheet-wrap .cell-price { width: 150px; }
  .sheet-wrap td.num { white-space: nowrap; }
  .sheet-wrap .cell-act { width: 132px; }
  .sheet-wrap td.stick-2 { font-size: 13px; line-height: 1.3; }
  .sheet-wrap .tname {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

/* ========================================================= tablet tegak == */
@media (max-width: 899px) {
  header.topbar {
    flex-wrap: wrap;
    height: auto;
    gap: 6px 10px;
    padding: 6px 12px 0;
  }
  .topbar .brand { flex: 1 1 auto; min-height: 40px; }
  .topbar .spacer, .status-pill { display: none; }
  nav.tabs {
    order: 10;
    flex: 1 0 100%;
    height: 42px;
    margin: 0 -12px;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 1 0 auto; padding: 0 12px; }
  .logout-btn { margin-left: 0; }
  .banner { padding: 8px 12px; flex-wrap: wrap; }

  main { padding: 10px; }
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > .span-2, .grid > .span-3 { grid-column: 1 / -1; }
  table.grid-table th { position: static; }
  .sheet-wrap > table.grid-table thead th { position: sticky; }
  .x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .x-scroll > table.grid-table { min-width: 640px; }

  .sheet-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px 0; scrollbar-width: thin; }
  .sheet-tab { flex: none; }
  .kbd-hint { display: none; }

  body.show-fab .fab { display: inline-flex; align-items: center; }
  #toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .toast { max-width: none; }
}

/* =================================================================== HP === */
@media (max-width: 699px) {
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-line small { display: none; }
  nav.tabs .opt { display: none; }
  nav.tabs button { padding: 0 9px; }
  .brand-company { max-width: 52vw; }
  #themeToggle .lbl { display: none; }
  #themeToggle .ico { margin-right: 0; }

  .card > h2 { flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
  .card-body { padding: 12px; }

  /* toolbar: 2 baris rapi (baris & section | sheet), tombol sama lebar */
  .toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
  }
  .toolbar .sep, .toolbar .spacer { display: none; }
  .toolbar button { padding: 8px 4px; min-height: 42px; white-space: normal; line-height: 1.2; font-size: 13px; }

  .doc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
  .doc-actions .spacer { display: none; }
  .doc-actions button { min-height: 42px; padding: 8px 4px; white-space: normal; line-height: 1.2; }
  .doc-actions #btnSaveExport { grid-column: 1 / -1; }
  .doc-actions #saveState { grid-column: 1 / -1; order: 9; text-align: center; }

  .totalbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; }
  .totalbar .spacer { display: none; }
  .totalbar .checks { grid-column: 1 / -1; justify-content: flex-start; }
  .totalbar .metric strong { font-size: 16px; overflow-wrap: anywhere; }

  .sheet-wrap { --c1: 96px; max-height: 72vh; max-height: min(72dvh, calc(100dvh - var(--topbar-h) - 24px)); }
  .sheet-wrap > table.grid-table { min-width: 1065px; }   /* kolom Task ~135 px */
  .sheet-wrap .cell-res, .sheet-wrap .cell-role { width: 196px; }
  .sheet-wrap .cell-price { width: 146px; }
  .sheet-wrap td.stick-2 { font-size: 12px; line-height: 1.25; }

  /* dialog: selebar layar, mulai dari atas (aman saat keyboard muncul) */
  .modal-backdrop { align-items: flex-start; padding: 10px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .modal, .modal.wide {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 12px;
  }
  .modal h3 { padding: 12px 14px; }
  .modal .modal-body { padding: 14px; }
  .modal .modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal .modal-foot button { flex: 1; min-height: 44px; }
  .picklist { max-height: 38vh; max-height: 38dvh; }
  label.pick { grid-template-columns: 20px 84px 1fr; }

  /* daftar dokumen & riwayat: jadi kartu, bukan tabel 8 kolom */
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm td { overflow-wrap: anywhere; min-width: 0; }
  table.stack-sm thead { display: none; }
  table.stack-sm tbody { padding: 4px 10px 10px; }
  table.stack-sm tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 10px;
    padding: 8px 12px 10px;
    background: var(--paper);
  }
  table.stack-sm td,
  table.stack-sm tbody tr:nth-child(even) td,
  table.stack-sm tbody tr:hover td { border: 0; background: transparent; padding: 2px 0; }
  table.stack-sm td[data-label] { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.stack-sm td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex: none;
    padding-top: 2px;
    font-family: var(--sans);
  }
  table.stack-sm td.cell-title { font-size: 15px; padding-bottom: 4px; text-align: left; }
  table.stack-sm td.cell-act { width: 100%; display: flex; gap: 8px; padding-top: 8px; }
  table.stack-sm td.cell-act button { flex: 1; min-height: 40px; font-size: 14px; }
  table.stack-sm td.cell-act:empty { display: none; }

  .brand-previews { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 1fr; gap: 0; }
  dl.kv dd { margin-bottom: 8px; }
}

/* ======================================================= layar sentuh ===== */
/* Font 16px mencegah iPhone/iPad melakukan zoom otomatis saat input disentuh;
   target sentuh minimal ~34-40px. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  button { min-height: 38px; }
  button.tiny { min-width: 34px; min-height: 34px; font-size: 14px; padding: 2px 8px; }
  .sheet-wrap { --c1: 112px; }
  .sheet-wrap .cell-act { width: 160px; }
  .sheet-tab { padding: 9px 14px; }
  .sheet-tab .x { padding: 6px 8px; margin: -6px -8px -6px -2px; font-size: 14px; }
  .subtabs button { min-height: 40px; }
  .swatch { width: 32px; height: 32px; min-height: 0; }
}
@media (pointer: coarse) and (max-width: 699px) {
  .sheet-wrap { --c1: 106px; }
  .sheet-wrap > table.grid-table { min-width: 1100px; }
}

/* baris total editor: sel "Total" + sel kosong tampak menyatu seperti dulu */
tr.total-row td.stick-span { border-right-style: hidden; }
tr.total-row td.total-gap { border-left-style: hidden; }
@media (max-width: 699px) {
  table.stack-sm td[data-label]:empty { display: none; }
}