/* ============================================================
   OVERTIME.CSS — scoped design tokens for Overtime Management

   Every token and rule is scoped under `.ot-root` so the module's
   visual language never leaks into — or is overridden by — the
   global platform stylesheet. Dark mode follows the module root's
   own data-theme attribute (or the platform's <html data-theme>
   ancestor), kept in sync by overtime-center.js.

   Token palette is a direct copy of petty-cash.css's `.pc-root` set —
   same platform, same design language, different scope. See
   platform.css:206-221 for why `--white`/`--dark*` legacy tokens are
   never used here (the documented dark-mode trap).

   Sprint 1 (v1.25.0) — Module Skeleton + Unit Management.
   ============================================================ */

.ot-root {
  /* Product redesign (v1.31.24.0): Overtime no longer carries its own palette or
     fonts — every canonical token (canvas, surfaces, borders, text, status
     colours, fonts) is INHERITED from platform.css so this module renders in
     the same design language as the rest of the product. Only the module's
     own token NAMES remain, as aliases. See docs/DESIGN-SYSTEM.md §2. */
  --bg: var(--canvas); --card: var(--surface); --card2: var(--surface-2); --border2: var(--grid);
  --label: var(--faint);
  --primary: var(--accent); --primary-fg: var(--on-accent); --primary-tint: var(--accent-subtle); --primary-text: var(--accent); --primary-hover: var(--accent-hover);
  --green: var(--ok); --green-tint: var(--ok-bg); --green-bd: color-mix(in srgb, var(--ok) 28%, transparent);
  --amber: var(--warn); --amber-tint: var(--warn-bg); --amber-bd: color-mix(in srgb, var(--warn) 28%, transparent);
  --blue: var(--info); --blue-tint: var(--info-bg); --blue-bd: color-mix(in srgb, var(--info) 28%, transparent);
  --purple: #6E56A6; --purple-tint: color-mix(in srgb, #6E56A6 12%, transparent);
  --input: var(--input-bg); --input-bd: var(--input-border);

  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

.ot-root[data-theme="dark"],
[data-theme="dark"] .ot-root {
  --purple: #A98FD2; --purple-tint: color-mix(in srgb, #A98FD2 14%, transparent);
}

.ot-root, .ot-root * { box-sizing: border-box; }

/* Unified workspace geometry (matches .pc-content-pad / Analytics Executive:
   left-aligned, 1400 max, 56px left edge). */
.ot-content-pad {
  max-width: var(--workspace-max-width);
  margin-left: 0;
  margin-right: 0;
  padding: var(--workspace-pad-top) var(--workspace-pad-inline) var(--workspace-pad-bottom);
}

.ot-root input, .ot-root select, .ot-root textarea, .ot-root button { font-family: inherit; }
.ot-root input:focus, .ot-root select:focus, .ot-root textarea:focus {
  outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Mobile-only in-content screen switcher (hidden ≥768px — the platform panel
   menu handles navigation on desktop). */
.ot-embed-nav { display: flex; }
@media (min-width: 768px) { .ot-embed-nav { display: none !important; } }

/* Rekap Lembur (UX Refinement) — space-efficient checklist grid.
   auto-fill naturally collapses to one column on narrow/mobile widths
   with zero hand-written breakpoints. */
.ot-rekap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ot-rekap-grid label:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Production Polish FIX 1 — compact "Hari Ini | Kemarin | 📅 Tanggal"
   date-nav for Rekap Lembur/Daily Entry. Scoped override of the shared
   .pbsi-datepicker component (platform.css) that pulls the preset strip
   and trigger button onto one proportional row instead of the component's
   default full-width stacked layout — replaces the old redundant custom
   Hari Ini/prev/next button row (the presets already did this job).
   Deliberately its own class, not a reuse of platform.css's `.date-nav`
   (the main app header's date filter, with its own JS wiring in app.js)
   so this stays a pure visual override with zero shared behaviour. */
.ot-date-nav .pbsi-datepicker {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ot-date-nav .pbsi-datepicker-presets {
  margin-bottom: 0;
  flex-wrap: wrap;
}
.ot-date-nav .pbsi-datepicker-preset {
  flex: none;
  padding: 6px 12px;
  font-size: 11.5px;
  border-radius: 999px;
}
.ot-date-nav .pbsi-datepicker-trigger {
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  gap: 5px;
  font-size: 12px;
  border-radius: 999px;
}

/* ============================================================
   RESPONSIVE — table -> stacked-card reflow (Phase 9 mobile-first
   audit, Fix 1). All four tables previously wrapped their scroll
   container in a plain inline `style="...overflow-x:auto"` <div>
   (not a class), so no @media query could ever reach them. Moving
   the wrapper to a class (below) is what unlocks the overrides in
   this section at all.

   These four are real <table>/<tr>/<td> markup (unlike petty-cash.css's
   .pc-exp-row/.pc-exp-head, which are CSS-Grid divs), so the equivalent
   of that file's "hide header row, restructure into stacked rows"
   technique is: hide <thead>, turn each <tr> into a block-level card,
   and turn each <td> into a flex row with a `data-label` pseudo-header
   standing in for grid-template-columns + order. Every column's data
   is preserved (nothing dropped) — none of these four tables has Petty
   Cash's fallback affordance (a detail drawer) to move a column into,
   so unlike .pc-exp-row this does not hide any column outright.
   ============================================================ */

.ot-root .ot-records-table-wrap,
.ot-root .ot-closing-table-wrap,
.ot-root .ot-history-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;
}
.ot-root .ot-preview-table-wrap {
  flex: 1;
  min-width: 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
}

/* Row-level action buttons (Penyesuaian Data / recordRow()) — were
   inline padding:5px 10px;font-size:11.5px (~26px tall). min-height:44px
   matches the touch-target convention already used elsewhere in this
   app (style.css .btn-primary/.btn-today/.btn-icon, v1.20.8 / V1
   Redesign Phase 6). */
.ot-root .ot-row-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Riwayat Laporan (Report History) — 7 columns, the most cramped of
   the four, so it switches to cards at the widest breakpoint. */
@media (max-width: 768px) {
  .ot-root .ot-history-table thead { display: none; }
  .ot-root .ot-history-table,
  .ot-root .ot-history-table tbody { display: block; width: 100%; }
  .ot-root .ot-history-table tr {
    display: block;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
  }
  .ot-root .ot-history-table tr:first-child { border-top: none; }
  .ot-root .ot-history-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 !important;
    border-top: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .ot-root .ot-history-table td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: none;
  }
  .ot-root .ot-history-table td:last-child {
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* Penyesuaian Data (Records) — 6 columns + row actions. */
@media (max-width: 700px) {
  .ot-root .ot-records-table thead { display: none; }
  .ot-root .ot-records-table,
  .ot-root .ot-records-table tbody { display: block; width: 100%; }
  .ot-root .ot-records-table tr {
    display: block;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
  }
  .ot-root .ot-records-table tr:first-child { border-top: none; }
  .ot-root .ot-records-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 !important;
    border-top: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .ot-root .ot-records-table td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: none;
  }
  .ot-root .ot-records-table td:last-child {
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* Tutup Periode's Closing History (5 cols) + Report Builder's preview
   tables (3-4 cols — already flex-wrap onto their own full-width row
   above this breakpoint via the container's flex-wrap, so this is the
   point where even one alone gets too tight to stay a real table). */
@media (max-width: 640px) {
  .ot-root .ot-closing-table thead,
  .ot-root .ot-preview-table thead { display: none; }
  .ot-root .ot-closing-table, .ot-root .ot-closing-table tbody,
  .ot-root .ot-preview-table, .ot-root .ot-preview-table tbody { display: block; width: 100%; }
  .ot-root .ot-closing-table tr,
  .ot-root .ot-preview-table tr {
    display: block;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
  }
  .ot-root .ot-closing-table tr:first-child,
  .ot-root .ot-preview-table tr:first-child { border-top: none; }
  .ot-root .ot-closing-table td,
  .ot-root .ot-preview-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 !important;
    border-top: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .ot-root .ot-closing-table td[data-label]::before,
  .ot-root .ot-preview-table td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: none;
  }
}