/* ============================================================
   PRISM-only rules on top of the vendored idealapp design system.
   Keep this file thin; tokens and components come from styles.css / portal.css.
   Every value below is a design-system token or matches an idealapp page.
   ============================================================ */

/* ---- Top bar: `App › Page` crumb on the left, page actions on the right ----
   idealapp puts the page title in .s-page-head, never as a large H1 in the body. */
.prism-head-slot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.prism-head-slot .prism-crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.prism-crumb-step { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.prism-crumb a.idx-crumb-app { text-decoration: none; }
.prism-crumb a.idx-crumb-app:hover { color: var(--app-fg); }
.prism-crumb .idx-crumb-page { overflow: hidden; text-overflow: ellipsis; }
.prism-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prism-head-actions .select { min-width: 120px; }

/* ---- Links ----
   Next's <Link> renders <a>, which the browser underlines; idealapp never does.
   Inline prose links keep the link colour and underline on hover only. */
.s-body a, .s-page-head a { text-decoration: none; }
.s-body a.link, .record-head-sub a, .alert a, .field-hint a, .kpi-sub a, .empty p a { color: var(--app-fg-link); }
.s-body a.link:hover, .record-head-sub a:hover, .alert a:hover, .field-hint a:hover, .kpi-sub a:hover, .cell-strong a:hover { text-decoration: underline; }

/* ---- Body rhythm ---- */
.page-back { display: inline-flex; }
.tabs { margin-bottom: 16px; }
.alert + .table-wrap, .alert + .card, .alert + .section-title, .alert + .stack { margin-top: 16px; }
.table-wrap + .section-title, .card + .section-title, .record-head + .section-title { margin-top: 24px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.intro { font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg-3); margin: 0 0 12px; }

/* ---- Record header (pattern B: title + badge, sub-line, inline figures, actions) ---- */
.record-head { margin-bottom: 16px; }
.record-head-top { display: flex; align-items: flex-start; gap: 16px; }
.record-head-lead { flex-shrink: 0; }
.record-head-id { flex: 1; min-width: 0; }
.record-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.record-head-title h2 { margin: 0; font-size: var(--app-fs-h2); line-height: var(--app-lh-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--app-fg); }
.record-head-sub { margin-top: 2px; font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg-3); }
.record-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.record-head-note { margin: 12px 0 0; font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg-2); white-space: pre-wrap; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}
.fact .k { font-size: var(--app-fs-tiny); line-height: var(--app-lh-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-fg-3); font-weight: var(--fw-bold); margin-bottom: 4px; }
.fact .v { font-size: var(--app-fs-h3); line-height: var(--app-lh-h3); font-weight: var(--fw-bold); color: var(--app-fg); font-variant-numeric: tabular-nums; }
.fact .s { font-size: var(--app-fs-xs); line-height: var(--app-lh-xs); color: var(--app-fg-3); margin-top: 2px; }

/* ---- KPI tiles ---- */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi .value { font-variant-numeric: tabular-nums; }
/* Words and dates step down from the 28px figure size so a tile never wraps to three lines. */
.kpi .value.value-text { font-size: var(--app-fs-h2); line-height: var(--app-lh-h2); letter-spacing: -0.01em; }
.kpi .kpi-sub { font-size: var(--app-fs-xs); color: var(--app-fg-3); margin-top: 6px; }

/* ---- Empty states: the dashed frame is for bare page areas, not inside a card ---- */
.card > .empty, .table-wrap .empty { border: 0; background: transparent; padding: 40px 24px; }

/* ---- Alerts ---- */
.alert .alert-actions { flex-shrink: 0; align-self: center; }

/* ---- Read-only definition lists: one field per row, label left, value right ---- */
.deflist { margin: 0; display: flex; flex-direction: column; }
.deflist-row { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--app-border); }
.deflist-row:first-child { padding-top: 0; }
.deflist-row:last-child { padding-bottom: 0; border-bottom: 0; }
.deflist-row dt { font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg-3); }
.deflist-row dd { margin: 0; font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .deflist-row { grid-template-columns: 1fr; gap: 2px; } }
/* Side-by-side detail cards on wide screens (e.g. contact details beside emergency contact) */
.detail-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 24px; align-items: start; }

/* ---- Forms: idealapp `.form-stack` rhythm (14px between rows) and `.row` pairs ---- */
.field-row { display: flex; align-items: flex-start; gap: 12px; }
.field-row > .field, .field-row > * { flex: 1; min-width: 0; }
.drawer-form > * + *, form .card > * + *, .form-stack > * + *, .modal-body form > * + * { margin-top: 14px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.drawer-foot, .modal-foot { display: flex; gap: 8px; justify-content: flex-end; }
/* Date inputs render 2px taller than text inputs in Chromium; hold the 34px control height. */
.input[type="date"], .input[type="month"], .input[type="time"] { height: 34px; }
input[type="file"].input { padding: 5px 8px; height: auto; }
/* A section title inside a form card or drawer is a sub-heading, not a page section. */
.card .section-title, .drawer .section-title, .modal .section-title {
  font-size: var(--app-fs-tiny);
  line-height: var(--app-lh-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-fg-3);
  margin: 24px 0 0;
}
.drawer-form > .section-title:first-child, form .card > .section-title:first-child { margin-top: 0; }
.field .cell-muted { color: var(--app-fg-muted); }

/* ---- Switch ----
   styles.css sizes .switch but gives it no box, so outside a flex parent it collapses. */
.switch { display: inline-block; vertical-align: middle; }
.switch-row { align-items: flex-start; }
.switch-row .switch { margin-top: 1px; }
.switch-text { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.switch-label { font-size: var(--app-fs-sm); line-height: var(--app-lh-sm); color: var(--app-fg); }
.switch-hint { font-size: var(--app-fs-xs); line-height: var(--app-lh-xs); color: var(--app-fg-3); }

/* ---- Tables ---- */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
th.align-right, td.align-right { text-align: right; }
th.align-center, td.align-center { text-align: center; }
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data td .btn-sm, table.data td .icon-btn { vertical-align: middle; }
/* Figures, dates and badges never wrap inside a dense row. */
table.data td.num, table.data th.num, table.data td.align-right, table.data .badge, table.data td .cell-sub { white-space: nowrap; }
table.data thead th { white-space: nowrap; }
table.data tr.total td { font-weight: var(--fw-bold); border-top: 1px solid var(--app-border-strong); background: var(--app-bg-sunken); }
table.data tr.row-muted td { color: var(--app-fg-3); }
table.data td .input.cell-input { height: 28px; padding: 2px 8px; font-size: 13px; width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.table-toolbar .left:empty { display: none; }

/* ---- Payslip lines ("explain this pay") ---- */
.payslip-lines table { width: 100%; border-collapse: collapse; }
.payslip-lines th, .payslip-lines td { padding: 6px 16px; font-size: 13px; border-bottom: 1px solid var(--app-border); }
.payslip-lines th { font-size: 12px; color: var(--app-fg-3); text-align: left; font-weight: var(--fw-medium); background: var(--app-bg-sunken); }
.payslip-lines td.num, .payslip-lines th.num { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-lines tr.group td { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-fg-3); padding-top: 14px; border-bottom: 0; }
.payslip-lines tr.total td { font-weight: var(--fw-medium); border-top: 1px solid var(--app-border-strong); }
.payslip-lines tr.net td { font-weight: var(--fw-bold); font-size: 14px; border-bottom: 0; }
.payslip-lines .derivation { display: block; font-size: 11px; color: var(--app-fg-3); }
/* Flush inside a card when the lines table is the card's only content. */
.card > .payslip-lines:only-child { margin: -24px; }
.card.compact > .payslip-lines:only-child { margin: -16px; }
.card > .payslip-lines:not(:only-child) { margin: 12px -24px -24px; }
.card.compact > .payslip-lines:not(:only-child) { margin: 12px -16px -16px; }
.payslip-lines thead th:first-child { border-top-left-radius: var(--radius-lg); }
.payslip-lines thead th:last-child { border-top-right-radius: var(--radius-lg); }

/* Icon-button tooltips: idealapp's fixed .rowtip bubble (portal.css), driven by TooltipLayer. */

/* ---- Misc ---- */
.flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.locked-hint { display: inline-flex; align-items: center; gap: 4px; }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--app-border); }
.attention-row:first-child { padding-top: 0; }
.attention-row:last-child { border-bottom: 0; padding-bottom: 0; }
.attention-row .ic { color: var(--app-fg-3); flex-shrink: 0; }

/* ---- Sign-in ---- */
.signin-card .dev-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--app-border); text-align: left; }
.signin-card .dev-form .field { margin-bottom: 10px; }
.signin-card .dev-hint { font-size: 11px; color: var(--app-fg-3); margin-top: 8px; }
.signin-card .btn { width: 100%; justify-content: center; }

/* ---- Print: annual statement ---- */
.print-only { display: none; }
@media print {
  .s-side, .s-page-head, .prism-head-actions, .tabs, .no-print { display: none !important; }
  .print-only { display: block !important; margin-bottom: 8px; }
  .shell-demo .s-main { margin: 0; }
  .card { border: 0; box-shadow: none; }
}

/* Page-level buttons on pages without a table: top of the body, right-aligned. */
.page-actions-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.table-toolbar .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---- Section titles: idealapp h3 size, so sections sit below the page crumb in weight ---- */
h1.section-title, h2.section-title, .section-title { font-size: var(--app-fs-h3); line-height: var(--app-lh-h3); font-weight: 600; letter-spacing: 0; }

/* ---- Timesheet grid (My Portal and the payslip Hours drawer) ---- */
.timesheet-grid { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.timesheet-grid th { text-align: left; font-size: var(--app-fs-xs); color: var(--app-fg-3); font-weight: var(--fw-medium); padding: 0 8px 8px; }
.timesheet-grid td { padding: 4px 8px; border-top: 1px solid var(--app-border); font-size: var(--app-fs-sm); }
.timesheet-scroll { overflow-x: auto; }
.timesheet-grid .num { text-align: right; width: 84px; }
.timesheet-grid td .input { min-width: 140px; }
.timesheet-grid .num .input { min-width: 0; }
.timesheet-grid .num .input { text-align: right; }
.timesheet-grid .day { white-space: nowrap; width: 72px; color: var(--app-fg-2); }
.timesheet-grid tr.weekend td { background: var(--app-bg-sunken); }
.timesheet-grid tr.weekend .day { color: var(--app-fg-3); }
.timesheet-grid tfoot th, .timesheet-grid tfoot td { text-align: left; font-weight: 600; border-top: 2px solid var(--app-border); padding-top: 10px; }