/*
 * Application layer on top of the Organic design system.
 *
 * Organic supplies the tokens and the component classes (.btn, .card, .tag, .field,
 * .table, .dialog). Nothing here redefines a colour, a font or a radius — every value
 * below is either a token or a layout rule Organic does not cover. Logical properties
 * (inline-start/end) are used throughout so one stylesheet serves LTR and RTL.
 */

@import url('/fonts/app-fonts.css');   /* Arabic + the LANG-01 scripts (self-hosted; no network) */

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

[dir="rtl"] {
  --font-heading: "Baloo Bhaijaan 2", "Rubik", sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  font-family: var(--font-body);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .btn,
[dir="rtl"] .card-title, [dir="rtl"] .dialog-title { font-weight: 700; letter-spacing: 0; }

/* LANG-01: script coverage per interface language. Each stack starts with the self-hosted
   Noto face, then the fonts iOS/macOS/Android ship for that script, then the design fonts for
   Latin fragments (IDs, codes, dates). Urdu is Nastaliq and needs taller lines. */
:lang(bn) { --font-heading: "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Noto Sans", sans-serif;
            --font-body: "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Figtree", sans-serif; font-family: var(--font-body); }
:lang(hi) { --font-heading: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans", sans-serif;
            --font-body: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Figtree", sans-serif; font-family: var(--font-body); }
:lang(ur) { --font-heading: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Rubik", sans-serif;
            --font-body: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Rubik", sans-serif; font-family: var(--font-body); line-height: 1.9; }
:lang(ur) h1, :lang(ur) h2, :lang(ur) h3 { line-height: 1.7; }
:lang(bn) h1, :lang(bn) h2, :lang(hi) h1, :lang(hi) h2 { letter-spacing: 0; line-height: 1.5; }
/* Filipino and Turkish use the Latin design fonts (Latin-extended subsets are self-hosted). */
:lang(tr), :lang(fil) { --font-heading: "Caprasimo", "Figtree", sans-serif; --font-body: "Figtree", system-ui, sans-serif; }
.lang-picker { min-width: 8.5em; }
.input-compact { padding-block: 6px; }

a { color: var(--color-accent-700); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--color-surface); padding: 10px 16px; border-radius: 0 0 16px 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------------------------------------------------------------- app frame */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex: none; background: var(--color-surface);
  border-inline-end: 1px solid var(--color-divider);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 20px; }
.brand-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); flex: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 999px; border: 0; background: transparent;
  color: var(--color-text); font: inherit; text-align: start; cursor: pointer; width: 100%;
}
.nav-item:hover { background: var(--color-accent-100); }
.nav-item[aria-current="page"] { background: var(--color-accent); color: var(--color-bg); }
.nav-item[disabled] { opacity: .5; cursor: not-allowed; }
.nav-badge {
  background: var(--color-accent-2); color: var(--color-bg);
  border-radius: 999px; padding: 0 7px; font-size: 11px; min-width: 20px; text-align: center;
}
.nav-item[aria-current="page"] .nav-badge { background: var(--color-bg); color: var(--color-accent); }
.nav-section { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700); padding: 8px 12px 2px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg); position: sticky; top: 0; z-index: 20;
}
.topbar-spacer { flex: 1; }
.content { padding: 22px; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; }

.page-title { font-family: var(--font-heading); font-size: 26px; margin: 0; }
.page-sub { color: var(--color-neutral-700); font-size: 13px; }
.page-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }

/* ---------------------------------------------------------------- pieces */
.grid { display: grid; gap: 14px; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.banner {
  border-radius: 16px; padding: 11px 16px; font-size: 13px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.banner-warn { background: var(--color-accent-200); color: var(--color-accent-900); }
.banner-info { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.banner-note { background: var(--color-neutral-200); color: var(--color-neutral-900); }

.kpi { background: var(--color-surface); border-radius: var(--radius-lg); padding: 16px 18px; }
.kpi-value { font-family: var(--font-heading); font-size: 28px; line-height: 1.1; }
.kpi-label { font-size: 12px; color: var(--color-neutral-700); margin-top: 4px; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); background: var(--color-surface); }
table.table { width: 100%; border-collapse: collapse; min-width: 620px; }
table.table th { text-align: start; padding: 10px 14px; font-size: 12px;
  color: var(--color-neutral-700); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
table.table td { padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--color-divider); }
table.table tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--color-accent-100); }
.cell-sub { font-size: 11px; color: var(--color-neutral-700); }

.empty { padding: 34px 20px; text-align: center; color: var(--color-neutral-700); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--color-neutral-800); }
.field .req { color: var(--color-accent); }
.input, select.input, textarea.input {
  font: inherit; padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-400); background: var(--color-bg); color: var(--color-text);
  width: 100%; min-width: 0;
}
.input[disabled] { background: var(--color-neutral-200); cursor: not-allowed; }
.field-error { color: var(--color-accent-800); font-size: 12px; }
.field-hint { color: var(--color-neutral-700); font-size: 12px; }
.input[aria-invalid="true"] { border-color: var(--color-accent); }

/* Filter rows sit on a `.card`, whose own rule stacks children in a column; the row must be
   restated here or the inputs pile up vertically and hug the inline END — the left in Arabic.
   `justify-content: flex-start` follows the writing direction: right in Arabic, left in
   English. `align-items: flex-end` (the cross axis, now vertical) keeps inputs of different
   label heights on one baseline, and wrapping continues from the same start edge. */
.filters {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
  align-items: flex-end; gap: 10px;
}
.filters .field { min-width: 140px; }

/* Sign-in: the form and the demonstration list sit side by side only when there is room
   for both. Below that the list moves under the form instead of running off the screen. */
.signin-grid { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; }
@media (max-width: 760px) { .signin-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- dialog */
.backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  display: grid; place-items: center; padding: 16px; z-index: 50;
}
.dialog {
  background: var(--color-bg); border-radius: var(--radius-lg); padding: 20px;
  width: min(620px, 100%); max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg);
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-title { font-family: var(--font-heading); font-size: 20px; }
.dialog-body { font-size: 13px; color: var(--color-neutral-800); }
.dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dialog-grid .span2 { grid-column: span 2; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.toast {
  position: fixed; inset-inline: 0; bottom: 20px; margin-inline: auto; width: max-content;
  max-width: calc(100vw - 32px); z-index: 80;
  padding: 11px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow-md);
}
.toast-ok { background: var(--color-accent-2-800); color: var(--color-bg); }
.toast-warn { background: var(--color-accent-800); color: var(--color-bg); }

.mobile-only { display: none; }
.hamburger { display: none; }

/* ---------------------------------------------------------------- responsive
 * Below 900px the sidebar becomes a drawer. Every navigation item stays reachable —
 * the drawer holds the same list, so no administrative area is hidden on a phone.
 */
@media (max-width: 900px) {
  .hamburger { display: inline-flex; }
  .mobile-only { display: block; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .18s ease; width: 270px;
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 16px 14px 40px; }
  .page-title { font-size: 22px; }
  .page-actions { margin-inline-start: 0; width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .dialog-grid { grid-template-columns: 1fr; }
  .dialog-grid .span2 { grid-column: span 1; }
  .filters .field { min-width: 120px; flex: 1 1 140px; }

  /* Wide tables become stacked records rather than a horizontal scroll nobody finds. */
  table.stackable { min-width: 0; }
  table.stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stackable tr {
    display: block; border-bottom: 1px solid var(--color-divider); padding: 10px 12px;
  }
  table.stackable td {
    display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0;
  }
  table.stackable td::before {
    content: attr(data-label); font-size: 11px; color: var(--color-neutral-700);
    flex: none; max-width: 45%;
  }
}

@media (max-width: 480px) {
  .topbar { padding: 10px 14px; }
  .kpi-value { font-size: 23px; }
}

/* Printing.
 *
 * What a person prints is a RECORD — an employee file, a payslip, a report — so everything
 * that only makes sense on screen comes out: the navigation, the toolbar, every button
 * (including the ones inside table rows and the tab strip), transient toasts and any open
 * dialog. Checked in Chrome against a real employee record, where "Request renewal",
 * "Complete renewal", "Download" and the tab buttons were otherwise printed onto the page.
 *
 * Colours are forced to print legibly: the Organic palette is a light ink on a tinted
 * ground, which turns into grey-on-grey through a printer.
 */
@media print {
  .sidebar, .topbar, .page-actions, .toast { display: none !important; }
  /* Any control, wherever it sits. A link that is a real link still prints. */
  button, .btn, input[type="file"] { display: none !important; }
  /* A dialog is a conversation, not part of the record. */
  .dialog, .dialog-backdrop, .modal-backdrop { display: none !important; }

  .content { padding: 0; }
  body, .content, .card, .panel {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  /* Tables are the substance of most of these pages: keep their structure readable and
     stop a row being split across two sheets. */
  table { width: 100%; border-collapse: collapse; }
  th, td { border-bottom: 1px solid #999 !important; color: #000 !important; }
  tr, .card { break-inside: avoid; page-break-inside: avoid; }
  a[href] { text-decoration: none; color: #000 !important; }
}