/*
 * PADUM design tokens — shared by the admin app and the public site.
 *
 * Colours come from the 2024 CI guideline (PADUM-CI-gudeline.pdf, p.8) and
 * carry the semantic roles the requirements doc assigns (§8.1). The two
 * sources are complementary: the brand book supplies hexes, the spec supplies
 * meanings.
 *
 * Typography follows the CI's own choices where they are web-licensable.
 * IBM Plex Sans / IBM Plex Sans Thai are exactly what the brand book
 * specifies for subheads and body. The headline faces are not: DIN Condensed
 * and FC Bluewhale are both commercial, so Barlow Condensed stands in for DIN
 * (same grotesk-derived condensed character) and IBM Plex Sans Thai Bold for
 * Thai headlines. Swapping in licensed files later is a change to
 * --font-head alone.
 */

:root {
  /* --- brand, from CI p.8 primary + supporting ------------------------- */
  --brand:        #244D78;   /* primary: nav, headers, primary buttons     */
  --brand-dark:   #1A3A5C;   /* pressed states, high-contrast text on pale */
  --brand-mid:    #346B8F;   /* supporting: secondary surfaces             */
  --brand-soft:   #539DB8;   /* supporting: links, quiet accents           */
  --brand-pale:   #95D1EB;   /* supporting: pills, tinted backgrounds      */
  --brand-wash:   #E8F2F8;   /* derived: lightest tint for table stripes   */

  /* CI yellow. A FILL, never a button with white text — #FAC669 against
     white is ~1.6:1 and fails WCAG at any size. Dark text only. */
  --accent:       #FAC669;
  --accent-warm:  #EEA570;
  --accent-wash:  #FEF4E0;
  --accent-ink:   #7A4E06;   /* readable text on the yellow wash           */

  /* CI coral. Also a primary brand colour, so it does NOT mean "error" —
     it means "a person has to do something here": overdue, blocking, or
     destructive. Used sparingly enough to keep that signal. */
  --danger:       #D2564E;
  --danger-wash:  #FBEDEC;
  --danger-tint:  #F8CFCB;   /* badge fill over a photo; --danger-ink = 5.30 */
  --danger-ink:   #96322B;

  --warn:         #B45309;   /* kept for prose warnings on tinted panels   */
  --warn-wash:    #FEF3C7;

  /* Green is off-palette on purpose: it is the only colour meaning "done
     and needs nothing from you" — fully booked, paid, complete. Never use
     it decoratively or it stops carrying that. */
  --success:      #1F8A5F;
  --success-wash: #E4F5EE;
  --success-tint: #A8E6C7;   /* badge fill over a photo; --success-ink = 5.26 */
  --success-ink:  #15613F;

  /*
   * Status scale (§8.1). Five roles, and every status pill in either app
   * resolves to one of them:
   *
   *   green   full · paid · complete        — done, needs nothing
   *   blue    open · upcoming · normal      — healthy, in progress
   *   yellow  partly filled · pending · needs input
   *   coral   needs action now · overdue · blocking
   *   grey    staff · inactive · n/a
   */

  /* --- neutrals -------------------------------------------------------- */
  --bg:           #F6F6F6;
  --surface:      #FFFFFF;
  --surface-alt:  #EEF1F5;
  --border:       #DDE2E8;
  --border-strong:#C3CCD6;
  --text:         #1B2733;
  --text-muted:   #5C6577;
  --text-faint:   #8A94A3;

  /* --- type ------------------------------------------------------------ */
  --font-head: 'Barlow Condensed', 'IBM Plex Sans Thai', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;

  /* Six sizes, and only six.
   *
   * The admin stylesheet had grown eighteen distinct font-size values, which
   * is how the Bookings table (.9375rem) and the Activity table (.8125rem)
   * ended up different sizes for the same kind of content — nobody chose that,
   * it accumulated. A rule that wants a size picks the nearest of these
   * instead of inventing one.
   *
   * The steps are ~1.2x apart, except body→meta which is tighter: those two
   * sit side by side inside a table cell all over the app, and a full step
   * between them reads as a hierarchy that isn't there.
   */
  --fs-page:  1.8rem;    /* the h1 naming a page; 2.1rem on desktop        */
  --fs-head:  1.25rem;   /* section and panel headings                     */
  --fs-sub:   1rem;      /* card titles, h4                                */
  --fs-body:  .9375rem;  /* the default: table cells, fields, prose        */
  --fs-meta:  .8125rem;  /* second lines, .muted-sm, timestamps            */
  --fs-micro: .6875rem;  /* column headings, tab bar, uppercase labels     */

  /* --- banks ------------------------------------------------------------
   * One accent per bank, taken from that bank's own identity so an account is
   * recognised before its name is read.
   *
   * Every one is measured against both surfaces and clears 3:1, the threshold
   * for a non-text mark. Two are darkened from the bank's literal colour
   * because the literal one cannot be seen on white: Krungthai's #01A0E2 sits
   * at 2.95 and Krungsri's #FEC43B at 1.59. These are used as a stripe and a
   * dot, never behind text — that would need 4.5:1 and none of them would pass.
   */
  --bank-kbank: #138F2D;   /* Kasikorn green            4.20 on white */
  --bank-ttb:   #1C4E9C;   /* ttb blue                  8.02 */
  --bank-ktb:   #0083BA;   /* Krungthai, darkened       4.24 */
  --bank-bay:   #A87400;   /* Krungsri gold, darkened   4.07 */
  --bank-cimb:  #EC1C24;   /* CIMB red                  4.41 */
  --bank-none:  #8A94A3;   /* no bank recorded */

  /* --- shape ----------------------------------------------------------- */
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(27, 39, 51, .06), 0 1px 3px rgba(27, 39, 51, .10);
  --shadow-lg: 0 8px 28px rgba(27, 39, 51, .16);

  /* Height of the mobile bottom tab bar, so page content can reserve room
     for it in one place rather than every view guessing. */
  --tabbar-h: 60px;
  --topbar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any explicit `display` on an element beats the UA stylesheet's
   `[hidden] { display: none }`, so a hidden panel with `display: grid` stays
   on screen. This restores `hidden` as a reliable switch — without it the
   admin app renders its login screen and its dashboard simultaneously. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/*
 * Barlow Condensed at 700 is very dense — condensed letterforms plus heavy
 * weight plus tight leading read as a solid block. 600 with more leading and
 * a little tracking keeps the CI's condensed voice and stays legible at the
 * small sizes this app actually uses.
 */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .015em;
  margin: 0 0 .4em;
}

/* The CI specifies all-caps for DIN Condensed headlines (p.9). Applied to
   the top level only — all-caps Thai is not a thing, and the Thai fallback
   face inherits this rule otherwise. */
h1 { font-size: 2rem; text-transform: uppercase; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
:lang(th) h1 { text-transform: none; }

a { color: var(--brand); }

/* ------------------------------------------------------- brochure prose */
/* Shared because /shared/prose.js builds this markup for both apps. */
/*
 * Brochure fields are one item per line. As a single pre-formatted block a
 * seven-item exclusion list read as a paragraph; as a list it reads as a list.
 */
.prose-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .3rem;
  font-size: .9375rem;
  line-height: 1.55;
}
.prose-list li { padding-left: .15rem; }
.prose-list li::marker { color: var(--brand-soft); }

/* Itinerary lines are "5 Dec: 4 dives — …"; emphasising the date turns the
   list into a schedule. */
.prose-list__label {
  font-weight: 600;
  color: var(--brand-dark);
  margin-right: .35rem;
}

/* Caveats, not items — set apart so they stop competing with the list. */
.prose-note {
  margin: .6rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
}
.prose-note + .prose-note { margin-top: .3rem; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------ pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .18em .7em;
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pill--brand   { background: var(--brand-wash);   color: var(--brand-dark); }
.pill--accent  { background: var(--accent-wash);  color: var(--accent-ink); }
.pill--danger  { background: var(--danger-wash);  color: var(--danger-ink); }
.pill--warn    { background: var(--warn-wash);    color: var(--warn); }
.pill--success { background: var(--success-wash); color: var(--success-ink); }
.pill--muted   { background: var(--surface-alt);  color: var(--text-muted); }

/*
 * Quiet variant, for a state that is true of nearly everything.
 *
 * Every trip currently lacks an installment schedule, so 24 solid badges
 * teach staff to ignore the colour entirely. Outlined keeps the same hue and
 * the same meaning while letting a genuinely per-item urgent state — one
 * overdue payment among many — still stand out beside it.
 */
.pill--quiet {
  background: transparent;
  border: 1px solid currentColor;
  font-weight: 500;
  opacity: .85;
}

/* --------------------------------------------------- language switch */
/*
 * One control, top-right, shared by both apps. It was previously duplicated:
 * the public site had it in its header, while the admin had two separate
 * inline copies with independent state, so the two admin pages could disagree
 * about which language was showing.
 */
.lang-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}
.lang-switch button {
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  min-height: 36px;
  padding: .25rem .8rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.lang-switch button.is-active { background: var(--brand); color: #fff; }
.lang-switch button:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: -3px;
}
/* On a dark bar the control needs to read as part of it, not as a hole. */
.lang-switch--on-dark {
  border-color: rgba(255, 255, 255, .45);
  background: transparent;
}
.lang-switch--on-dark button { color: rgba(255, 255, 255, .85); }
.lang-switch--on-dark button.is-active { background: #fff; color: var(--brand); }

/* ---------------------------------------------------------------- buttons */
/*
 * Two button sizes and no others: .btn at 44px for a dialog's own footer, and
 * .btn--sm at 36px everywhere else — page headers, table rows, card heads.
 *
 * The explicit font-size is not redundant. `font: inherit` alone made a button
 * 15px inside a table and 16px inside a dialog, so the same control was two
 * sizes depending on where it stood.
 */
.btn {
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  /* 44px minimum touch target — 70% of usage is mobile (§1). */
  min-height: 44px;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--border-strong);
}
.btn:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}