/* input(794,36): run-time error CSS1030: Expected identifier, found '.'
input(794,77): run-time error CSS1025: Expected comma or open brace, found ')'
input(2949,34): run-time error CSS1030: Expected identifier, found '.'
input(2949,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2953,34): run-time error CSS1030: Expected identifier, found '.'
input(2953,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2954,34): run-time error CSS1030: Expected identifier, found '.'
input(2954,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2955,34): run-time error CSS1030: Expected identifier, found '.'
input(2955,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2956,34): run-time error CSS1030: Expected identifier, found '.'
input(2956,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2957,34): run-time error CSS1030: Expected identifier, found '.'
input(2957,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2958,34): run-time error CSS1030: Expected identifier, found '.'
input(2958,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2959,34): run-time error CSS1030: Expected identifier, found '.'
input(2959,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2960,34): run-time error CSS1030: Expected identifier, found '.'
input(2960,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2961,34): run-time error CSS1030: Expected identifier, found '.'
input(2961,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2962,34): run-time error CSS1030: Expected identifier, found '.'
input(2962,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2964,34): run-time error CSS1030: Expected identifier, found '.'
input(2964,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2992,34): run-time error CSS1030: Expected identifier, found '.'
input(2992,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2995,34): run-time error CSS1030: Expected identifier, found '.'
input(2995,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2996,34): run-time error CSS1030: Expected identifier, found '.'
input(2996,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2997,34): run-time error CSS1030: Expected identifier, found '.'
input(2997,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(2998,34): run-time error CSS1030: Expected identifier, found '.'
input(2998,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3000,34): run-time error CSS1030: Expected identifier, found '.'
input(3000,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3005,34): run-time error CSS1030: Expected identifier, found '.'
input(3005,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3008,34): run-time error CSS1030: Expected identifier, found '.'
input(3008,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3011,34): run-time error CSS1030: Expected identifier, found '.'
input(3011,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3012,34): run-time error CSS1030: Expected identifier, found '.'
input(3012,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3016,34): run-time error CSS1030: Expected identifier, found '.'
input(3016,50): run-time error CSS1025: Expected comma or open brace, found ')'
input(3037,5): run-time error CSS1030: Expected identifier, found '.'
input(3037,53): run-time error CSS1025: Expected comma or open brace, found ')'
input(3073,5): run-time error CSS1030: Expected identifier, found '.'
input(3073,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3074,5): run-time error CSS1030: Expected identifier, found '.'
input(3074,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3079,5): run-time error CSS1030: Expected identifier, found '.'
input(3079,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3080,5): run-time error CSS1030: Expected identifier, found '.'
input(3080,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3083,5): run-time error CSS1030: Expected identifier, found '.'
input(3083,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3084,5): run-time error CSS1030: Expected identifier, found '.'
input(3084,84): run-time error CSS1025: Expected comma or open brace, found ')'
input(3176,22): run-time error CSS1030: Expected identifier, found '.'
input(3176,38): run-time error CSS1025: Expected comma or open brace, found ')'
input(3331,10): run-time error CSS1030: Expected identifier, found '.'
input(3331,40): run-time error CSS1025: Expected comma or open brace, found ')'
input(3498,30): run-time error CSS1030: Expected identifier, found '.'
input(3498,61): run-time error CSS1025: Expected comma or open brace, found ')'
input(3506,30): run-time error CSS1030: Expected identifier, found '.'
input(3506,61): run-time error CSS1025: Expected comma or open brace, found ')'
input(3513,30): run-time error CSS1030: Expected identifier, found '.'
input(3513,61): run-time error CSS1025: Expected comma or open brace, found ')'
input(3514,30): run-time error CSS1030: Expected identifier, found '.'
input(3514,95): run-time error CSS1025: Expected comma or open brace, found ')'
input(3519,30): run-time error CSS1030: Expected identifier, found '.'
input(3519,95): run-time error CSS1025: Expected comma or open brace, found ')'
input(3538,30): run-time error CSS1030: Expected identifier, found '.'
input(3538,79): run-time error CSS1025: Expected comma or open brace, found ')'
input(3610,30): run-time error CSS1030: Expected identifier, found '.'
input(3610,79): run-time error CSS1025: Expected comma or open brace, found ')'
input(3611,30): run-time error CSS1030: Expected identifier, found '.'
input(3611,79): run-time error CSS1025: Expected comma or open brace, found ')'
input(4109,25): run-time error CSS1030: Expected identifier, found '.'
input(4109,30): run-time error CSS1025: Expected comma or open brace, found ')' */
/* Minimal reset — this app dropped Bootstrap Reboot (only grid/utility kept,
   #6 Q9), so this file owns box-sizing, margin/padding, and base typography. */

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

  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl,
  dd {
    margin: 0;
    padding: 0;
  }

  ul,
  ol {
    list-style: none;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: transparent;
    border: none;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    line-height: var(--tk-font-lao-lh);
    color: var(--tk-color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings take Noto Sans Lao, body copy stays on Phetsarath OT. Set on
     the elements themselves rather than on a class, so the pages that have
     not been migrated off plain <h5>/<h6> get it too. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--tk-font-lao-heading-family);
    font-weight: 700;
  }

  /* Latin numerals must stay tabular everywhere, per #6 Q6. */
  .tk-num,
  input[type='number'],
  .num-field {
    font-variant-numeric: tabular-nums;
  }

  /* UI-font contexts (captions, headings, Latin labels) opt in explicitly —
     body text defaults to the Lao track since most menu/label copy is Lao. */
  .tk-ui-caption {
    font-family: var(--tk-font-ui-family);
    font-size: var(--tk-font-ui-caption-size);
    line-height: var(--tk-font-ui-caption-lh);
  }
  .tk-ui-body {
    font-family: var(--tk-font-ui-family);
    font-size: var(--tk-font-ui-body-size);
    line-height: var(--tk-font-ui-body-lh);
  }
  .tk-ui-heading-sm {
    font-family: var(--tk-font-lao-heading-family);
    font-size: var(--tk-font-ui-heading-sm-size);
    line-height: var(--tk-font-ui-heading-sm-lh);
    font-weight: 700;
  }
.tk-ui-heading-lg {
  font-family: var(--tk-font-lao-heading-family);
  font-size: var(--tk-font-ui-heading-lg-size);
  line-height: var(--tk-font-ui-heading-lg-lh);
  font-weight: 700;
}

/* Design tokens locked in ticket #6 (Lock the design tokens). Every value here is
   copied verbatim from that ticket resolution comment, not re-derived. */

@font-face {
  font-family: 'Phetsarath OT';
  src: url('/fonts/phetsarath/PhetsarathOT-Regular.woff2?v=CiLt2uP_duFvCiyfaOZPEye8Sys') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Phetsarath OT';
  src: url('/fonts/phetsarath/PhetsarathOT-Bold.woff2?v=iOuU04E30B0k-noi85EI4NQJ6Bk') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Lao carries the headings; Phetsarath OT stays the reading face.
   Self-hosted like Phetsarath -- the Google Fonts CDN link was dropped from
   this app on purpose. One file per face, not one per weight: this is the
   variable cut, so 400 and 700 come out of the same woff2, which is why the
   range is declared as "400 700" rather than two @font-face blocks. The
   unicode-range split keeps the Lao subset from being downloaded to render
   Latin, and vice versa. */
@font-face {
  font-family: 'Noto Sans Lao';
  src: url('/fonts/noto-sans-lao/NotoSansLao-lao.woff2?v=gWwCpRRJH2lpizzR_OqKA3J0AAk') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E81-0EDF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Lao';
  src: url('/fonts/noto-sans-lao/NotoSansLao-latin.woff2?v=gWwCpRRJH2lpizzR_OqKA3J0AAk') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Q2 — glass, 4 levels (light). #6's table only locked the opacity
       numbers, not the base RGB — it was written assuming white glass. The
       approved canvas (ShellLightGlass/ShellLightCollapsed .dc.html) actually
       used a sky-blue tint (--glass-tint:#E3EFFB, i.e. rgb(227,239,251)) as
       the base for every light-mode glass surface, never plain white — that
       tint is what's used here, at #6's locked opacity per level. */
    --tk-glass-l1-blur: 20px;
    --tk-glass-l1-bg: rgba(213, 244, 253, 1); /* owner-chosen sea-foam tint #D5F4FD (2026-09-21), opaque so the navbar/sidebar show exactly this colour; canvas was #E3EFFB */
    --tk-glass-l1-border: rgba(255, 255, 255, 0.62); /* canvas .glass border, not #6's fainter 0.18 */

    --tk-glass-l2-blur: 20px;
    --tk-glass-l2-bg: rgba(213, 244, 253, 0.66);
    --tk-glass-l2-border: rgba(255, 255, 255, 0.25);

    --tk-glass-l3-blur: 10px;
    --tk-glass-l3-bg: rgba(213, 244, 253, 0.5);
    --tk-glass-l3-border: rgba(255, 255, 255, 0.18);

    --tk-glass-l4-blur: 20px;
    --tk-glass-l4-bg: rgba(213, 244, 253, 0.62);
    --tk-glass-l4-border: rgba(255, 255, 255, 0.25);
    --tk-glass-l4-body-bg: rgba(248, 250, 252, 0.98);

    --tk-glass-opacity-min: 0.45; /* hard floor, #4 */
    --tk-glass-saturate: 160%; /* canvas detail (#5) — never captured in #6's numeric table */

    /* Shell page background — the approved canvas Shell artboards use a FLAT
       colour (.stage{background:var(--bg-2)} = #E3EFFB), not the diagonal
       gradient #6 Q3 describes. The gradient is darker at one corner, which
       made the navbar read a different tone from the sidebar instead of one
       seamless surface, so the flat canvas value wins here. */
    --tk-bg-shell: #d5f4fd;
    /* Opaque stand-in for the glass surfaces (navbar/sidebar/flyouts) when blur or transparency is unavailable. Light: the canvas glass tint. */
    --tk-glass-opaque-bg: #d5f4fd;

    /* Auth pages (Login/SelectOffice/FirstOffice) DO use a gradient — canvas
       LoginDark: linear-gradient(160deg, bg-2 0%, bg-1 100%). */
    --tk-bg-gradient-from: #d5f4fd;
    --tk-bg-gradient-to: #8ddcf4; /* deeper sea-foam of the same hue as #D5F4FD (owner tone, 2026-09-21) */

    /* Auth-card radii — the approved canvas (#5) uses bespoke rounder values
       here than the shell-wide Q7 scale (sm/md/lg/xl/pill), specific to the
       Login/SelectOffice/FirstOffice card and its fields/buttons. */
    --tk-radius-auth-card: 28px;
    --tk-radius-auth-field: 14px;

    /* Q4 — opaque surfaces (tables/forms) */
    --tk-surface-table-bg: #ffffff;
    --tk-surface-alt: #f8f9fa; /* table head / form footer strip (artboard --opaque-alt) */
    --tk-surface-stripe: rgba(15, 23, 42, 0.03);
    --tk-surface-hover: rgba(37, 99, 235, 0.06);
    --tk-surface-divider: rgba(15, 23, 42, 0.1);

    /* Q5 — brand/accent/status */
    --tk-color-brand: #2563eb;
    --tk-color-accent: #2563eb;
    --tk-color-info: #2563eb;
    --tk-color-success: #16a34a;
    --tk-color-warning: #ca8a04;
    --tk-color-danger: #dc2626;

    /* Active nav pill — canvas --accent-soft / --accent-dark. #6 never named
       these, so active items were using the much fainter hover wash. */
    --tk-color-accent-soft: rgba(37, 99, 235, 0.12);
    --tk-color-accent-strong: #1d4ed8;
    /* Text sitting ON a filled accent/danger surface. Dark mode flips those
       fills to light pastels (#60A5FA / #F87171), where white text drops to
       roughly 2:1 — so it flips to near-black instead. */
    --tk-color-on-accent: #ffffff;

    /* Content-panel border — canvas --border-op */
    --tk-border-panel: #e2e8f0;

    --tk-color-text-primary: #212529;
    --tk-color-text-secondary: #4b5563;
    --tk-color-text-tertiary: #6b7280;
    --tk-color-scrim: rgba(15, 23, 42, 0.5);
    --tk-loading-dim: rgba(15, 20, 35, 0.42); /* navigation loading overlay (variant B) */
    --tk-grid-line: rgba(11, 17, 32, 0.045); /* auth-page background grid, canvas LoginDark */

    /* Q6 — typography */
    --tk-font-lao-family: 'TT Lao', 'TT Thai', 'TT Thai Fallback', 'Phetsarath OT', 'Noto Sans Lao', sans-serif;
    /* Headings only. Phetsarath is the fallback so a heading still renders in
       the right script if the Noto file fails. */
    --tk-font-lao-heading-family: 'Noto Sans Lao', 'Phetsarath OT', sans-serif;
    --tk-font-lao-size: 17px;
    --tk-font-lao-lh: 1.6;

    /* Phetsarath is appended on purpose. This stack is the UI/Latin track,
       but plenty of things that use it -- buttons, dropdown items, field
       labels, captions, the modal body -- carry Lao text, and not one family
       ahead of it contains a Lao glyph. Without this the browser silently
       substituted its own default for every Lao string in those components,
       which is why buttons and menus did not match the rest of the page. */
    --tk-font-ui-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, 'TT Thai', 'TT Thai Fallback', 'Phetsarath OT', sans-serif;
    --tk-font-ui-caption-size: 13px;
    --tk-font-ui-caption-lh: 1.4;
    --tk-font-ui-body-size: 14px;
    --tk-font-ui-body-lh: 1.5;
    --tk-font-ui-heading-sm-size: 16px;
    --tk-font-ui-heading-sm-lh: 1.4;
    --tk-font-ui-heading-lg-size: 22px;
    --tk-font-ui-heading-lg-lh: 1.3;

    /* Q7 — spacing / shape */
    --tk-space-1: 4px;
    --tk-space-2: 8px;
    --tk-space-3: 12px;
    --tk-space-4: 16px;
    --tk-space-5: 24px;
    --tk-space-6: 32px;

    --tk-radius-sm: 8px;
    --tk-radius-md: 12px;
    --tk-radius-lg: 16px;
    --tk-radius-xl: 20px;
    --tk-radius-pill: 999px;

    --tk-navbar-h: 64px;
    /* Every interactive unit in the navbar is this tall, so the bar reads as
       one row of equal parts instead of a pile of different sizes. */
    --tk-navbar-ctl: 36px;
    --tk-sidebar-w-expanded: 220px; /* was 260px; narrower at the owner's request 2026-10-05 */
    --tk-sidebar-w-collapsed: 68px;

    /* Q8 — motion */
    --tk-motion-fast: 120ms;
    --tk-motion-base: 200ms;
    --tk-motion-slow: 320ms;
    --tk-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Bridge Bootstrap own root vars (bootstrap-utilities.css sets these) to
       our locked type scale so grid/utility classes that read them agree with
       the rest of the app instead of falling back to Bootstrap 1.5. */
    --bs-body-font-family: var(--tk-font-lao-family);
    --bs-body-line-height: var(--tk-font-lao-lh);
  }

  :root[data-theme='dark'] {
    color-scheme: dark;

    --tk-glass-l1-bg: rgba(30, 41, 59, 0.58);
    --tk-glass-l1-border: rgba(255, 255, 255, 0.18); /* canvas .glass border, not #6's fainter 0.08 */

    --tk-glass-l2-bg: rgba(30, 41, 59, 0.58);
    --tk-glass-l2-border: rgba(255, 255, 255, 0.1);

    --tk-glass-l3-bg: rgba(15, 23, 42, 0.58);
    --tk-glass-l3-border: rgba(255, 255, 255, 0.1);

    --tk-glass-l4-bg: rgba(30, 41, 59, 0.58);
    --tk-glass-l4-border: rgba(255, 255, 255, 0.1);
    --tk-glass-l4-body-bg: rgba(30, 41, 59, 0.98);

    --tk-glass-opacity-min: 0.55; /* hard floor, #4 */

    --tk-bg-shell: #1e293b; /* canvas ShellDarkGlass .stage = --bg-2 */
    --tk-glass-opaque-bg: #1b293f; /* what the canvas dark glass tint composites to over the stage (measured in the ShellDarkGlass artboard) */
    --tk-bg-gradient-from: #1e293b; /* canvas LoginDark 160deg bg-2 → bg-1 */
    --tk-bg-gradient-to: #0b1120;

    --tk-surface-table-bg: #1e293b;
    --tk-surface-alt: #16202e;
    --tk-surface-stripe: rgba(255, 255, 255, 0.03);
    --tk-surface-hover: rgba(59, 130, 246, 0.1);
    --tk-surface-divider: rgba(255, 255, 255, 0.1);

    --tk-color-brand: #60a5fa;
    --tk-color-accent: #60a5fa;
    --tk-color-info: #60a5fa;
    --tk-color-success: #4ade80;
    --tk-color-warning: #facc15;
    --tk-color-danger: #f87171;

    --tk-color-accent-soft: rgba(96, 165, 250, 0.16);
    --tk-color-accent-strong: #60a5fa;
    --tk-color-on-accent: #0b1120;

    --tk-border-panel: #334155;

    --tk-color-text-primary: #ffffff;
    --tk-color-text-secondary: #94a3b8;
    --tk-color-text-tertiary: #64748b;
    --tk-color-scrim: rgba(0, 0, 0, 0.6);
    --tk-loading-dim: rgba(0, 0, 0, 0.55);
    --tk-grid-line: rgba(255, 255, 255, 0.045); /* canvas LoginDark, matched exactly */
  }

@media (prefers-reduced-motion: reduce) {
  :root {
    --tk-motion-fast: 0ms;
    --tk-motion-base: 0ms;
    --tk-motion-slow: 0ms;
  }
}


/* Thai / Vietnamese / Chinese (map #404, #422; owner 2026-10-14). html lang comes from Lang.Current.
   'TT Lao' is Phetsarath OT limited to the Lao block and leads every non-Lao stack, so Lao text (company and
   account names, stored data) keeps the system's Lao font on every language. 'TT Thai' is TH Sarabun New /
   TH Sarabun PSK limited to the Thai block: the user's installed copy, else the self-hosted TH Sarabun New
   (wwwroot/fonts/th-sarabun, supplied by the owner 2026-10-14). Sarabun draws small, so it is scaled up.
   Leelawadee UI / Tahoma only if the font file cannot load. */
@font-face {
  font-family: 'TT Lao';
  src: url('/fonts/phetsarath/PhetsarathOT-Regular.woff2?v=CiLt2uP_duFvCiyfaOZPEye8Sys') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0E80-0EFF;
}
@font-face {
  font-family: 'TT Lao';
  src: url('/fonts/phetsarath/PhetsarathOT-Bold.woff2?v=iOuU04E30B0k-noi85EI4NQJ6Bk') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0E80-0EFF;
}
@font-face {
  font-family: 'TT Thai';
  src: local('TH Sarabun New'), local('THSarabunNew'), local('TH SarabunPSK'), local('THSarabunPSK'), local('TH Sarabun PSK'),
       url('/fonts/th-sarabun/THSarabunNew-Regular.ttf?v=mKhzVJU6ob95UqTzTl8NpXqSD_A') format('truetype');
  font-weight: 400; font-style: normal;
  size-adjust: 135%;
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: 'TT Thai';
  src: local('TH Sarabun New Bold'), local('THSarabunNew-Bold'), local('TH SarabunPSK Bold'), local('THSarabunPSK-Bold'),
       url('/fonts/th-sarabun/THSarabunNew-Bold.ttf?v=Ek4t2y25vPFNgzRr1DkHOI4sDT0') format('truetype');
  font-weight: 700; font-style: normal;
  size-adjust: 135%;
  unicode-range: U+0E00-0E7F;
}

/* English and Vietnamese (owner 2026-10-19): Inter for English - the usual SaaS/ERP face, figures line up in tables
   (tabular-nums on .num); Be Vietnam Pro for Vietnamese - drawn for stacked Vietnamese marks. Both self-hosted
   (wwwroot/fonts, SIL OFL), limited to Latin ranges so Lao and Thai still come from TT Lao / TT Thai. Chinese stays on
   the system fonts people work with: Microsoft YaHei (Windows), PingFang SC (Mac/iOS), Noto Sans SC last. */
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-400-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-ext-400-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-500-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-ext-500-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-600-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-ext-600-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-700-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter/inter-latin-ext-700-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-400-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-400-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-500-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-500-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-500-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-600-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-600-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-700-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-700-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700-normal.woff2?v=3NjfVpGkdSkt9_lvrBPHl5AW0hQ') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
:root {
    /* printed reports and Paper View (print.css) */
    --tk-font-print: 'TT Lao', 'TT Thai', 'TT Thai Fallback', 'Phetsarath OT', sans-serif;
}
:root:lang(th) {
    --tk-font-lao-family: 'TT Lao', 'TT Thai', 'Leelawadee UI', Tahoma, sans-serif;
    --tk-font-lao-heading-family: 'TT Lao', 'TT Thai', 'Leelawadee UI', Tahoma, sans-serif;
    --tk-font-ui-family: 'TT Lao', 'TT Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Leelawadee UI', sans-serif;
    --tk-font-print: 'TT Lao', 'TT Thai', 'Leelawadee UI', Tahoma, sans-serif;
}
:root:lang(vi) {
    --tk-font-lao-family: 'TT Lao', 'Be Vietnam Pro', Roboto, 'Segoe UI', Arial, sans-serif;
    --tk-font-lao-heading-family: 'TT Lao', 'Be Vietnam Pro', Roboto, 'Segoe UI', Arial, sans-serif;
    --tk-font-ui-family: 'TT Lao', 'Be Vietnam Pro', Roboto, 'Segoe UI', -apple-system, Arial, sans-serif;
    --tk-font-print: 'TT Lao', 'Be Vietnam Pro', Roboto, 'Segoe UI', Arial, sans-serif;
}
:root:lang(zh-Hans) {
    --tk-font-lao-family: 'TT Lao', Inter, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --tk-font-lao-heading-family: 'TT Lao', Inter, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --tk-font-ui-family: 'TT Lao', Inter, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --tk-font-print: 'TT Lao', Inter, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
:root:lang(en) {
    --tk-font-lao-family: 'TT Lao', 'TT Thai', Inter, -apple-system, 'Segoe UI', Arial, sans-serif;
    --tk-font-lao-heading-family: 'TT Lao', 'TT Thai', Inter, -apple-system, 'Segoe UI', Arial, sans-serif;
    --tk-font-ui-family: 'TT Lao', 'TT Thai', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --tk-font-print: 'TT Lao', 'TT Thai', Inter, 'Segoe UI', Arial, sans-serif;
}

/* Bootstrap is self-hosted (wwwroot/lib/bootstrap/bootstrap.min.css) rather
   than loaded from CDN. #6 Q9 originally asked for a grid+utility-only build
   with `$line-height-base` overridden at the Sass source — this project has
   no Node/npm/Sass toolchain, so that rebuild is not available, and the
   precompiled full bootstrap.min.css is used as-is (decided with the
   project owner). Grepped the codebase for the one utility class that would
   leak Bootstrap 1.5 default (`.lh-base`) — unused everywhere.

   Trimming Bootstrap down to grid+utility-only (dropping .btn-*, .card,
   .modal, .dropdown, .navbar, .form-control per #6 Q9) is deferred to the
   final rollout batch: every menu not yet migrated to the new shell still
   renders with those component classes today, and this app has one shared
   _Layout.cshtml, so cutting them now would break every un-migrated page.
   See wwwroot/css/legacy-compat.css for the matching compatibility layer.
   tokens.css already points Bootstrap own --bs-body-* root vars at our
   1.6 line-height. */

:root {
  --bs-border-radius: var(--tk-radius-md);
  --bs-border-radius-sm: var(--tk-radius-sm);
  --bs-border-radius-lg: var(--tk-radius-lg);
}

/* Shell structure — edge-to-edge chrome, navbar+sidebar merged into one
   seamless surface with no visible border/shadow at their seam (#5,
   Google-Cloud-Console-style direction). Content panel keeps one deliberate
   exception: rounded top-left AND bottom-left corners with a full 1px border
   all around, matching the approved canvas (ShellLightGlass/ShellDarkGlass
   .content — `border-radius:20px 0 0 20px; border:1px solid`). */

html,
body {
  height: 100%;
}

  /* Flat shell background behind everything — a plain fixed-position element,
     not an ancestor of any glass surface, so it never violates the Backdrop
     Root rule from #10. Flat (not the #6 Q3 gradient) so navbar and sidebar
     read as one seamless surface, matching the canvas Shell artboards. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--tk-bg-shell);
  }

  /* Shell is locked to the viewport and never scrolls itself — the navbar and
     sidebar stay put and only #mainContent scrolls, matching the canvas
     (.stage{height:900px; overflow:hidden}). Auth pages have no .tk-shell, so
     they still scroll normally on short screens. */
  .tk-shell {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .tk-navbar {
    height: var(--tk-navbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--tk-space-4);
    /* No bottom border at all (canvas .navbar{border-bottom:none}). A
       transparent one is not enough: glass.css loads later and repaints
       border-color with the 62%-white glass border, leaving a visible seam
       between the navbar and the sidebar below it. */
    border-bottom: none;
    position: relative;
    z-index: 30;
  }

  .tk-body-wrap {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }

  .tk-sidebar {
    flex: 0 0 var(--tk-sidebar-w-expanded);
    width: var(--tk-sidebar-w-expanded);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--tk-motion-slow) var(--tk-motion-easing);
    position: relative;
    z-index: 20;
  }
  .tk-sidebar.is-collapsed {
    flex-basis: var(--tk-sidebar-w-collapsed);
    width: var(--tk-sidebar-w-collapsed);
  }

  /* Flex column is a contract the pages rely on, not decoration: every list
     page is built as [header, filter card (flex-shrink:0), table card
     (flex:1; overflow:hidden) with a sticky thead]. Without it those cards
     can't claim the leftover height, so the whole page scrolls instead of
     just the table body. The pre-redesign layout had it; dropping it was
     what broke header pinning across all 27 table pages. */
  .tk-main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--tk-surface-table-bg);
    border-radius: var(--tk-radius-xl) 0 0 var(--tk-radius-xl);
    border: 1px solid var(--tk-border-panel);
    /* Space between the white panel's edge and the page content (owner 2026-10-04: was 32px, the toolbar
       and tables now sit about 14px from the edge). A variable because the pinned notes toolbar needs it too. */
    --tk-content-pad: 14px;
    padding: var(--tk-content-pad);
  }

  /* #10 Q1 — htmx swap transition on #mainContent: translateY only, never
     opacity/filter/clip-path/mask/mix-blend-mode/backdrop-filter/will-change
     of those. This targets the element itself, which has no glass children
     of its own kind to break (the shell chrome sits outside #mainContent). */
  .tk-main-content.htmx-swapping {
    transform: translateY(10px);
  }
  .tk-main-content {
    transform: translateY(0);
    transition: transform var(--tk-motion-base) var(--tk-motion-easing);
  }

  @media (max-width: 1023px) {
    .tk-main-content {
      --tk-content-pad: 12px;
    }
  }

  /* Mobile (<768px, SD9): sidebar becomes an off-canvas drawer. */
  @media (max-width: 767px) {
    .tk-sidebar,
    .tk-sidebar.is-collapsed {
      position: fixed;
      inset-block: var(--tk-navbar-h) 0;
      left: 0;
      width: var(--tk-sidebar-w-expanded);
      flex-basis: var(--tk-sidebar-w-expanded);
      transform: translateX(-100%);
      transition: transform var(--tk-motion-slow) var(--tk-motion-easing);
    }
    .tk-sidebar.is-open {
      transform: translateX(0);
    }
    .tk-main-content {
      border-top-left-radius: 0;
      border: none;
      padding: var(--tk-space-3);
    }
    .tk-sidebar-overlay {
      display: none;
      position: fixed;
      inset: var(--tk-navbar-h) 0 0 0;
      background: var(--tk-color-scrim); /* solid dim, no backdrop-filter — #10 */
      z-index: 15;
    }
    .tk-sidebar-overlay.is-visible {
      display: block;
    }
  }
@media (min-width: 768px) {
  .tk-sidebar-overlay {
    display: none;
  }
}

/* Glass surfaces — 4 levels locked in #6 Q2. Opaque fallbacks use --tk-glass-opaque-bg (= canvas glass tint), not white, so the chrome keeps its tint when blur is unavailable or transparency is reduced. Every level declares an opaque
   fallback via @supports (no backdrop-filter support) and both prefixed and
   unprefixed backdrop-filter (Safari dropped the prefix requirement at v18,
   but older Safari still needs -webkit-), per #6 constraint #10.

   Per #10 resolution: a glass elements own transform/opacity are safe,
   but nothing that creates a Backdrop Root (opacity<1, filter, clip-path,
   mask, mix-blend-mode, backdrop-filter, or will-change of those) may sit on
   an ANCESTOR of a glass element. Components using these classes must not be
   wrapped in an ancestor that violates that rule. */

.tk-glass-l1 {
    background: var(--tk-glass-l1-bg);
    -webkit-backdrop-filter: blur(var(--tk-glass-l1-blur)) saturate(var(--tk-glass-saturate));
    backdrop-filter: blur(var(--tk-glass-l1-blur)) saturate(var(--tk-glass-saturate));
    border-color: var(--tk-glass-l1-border);
  }
  .tk-glass-l2 {
    background: var(--tk-glass-l2-bg);
    -webkit-backdrop-filter: blur(var(--tk-glass-l2-blur)) saturate(var(--tk-glass-saturate));
    backdrop-filter: blur(var(--tk-glass-l2-blur)) saturate(var(--tk-glass-saturate));
    border-color: var(--tk-glass-l2-border);
  }
  .tk-glass-l3 {
    background: var(--tk-glass-l3-bg);
    -webkit-backdrop-filter: blur(var(--tk-glass-l3-blur)) saturate(var(--tk-glass-saturate));
    backdrop-filter: blur(var(--tk-glass-l3-blur)) saturate(var(--tk-glass-saturate));
    border-color: var(--tk-glass-l3-border);
  }
  .tk-glass-l4-header,
  .tk-glass-l4-footer {
    background: var(--tk-glass-l4-bg);
    -webkit-backdrop-filter: blur(var(--tk-glass-l4-blur)) saturate(var(--tk-glass-saturate));
    backdrop-filter: blur(var(--tk-glass-l4-blur)) saturate(var(--tk-glass-saturate));
    border-color: var(--tk-glass-l4-border);
  }
  .tk-glass-l4-body {
    background: var(--tk-glass-l4-body-bg);
    border-color: transparent;
  }

  /* Opaque fallback when backdrop-filter is not supported at all. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tk-glass-l1 {
      background: var(--tk-glass-opaque-bg);
    }
    .tk-glass-l2 {
      background: var(--tk-glass-opaque-bg);
    }
    .tk-glass-l3 {
      background: var(--tk-glass-opaque-bg);
    }
    .tk-glass-l4-header,
    .tk-glass-l4-footer {
      background: var(--tk-glass-opaque-bg);
    }
  }

  /* prefers-reduced-transparency is not Baseline yet (#4 constraint 11) — fall
     back to the same opaque treatment, plus an in-app switch via
     [data-transparency="reduced"] on <html> (wired up by shell.js, best-effort
     matchMedia detection; a dedicated settings toggle UI is not part of this
     batch). */
  @media (prefers-reduced-transparency: reduce) {
    .tk-glass-l1,
    .tk-glass-l2,
    .tk-glass-l3,
    .tk-glass-l4-header,
    .tk-glass-l4-footer {
      background: var(--tk-glass-opaque-bg);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  html[data-transparency='reduced'] .tk-glass-l1,
  html[data-transparency='reduced'] .tk-glass-l2,
  html[data-transparency='reduced'] .tk-glass-l3,
  html[data-transparency='reduced'] .tk-glass-l4-header,
html[data-transparency='reduced'] .tk-glass-l4-footer {
  background: var(--tk-glass-opaque-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Top-bar pop-ups are solid (owner 2026-10-19): the language and settings menus, the working-date picker and the
   connection status were glass, and the page behind showed through so the items were hard to read. */
.tk-dropdown-menu.tk-glass-l2,
.tk-workdate-popup.tk-glass-l2,
.tk-status-popup.tk-glass-l2 {
  background: var(--tk-surface-table-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--tk-border-panel);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.tk-dropdown-menu.tk-glass-l2 .dropdown-item,
.tk-dropdown-menu.tk-glass-l2 .tk-dropdown-item { color: var(--tk-color-text-primary); }
/* the language names are written in their own script: Lao and Thai take the system's Lao / Thai faces, not the
   thin fallback the UI font gave them */
.tk-dropdown-menu .dropdown-item { font-family: 'TT Lao', 'TT Thai', var(--tk-font-ui-family); }
.tk-dropdown-menu .dropdown-item:lang(th) { font-size: 17px; line-height: 1.3; }

/* Sidebar — single unified collapse/expand mechanism replacing the 3 separate
   ones that existed before this batch (mobile show/hide, Admin sbToggle,
   accounting sub-group hover/lock). Menu order/labels/permission-gating are
   untouched (#3 lock) — only the CSS classes and interaction model change.

   Measurements match the approved canvas (ShellLightGlass/ShellDarkGlass/
   ShellLightCollapsed/ShellDarkCollapsed .dc.html) pixel-for-pixel where the
   canvas gives a concrete value. Sidebar width is the one deliberate
   exception: 260px per #6 Q7's explicit lock, not the canvas's 272px. The
   glass opacity/blur *percentages* stay #6's WCAG-justified numbers, but the
   base tint color and border opacity now follow the canvas exactly (see
   tokens.css) — #6's table only ever locked the alpha numbers, and quietly
   assumed a white base / fainter border where the canvas actually used a
   sky-blue tint and a much more visible border. */

/* page load: no sidebar / layout animation until the first frame is drawn (TK.sidebarEarly, _Layout) */
html.tk-sb-init .tk-sidebar, html.tk-sb-init .tk-sidebar *, html.tk-sb-init .tk-body-wrap, html.tk-sb-init .tk-main-content { transition: none !important; }

.tk-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px;
}

/* Menu sizes (owner 2026-10-04, "a little smaller and tidier"): 15px text on a 38px row (was 17px on 47px), one icon column
   (18px for every row, group or not), one gap (9px) between icon and label, the arrow in its own right-hand column. */
.tk-nav-item,
.tk-nav-group-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--tk-radius-md);
  color: var(--tk-color-text-primary);
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.45;
  width: 100%;
  height: 38px;
  /* collapse / expand (owner 2026-10-12 "not smooth"): every size moves with the sidebar instead of switching at once */
  transition: background-color var(--tk-motion-fast) var(--tk-motion-easing), width 280ms var(--tk-ease-spring),
              height 280ms var(--tk-ease-spring), padding 280ms var(--tk-ease-spring);
}
/* the group arrow sits close to the sidebar edge (owner 2026-10-05) */
.tk-nav-group-btn { padding-right: 2px; }
.tk-nav-item:hover,
.tk-nav-group-btn:hover {
  background: var(--tk-surface-hover);
}
.tk-nav-item.sb-active {
  background: var(--tk-color-accent-soft);
  color: var(--tk-color-accent-strong);
  font-weight: 700;
}

.tk-nav-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 17px;
  line-height: 1;
}
.tk-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 150ms ease, max-width 280ms var(--tk-ease-spring);
}
/* a <button> centres its text: keep group labels left like the links (expanded sidebar only; the rail centres its icons) */
.tk-nav-label { text-align: left; }
.tk-sidebar:not(.is-collapsed) :is(.tk-nav-group-btn, .tk-nav-group-btn-main) { text-align: left; justify-content: flex-start; }
.tk-sidebar:not(.is-collapsed) .tk-nav-group-btn { justify-content: space-between; }

.tk-nav-group {
  position: relative; /* anchor for the collapsed-rail flyout */
}
/* Clickable: same ink as the real nav links, so it reads as something you
   press — the muted grey it used to share with the section heading above was
   what made the two indistinguishable. */
.tk-nav-group-btn {
  justify-content: space-between;
  cursor: pointer;
  color: var(--tk-color-text-primary);
}
.tk-nav-group.is-open > .tk-nav-group-btn {
  color: var(--tk-color-accent-strong);
}
.tk-nav-group-btn-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}
.tk-nav-arrow {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  opacity: 0.55;
  transition: transform var(--tk-motion-base) var(--tk-motion-easing),
    opacity 150ms ease, width 280ms var(--tk-ease-spring),
    margin 280ms var(--tk-ease-spring);
}
.tk-nav-group-btn:hover .tk-nav-arrow,
.tk-nav-group.is-open .tk-nav-arrow {
  opacity: 1;
}
.tk-nav-group.is-open .tk-nav-arrow {
  transform: rotate(90deg);
}

.tk-nav-group-body {
  overflow: hidden;
  max-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 14px;
  margin-left: 22px;
  border-left: 1px solid var(--tk-surface-divider);
  transition: max-height var(--tk-motion-base) var(--tk-motion-easing);
}
.tk-nav-group.is-open .tk-nav-group-body {
  max-height: 600px; /* generous cap; content is short lists */
}

/* Leaf items carry no icon in the approved canvas — text only. */
.tk-nav-leaf {
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 12px;
  border-radius: 10px;
  color: var(--tk-color-text-secondary);
  white-space: nowrap;
  font-size: 14.5px;
  line-height: 1.45;
  width: 100%;
  transition: background-color var(--tk-motion-fast) var(--tk-motion-easing);
}
.tk-nav-leaf:hover {
  background: var(--tk-surface-hover);
}
.tk-nav-leaf.sb-active {
  background: var(--tk-color-accent-soft);
  color: var(--tk-color-accent-strong);
  font-weight: 700;
}

/* Section heading — not clickable. Told apart from the group buttons below
   it by weight, a trailing rule, and extra space above, rather than by size:
   Lao text can't go under 17px (#4's font constraint), so shrinking it isn't
   an option. */
.tk-nav-section-label {
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  padding: 8px 10px 3px;
  margin-top: 10px;
  font-size: 14px;
  font-family: var(--tk-font-lao-heading-family);
  font-weight: 400;
  color: var(--tk-color-text-tertiary);
  opacity: 0.75;
  letter-spacing: 0.04em;
  line-height: 1.5;
  cursor: default;
  max-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-height 280ms var(--tk-ease-spring), opacity 150ms ease,
              margin 280ms var(--tk-ease-spring), padding 280ms var(--tk-ease-spring);
}
.tk-nav-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tk-surface-divider);
}
.tk-sidebar > .tk-nav-section-label:first-child {
  margin-top: 0;
}

.tk-sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--tk-surface-divider);
  /* the manual and the requests link sit one above the other (#446): spaced like the rail buttons above */
  display: flex; flex-direction: column; gap: 12px;
}

/* Collapsed: icon-only rail with a glass hover-flyout for groups/labels
   (canvas: .rail{width:68px;padding:14px 10px} .rail-item{44x44, radius:12px}). */
/* Nothing switches with display:none or re-centres: labels fade and shrink, headings fold, the rows narrow to 44px with
   the icon kept at the same place (12px rail padding + 13px = the 68px rail's centre), all on the sidebar's own timing,
   so the collapse and the expand glide instead of jumping (owner 2026-10-12). */
.tk-sidebar.is-collapsed {
  padding: 14px 12px;
  overflow: visible; /* so the hover-flyout can escape the 68px rail */
}
.tk-sidebar.is-collapsed .tk-nav-label {
  max-width: 0;
  opacity: 0;
}
.tk-sidebar.is-collapsed .tk-nav-arrow {
  width: 0;
  margin-left: 0;
  opacity: 0;
}
.tk-sidebar.is-collapsed .tk-nav-section-label {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.tk-sidebar.is-collapsed .tk-nav-group-body {
  max-height: 0; /* inline expansion replaced by the flyout below */
  border-left-color: transparent;
}
.tk-sidebar.is-collapsed .tk-nav-item,
.tk-sidebar.is-collapsed .tk-nav-group-btn {
  width: 44px;
  height: 44px;
  padding: 0 0 0 13px;
}
.tk-sidebar.is-collapsed .tk-nav-group-btn-main { gap: 0; }

/* Anchored to its own group, not the viewport: the sidebar carries
   backdrop-filter (glass), which makes it the containing block for
   position:fixed descendants AND clips them with its own overflow — a fixed
   flyout ended up pinned to the 68px rail's right edge and then clipped away
   entirely. Absolute + the collapsed rail switching to overflow:visible keeps
   it on screen. */
.tk-nav-flyout {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 260px;
  padding: 10px;
  border-radius: var(--tk-radius-lg);
  /* Opaque, NOT glass: this sits inside the glass sidebar, and #10's locked
     rule forbids stacking backdrop-filter — a nested one blurs the wrong
     backdrop and the panel reads as see-through, unreadable over content. */
  background: var(--tk-surface-table-bg);
  border: 1px solid var(--tk-border-panel);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 40;
}
/* Caret pointing back at the rail icon this flyout belongs to. A square
   rotated 45°, with only its two outward edges bordered, so it reads as an
   outlined arrow and covers the panel's own left border underneath. Sits at
   the vertical centre of the 44px rail button. */
.tk-nav-flyout::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 17px;
  width: 10px;
  height: 10px;
  background: var(--tk-surface-table-bg);
  border-left: 1px solid var(--tk-border-panel);
  border-bottom: 1px solid var(--tk-border-panel);
  transform: rotate(45deg);
}
/* Invisible bridge across the 10px gap, so moving the pointer from the rail
   icon to the panel doesn't pass over dead space and close it. */
.tk-nav-flyout::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
.tk-sidebar.is-collapsed .tk-nav-group:hover .tk-nav-flyout,
.tk-sidebar.is-collapsed .tk-nav-group.is-flyout-open .tk-nav-flyout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* canvas .flyout-item uses --text-primary (unlike the muted inline .sb-sub) */
.tk-nav-flyout .tk-nav-leaf {
  width: 100%;
  color: var(--tk-color-text-primary);
  padding: 9px 10px;
}
.tk-nav-flyout .tk-nav-leaf.sb-active {
  color: var(--tk-color-accent-strong);
}
/* This is the heading of the flyout, so it gets the heading face and a
   rule under it. It used to be 13px of muted grey in the UI stack, which
   read as a faint caption sitting above the list rather than naming it --
   and 13px is under the Lao legibility floor from ticket #4 besides. */
.tk-nav-flyout .tk-nav-flyout-title {
  padding: 4px 10px 9px;
  margin-bottom: 6px;
  font-size: var(--tk-font-lao-size);
  font-family: var(--tk-font-lao-heading-family);
  font-weight: 700;
  line-height: 1.35;
  color: var(--tk-color-text-primary);
  border-bottom: 1px solid var(--tk-border-panel);
}

@media (max-width: 767px) {
  /* Mobile drawer is always fully expanded — no icon rail on small screens. */
  .tk-sidebar.is-collapsed {
    padding: 18px 14px;
    align-items: stretch;
    overflow-y: auto;
  }
  /* Drawer always shows full labels, so the rail flyout must stay hidden. */
  .tk-sidebar.is-collapsed .tk-nav-group:hover .tk-nav-flyout,
  .tk-sidebar.is-collapsed .tk-nav-group.is-flyout-open .tk-nav-flyout {
    display: none;
  }
  .tk-sidebar.is-collapsed .tk-nav-label,
  .tk-sidebar.is-collapsed .tk-nav-section-label,
  .tk-sidebar.is-collapsed .tk-nav-arrow {
    display: block;
    max-width: none;
    max-height: none;
    width: auto;
    opacity: 1;
  }
  .tk-sidebar.is-collapsed .tk-nav-group-body {
    display: flex;
  }
  .tk-sidebar.is-collapsed .tk-nav-item,
  .tk-sidebar.is-collapsed .tk-nav-group-btn {
    width: 100%;
    height: auto;
    padding: 8px 10px;
    justify-content: flex-start;
  }
}

/* Collapsed rail: current item needs a real chip, not just a tint.
   With the labels gone, a 44x44 icon carrying only a colour change is far
   too quiet to read as "you are here" -- so the selected rail button gets a
   filled box with a visible edge and a soft lift. Covers both a top-level
   item (Home) and a group whose page is open, since in the rail those look
   identical to the user. */
.tk-sidebar.is-collapsed .tk-nav-item.sb-active,
.tk-sidebar.is-collapsed .tk-nav-group.is-open > .tk-nav-group-btn {
  background: var(--tk-color-accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--tk-color-brand) 55%, transparent);
  color: var(--tk-color-accent-strong);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tk-color-brand) 22%, transparent);
}
/* The icon strokes are what carry the colour here, so push them to full
   strength rather than the 0.55 resting opacity used elsewhere. */
.tk-sidebar.is-collapsed .tk-nav-item.sb-active .tk-nav-icon,
.tk-sidebar.is-collapsed .tk-nav-group.is-open > .tk-nav-group-btn .tk-nav-icon {
  opacity: 1;
}
/* Hovering the selected item must not wash its own fill away. */
.tk-sidebar.is-collapsed .tk-nav-item.sb-active:hover,
.tk-sidebar.is-collapsed .tk-nav-group.is-open > .tk-nav-group-btn:hover {
  background: color-mix(in srgb, var(--tk-color-brand) 20%, transparent);
}

/* Expanded: a label that does not fit ends in an ellipsis instead of being cut off under the arrow (motion.css keeps clip
   while the rail collapses). The admin footer's long text takes a second line rather than being cut. */
.tk-sidebar:not(.is-collapsed) .tk-nav-label { text-overflow: ellipsis; }
.tk-sidebar:not(.is-collapsed) .tk-sidebar-footer .tk-nav-label { white-space: normal; line-height: 1.35; }

/* ---- Buttons — new token-driven set for the redesigned shell/auth pages,
   using the .tk-btn-* namespace so it never collides with Bootstrap own
   .btn-* (kept live for un-migrated pages — see bootstrap-overrides.css). ---- */
.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-space-2);
    padding: var(--tk-space-2) var(--tk-space-4);
    border-radius: var(--tk-radius-sm);
    border-width: 1px;
    border-style: solid;
    font-family: var(--tk-font-ui-family);
    font-size: var(--tk-font-ui-body-size);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--tk-motion-fast) var(--tk-motion-easing),
      background-color var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-btn:hover {
    transform: translateY(-1px);
  }
  .tk-btn:active {
    transform: translateY(0) scale(0.97);
  }
  .tk-btn-primary {
    background: var(--tk-color-brand);
    border-color: var(--tk-color-brand);
    color: var(--tk-color-on-accent);
  }
  .tk-btn-danger {
    background: var(--tk-color-danger);
    border-color: var(--tk-color-danger);
    color: var(--tk-color-on-accent);
  }
  .tk-btn-ghost {
    background: transparent;
    border-color: var(--tk-surface-divider);
    color: var(--tk-color-text-primary);
  }
  /* Excel actions (owner 2026-10-12): Excel green - #217346 text and border, a light green fill on hover */
  .tk-btn-excel {
    background: #f1f8f4;
    border-color: color-mix(in srgb, #217346 45%, transparent);
    color: #217346;
    font-weight: 600;
  }
  .tk-btn-excel:hover { background: #217346; border-color: #217346; color: #fff; }
  .tk-btn-excel .ti, .tk-formcard-head .tk-btn-excel .ti { color: inherit; }
  :root[data-theme='dark'] .tk-btn-excel { background: color-mix(in srgb, #217346 18%, transparent); border-color: color-mix(in srgb, #3fa66b 55%, transparent); color: #6cc391; }
  :root[data-theme='dark'] .tk-btn-excel:hover { background: #217346; color: #fff; }
  .tk-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--tk-radius-sm);
    border-color: transparent;
    background: transparent;
    color: var(--tk-color-text-primary);
  }
  .tk-btn-icon:hover {
    background: var(--tk-surface-hover);
  }
  .tk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* ---- Navbar ---- */
  .tk-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--tk-space-3);
    font-family: var(--tk-font-ui-family);
    font-weight: 800;
    font-size: 15px;
    color: var(--tk-color-text-primary);
  }
  .tk-navbar-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    /* Valnexflow logo on a white tile, so it reads the same in light and dark themes (owner 2026-10-04) */
    padding: 4px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tk-color-brand) 14%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tk-color-brand) 18%, transparent);
  }
  .tk-navbar-mark img,
  .tk-auth-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* Rail toggle — one control for both the desktop collapse/expand and the
     mobile drawer open/close, living in the navbar per the approved canvas
     (ShellLightGlass/ShellLightCollapsed .rail-toggle), not inside the
     sidebar itself. */
  .tk-rail-toggle {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--tk-color-text-secondary);
    margin-right: 2px;
    transition: background-color var(--tk-motion-fast) var(--tk-motion-easing),
      color var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-rail-toggle:hover {
    background: var(--tk-surface-hover);
  }
  .tk-rail-toggle.is-active {
    background: var(--tk-surface-hover);
    color: var(--tk-color-brand);
  }
  .tk-nav-right {
    display: flex;
    align-items: center;
    gap: var(--tk-space-2);
  }
  .tk-nav-divider {
    width: 1px;
    align-self: stretch;
    margin-block: var(--tk-space-2);
    background: var(--tk-glass-l1-border);
  }

  /* ---- Dropdown (Bootstrap JS behavior kept for data-bs-toggle, styling is
     ours) — Bootstrap own component CSS (which normally supplies
     .dropdown-menu position:absolute + display:none/.show toggle) was
     deliberately dropped per #6 Q9 (grid+utilities only), so this class
     must own that base behavior itself or the JS-toggled menu renders
     inline and always visible. */
  .dropdown {
    position: relative;
  }
  .dropdown-menu {
    position: absolute;
    z-index: 1000;
    top: 100%;
    right: 0;
    display: none;
    margin-top: var(--tk-space-2);
  }
  .dropdown-menu.show {
    display: block;
  }
  .tk-dropdown-menu {
    min-width: 200px;
    padding: var(--tk-space-2);
    border-radius: var(--tk-radius-md);
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }
  .tk-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--tk-space-3);
    padding: var(--tk-space-2) var(--tk-space-3);
    border-radius: var(--tk-radius-sm);
    color: var(--tk-color-text-primary);
    font-size: var(--tk-font-ui-body-size);
    font-family: var(--tk-font-ui-family);
  }
  .tk-dropdown-item:hover {
    background: var(--tk-surface-hover);
  }

  /* ---- Working Date popup ---- */
  .tk-workdate {
    position: relative;
  }
  .tk-workdate-popup {
    display: none;
    position: absolute;
    top: calc(100% + var(--tk-space-2));
    right: 0;
    min-width: 240px;
    padding: var(--tk-space-4);
    border-radius: var(--tk-radius-md);
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    z-index: 40;
  }
  .tk-workdate-popup.is-visible {
    display: block;
  }

  /* ---- TaxRIS status badge ---- */
  .tk-badge-status {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--tk-radius-pill);
    cursor: default;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
    font-family: var(--tk-font-ui-family);
  }
  .tk-badge-status.tk-badge-ok {
    background: color-mix(in srgb, var(--tk-color-success) 14%, transparent);
    color: var(--tk-color-success);
    border-color: color-mix(in srgb, var(--tk-color-success) 35%, transparent);
  }
  .tk-badge-status.tk-badge-warn {
    background: color-mix(in srgb, var(--tk-color-warning) 16%, transparent);
    color: var(--tk-color-warning);
    border-color: color-mix(in srgb, var(--tk-color-warning) 35%, transparent);
  }
  .tk-badge-status.tk-badge-error {
    background: color-mix(in srgb, var(--tk-color-danger) 12%, transparent);
    color: var(--tk-color-danger);
    border-color: color-mix(in srgb, var(--tk-color-danger) 30%, transparent);
  }
  .tk-badge-status.tk-badge-muted {
    background: var(--tk-surface-stripe);
    color: var(--tk-color-text-secondary);
    border-color: var(--tk-surface-divider);
  }

  /* ---- htmx loading bar ---- */
  #htmx-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    opacity: 0;
    background: var(--tk-color-brand);
    box-shadow: 0 0 10px var(--tk-color-brand);
    z-index: 9999;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.2s ease;
  }

  /* ---- Navigation loading overlay (shown by shell.js after 1.5s) ---- */
  .tk-loading {
    position: fixed;
    bottom: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-loading-dim);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .tk-loading[hidden] { display: none; }
  .tk-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid var(--tk-surface-divider);
    background: var(--tk-surface-table-bg);
    color: var(--tk-color-text-primary);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  }
  .tk-loading-spin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--tk-color-accent-soft);
    border-top-color: var(--tk-color-brand);
    animation: ti-spin 0.8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-loading-spin { animation-duration: 2.4s; }
  }

  /* ---- Skeleton (e.g. /AccCode while its rows load) ---- */
  .tk-skeleton input,
  .tk-skeleton select { pointer-events: none; }
  .tk-skel-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
      var(--tk-surface-divider) 25%,
      var(--tk-surface-stripe) 50%,
      var(--tk-surface-divider) 75%);
    background-size: 200% 100%;
    animation: tk-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes tk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .tk-skel-line { animation: none; background: var(--tk-surface-divider); }
  }
  button.is-busy { cursor: progress; }

  /* ---- Page tabs (ລາຍການ / ເພີ່ມໃໝ່) ----
     A segmented pair shown on both the list page and its add/edit page, so
     the two read as one place with two modes rather than two destinations.
     Not part of the approved canvas, added on request.

     Connected-tab rail: one continuous brand-coloured line runs the full
     width of the strip and detours up and around whichever tab is open, the
     way a browser tab joins its page. That detour is what tells the user
     where they are, so the line has to stay unbroken across the inactive
     tabs and break only under the active one. */
  .tk-tabs {
    display: flex;
    align-items: flex-end;
    gap: var(--tk-space-5);
    width: 100%;
    /* The rail. Tabs overlap it with their own 2px bottom border. */
    border-bottom: 2px solid var(--tk-color-brand);
  }
  .tk-tab {
    /* one radius for the tab's top corners and for the curved feet of the open tab (below) */
    --tk-tab-r: 8px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-2);
    padding: var(--tk-space-2) var(--tk-space-4);
    margin-bottom: -2px; /* sit exactly on the rail */
    font-family: var(--tk-font-lao-heading-family);
    font-size: var(--tk-font-lao-size); /* body scale, level with the rest of the page */
    line-height: var(--tk-font-lao-lh);
    font-weight: 700;
    white-space: nowrap;
    color: var(--tk-color-text-tertiary);
    /* Glass chip edge and lift, like the app buttons, rounded on top only so
       each tab stays visually attached to the panel below rather than
       floating free. Sides are set individually: the bottom edge carries the
       rail, so a border shorthand would fight it. */
    background: var(--tk-glass-l3-bg);
    -webkit-backdrop-filter: blur(var(--tk-glass-l3-blur)) saturate(var(--tk-glass-saturate));
    backdrop-filter: blur(var(--tk-glass-l3-blur)) saturate(var(--tk-glass-saturate));
    /* no outline on a closed tab (owner 2026-10-04, like a browser's inactive tabs): its side edges used to end
       in a notch where they met the rail. The border stays 2px wide, transparent, so every size is unchanged
       and the open tab's curved feet still land on its own 2px side border. Hover tints it. */
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    /* Inactive tabs repaint the rail themselves, so it reads as one unbroken
       line passing behind them instead of stopping at each tab edge. */
    border-bottom: 2px solid var(--tk-color-brand);
    border-radius: var(--tk-tab-r) var(--tk-tab-r) 0 0;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
    transition: color var(--tk-motion-fast) var(--tk-motion-easing),
      border-color var(--tk-motion-fast) var(--tk-motion-easing),
      background-color var(--tk-motion-fast) var(--tk-motion-easing),
      box-shadow var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-tab:hover {
    color: var(--tk-color-text-primary);
    border-top-color: color-mix(in srgb, var(--tk-color-brand) 45%, transparent);
    border-left-color: color-mix(in srgb, var(--tk-color-brand) 45%, transparent);
    border-right-color: color-mix(in srgb, var(--tk-color-brand) 45%, transparent);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.1);
  }
  /* The open tab: the rail climbs its three outer edges, and its bottom edge
     goes transparent so the tab opens into the panel below. The opaque
     background is what hides the strip rail running underneath, a glass
     background would let the line show straight through and the detour would
     never appear. */
  .tk-tab.is-active {
    color: var(--tk-color-accent-strong);
    background: var(--tk-surface-table-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top-color: var(--tk-color-brand);
    border-left-color: var(--tk-color-brand);
    border-right-color: var(--tk-color-brand);
    border-bottom-color: transparent;
    box-shadow: 0 -4px 14px color-mix(in srgb, var(--tk-color-brand) 18%, transparent);
    z-index: 1;
  }
  /* Smooth like a browser tab (owner 2026-10-04): where the open tab meets the rail its outline does not turn a
     sharp corner, it curves outward into the rail, so the one brand line runs rail -> up the side -> over the top
     -> down -> out along the rail without a kink. Each foot is a square of the tab radius on the outside of a
     side edge: a ring of the brand colour (the line, 2px) with the tab fill outside it. Needs the tab's 2px
     borders: the square sits against the padding box, its ring lands on the 2px side border. */
  .tk-tab.is-active::before,
  .tk-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: var(--tk-tab-r);
    height: var(--tk-tab-r);
    pointer-events: none;
  }
  .tk-tab.is-active::before {
    right: 100%;
    background: radial-gradient(circle at 0 0,
      transparent calc(var(--tk-tab-r) - 2.5px), var(--tk-color-brand) calc(var(--tk-tab-r) - 1.5px),
      var(--tk-color-brand) calc(var(--tk-tab-r) - 0.5px), var(--tk-surface-table-bg) calc(var(--tk-tab-r) + 0.5px));
  }
  .tk-tab.is-active::after {
    left: 100%;
    background: radial-gradient(circle at 100% 0,
      transparent calc(var(--tk-tab-r) - 2.5px), var(--tk-color-brand) calc(var(--tk-tab-r) - 1.5px),
      var(--tk-color-brand) calc(var(--tk-tab-r) - 0.5px), var(--tk-surface-table-bg) calc(var(--tk-tab-r) + 0.5px));
  }

  /* ---- Toasts — transient TempData notifications, floated top-right.
     Opaque (not glass) so they stay readable over arbitrary page content,
     and mounted on <body> rather than inside the shell so no backdrop-filter
     ancestor can clip them. */
  /* The inline TempData alert bar never renders — shell.js lifts its content
     into a toast instead. Hidden from the first paint (not just removed by
     JS afterwards) so it doesn't flash in place first. Gated on .tk-js, set
     in the <head>, so with JS off the alert still shows normally. */
  .tk-js .alert.alert-dismissible {
    display: none !important;
  }

  .tk-toast-stack {
    position: fixed;
    top: calc(var(--tk-navbar-h) + var(--tk-space-3));
    right: var(--tk-space-5);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
  }
  .tk-toast {
    pointer-events: auto;
    width: 360px;
    max-width: calc(100vw - 2 * var(--tk-space-4));
    display: flex;
    align-items: flex-start;
    gap: var(--tk-space-3);
    padding: var(--tk-space-3) var(--tk-space-4);
    border-radius: var(--tk-radius-md);
    border: 1px solid var(--tk-border-panel);
    border-left: 4px solid var(--tk-color-info);
    background: var(--tk-surface-table-bg);
    color: var(--tk-color-text-primary);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    animation: tkToastIn var(--tk-motion-base) var(--tk-motion-easing) both;
  }
  .tk-toast.is-leaving {
    animation: tkToastOut var(--tk-motion-base) var(--tk-motion-easing) both;
  }
  .tk-toast-danger {
    border-left-color: var(--tk-color-danger);
    background: color-mix(in srgb, var(--tk-color-danger) 8%, var(--tk-surface-table-bg));
  }
  .tk-toast-success {
    border-left-color: var(--tk-color-success);
    background: color-mix(in srgb, var(--tk-color-success) 8%, var(--tk-surface-table-bg));
  }
  .tk-toast-warning {
    border-left-color: var(--tk-color-warning);
    background: color-mix(in srgb, var(--tk-color-warning) 8%, var(--tk-surface-table-bg));
  }
  .tk-toast-icon {
    flex: 0 0 auto;
    margin-top: 2px;
  }
  .tk-toast-danger .tk-toast-icon {
    color: var(--tk-color-danger);
  }
  .tk-toast-success .tk-toast-icon {
    color: var(--tk-color-success);
  }
  .tk-toast-warning .tk-toast-icon {
    color: var(--tk-color-warning);
  }
  .tk-toast-info .tk-toast-icon {
    color: var(--tk-color-info);
  }
  .tk-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
  }
  .tk-toast-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-radius-sm);
    color: var(--tk-color-text-secondary);
    transition: background-color var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-toast-close:hover {
    background: var(--tk-surface-hover);
  }

  @keyframes tkToastIn {
    from {
      transform: translate3d(24px, -8px, 0);
      opacity: 0;
    }
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes tkToastOut {
    from {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    to {
      transform: translate3d(24px, -8px, 0);
      opacity: 0;
    }
  }

  @media (max-width: 767px) {
    .tk-toast-stack {
      top: calc(var(--tk-navbar-h) + var(--tk-space-2));
      right: var(--tk-space-3);
      left: var(--tk-space-3);
    }
    .tk-toast {
      width: auto;
    }
  }

  /* ---- ttConfirm modal — L4 glass header/footer + near-opaque body (#6).
     Scrim is a solid dim overlay with NO backdrop-filter (#10 rule, which
     supersedes #5 later "add blur to the scrim" note — see plan notes). */
  .tk-modal-scrim {
    position: fixed;
    inset: 0;
    background: var(--tk-color-scrim);
    z-index: 200;
    display: none;
  }
  .tk-modal-scrim.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* One flat surface, not the three-band glass/opaque/glass sandwich #6 Q2
     describes for L4 — at these alphas the bands just read as stripes and
     make the card look cluttered rather than layered. Button order and the
     keyboard shortcuts are untouched (#3 locks the interaction); only the
     visual hierarchy changed. */
  .tk-modal-box {
    width: min(420px, 92vw);
    border-radius: var(--tk-radius-xl);
    overflow: hidden;
    border: 1px solid var(--tk-border-panel);
    background: var(--tk-surface-table-bg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: ttSlideUp var(--tk-motion-base) var(--tk-motion-easing) both;
  }
  .tk-modal-header {
    padding: var(--tk-space-5) var(--tk-space-5) 0;
    display: flex;
    align-items: center;
    gap: var(--tk-space-3);
  }
  .tk-modal-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--tk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, var(--tk-color-brand) 14%, transparent);
    color: var(--tk-color-brand);
  }
  .tk-modal-danger .tk-modal-icon {
    background: color-mix(in srgb, var(--tk-color-danger) 14%, transparent);
    color: var(--tk-color-danger);
  }
  /* Title is the label, the message is what you actually read — so the
     message carries the larger, primary-coloured type, not the title. */
  .tk-modal-title {
    font-weight: 700;
    line-height: 1.3;
    color: var(--tk-color-text-secondary);
    font-size: var(--tk-font-ui-body-size);
    font-family: var(--tk-font-lao-heading-family);
  }
  .tk-modal-sub {
    font-size: var(--tk-font-ui-caption-size);
    font-family: var(--tk-font-ui-family);
    color: var(--tk-color-text-tertiary);
    margin-top: 2px;
  }
  .tk-modal-body {
    padding: var(--tk-space-4) var(--tk-space-5) var(--tk-space-5);
    color: var(--tk-color-text-primary);
  }
  .tk-modal-message {
    font-size: var(--tk-font-lao-size);
    line-height: var(--tk-font-lao-lh);
    color: var(--tk-color-text-primary);
  }
  .tk-modal-footer {
    padding: 0 var(--tk-space-5) var(--tk-space-4);
    display: flex;
    gap: var(--tk-space-3);
  }
  /* Equal halves. Hierarchy comes from fill and shadow, not from width:
     confirm is solid + lifted, cancel is a soft filled neutral (not a washed
     out outline) so it still looks like a real button. Order (confirm left,
     cancel right) is unchanged so the Enter / ← → habits still work. */
  .tk-modal-footer .tk-btn {
    flex: 1;
  }
  .tk-modal-footer .tk-btn-primary {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tk-color-brand) 35%, transparent);
  }
  .tk-modal-danger .tk-modal-footer .tk-btn-primary {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tk-color-danger) 35%, transparent);
  }
  .tk-modal-footer .tk-btn-ghost {
    background: color-mix(in srgb, var(--tk-color-text-primary) 8%, var(--tk-surface-table-bg));
    border-color: color-mix(in srgb, var(--tk-color-text-primary) 14%, transparent);
    color: var(--tk-color-text-primary);
  }
  .tk-modal-footer .tk-btn-ghost:hover {
    background: color-mix(in srgb, var(--tk-color-text-primary) 14%, var(--tk-surface-table-bg));
    border-color: color-mix(in srgb, var(--tk-color-text-primary) 22%, transparent);
  }
  .tk-modal-hint {
    text-align: center;
    padding: 0 var(--tk-space-5) var(--tk-space-4);
    font-size: var(--tk-font-ui-caption-size);
    font-family: var(--tk-font-ui-family);
    color: var(--tk-color-text-tertiary);
  }

  @keyframes ttSlideUp {
    from {
      transform: translateY(22px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ---- Shared auth-card pattern (Login / SelectOffice / FirstOffice) ----
     Matches the approved canvas (LoginDark.dc.html) pixel-for-pixel: a
     single small centered glass card, not a two-panel layout or a big icon
     header block. */
  .tk-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tk-space-5);
    background-image: repeating-linear-gradient(
        0deg,
        var(--tk-grid-line) 0px,
        var(--tk-grid-line) 1px,
        transparent 1px,
        transparent 40px
      ),
      repeating-linear-gradient(
        90deg,
        var(--tk-grid-line) 0px,
        var(--tk-grid-line) 1px,
        transparent 1px,
        transparent 40px
      ),
      linear-gradient(
        160deg,
        var(--tk-bg-gradient-from) 0%,
        var(--tk-bg-gradient-to) 100%
      );
  }
  .tk-auth-card {
    width: min(420px, 100%);
    padding: 44px 40px 36px;
    border-radius: var(--tk-radius-auth-card);
    border-width: 1px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-5);
    animation: fadeSlideUp 0.45s var(--tk-motion-easing) both;
  }
  .tk-auth-card-wide {
    width: min(760px, 100%);
  }
  @keyframes fadeSlideUp {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .tk-auth-brand {
    display: flex;
    align-items: center;
    gap: var(--tk-space-3);
  }
  .tk-auth-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-radius-md);
    padding: 6px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tk-color-brand) 14%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tk-color-brand) 20%, transparent);
  }
  .tk-auth-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tk-auth-brand-en {
    font-family: var(--tk-font-ui-family);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.2px;
  }
  .tk-auth-brand-lo {
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    line-height: var(--tk-font-lao-lh);
    color: var(--tk-color-text-secondary);
  }
  .tk-auth-title {
    font-family: var(--tk-font-lao-heading-family);
    font-size: var(--tk-font-ui-heading-lg-size);
    line-height: var(--tk-font-ui-heading-lg-lh);
    font-weight: 700;
  }
  .tk-auth-subtitle {
    color: var(--tk-color-text-secondary);
  }
  .tk-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-4);
  }
  .tk-field {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-2);
  }
  .tk-field-label {
    display: block;
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    line-height: var(--tk-font-lao-lh);
    color: var(--tk-color-text-secondary);
  }
  .tk-field-input {
    width: 100%;
    font-family: var(--tk-font-ui-family);
    font-size: 16px;
    padding: 13px 16px;
    border-radius: var(--tk-radius-auth-field);
    border: 1px solid var(--tk-surface-divider);
    background: var(--tk-surface-table-bg);
    color: var(--tk-color-text-primary);
    transition: border-color var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-field-input:focus {
    outline: none;
    border-color: var(--tk-color-brand);
  }
  /* Auth-page primary button — canvas uses a gradient fill, Lao 17px label,
     14px radius; scoped to .tk-auth-card so the shell-wide .tk-btn-primary
     (ttConfirm, elsewhere) keeps its own flat/8px styling. */
  .tk-auth-card .tk-btn-primary {
    border-radius: var(--tk-radius-auth-field);
    padding: 14px 20px;
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    background: linear-gradient(145deg, var(--tk-color-brand), var(--tk-color-accent));
    border-color: transparent;
  }
  /* Class name kept as `tt-field-error` (not `tk-*`) — Opening/Add.cshtml and
     other views outside this batch already toggle this exact class name
     directly, so renaming it would silently break their validation styling. */
  .tt-field-error {
    border-color: var(--tk-color-danger) !important;
    background-color: color-mix(in srgb, var(--tk-color-danger) 6%, transparent) !important;
  }
  .tt-field-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-color-danger) 20%, transparent) !important;
  }
  .tk-alert-err {
    padding: var(--tk-space-3) var(--tk-space-4);
    border-radius: var(--tk-radius-sm);
    background: color-mix(in srgb, var(--tk-color-danger) 12%, transparent);
    color: var(--tk-color-danger);
    margin-bottom: var(--tk-space-4);
    font-size: var(--tk-font-ui-body-size);
    font-family: var(--tk-font-ui-family);
  }
  .tk-info-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-2);
    padding: var(--tk-space-1) var(--tk-space-3);
    border-radius: var(--tk-radius-pill);
    background: color-mix(in srgb, var(--tk-color-brand) 12%, transparent);
    color: var(--tk-color-brand);
    font-size: var(--tk-font-ui-caption-size);
    font-family: var(--tk-font-ui-family);
    margin-bottom: var(--tk-space-4);
  }

  /* ---- Office picker cards (SelectOffice) ---- */
  /* ---- Office picker ----
     A row list, not a card grid. The cards were a grid of tiles whose height
     depended on whether that office happened to have a tax number, so the
     rows never lined up and the last tile sat alone on its own line. As rows
     every office occupies the same shape, and the list stays readable however
     many offices a user has. */
  .tk-office-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--tk-space-4);
  }
  .tk-office-search-icon {
    position: absolute;
    left: var(--tk-space-4);
    color: var(--tk-color-text-tertiary);
    pointer-events: none;
  }
  .tk-office-search {
    width: 100%;
    padding: var(--tk-space-2) var(--tk-space-4);   /* slimmer box (owner 2026-10-23) */
    padding-left: 42px;
    border-radius: var(--tk-radius-sm);
    border: 1px solid var(--tk-surface-divider);
    background: var(--tk-surface-table-bg);
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
  }
  .tk-office-search:focus {
    outline: none;
    border-color: var(--tk-color-brand);
    box-shadow: 0 0 0 3px var(--tk-color-accent-soft);
  }
  .tk-office-search-clear {
    position: absolute;
    right: var(--tk-space-3);
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--tk-surface-hover);
    color: var(--tk-color-text-secondary);
    cursor: pointer;
  }
  .tk-office-search-wrap.has-query .tk-office-search-clear {
    display: flex;
  }

  .tk-office-list {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-2);
  }
  .tk-office-row {
    display: flex;
    align-items: center;
    gap: var(--tk-space-4);
    width: 100%;
    padding: var(--tk-space-3) var(--tk-space-4);
    border-radius: var(--tk-radius-md);
    border-width: 1px;
    border-style: solid;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tk-motion-fast) var(--tk-motion-easing),
      background-color var(--tk-motion-fast) var(--tk-motion-easing);
  }
  .tk-office-row:hover {
    border-color: var(--tk-color-brand);
    background: var(--tk-color-accent-soft);
  }
  .tk-office-row-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-radius-md);
    background: color-mix(in srgb, var(--tk-color-brand) 12%, transparent);
    color: var(--tk-color-brand);
    font-size: 17px;
  }
  .tk-office-row-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tk-office-row-name {
    display: block; /* it is a <span> inside a <button>, so it needs this */
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    font-weight: 700;
    color: var(--tk-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Code and tax number on one line: two separate caption lines were what
     made the tiles different heights in the first place. */
  .tk-office-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-space-1) var(--tk-space-4);
    font-family: var(--tk-font-ui-family);
    font-size: var(--tk-font-ui-caption-size);
    color: var(--tk-color-text-secondary);
  }
  .tk-office-row-go {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--tk-space-2);
    font-family: var(--tk-font-lao-family);
    font-size: var(--tk-font-lao-size);
    font-weight: 700;
    color: var(--tk-color-brand);
  }
  @media (max-width: 575px) {
    /* No room for the call to action beside the name on a phone; the whole
       row is the button anyway, so drop the label and keep the arrow. */
    .tk-office-row-go span {
      display: none;
    }
  }

/* ---- Navbar rhythm ----
   The bar had four different control heights in it (34px toggle and mark,
   36px icon buttons, a bare 35px date button built from inline styles, and a
   20px status pill) with two different gaps, so nothing lined up. Everything
   interactive is normalised to --tk-navbar-ctl with one radius and one gap;
   the badge stays deliberately shorter because it is a status, not a
   control, but it sits on the same centre line. */
.tk-nav-left,
.tk-nav-right {
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  min-width: 0;
}
.tk-rail-toggle,
.tk-navbar-mark,
.tk-btn-icon,
.tk-workdate-btn {
  width: var(--tk-navbar-ctl);
  height: var(--tk-navbar-ctl);
  border-radius: 10px;
}
.tk-rail-toggle {
  margin-right: 0; /* the flex gap owns the spacing now */
}
.tk-navbar .tk-btn-ghost,
.tk-workdate-btn {
  width: auto;
  height: var(--tk-navbar-ctl);
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-2);
  padding: 0 var(--tk-space-3);
  border-radius: 10px;
  cursor: pointer;
}
/* The date was raw text with a bare icon next to it, which read as a label
   rather than something you can press. Same chip as its neighbours. */
.tk-workdate-btn {
  border: 1px solid var(--tk-surface-divider);
  background: transparent;
  color: var(--tk-color-text-secondary);
  transition: background-color var(--tk-motion-fast) var(--tk-motion-easing),
    border-color var(--tk-motion-fast) var(--tk-motion-easing);
}
.tk-workdate-btn:hover {
  background: var(--tk-surface-hover);
  border-color: color-mix(in srgb, var(--tk-color-brand) 40%, transparent);
  color: var(--tk-color-text-primary);
}
/* Dividers were stretching the full 48px between the navbar paddings, making
   them heavier than the 36px controls they separate. Sized to the controls
   and centred instead. */
.tk-navbar .tk-nav-divider {
  width: 1px;
  height: 22px;
  align-self: center;
  margin-block: 0;
  background: color-mix(in srgb, var(--tk-color-text-tertiary) 35%, transparent);
}
.tk-navbar .tk-navbar-brand {
  font-size: 16px; /* was 15px, which sat below the office name beside it */
}
/* Status pill: kept shorter than the controls so it does not read as a
   button, but given real padding and a legible size. 12px is above the old
   11px yet still below the 17px Lao floor from ticket #4 -- that floor is a
   reading-text rule, and holding it here would make a passive status badge
   the largest thing in the bar. */
.tk-navbar .tk-badge-status {
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
}

/* ---- Logout + E-Tax status ----
   .tk-btn-icon was written as a modifier of .tk-btn, which owns the flex
   centring, but the logout link carries it on its own. Without that the
   anchor stayed inline, so its 36px box did nothing and the icon sat off
   centre against the other controls. The class owns its own box now. */
.tk-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}
/* Logging out is the one destructive control in the bar, so it is the one
   thing allowed to be red. Outlined at rest, filled on hover, rather than
   solid red all the time shouting over everything else. */
.tk-navbar-logout {
  color: var(--tk-color-danger);
  border-color: color-mix(in srgb, var(--tk-color-danger) 40%, transparent);
  background: color-mix(in srgb, var(--tk-color-danger) 8%, transparent);
}
.tk-navbar-logout:hover {
  background: var(--tk-color-danger);
  border-color: var(--tk-color-danger);
  color: var(--tk-color-on-accent);
}

.tk-status-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
/* Colour plus a name, nothing else. The dot carries the state through
   currentColor, so each tk-badge-* variant tints it for free. */
.tk-badge-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
.tk-status-popup {
  display: none;
  position: absolute;
  top: calc(100% + var(--tk-space-2));
  right: 0;
  min-width: 260px;
  padding: var(--tk-space-3) var(--tk-space-4);
  border-radius: var(--tk-radius-md);
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 40;
}
/* Hover opens it, a click pins it open -- the badge is also focusable, so
   keyboard users get it on focus. */
.tk-status-wrap:hover .tk-status-popup,
.tk-status-wrap:focus-within .tk-status-popup,
.tk-status-wrap.is-pinned .tk-status-popup {
  display: block;
}
.tk-status-title {
  font-family: var(--tk-font-ui-family);
  font-size: var(--tk-font-ui-caption-size);
  font-weight: 700;
  color: var(--tk-color-text-tertiary);
  letter-spacing: 0.04em;
  margin-bottom: var(--tk-space-2);
}
.tk-status-row {
  display: flex;
  align-items: flex-start;
  gap: var(--tk-space-3);
  padding: 3px 0;
  font-family: var(--tk-font-ui-family);
  font-size: var(--tk-font-ui-body-size);
}
.tk-status-key {
  flex: 0 0 96px;
  color: var(--tk-color-text-tertiary);
}
.tk-status-val {
  flex: 1;
  min-width: 0;
  color: var(--tk-color-text-primary);
  font-weight: 700;
  word-break: break-word;
}

/* The logout control is now a menu. Bootstrap full stylesheet is still
   loaded for the un-migrated pages, and it hangs a caret off every
   .dropdown-toggle -- fine next to the text of the Setup button, wrong
   inside a 36px icon square. */
.tk-no-caret::after {
  display: none !important;
}
/* Only the destructive entry is red, so opening the menu does not read as
   two warnings side by side. */
.tk-dropdown-item-danger {
  color: var(--tk-color-danger);
}
.tk-dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--tk-color-danger) 12%, transparent);
  color: var(--tk-color-danger);
}

/* ---- Office picker: heading outside the card ----
   The brand and the greeting used to live inside the card, which meant the
   card had to hold two unrelated jobs: say who you are, and list the
   offices. Pulled out into a stack above it, the card becomes just the list
   and is free to cap its height and scroll on its own. */
.tk-auth-page-stacked {
  align-items: flex-start;
  /* owner 2026-10-23: the page fits the screen exactly (no page scroll bar); only the list scrolls */
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding-block: var(--tk-space-5) var(--tk-space-3);
}
.tk-auth-page-stacked .tk-auth-stack { height: 100%; min-height: 0; }
.tk-auth-page-stacked .tk-office-picker { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* owner 2026-10-23: the count inside the search row on the right, and a smaller office list */
.tk-office-picker .tk-office-search { padding-right: 170px; }
.tk-office-picker .tk-office-search-wrap .tk-office-count { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; }
.tk-office-picker .tk-office-row { padding: var(--tk-space-2) var(--tk-space-4); }
.tk-office-picker .tk-office-row-icon { width: 34px; height: 34px; }
.tk-office-picker .tk-office-row-name, .tk-office-picker .tk-office-row-go { font-size: 15px; }
.tk-office-picker .tk-office-row-meta { font-size: 12px; }
.tk-auth-stack {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
  animation: fadeSlideUp 0.45s var(--tk-motion-easing) both;
}
.tk-auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-4);
}
.tk-auth-heading {
  text-align: center;
}
/* The card is already inside the animated stack; running the same keyframes
   again would make it slide separately from its own heading. */
.tk-auth-stack .tk-auth-card {
  width: 100%;
  animation: none;
  padding: var(--tk-space-5);
  gap: var(--tk-space-3);
}
/* Built to hold a long list: the search box and the count stay put while
   only the rows scroll, so the box never scrolls away from the list it
   filters. The cap is viewport-relative so a tall screen shows more rows
   rather than leaving the space empty. */
.tk-office-picker .tk-office-list {
  /* takes whatever height the card has left (the card fills the screen, see .tk-auth-page-stacked) */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.tk-office-count {
  font-family: var(--tk-font-ui-family);
  font-size: var(--tk-font-ui-caption-size);
  color: var(--tk-color-text-tertiary);
}
@media (max-width: 575px) {
  .tk-auth-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tk-space-3);
  }
}

/* Red outline button for leaving the app. Same treatment as the navbar
   logout control -- outlined at rest, filled on hover -- so the one action
   that drops your session looks the same wherever it appears. */
.tk-btn-danger-ghost {
  background: color-mix(in srgb, var(--tk-color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--tk-color-danger) 40%, transparent);
  color: var(--tk-color-danger);
}
.tk-btn-danger-ghost:hover {
  background: var(--tk-color-danger);
  border-color: var(--tk-color-danger);
  color: var(--tk-color-on-accent);
}
/* the accent twin of .tk-btn-danger-ghost (company picker: Group overview beside Log out) */
.tk-btn-accent-ghost {
  background: color-mix(in srgb, var(--tk-color-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--tk-color-accent) 40%, transparent);
  color: var(--tk-color-accent);
}
.tk-btn-accent-ghost:hover {
  background: var(--tk-color-accent);
  border-color: var(--tk-color-accent);
  color: var(--tk-color-on-accent);
}
.tk-auth-topbar-actions { display: flex; gap: var(--tk-space-2); margin-left: auto; }
.tk-auth-topbar-actions .tk-btn { min-width: 170px; justify-content: center; }

/* ── Home menu (owner mockup 2026-09-22) ──────────────────────────────────────
   Search + category chips on top, then one card per section holding round icon
   buttons. Same MenuCatalog as the sidebar. Tone = ring/icon colour per section.
   On phones the icons become rounded-square app icons in a 4-column grid so they
   are quick to find and easy to tap, like a phone home screen. */
.tk-home { display: flex; flex-direction: column; gap: var(--tk-space-5); padding-bottom: var(--tk-space-5); }
.tk-home-card {
  background: var(--tk-surface-table-bg);
  border: 1px solid var(--tk-border-panel);
  border-radius: var(--tk-radius-xl);
  padding: var(--tk-space-4) var(--tk-space-5) var(--tk-space-5);
}
.tk-home-tools { display: flex; flex-direction: column; gap: var(--tk-space-3); padding-block: var(--tk-space-4); }
.tk-home-search {
  position: relative;
  max-width: 320px;
  width: 100%;
}
.tk-home-search .ti {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tk-color-text-tertiary); pointer-events: none;
}
.tk-home-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--tk-border-panel);
  border-radius: var(--tk-radius-md);
  background: var(--tk-surface-stripe);
  color: var(--tk-color-text-primary);
  font: inherit;
}
.tk-home-search input:focus { outline: 2px solid var(--tk-color-accent); outline-offset: 1px; background: var(--tk-surface-table-bg); }
.tk-home-chips {
  display: flex; gap: var(--tk-space-2); flex-wrap: wrap;
  padding-top: var(--tk-space-3);
  border-top: 1px solid var(--tk-surface-divider);
}
.tk-home-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--tk-surface-stripe);
  color: var(--tk-color-text-primary);
  font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.tk-home-chip .n {
  min-width: 22px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: 12px; background: var(--tk-surface-divider); color: var(--tk-color-text-secondary);
}
.tk-home-chip.is-active { background: #0f172a; color: #fff; }
.tk-home-chip.is-active .n { background: rgba(255,255,255,.2); color: #fff; }
[data-theme='dark'] .tk-home-chip.is-active { background: var(--tk-color-brand); color: var(--tk-color-on-accent); }
[data-theme='dark'] .tk-home-chip.is-active .n { background: rgba(0,0,0,.2); color: var(--tk-color-on-accent); }

.tk-home-head {
  display: flex; align-items: center; gap: var(--tk-space-3);
  padding-bottom: var(--tk-space-3);
  border-bottom: 1px solid var(--tk-surface-divider);
  margin-bottom: var(--tk-space-4);
}
.tk-home-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; font-size: 15px;
  color: var(--tk-tone);
  background: color-mix(in srgb, var(--tk-tone) 12%, var(--tk-surface-table-bg));
  border: 1px solid color-mix(in srgb, var(--tk-tone) 25%, transparent);
}
.tk-home-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--tk-color-text-primary); }
.tk-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 172px);
  justify-content: start;
  gap: var(--tk-space-4) var(--tk-space-3);
}
.tk-home-empty { text-align: center; color: var(--tk-color-text-tertiary); padding: var(--tk-space-5); }

.tk-quick-item {
  --tk-tone: var(--tk-color-accent);
  display: flex; flex-direction: column; align-items: center; gap: var(--tk-space-3);
  padding: var(--tk-space-3) var(--tk-space-2);
  border-radius: var(--tk-radius-md);
  color: var(--tk-color-text-primary);
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tk-quick-item.tk-tone-amber  { --tk-tone: var(--tk-color-warning); }
.tk-quick-item.tk-tone-green  { --tk-tone: var(--tk-color-success); }
.tk-quick-item.tk-tone-purple { --tk-tone: #9333ea; }
.tk-home-head.tk-tone-amber  { --tk-tone: var(--tk-color-warning); }
.tk-home-head.tk-tone-green  { --tk-tone: var(--tk-color-success); }
.tk-home-head.tk-tone-purple { --tk-tone: #9333ea; }
.tk-home-head.tk-tone-blue   { --tk-tone: var(--tk-color-accent); }
[data-theme='dark'] .tk-quick-item.tk-tone-purple,
[data-theme='dark'] .tk-home-head.tk-tone-purple { --tk-tone: #c084fc; }
.tk-quick-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; font-size: 22px;
  color: var(--tk-tone);
  background: color-mix(in srgb, var(--tk-tone) 10%, var(--tk-surface-table-bg));
  border: 1px solid color-mix(in srgb, var(--tk-tone) 28%, transparent);
  transition: transform var(--tk-motion-base) var(--tk-motion-easing), box-shadow var(--tk-motion-base) var(--tk-motion-easing),
              background-color var(--tk-motion-base) var(--tk-motion-easing), color var(--tk-motion-base) var(--tk-motion-easing), border-color var(--tk-motion-base) var(--tk-motion-easing);
}
/* Hover / keyboard focus: the whole tile lifts, the circle fills with the section colour, the icon turns
   white (dark theme: dark ink), the label takes the section colour. Hover only on devices that have one. */
.tk-quick-item { transition: background-color var(--tk-motion-base) var(--tk-motion-easing), box-shadow var(--tk-motion-base) var(--tk-motion-easing); }
.tk-quick-item:focus-visible .tk-quick-circle {
  background: var(--tk-tone); border-color: var(--tk-tone); color: var(--tk-color-on-accent);
  transform: translateY(-4px) scale(1.1); box-shadow: 0 10px 22px color-mix(in srgb, var(--tk-tone) 40%, transparent);
}
@media (hover: hover) {
  .tk-quick-item:hover { background: color-mix(in srgb, var(--tk-tone) 7%, transparent); }
  .tk-quick-item:hover .tk-quick-circle {
    background: var(--tk-tone); border-color: var(--tk-tone); color: var(--tk-color-on-accent);
    transform: translateY(-4px) scale(1.1); box-shadow: 0 10px 22px color-mix(in srgb, var(--tk-tone) 40%, transparent);
  }
  .tk-quick-item:hover .tk-quick-lbl { color: var(--tk-tone); }
}
.tk-quick-item:active .tk-quick-circle { transform: scale(.94); }
.tk-quick-item:focus-visible { outline: none; }
.tk-quick-item:focus-visible .tk-quick-circle { outline: 2px solid var(--tk-tone); outline-offset: 2px; }
.tk-quick-lbl { font-size: var(--tk-font-ui-body-size); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }

/* Phone: app-icon style. Rounded-square icons, 4 per row, labels under each, big tap area. */
@media (max-width: 767px) {
  .tk-home { gap: var(--tk-space-3); }
  .tk-home-card { padding: var(--tk-space-3) var(--tk-space-3) var(--tk-space-4); border-radius: var(--tk-radius-lg); }
  .tk-home-search { max-width: none; }
  .tk-home-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tk-home-chips::-webkit-scrollbar { display: none; }
  .tk-home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tk-space-3) var(--tk-space-1); }
  .tk-quick-item { gap: 6px; padding: 8px 2px; min-height: 88px; }
  .tk-quick-circle { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
  .tk-quick-lbl { font-size: 12px; font-weight: 600; line-height: 1.25; }
}
@media (max-width: 379px) { .tk-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-home [hidden] { display: none !important; }

/* ── Icons (Tabler outline sprite, wayfinder #46/#49) ─────────────────────
   <icon name="…"> renders <svg class="ti"><use href="/icons/tabler.svg#…">.
   Size follows font-size like the old Font Awesome glyphs; colour follows
   currentColor. --icon-stroke sets the line weight for the whole app. */
:root { --icon-stroke: 1.5; }

.ti {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.ti-2x { font-size: 2em; }
.ti-3x { font-size: 3em; }
/* a logo picture in place of an outline icon (IconTagHelper "img:", owner 2026-10-28) */
.ti.ti-img { object-fit: contain; stroke: none; }
.tk-quick-circle .ti-img { width: 44px; height: 44px; }
.ti-spin { animation: ti-spin 1s linear infinite; }
@keyframes ti-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ti-spin { animation-duration: 2.5s; } }

/* Sidebar icons keep the sizes of the inline SVGs they replaced (18px, groups 17px, arrow 14px). */
.tk-nav-icon .ti { font-size: 18px; }
.tk-nav-group-btn .tk-nav-icon .ti { font-size: 17px; }
.ti.tk-nav-arrow { width: 14px; height: 14px; }

/* ── Page layer: list + form pages (Batch 2a, artboards ListLight/Dark, FormLight/Dark) ──
   Commanding layer = glass (.tk-toolbar with .tk-glass-l2), content layer = opaque
   (.tk-table-wrap, .tk-formcard). Every colour comes from tokens.css. */
.tk-page { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.tk-toolbar {
  border-radius: 18px; border: 1px solid transparent;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tk-toolbar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tk-toolbar-actions { display: flex; align-items: center; gap: 8px; }
/* One ດຶງ Excel ▾ menu on every report page (_ExcelMenu): a small group caption above each set of files */
.tk-excel-menu .tk-dropdown-menu { min-width: 260px; list-style: none; margin: 0; }
.tk-excel-menu-group { padding: 8px 12px 4px; font-size: 12px; color: var(--tk-color-text-secondary, #64748b); }
.tk-excel-menu-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--tk-surface-divider); padding-top: 10px; }
.tk-page-title {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-family: var(--tk-font-lao-heading-family); font-size: 20px; font-weight: 700; line-height: 1.6;
  color: var(--tk-color-text-primary);
}
.tk-page-title .ti { color: var(--tk-color-accent); }

/* AutoFilter (#11): search + optional selects + clear + count, instant client-side filter */
.autofilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.af-search {
  /* a fixed, short box on every page (owner 2026-10-11): it no longer stretches across the toolbar */
  flex: 0 1 340px; max-width: 340px; min-width: 220px; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
}
.af-search .ti { color: var(--tk-color-text-tertiary); }
.af-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
  color: var(--tk-color-text-primary);
}
.af-search input::placeholder { color: var(--tk-color-text-tertiary); }
.af-select {
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--tk-border-panel);
  background: var(--tk-surface-table-bg); color: var(--tk-color-text-primary);
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
}
.af-clear { white-space: nowrap; }
.count-badge {
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
  font-weight: 700; white-space: nowrap;
  color: var(--tk-color-accent-strong); background: var(--tk-color-accent-soft);
  padding: 6px 12px; border-radius: 999px;
}

/* Period bar (#12) */
.tk-period-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-pchip {
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--tk-border-panel);
  background: var(--tk-surface-table-bg); color: var(--tk-color-text-secondary); text-decoration: none;
  cursor: pointer; /* the report chips are <a hx-get> without an href, which shows the text cursor otherwise */
}
.tk-pchip.is-active { background: var(--tk-color-accent); border-color: var(--tk-color-accent); color: var(--tk-color-on-accent); font-weight: 700; }

/* Opaque table */
.tk-table-wrap {
  border-radius: 18px; background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
  overflow: auto; min-height: 0;
}
.tk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--tk-font-ui-family); color: var(--tk-color-text-primary); }
.tk-table thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  background: var(--tk-surface-alt); border-bottom: 1px solid var(--tk-border-panel);
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); font-weight: 700; line-height: 1.5;
  color: var(--tk-color-text-secondary); padding: 12px 16px;
}
.tk-table tbody td { padding: 13px 16px; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--tk-border-panel); }
.tk-table tbody tr:last-child td { border-bottom: none; }
.tk-table tbody tr:hover { background: var(--tk-surface-hover); }
.tk-table tbody tr.is-selected { background: var(--tk-color-accent-soft); }
.tk-table tbody tr[data-href], .tk-table tbody tr.is-clickable { cursor: pointer; }
.tk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-table .center { text-align: center; }
/* Print-only row separator (trial balance, see print.css) */
.tk-row-rule { display: none; }
/* Two-row grouped header (e.g. trial balance ຍອດຍົກມາ → ໜີ້ / ມີ): stick the whole <thead>, not
   each <th>, so the second row doesn't slide under the first while scrolling. */
.tk-table.is-2row-head thead { position: sticky; top: 0; z-index: 2; }
.tk-table.is-2row-head thead th { position: static; text-align: center; }
.tk-table.is-2row-head thead tr:first-child th[colspan] { border-bottom: 1px solid var(--tk-border-panel); }
.tk-table .muted { color: var(--tk-color-text-tertiary); }
.tk-table .lao { font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); }
.tk-table .code { font-weight: 700; color: var(--tk-color-accent-strong); }
.tk-table .dr { color: var(--tk-color-success); font-weight: 700; }
.tk-table .cr { color: var(--tk-color-danger); font-weight: 700; }
.tk-table-empty td { text-align: center; padding: 48px 16px; color: var(--tk-color-text-tertiary); font-family: var(--tk-font-lao-family); }
.tk-table-empty .ti { display: block; margin: 0 auto 8px; font-size: 32px; opacity: 0.5; }

/* Form card */
.tk-formcard {
  border-radius: 18px; background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.tk-formcard-head {
  padding: 14px 20px; border-bottom: 1px solid var(--tk-border-panel);
  font-family: var(--tk-font-lao-heading-family); font-size: var(--tk-font-lao-size); font-weight: 700; line-height: var(--tk-font-lao-lh);
  display: flex; align-items: center; gap: 8px; color: var(--tk-color-text-primary);
}
.tk-formcard-head .ti { color: var(--tk-color-accent); }
.tk-formcard-body { padding: 18px 20px; display: grid; gap: 14px; }
.tk-form-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--tk-border-panel); background: var(--tk-surface-alt);
}
.tk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-field > label {
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
  color: var(--tk-color-text-secondary);
}
.tk-field > label .req { color: var(--tk-color-danger); }
.tk-input {
  width: 100%; font-family: var(--tk-font-ui-family); font-size: 14px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--tk-border-panel);
  background: var(--tk-surface-table-bg); color: var(--tk-color-text-primary);
}
.tk-input.lao { font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh); padding-block: 6px; }
.tk-input.code { font-weight: 700; color: var(--tk-color-accent-strong); }
.tk-input[readonly] { background: var(--tk-surface-alt); }
.tk-input:focus { outline: 2px solid var(--tk-color-accent-soft); border-color: var(--tk-color-accent); }
.tk-hint { font-size: 13px; color: var(--tk-color-text-tertiary); display: flex; align-items: center; gap: 6px; }

/* Split: form card beside a list (Books-style pages) */
.tk-split { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .tk-split { grid-template-columns: 1fr; } }

/* ── Page layer, form extras (Batch 2b: Company, AccCode) ── */
.tk-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tk-grid > * { grid-column: span 12; }
@media (min-width: 900px) {
  .tk-grid > .span-3 { grid-column: span 3; } .tk-grid > .span-4 { grid-column: span 4; }
  .tk-grid > .span-5 { grid-column: span 5; } .tk-grid > .span-6 { grid-column: span 6; }
  .tk-grid > .span-9 { grid-column: span 9; }
}
.tk-form-scroll { min-height: 0; }
.tk-input-group { display: flex; align-items: stretch; }
.tk-input-group > .tk-input { flex: 1; min-width: 0; }
.tk-input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.tk-input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tk-input-addon {
  display: flex; align-items: center; padding: 0 10px; font-size: 12px;
  border: 1px solid var(--tk-border-panel); border-radius: 10px;
  background: var(--tk-surface-alt); color: var(--tk-color-text-tertiary);
}
.tk-input.is-invalid { border-color: var(--tk-color-danger); }
.tk-invalid-msg { display: none; font-size: 13px; color: var(--tk-color-danger); }
.tk-input.is-invalid ~ .tk-invalid-msg { display: block; }
.tk-input.is-flash { background: var(--tk-color-accent-soft); transition: background var(--tk-motion-base) var(--tk-motion-easing); }
.tk-hint.is-bad { color: var(--tk-color-danger); }
.tk-check.is-invalid { outline: 2px solid var(--tk-color-danger); outline-offset: 3px; border-radius: 6px; }
.tk-check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); color: var(--tk-color-text-primary); cursor: pointer; }
.tk-check input { width: 18px; height: 18px; accent-color: var(--tk-color-accent); }

/* Section tabs inside a toolbar (Bootstrap pill mechanism, toggles .active) */
.tk-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-subtab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--tk-border-panel); background: var(--tk-surface-table-bg); color: var(--tk-color-text-secondary);
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh); cursor: pointer;
}
.tk-subtab.active { background: var(--tk-color-accent); border-color: var(--tk-color-accent); color: var(--tk-color-on-accent); font-weight: 700; }

/* Small tags and status pills in tables */
.tk-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--tk-color-accent-soft); color: var(--tk-color-accent-strong); white-space: nowrap;
}
.tk-tag.is-global { background: color-mix(in srgb, var(--tk-color-success) 14%, transparent); color: var(--tk-color-success); }
.tk-tag.is-local { background: color-mix(in srgb, var(--tk-color-warning) 16%, transparent); color: var(--tk-color-warning); }
.tk-tag.is-del { background: color-mix(in srgb, var(--tk-color-danger) 12%, transparent); color: var(--tk-color-danger); }
.tk-tag.kot-1 { background: var(--tk-color-accent-soft); color: var(--tk-color-accent-strong); }
.tk-tag.kot-2 { background: color-mix(in srgb, var(--tk-color-warning) 16%, transparent); color: var(--tk-color-warning); }
.tk-tag.kot-3 { background: color-mix(in srgb, var(--tk-color-success) 14%, transparent); color: var(--tk-color-success); }
.tk-status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--tk-font-lao-family); font-size: 14px; font-weight: 600;
}
.tk-status-pill.is-on { background: color-mix(in srgb, var(--tk-color-success) 14%, transparent); color: var(--tk-color-success); }
.tk-status-pill.is-off { background: var(--tk-surface-alt); color: var(--tk-color-text-tertiary); }
.tk-table tr.is-dimmed { opacity: 0.55; }
.tk-table .is-clickable { cursor: pointer; }

/* Callout box (warnings inside dialogs / forms) */
.tk-callout {
  border-radius: 10px; padding: 12px 14px; border-left: 4px solid var(--tk-color-warning);
  background: color-mix(in srgb, var(--tk-color-warning) 10%, transparent); color: var(--tk-color-text-primary);
}
.tk-callout.is-danger { border-left-color: var(--tk-color-danger); background: color-mix(in srgb, var(--tk-color-danger) 10%, transparent); display: flex; align-items: center; gap: 8px; }
.tk-callout-title { font-weight: 700; color: var(--tk-color-warning); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* Switch row */
.tk-switch-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--tk-surface-alt); border: 1px solid var(--tk-border-panel);
}
.tk-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.tk-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tk-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--tk-border-panel); transition: background var(--tk-motion-fast) var(--tk-motion-easing); }
.tk-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tk-surface-table-bg); transition: transform var(--tk-motion-fast) var(--tk-motion-easing); }
.tk-switch input:checked + .tk-switch-track { background: var(--tk-color-success); }
.tk-switch input:checked + .tk-switch-track::after { transform: translateX(18px); }
.tk-switch input:focus-visible + .tk-switch-track { outline: 2px solid var(--tk-color-accent); outline-offset: 2px; }
.tk-switch-label { font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); font-weight: 700; color: var(--tk-color-text-tertiary); }
.tk-switch-label.is-on { color: var(--tk-color-success); }

/* Segmented choice (e.g. cost function) */
.tk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--tk-border-panel); background: var(--tk-surface-table-bg); color: var(--tk-color-text-secondary);
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); line-height: var(--tk-font-lao-lh);
}
.tk-seg-btn.is-active { background: var(--tk-color-accent); border-color: var(--tk-color-accent); color: var(--tk-color-on-accent); font-weight: 700; }
/* joined two-way switch, one outlined pill (person / company on the customer forms, owner 2026-10-12) */
.tk-seg.is-pill { display: inline-flex; flex-wrap: nowrap; gap: 0; border: 1px solid var(--tk-color-accent); border-radius: 10px; overflow: hidden; width: max-content; }
.tk-seg.is-pill .tk-seg-btn { border: 0; border-radius: 0; background: transparent; color: var(--tk-color-accent); padding: 6px 14px; }
.tk-seg.is-pill .tk-seg-btn + .tk-seg-btn { border-left: 1px solid var(--tk-color-accent); }
.tk-seg.is-pill .tk-seg-btn.is-active { background: var(--tk-color-accent); color: var(--tk-color-on-accent); }
/* Fiscal-year picker at the head of the report period bar (Views/Report/_FyPicker) */
.tk-fy-pick {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; border-radius: 10px;
  border: 1px solid var(--tk-color-accent); background: var(--tk-surface-table-bg); color: var(--tk-color-accent);
}
.tk-fy-pick select {
  border: 0; background: transparent; color: var(--tk-color-text-primary); padding: 7px 4px; cursor: pointer;
  font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); font-weight: 700;
}
.tk-fy-pick select:focus { outline: none; }

/* Page layout: toolbar and footer keep their height; the table or the form body takes the rest and scrolls. */
.tk-page > * { flex-shrink: 0; }
.tk-page > .tk-table-wrap, .tk-page > .tk-form-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tk-tag:empty { display: none; }

/* ── Page layer, money forms (Batch 2c: Opening) ── */
.tk-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-input.dr { color: var(--tk-color-success); font-weight: 700; }
.tk-input.cr { color: var(--tk-color-danger); font-weight: 700; }
.tk-calc { display: grid; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tk-surface-alt); border: 1px solid var(--tk-border-panel); }

/* Account autocomplete dropdown */
.tk-acwrap { position: relative; }
.tk-acdrop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1055; max-height: 260px; overflow-y: auto;
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.acd-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--tk-border-panel); }
.acd-item:last-child { border-bottom: none; }
.acd-item.is-hi { background: var(--tk-color-accent-soft); }
.acd-item .code { font-weight: 700; color: var(--tk-color-accent-strong); font-family: var(--tk-font-ui-family); }
.acd-item .nm { font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); color: var(--tk-color-text-secondary); }
.acd-item mark { background: color-mix(in srgb, var(--tk-color-warning) 30%, transparent); color: inherit; padding: 0; }

/* Totals footer inside a table */
.tk-table-foot { position: sticky; bottom: 0; z-index: 1; }
.tk-table-foot td { background: var(--tk-surface-alt); font-weight: 700; padding: 10px 16px; border-top: 1px solid var(--tk-border-panel); }
.tk-table-foot tr.is-sub td { font-size: 13px; font-weight: 600; padding-top: 4px; }
.tk-table .is-ok { color: var(--tk-color-success); }
.tk-table .is-bad { color: var(--tk-color-danger); }

/* ── Page layer, journal list and document view (Batch 2d) ── */
.tk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-expand-cell { padding: 0 !important; background: var(--tk-surface-alt); }
.tk-subtable-wrap { overflow-x: auto; padding: 10px 16px 14px; }
.tk-subtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tk-subtable th { text-align: left; white-space: nowrap; padding: 6px 10px; font-weight: 700; color: var(--tk-color-text-secondary); border-bottom: 1px solid var(--tk-border-panel); font-family: var(--tk-font-lao-family); font-size: 15px; }
.tk-subtable td { padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid var(--tk-border-panel); }
.tk-subtable tbody tr:nth-child(even) td { background: var(--tk-surface-stripe); }
.tk-subtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-subtable .center { text-align: center; }
.tk-subtable .code { font-weight: 700; color: var(--tk-color-accent-strong); }
.tk-subtable .dr { color: var(--tk-color-success); font-weight: 700; }
.tk-subtable .cr { color: var(--tk-color-danger); font-weight: 700; }
.tk-subtable .muted { color: var(--tk-color-text-tertiary); }
.tk-subtable .lao { font-family: var(--tk-font-lao-family); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tk-table tr.jn-row[aria-expanded="true"] { background: var(--tk-color-accent-soft); }

/* Summary strip under a list (count + totals) */
.tk-summary-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: 14px; background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
}
.tk-summary-count { font-family: var(--tk-font-lao-family); font-size: var(--tk-font-lao-size); color: var(--tk-color-text-secondary); }
.tk-summary-figs { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tk-summary-figs > div { display: flex; flex-direction: column; align-items: flex-end; }
.tk-summary-figs small { font-family: var(--tk-font-lao-family); font-size: 14px; color: var(--tk-color-text-tertiary); }
.tk-summary-figs strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.tk-summary-figs .dr { color: var(--tk-color-success); } .tk-summary-figs .cr { color: var(--tk-color-danger); } .tk-summary-figs .warn { color: var(--tk-color-warning); }

/* Key facts row (document header) */
.tk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; margin: 0; }
.tk-facts dt { font-family: var(--tk-font-lao-family); font-size: 14px; font-weight: 400; color: var(--tk-color-text-tertiary); }
.tk-facts dd { margin: 0; font-weight: 700; color: var(--tk-color-text-primary); }
.tk-facts dd.code { color: var(--tk-color-accent-strong); }
.tk-facts dd.lao { font-family: var(--tk-font-lao-family); }
/* Tabs share the toolbar row with the print button, which stays top-right (#3). */
.tk-toolbar-top { flex-wrap: nowrap; }
.tk-toolbar-top > .tk-tabs { flex: 1; min-width: 0; }
.tk-table td.tk-actions { white-space: nowrap; }

/* ── Page layer, journal entry form (Batch 2e: Journal/Add) ── */
.tk-btn-sm { padding: 5px 12px; font-size: 13px; }
.tk-entry { display: flex; flex-direction: column; gap: 14px; }
.tk-entry > * { flex-shrink: 0; }
.tk-amount-input { font-size: 18px; }
/* Journal entry "ຂໍ້ມູນເອກະສານ": every box the same height, the Dr/Cr summary level with the amount box (owner 2026-10-11) */
.jn-docinfo .tk-input { height: 44px; }
.jn-docinfo select.tk-input { padding-block: 0; }
.jn-docinfo .jn-label-spacer { visibility: hidden; }
.jn-docinfo .tk-remain { min-height: 44px; align-items: center; gap: 8px 32px; }
@media (max-width: 899px) { .jn-docinfo .jn-label-spacer { display: none; } }
.tk-amount-words {
  min-height: 1.6em; text-align: right; font-weight: 700; color: var(--tk-color-accent-strong);
  font-family: var(--tk-font-lao-family); font-size: 15px;
}
.tk-remain {
  display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 10px 14px; border-radius: 12px;
  background: var(--tk-surface-alt); border: 1px solid var(--tk-border-panel);
  font-family: var(--tk-font-lao-family); font-size: 15px; color: var(--tk-color-text-secondary);
}
.tk-remain .sep { margin: 0 6px; color: var(--tk-color-text-tertiary); }
.tk-remain strong { font-variant-numeric: tabular-nums; }
.tk-remain .dr { color: var(--tk-color-success); } .tk-remain .cr { color: var(--tk-color-danger); }
.tk-remain .is-left { color: var(--tk-color-success); }
.tk-remain .is-left.is-done { color: var(--tk-color-text-tertiary); }

/* Line grid: inputs sit inside cells, so the cells are tight and the table scrolls sideways. */
.tk-entry-scroll { overflow-x: auto; }
.tk-entry-table { min-width: 1260px; }
.tk-entry-table thead th { padding: 10px 8px; }
.tk-entry-table thead th.dr { color: var(--tk-color-success); } .tk-entry-table thead th.cr { color: var(--tk-color-danger); }
.tk-entry-table tbody td { padding: 5px 4px; vertical-align: top; }
.tk-entry-table tbody td:first-child { padding-top: 12px; }
.tk-entry-table tbody tr:hover { background: transparent; }
.tk-entry-table .tk-input { padding: 6px 8px; font-size: 13.5px; }
.tk-entry-table .tk-input.lao { padding-block: 3px; }
.tk-entry-table .tk-acdrop { right: auto; min-width: 320px; max-height: 220px; }
/* placed on the viewport by placeDrop() (Views/Journal/Add.cshtml) so the scrolling table wrap does not clip it */
.tk-acdrop.is-fixed { position: fixed; right: auto; z-index: 1065; }
.tk-entry-table .acd-item { white-space: nowrap; }
.tk-entry-table .tk-btn-icon { width: 32px; height: 32px; }
.tk-entry-table .tk-table-foot td { padding: 10px 8px; }
.tk-entry-table #balMsg .ti { vertical-align: -2px; }
.acd-item.acc-sel { background: var(--tk-color-accent-soft); }
.acd-item .ty { color: var(--tk-color-text-tertiary); font-size: 12px; }
.tk-input-addon.is-btn { cursor: pointer; white-space: nowrap; font-family: var(--tk-font-lao-family); }
.tk-input-addon.is-btn:hover { color: var(--tk-color-accent); background: var(--tk-surface-hover); }
.tk-kotbadge { margin-top: 4px; cursor: pointer; font-family: var(--tk-font-lao-family); font-size: 13px; }
.tk-kotbadge .tk-kotbadge-edit { opacity: 0.6; width: 12px; height: 12px; }
/* equity-movement type under a 30x-32x account code (Journal/Add, wayfinder #70) */
.tk-eqmsel { margin-top: 4px; font-size: 13px; min-width: 190px; }

/* Cost-function chooser under an account cell (fixed, so the table does not clip it) */
.tk-kotsel {
  position: fixed; z-index: 9999; min-width: 220px; padding: 4px 0; border-radius: 12px;
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.tk-kotsel-head { font-size: 12px; color: var(--tk-color-text-tertiary); padding: 4px 12px 5px; border-bottom: 1px solid var(--tk-border-panel); }
.kot-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer;
  font-family: var(--tk-font-lao-family); font-size: 15px; color: var(--tk-color-text-primary);
}
.kot-item:hover, .kot-item.kot-sel { background: var(--tk-color-accent-soft); }
.kot-item .ti { width: 9px; height: 9px; }
.kot-item.kot-1 .ti { color: var(--tk-color-accent); }
.kot-item.kot-2 .ti { color: var(--tk-color-warning); }
.kot-item.kot-3 .ti { color: var(--tk-color-success); }

/* Modals the page shows itself (inline display:flex) rather than via .is-visible */
.tk-modal-scrim.tk-modal-manual { align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.tk-modal-scrim.tk-modal-top { z-index: 210; }
.tk-picker-box { width: min(560px, 95vw); height: 80vh; display: flex; flex-direction: column; }
.tk-newacc-box { width: min(500px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.tk-picker-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--tk-border-panel);
}
.tk-picker-head > .ti { color: var(--tk-color-accent); }
.tk-picker-title { font-family: var(--tk-font-lao-heading-family); font-size: 16px; font-weight: 700; color: var(--tk-color-text-primary); }
.tk-picker-count { margin-left: auto; font-size: 12px; color: var(--tk-color-text-tertiary); white-space: nowrap; }
.tk-picker-search { padding: 10px 14px; flex-shrink: 0; border-bottom: 1px solid var(--tk-border-panel); }
.tk-picker-list { flex: 1; min-height: 0; overflow-y: auto; }
.tk-picker-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer;
  border-bottom: 1px solid var(--tk-border-panel);
}
.tk-picker-item:hover { background: var(--tk-surface-hover); }
.tk-picker-item .code { min-width: 76px; font-weight: 700; color: var(--tk-color-accent-strong); }
.tk-picker-item .nm { flex: 1; font-family: var(--tk-font-lao-family); font-size: 15px; color: var(--tk-color-text-primary); }
.tk-picker-item .ty { flex-shrink: 0; font-size: 12px; color: var(--tk-color-text-tertiary); }
.tk-picker-item mark { background: color-mix(in srgb, var(--tk-color-warning) 30%, transparent); color: inherit; padding: 0; }
.tk-picker-empty { text-align: center; padding: 18px; color: var(--tk-color-text-tertiary); font-family: var(--tk-font-lao-family); }
.tk-newacc-body { display: grid; padding: 16px 18px; gap: 12px; overflow-y: auto; }
.tk-newacc-body .tk-grid > .span-6, .tk-newacc-body.tk-grid > .span-6 { grid-column: span 6; }
.tk-newacc-box .tk-modal-footer { padding-top: 12px; border-top: 1px solid var(--tk-border-panel); padding-bottom: 14px; }
.tk-newacc-box .tk-input-addon.is-btn { font-size: 14px; gap: 4px; }

/* ── Financial-report print blocks (spec §7.2, #82): built for print.css, hidden on screen ── */
.tk-print-only { display: none; }
.tk-tb-sign-row { display: none; }

/* ── ໝາຍເຫດ column link on the statements + the notes page (spec §6.7, #89) ── */
.tk-note-link { color: var(--tk-color-accent); font-weight: 600; text-decoration: none; padding: 0 6px; }
.tk-note-link:hover { text-decoration: underline; }
.fs-notes { display: flex; flex-direction: column; gap: var(--tk-space-3); }
.fs-note { scroll-margin-top: 12px; }
.fs-note.is-target > .fs-note-title { color: var(--tk-color-accent-strong); }
.fs-note-title { font-size: 16px; font-weight: 700; margin: 8px 0 6px; color: var(--tk-color-text-primary); }
.fs-sub-title { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
.fs-form-head { font-size: 13px; font-weight: 700; color: var(--tk-color-text-secondary); border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-top: 12px; }
.fs-body p { margin: 0 0 4px; line-height: 1.6; }
.fs-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 6px; }
.fs-facts dt { color: var(--tk-color-text-secondary); font-weight: 400; }
.fs-facts dd { margin: 0; }
.fs-text { width: 100%; min-height: 3em; resize: vertical; font-family: inherit; }
.fs-policy { margin: 6px 0; }
.fs-policy.is-off textarea { opacity: .45; }
.fs-policy-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fs-save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 8px 12px; margin-top: 8px; border-radius: var(--tk-radius-md); }
/* figure notes in the audited-statement layout (owner sample 2026-09-27): no grid, dates
   underlined over the two amount columns, account code before the name, subtotal with a
   single rule above, total with a single rule above and a double rule below */
.fs-no { display: inline-block; min-width: 2.2em; }
/* separate cells + horizontal spacing: each amount column gets its own rule with a gap between (owner 2026-09-27) */
.fs-stmt { width: 100%; max-width: 820px; border-collapse: separate; border-spacing: 18px 0; margin: 2px 0 8px calc(2.2em - 18px); font-size: 13px; }
.fs-stmt col.fs-amt { width: 170px; }
.fs-stmt th { font-weight: 700; text-align: right; padding: 4px 0 3px; }
.fs-stmt thead th:not(:first-child) { border-bottom: 1px solid currentColor; }
.fs-stmt td { padding: 5px 0; vertical-align: top; }
.fs-stmt td:first-child { padding-left: 0; }
.fs-stmt td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-stmt .fs-code { display: inline-block; min-width: 76px; text-indent: 0; color: var(--tk-color-text-secondary); font-variant-numeric: tabular-nums; }
.fs-stmt .fs-ind { padding-left: 14px; }
.fs-stmt tr.fs-group td { font-weight: 700; font-style: italic; padding-top: 8px; }
.fs-stmt tr.fs-sub td { font-weight: 700; }
.fs-stmt tr.fs-sub td.num { border-top: 1px solid currentColor; }
.fs-stmt tr.fs-total td { font-weight: 700; }
.fs-stmt tr.fs-total td.num { border-top: 1px solid currentColor; border-bottom: 3px double currentColor; }
.fs-stmt tr.fs-sub + tr.fs-group td, .fs-stmt tbody + tfoot tr.fs-total td { padding-top: 6px; }
/* hanging indent: a long account name wraps under the name, not under the code (owner 2026-09-27) */
.fs-stmt td.fs-acct { padding-left: 76px; text-indent: -76px; }
.fs-stmt td.fs-ind.fs-acct { padding-left: 90px; }

/* Notes page in Paper View looks like its printout (owner 2026-09-28; Table View by default since #122): the notes sit on an A4-width
   white sheet in Phetsarath OT with the print sizes (13px text, 12px amounts and codes, 150px
   amount columns), and the toolbar stays pinned at the top of the scrolling area. Screen only —
   print.css owns the printed page. */
@media screen {
  /* .tk-main-content is a flex column, so the page shrank to the viewport height and the pinned
     toolbar scrolled away with it once you passed that height: the page keeps its full content height */
  .notes-page { flex: none; }
  .notes-page > .tk-toolbar { position: sticky; top: calc(-1 * var(--tk-content-pad, var(--tk-space-6))); z-index: 20; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-notes {
    width: 100%; box-sizing: border-box; color: #000;
    font-family: var(--tk-font-print); font-size: 13px; gap: 4px;
  }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-notes * { font-family: var(--tk-font-print); }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-note-title, html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-form-head, html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-sub-title, html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-body p { font-size: 13px; color: #000; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-sub-title { font-weight: 700; margin: 6px 0 2px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-form-head { margin-top: 10px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-facts dt { color: #000; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt { font-size: 13px; color: #000; max-width: none; width: calc(100% - 2.2em + 36px); }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt col.fs-amt { width: 150px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt td { padding-top: 2px; padding-bottom: 2px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt .fs-code { color: #000; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt td.num, html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt td.num *,
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt .fs-code, html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-stmt .fs-code * { font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; font-size: 12px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .notes-page .fs-text { color: #000; background: #fff; }
  .notes-page .fs-save-bar { max-width: 794px; margin: 8px auto 0; width: 100%; box-sizing: border-box; }
}

/* Provisional-opening notice (Views/Report/_OpeningNotice, #109): floating frosted-glass card at the top right, right under the navbar (owner-placed; covers the toolbar buttons until closed),
   closable (owner 2026-09-28). Below modals, above page content; never printed. */
.tk-opening-notice {
  position: fixed; top: 76px; right: 32px; z-index: 900; width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px;
  border-radius: 14px; border: 1px solid var(--tk-glass-l2-border); border-left: 4px solid var(--tk-color-warning);
  background: color-mix(in srgb, var(--tk-surface-table-bg) 55%, transparent); color: var(--tk-color-text-primary);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  font-family: var(--tk-font-lao-family); font-size: 14px; line-height: 1.6;
}
.tk-opening-notice[hidden] { display: none; }
.tk-opening-notice-head { display: flex; align-items: center; gap: 8px; color: var(--tk-color-warning); }
.tk-opening-notice-head strong { flex: 1; font-family: var(--tk-font-lao-heading-family); }
.tk-opening-notice-x { color: var(--tk-color-text-secondary); }
.tk-opening-notice-warn { margin-top: 6px; }
.tk-opening-notice .tk-btn { align-self: flex-start; }
@media print { .tk-opening-notice { display: none !important; } }

/* ── Paper View (wayfinder #122/#130): html.tk-paper #mainContent:has(.tk-paper-toggle) shows a statement as its printout.
   The print rules themselves are re-scoped from print.css by shell.js; this only frames the
   page as a white A4 sheet on a grey surround (portrait 210mm, landscape 297mm) and forces
   black-on-white inside it in both themes. The toolbar stays outside the sheet. ── */
@media screen {
  html.tk-paper #mainContent:has(.tk-paper-toggle) { background: #9aa3ad; }
  /* print.css puts the print head before the toolbar in source order and forces block flow;
     here the page is a column again with the toolbar first, so the sheet is one piece under it */
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page.tk-report-page { --paper-w: 210mm; --paper-pad: 14mm; flex: none; display: flex !important; flex-direction: column; gap: 0 !important; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page > .tk-toolbar { order: -1; margin-bottom: 16px; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page > :not(.tk-toolbar) { margin-top: 0 !important; margin-bottom: 0 !important; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page.tk-report-page.tk-report-wide,
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page.tk-report-page.is-equity-page { --paper-w: 297mm; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page > :not(.tk-toolbar):not(script):not(style) {
    width: var(--paper-w); max-width: none; margin-left: auto !important; margin-right: auto !important;
    box-sizing: border-box; padding-left: var(--paper-pad); padding-right: var(--paper-pad);
    background: #fff; color: #000;
  }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page::before {
    content: ''; order: 0; display: block; width: var(--paper-w); height: var(--paper-pad); margin: 0 auto; background: #fff; flex: none;
  }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page::after {
    content: ''; display: block; width: var(--paper-w); height: var(--paper-pad); margin: 0 auto 24px; background: #fff;
  }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page .tk-table-wrap { border: none; border-radius: 0; box-shadow: none; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page .tk-table th,
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page .tk-table td,
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page .bls-print-table th,
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-report-page .bls-print-table td { background: #fff !important; color: #000 !important; }
  html.tk-paper #mainContent:has(.tk-paper-toggle) .tk-paper-toggle { background: var(--tk-color-accent); border-color: var(--tk-color-accent); color: var(--tk-color-on-accent); }
}
/* Paper View toggle sits right next to Print, also where the toolbar row is space-between (#130) */
.tk-toolbar-top > .tk-paper-toggle { margin-left: auto; }
.tk-toolbar-top > .tk-paper-toggle + .tk-btn { margin-left: 8px; }

/* ── Compact toolbar (owner 2026-10-04): sizes only ──
   The toolbar card above every list, form and report page took too much of the screen from the real
   content. Buttons, tabs, month chips, search, selects and inputs are smaller (about 28px tall); colours,
   corner radii, layout and behaviour are unchanged. Icons follow the font size (1em). The Home dashboard
   toolbar (.tk-home-tools) keeps its own size. */
.tk-toolbar:not(.tk-home-tools) { padding: 10px 14px; gap: 8px; }
.tk-toolbar:not(.tk-home-tools) .tk-toolbar-top { gap: 10px; }
.tk-toolbar:not(.tk-home-tools) .tk-page-title { font-size: 17px; line-height: 1.4; }
.tk-toolbar:not(.tk-home-tools) .tk-btn { padding: 3px 10px; font-size: 13px; line-height: 1.5; gap: 5px; }
/* page tabs: a little bigger than the rest of the compact toolbar (they name the page), still smaller than before (17px, 8px 16px);
   the gap leaves room for the curved feet of the open tab */
.tk-toolbar:not(.tk-home-tools) .tk-tabs { gap: 16px; }
.tk-toolbar:not(.tk-home-tools) .tk-tab { padding: 5px 16px; font-size: 15.5px; line-height: 1.5; gap: 7px; }
.tk-toolbar:not(.tk-home-tools) .tk-period-bar { gap: 6px; }
/* month chips a little bigger again (owner 2026-10-04): 14px text, about 29px tall (they were 13px / 24px) */
:is(.tk-toolbar:not(.tk-home-tools), .tk-dash-period) .tk-pchip { padding: 3px 12px; font-size: 14px; line-height: 1.5; border-radius: 6px; }
.tk-toolbar:not(.tk-home-tools) .autofilter { gap: 6px; }
.tk-toolbar:not(.tk-home-tools) .af-search { padding: 3px 10px; min-width: 180px; gap: 6px; }
.tk-toolbar:not(.tk-home-tools) .af-search input { font-size: 14px; line-height: 1.5; }
.tk-toolbar:not(.tk-home-tools) .af-select { padding: 3px 8px; font-size: 14px; line-height: 1.5; }
.tk-toolbar:not(.tk-home-tools) .count-badge { font-size: 13px; line-height: 1.5; padding: 2px 10px; }
.tk-toolbar:not(.tk-home-tools) .tk-input { padding: 3px 8px; font-size: 13px; line-height: 1.5; }
.tk-toolbar:not(.tk-home-tools) .tk-input.lao { font-size: 14px; line-height: 1.5; padding-block: 3px; }
.tk-toolbar:not(.tk-home-tools) .tk-input-addon { font-size: 12px; padding: 0 8px; }

/* Squarer controls in the toolbar (owner 2026-10-04: "too round"): month chips and the count badge were full pills, the
   search, selects and inputs 10-12px, buttons 8px. They all take one smaller radius now; sizes are unchanged. */
.tk-toolbar:not(.tk-home-tools) { --tk-ctl-r: 6px; }
.tk-toolbar:not(.tk-home-tools) .tk-btn,
.tk-toolbar:not(.tk-home-tools) .tk-pchip,
.tk-toolbar:not(.tk-home-tools) .af-search,
.tk-toolbar:not(.tk-home-tools) .af-select,
.tk-toolbar:not(.tk-home-tools) .count-badge,
.tk-toolbar:not(.tk-home-tools) .tk-input,
.tk-toolbar:not(.tk-home-tools) .tk-input-addon { border-radius: var(--tk-ctl-r); }
/* joined inputs (date from / to) keep their flat inner corners; the rule above would round them again */
.tk-toolbar:not(.tk-home-tools) .tk-input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tk-toolbar:not(.tk-home-tools) .tk-input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* A link that only carries hx-get / hx-post has no href, and a browser shows the I-beam (text) cursor on an <a>
   without one, as if it could be typed into (owner 2026-10-04, the month chips of the reports). It is clickable,
   so it gets the hand like every other clickable control. */
a[hx-get]:not([href]), a[hx-post]:not([href]) { cursor: pointer; }

/* Period buttons of the report toolbars (ລາຍເດືອນ / 3 ເດືອນ / 6 ເດືອນ / ລາຍປີ / ກຳນົດເອງ): the Owner Panel's segmented toggle
   (owner 2026-10-04, "like the buttons on the Customers page, take the spec 100%"). That one is Bootstrap 5.3.0
   .btn-group.btn-group-sm with the Owner layout's .btn radius: buttons joined side by side (1px overlap, no gap, inner corners
   square, outer 8px), padding 4px 8px, 14px regular text, line height 1.5 (31px tall), 1px border in the main colour; a closed one is
   outline (transparent, coloured text), the open one is filled with white text, and hover fills like the open one. The colour is
   this app's accent. Only inside a toolbar: the cost-function pickers (.tk-seg in the forms) are unchanged. The filter row under a report's toolbar (the trial balance's
   level buttons) is the same component, so it gets the same look. */
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg { gap: 0; align-items: center; }
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 12px; font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--tk-color-accent); border-radius: 0; background: transparent; color: var(--tk-color-accent);
}
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn + .tk-seg-btn { margin-left: -1px; }
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn:first-child,
.tk-toolbar:not(.tk-home-tools) .tk-fy-pick + .tk-seg-btn { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
/* the last button of the group, even when something else (the phone drop-down shell.js adds) follows it */
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn:not(:has(~ .tk-seg-btn)) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn:hover,
:is(.tk-toolbar:not(.tk-home-tools), .tk-report-page > .autofilter, .tk-dash-period) .tk-seg-btn.is-active {
  z-index: 1; background: var(--tk-color-accent); border-color: var(--tk-color-accent); color: var(--tk-color-on-accent); font-weight: 400;
}
/* the fiscal-year select in front of them: same height, radius and text size, a gap before the group */
.tk-toolbar:not(.tk-home-tools) .tk-seg > .tk-fy-pick { box-sizing: border-box; height: 31px; margin-right: 8px; padding: 0 8px; border-radius: 8px; }   /* same inner space left and right (owner 2026-10-28) */
.tk-toolbar:not(.tk-home-tools) .tk-fy-pick select { height: 100%; padding: 0 2px; font-size: 14px; font-weight: 400; line-height: 1.5; }

/* A toolbar row whose tabs are long (the trial balance's three variants): the buttons drop under the tabs, at the right,
   when they no longer fit beside them, instead of the tabs running under the buttons. */
.tk-toolbar-top.is-wrap { flex-wrap: wrap; }
.tk-toolbar-top.is-wrap > .tk-tabs { flex: 1 0 auto; width: auto; }
.tk-toolbar-top.is-wrap > :not(.tk-tabs) { margin-left: auto; }

/* The filter row and the check notices under a report's toolbar (owner 2026-10-04, "scale down"): the same smaller controls and
   text as the toolbar above them - the level buttons, the "show all lines" button, the count badge, and the red / yellow notice
   bars (12px 14px padding and 17px text before). */
.tk-report-page > .autofilter { gap: 6px; --tk-ctl-r: 6px; }
.tk-report-page > .autofilter .tk-btn { padding: 3px 10px; font-size: 13px; line-height: 1.5; gap: 5px; border-radius: var(--tk-ctl-r); }
.tk-report-page > .autofilter .count-badge { font-size: 13px; line-height: 1.5; padding: 2px 10px; border-radius: var(--tk-ctl-r); }
.tk-report-page > .tk-callout { padding: 6px 12px; font-size: 14px; line-height: 1.5; gap: 6px; }
.tk-report-page > .tk-callout .lao { font-size: inherit; line-height: inherit; }

/* Tables like the Owner Panel list (Bootstrap .table .table-hover, light header, thin row lines, Arial cells): same
   compact rhythm and one left edge for every column. The card keeps its own rounded corners. */
.tk-table thead th {
  background: #fafafc; color: var(--tk-color-text-primary); font-size: 14.5px; font-weight: 700; line-height: 1.4;
  padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--tk-border-panel);
}
.tk-table tbody td {
  padding: 8px 12px; font-size: 14px; line-height: 1.45; vertical-align: middle;
  font-family: Arial, var(--tk-font-lao-family), sans-serif;
}
.tk-table thead th.num { text-align: right; }
.tk-table thead th.center { text-align: center; }
.tk-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); }
.tk-table-empty td { padding: 36px 12px; }
:root[data-theme="dark"] .tk-table thead th { background: var(--tk-surface-alt); }

/* ── TIN lookup in eBRS / TaxRIS (map #372) ──
   Filled fields get a halo, not a tint or border, so they never look selected. */
.tk-gov-filled { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-color-success) 35%, transparent); }
.tk-gov-filled.is-amber { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-color-warning) 45%, transparent); }
.tk-gov-status { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 14px; line-height: 1.5; }
.tk-gov-status:empty { display: none; }
.tk-gov-status .ti { flex: none; margin-top: 3px; }
.tk-gov-status.is-ok { color: var(--tk-color-success); }
.tk-gov-status.is-amber { color: var(--tk-color-warning); }
.tk-gov-status.is-notfound, .tk-gov-status.is-invalid { color: var(--tk-color-danger); }
.tk-gov-status.is-down, .tk-gov-status.is-throttled { color: var(--tk-color-text-secondary); }
.tk-gov-note { margin-top: 4px; font-size: 13px; color: var(--tk-color-text-secondary); }
.tk-gov-note:empty { display: none; }

/* Form section title inside a .tk-grid card (Customers/Add): one style instead of inline styles per heading */
.tk-form-section {
  display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--tk-border-panel);
  font-family: var(--tk-font-lao-heading-family); font-weight: 700; font-size: 15px; color: var(--tk-color-text-secondary);
}
.tk-form-section:not(:first-child) { margin-top: 8px; }
/* a switch sitting in a labelled field is as tall as the inputs next to it */
.tk-field > .tk-switch-row { padding: 7px 14px; }

/* Form rows sized by content (Customers/Add, owner 2026-10-12): one flex line per row inside a .tk-grid card,
   short values get narrow boxes, long ones grow; a row wraps on a narrow screen */
.tk-frow { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start; }
.tk-frow > .tk-field { min-width: 0; }
.tk-w-auto  { flex: 0 0 auto; }
.tk-w-code  { flex: 0 0 130px; }
.tk-w-tin   { flex: 1 1 280px; max-width: 400px; }
.tk-w-type  { flex: 0 1 250px; }
.tk-w-grow  { flex: 1 1 280px; }
.tk-w-addr  { flex: 1 1 200px; max-width: 300px; }
.tk-w-phone { flex: 0 1 240px; }
.tk-w-acc   { flex: 0 1 300px; }
.tk-w-full  { flex: 1 1 100%; }

/* Type-ahead list under a text box (js/suggest.js; bank name on the Customers form) */
.tk-suggest {
  /* at least as wide as the box, wider (up to 640px) so long names stay on one line (owner 2026-10-12) */
  position: absolute; left: 0; top: 100%; z-index: 30; margin-top: 4px; max-height: 320px; overflow-y: auto;
  min-width: 100%; width: max-content; max-width: min(640px, 90vw);
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.tk-suggest-item {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; cursor: pointer;
  font-family: var(--tk-font-lao-family); font-size: 15px; line-height: 1.5; color: var(--tk-color-text-primary);
}
.tk-suggest-item:hover, .tk-suggest-item.is-active { background: var(--tk-surface-alt); }
.tk-suggest-hint { flex: none; font-size: 12px; color: var(--tk-color-text-secondary); align-self: center; }
.tk-suggest-item .tk-suggest-code { flex: none; min-width: 84px; font-family: var(--tk-font-mono, ui-monospace, monospace); font-weight: 700; }
.tk-suggest-item .tk-suggest-text { flex: 1; min-width: 0; }
.tk-suggest-item:has(.tk-suggest-code) { justify-content: flex-start; }

.tk-suggest.is-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; }
/* A form card that scrolls inside the page (Customers/Add): the title and the save bar stay put, only the fields
   scroll (owner 2026-10-12) */
.tk-page > .tk-formcard.tk-form-scroll { overflow: hidden; }
.tk-page > .tk-formcard.tk-form-scroll > .tk-formcard-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tk-page > .tk-formcard.tk-form-scroll > .tk-formcard-head, .tk-page > .tk-formcard.tk-form-scroll > .tk-form-foot { flex: none; }

/* Connection status dot (#397): the badge is a dot only; each row of its panel carries its own small dot */
.tk-navbar .tk-badge-status.tk-badge-dotonly { width: 26px; padding: 0; justify-content: center; cursor: pointer; }
.tk-status-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: currentColor; }
.tk-status-mark.tk-badge-ok { color: var(--tk-color-success); }
.tk-status-mark.tk-badge-warn { color: var(--tk-color-warning); }
.tk-status-mark.tk-badge-error { color: var(--tk-color-danger); }
.tk-status-mark.tk-badge-muted { color: var(--tk-color-text-tertiary); }
.tk-status-popup .tk-status-key { flex-basis: 190px; }
.tk-status-popup { min-width: 380px; }

/* ── User manual (map #437): the page (#444) and the side panel the "?" in the top bar opens (#445) ── */
.tk-manual { max-width: 860px; }
.tk-manual-note {
  margin-bottom: var(--tk-space-3); padding: var(--tk-space-2) var(--tk-space-3); border-radius: 10px;
  border-left: 3px solid var(--tk-color-warning); background: var(--tk-surface-table-bg); color: var(--tk-color-text-secondary);
}
.tk-manual-doc { color: var(--tk-color-text-primary); font-family: var(--tk-font-lao-family); line-height: 1.7; }
.tk-manual .tk-manual-doc {
  padding: var(--tk-space-4) var(--tk-space-5); border-radius: 18px;
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
}
.tk-manual-doc h1 { font-size: 1.4rem; margin: 0 0 var(--tk-space-3); }
.tk-manual-doc h2 { font-size: 1.15rem; margin: var(--tk-space-4) 0 var(--tk-space-2); }
.tk-manual-doc h3 { font-size: 1rem; margin: var(--tk-space-3) 0 var(--tk-space-2); }
.tk-manual-doc img { max-width: 100%; border: 1px solid var(--tk-border-panel); border-radius: 8px; }
.tk-manual-doc table { border-collapse: collapse; margin: var(--tk-space-2) 0; }
.tk-manual-doc th, .tk-manual-doc td { border: 1px solid var(--tk-surface-divider); padding: 4px 10px; text-align: left; }
.tk-manual-panel {
  flex: 0 0 380px; width: 380px; min-height: 0; display: flex; flex-direction: column;
  background: var(--tk-surface-table-bg); border-left: 1px solid var(--tk-border-panel);
}
.tk-manual-panel[hidden] { display: none; }
.tk-manual-panel-head {
  display: flex; align-items: center; gap: 8px; padding: var(--tk-space-3) var(--tk-space-4);
  border-bottom: 1px solid var(--tk-border-panel); font-weight: 700; color: var(--tk-color-text-primary);
}
.tk-manual-panel-title { flex: 1; }
.tk-manual-panel-scroll { flex: 1; overflow-y: auto; padding: var(--tk-space-3) var(--tk-space-4); }
.tk-manual-panel .tk-manual-doc h1 { font-size: 1.15rem; }
.tk-manual-full { display: inline-block; margin-top: var(--tk-space-3); color: var(--tk-color-brand); }
@media (max-width: 767px) {
  /* phone: the panel covers the page instead of squeezing the table */
  .tk-manual-panel { position: fixed; top: var(--tk-navbar-h); right: 0; bottom: 0; width: 100vw; z-index: 1040; }
}

/* per-field "?" (#447): a small round button after the label; opens the manual panel at the field */
.tk-field-help {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px;
  padding: 0; border: 1px solid var(--tk-color-brand); border-radius: 50%; background: transparent;
  color: var(--tk-color-brand); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer;
}
.tk-field-help[hidden] { display: none; }
.tk-field-help:focus-visible { outline: 2px solid var(--tk-color-brand); outline-offset: 2px; }
/* the field heading in the panel: a halo, not a tint or border, so it never looks selected */
.tk-manual-doc .tk-manual-halo {
  border-radius: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-color-accent) 40%, transparent);
  transition: box-shadow var(--tk-motion-fast) var(--tk-motion-easing);
}

/* manual contents (#446) */
.tk-manual-section { margin-top: var(--tk-space-4); }
.tk-manual-section-title { font-size: 1.05rem; margin: 0 0 var(--tk-space-2); color: var(--tk-color-text-secondary); }
.tk-manual-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-manual-entry { font-weight: 700; color: var(--tk-color-text-primary); }
.tk-manual-heads { margin: 4px 0 0 18px; padding: 0; list-style: disc; }
.tk-manual-heads a { color: var(--tk-color-brand); }
.tk-manual-panel-all { font-size: 13px; font-weight: 400; color: var(--tk-color-brand); white-space: nowrap; }

/* manual screenshot zoom (owner 2026-10-14): the shot at full size over the page */
.tk-manual-doc img { cursor: zoom-in; }
.tk-manual-zoom {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 36px; background: rgba(15, 23, 42, .72); cursor: zoom-out;
}
.tk-manual-zoom[hidden] { display: none; }
/* the X sits on the picture's top-right corner, half outside it */
.tk-manual-zoom-frame { position: relative; max-width: 100%; max-height: 100%; display: flex; cursor: default; }
.tk-manual-zoom img { max-width: 100%; max-height: calc(100vh - 72px); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.45); background: #fff; }
.tk-manual-zoom-close {
  position: absolute; top: -16px; right: -16px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #fff; color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* manual help-centre layout (owner 2026-10-15): contents on the left, the topic on the right */
.tk-manual-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--tk-space-5); align-items: start; max-width: 1200px; }
.tk-manual-nav {
  position: sticky; top: var(--tk-space-3); max-height: calc(100vh - var(--tk-navbar-h) - 32px); overflow-y: auto;
  padding: var(--tk-space-3); border-radius: 18px; background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
}
.tk-manual-nav-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: var(--tk-space-2); color: var(--tk-color-text-primary); }
.tk-manual-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: var(--tk-space-2);
  border: 1px solid var(--tk-border-panel); border-radius: 10px; background: var(--tk-surface-table-bg); color: var(--tk-color-text-tertiary); }
.tk-manual-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--tk-color-text-primary); }
.tk-manual-group { border-top: 1px solid var(--tk-surface-divider); }
.tk-manual-group:first-of-type { border-top: 0; }
.tk-manual-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 6px; font-weight: 700; color: var(--tk-color-text-primary);
}
.tk-manual-group > summary::-webkit-details-marker { display: none; }
.tk-manual-chev { transition: transform var(--tk-motion-fast) var(--tk-motion-easing); color: var(--tk-color-text-tertiary); }
.tk-manual-group[open] .tk-manual-chev { transform: rotate(90deg); }
.tk-manual-group ul { list-style: none; margin: 0 0 var(--tk-space-2); padding: 0; }
.tk-manual-group li > a { display: block; padding: 7px 10px 7px 14px; border-radius: 8px; color: var(--tk-color-text-secondary); text-decoration: none; line-height: 1.4; }
.tk-manual-group li > a:hover { color: var(--tk-color-text-primary); background: var(--tk-color-accent-soft); }
.tk-manual-group li > a.is-current { color: var(--tk-color-brand); background: var(--tk-color-accent-soft); font-weight: 700; }
.tk-manual-group .tk-manual-heads { margin: 0 0 4px 18px; list-style: none; }
.tk-manual-group .tk-manual-heads a { font-size: 13px; padding: 4px 8px; }
.tk-manual-nomatch { color: var(--tk-color-text-tertiary); padding: var(--tk-space-2); }
.tk-manual-main { position: relative; min-width: 0; max-width: 860px; }
.tk-manual-main .tk-manual-doc {
  padding: var(--tk-space-5) var(--tk-space-5) var(--tk-space-4); border-radius: 18px;
  background: var(--tk-surface-table-bg); border: 1px solid var(--tk-border-panel);
}
.tk-manual-main .tk-manual-doc h1 { font-size: 1.6rem; padding-right: 260px; }
.tk-manual-main .tk-manual-doc h2 { font-size: 1.2rem; margin-top: var(--tk-space-5); padding-top: var(--tk-space-3); border-top: 1px solid var(--tk-surface-divider); }
.tk-manual-tools { position: absolute; top: var(--tk-space-4); right: var(--tk-space-4); z-index: 1; display: flex; gap: var(--tk-space-2); }
.tk-manual-pager { display: flex; justify-content: space-between; gap: var(--tk-space-3); margin-top: var(--tk-space-3); }
.tk-manual-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--tk-border-panel); background: var(--tk-surface-table-bg); color: var(--tk-color-text-primary); max-width: 48%; }
.tk-manual-pager a small { color: var(--tk-color-text-tertiary); }
.tk-manual-pager-next { text-align: right; margin-left: auto; }
/* numbered steps: a round number before each step, like a help centre */
.tk-manual-doc ol { list-style: none; counter-reset: tk-step; padding-left: 0; }
.tk-manual-doc ol > li { counter-increment: tk-step; position: relative; padding: 4px 0 4px 40px; margin: 6px 0; }
.tk-manual-doc ol > li::before {
  content: counter(tk-step); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tk-color-accent-soft); color: var(--tk-color-brand); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1023px) {
  .tk-manual-layout { grid-template-columns: 1fr; }
  .tk-manual-nav { position: static; max-height: none; }
  .tk-manual-main .tk-manual-doc h1 { padding-right: 0; }
  .tk-manual-tools { position: static; margin-bottom: var(--tk-space-2); }
}

/* One column (narrow window): the contents box is no longer a scroll box. As one, its min-content height counted as 0,
   the first grid row shrank to its heading and the topic slid up over the search box and the groups (owner 2026-10-19). */
@media (max-width: 1023px) {
  .tk-manual-nav { overflow: visible; }
}
.tk-manual-printall { width: 100%; justify-content: center; margin-top: var(--tk-space-2); }

/* while a top-bar menu is open the status pop-up does not open on hover too (owner 2026-10-19) */
body:has(.tk-navbar .dropdown-menu.show) .tk-status-wrap .tk-status-popup { display: none !important; }

/* Motion layer — global micro-interactions ported from the AI Studio redesign
   (map #148; look locked in #150, stack rules in #149). Loaded last in the CSS
   bundle, so it wins by order: no !important except where noted.

   Glass rule (#10, see glass.css): .tk-main-content is an ancestor of glass
   surfaces. The A1 fade drops its opacity below 1 only for the ~220ms while
   htmx swaps the old content out, so page glass loses its blur for that
   moment only. No will-change here, which would make it permanent. */

:root {
  --tk-ease-spring: cubic-bezier(.16, 1, .3, 1);
}

/* ---- A1 page fade on htmx navigation ---- */
.tk-main-content {
  transition: opacity 220ms var(--tk-ease-spring), transform 240ms var(--tk-ease-spring);
}
.tk-main-content.htmx-swapping { opacity: .35; transform: translate3d(0, 8px, 0); }
.tk-main-content.htmx-settling { opacity: 1; transform: none; }

/* ---- A2 thin gradient top bar (restyles the #htmx-bar in components.css;
        the 1.5s .tk-loading overlay is unchanged) ---- */
#htmx-bar {
  height: 2.5px;
  background: linear-gradient(90deg,
    var(--tk-color-brand),
    color-mix(in srgb, var(--tk-color-brand) 60%, #fff),
    color-mix(in srgb, var(--tk-color-brand) 35%, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tk-color-brand) 60%, transparent);
  transition: width 350ms var(--tk-ease-spring), opacity 250ms ease;
}

/* ---- A3 button hover lift ---- */
.tk-btn,
.btn,
.tk-btn-icon {
  transition: transform 180ms var(--tk-ease-spring), box-shadow 200ms var(--tk-ease-spring),
              background-color 160ms, border-color 160ms, color 160ms;
}
.tk-btn-primary:hover {
  transform: translateY(-1.5px) scale(1.01);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tk-color-brand) 30%, transparent);
}
.tk-btn-ghost:hover { transform: translateY(-1px); }
.tk-btn-icon:hover { transform: scale(1.08); }

/* ---- D4 physical press ---- */
.tk-btn:active,
.btn:active { transform: translateY(.5px) scale(.985); transition-duration: 60ms; }
.tk-btn-icon:active { transform: scale(.92); }

/* ---- A4 unified brand-blue Home icons: moved to home.css (PR 3) ---- */

/* ---- A5 dropdown smooth reveal ---- */
.dropdown-menu.tk-dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transform-origin: top right;
  transition: opacity 160ms var(--tk-ease-spring), transform 180ms var(--tk-ease-spring), visibility 160ms;
}
.dropdown-menu.tk-dropdown-menu.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.tk-dropdown-item { transition: background-color 140ms, transform 140ms; }
.tk-dropdown-item:hover { transform: translateX(3px); }

/* ---- A6 table row hover ----
   Painted on the cells, not the <tr>: a row background was too faint to see
   on the owner's screens (PR 156 test). A 3px brand bar on the first cell
   marks the row the pointer is on. Empty-state and expand rows are skipped. */
.tk-table tbody td { transition: background-color 140ms, box-shadow 140ms; }
.tk-table tbody tr:not(.tk-table-empty):not(.expand-row):hover > td {
  background-color: color-mix(in srgb, var(--tk-color-brand) 12%, var(--tk-surface-table-bg));
}
.tk-table tbody tr:not(.tk-table-empty):not(.expand-row):hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--tk-color-brand);
}

/* ---- A7 borderless shadow cards (radius stays --tk-radius-xl / mobile lg) ---- */
.tk-home-card {
  border: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .03), 0 8px 24px -4px rgba(15, 23, 42, .06),
              0 20px 32px -8px rgba(15, 23, 42, .03);
}
[data-theme="dark"] .tk-home-card {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .45), 0 14px 36px -4px rgba(0, 0, 0, .35);
}

/* ---- D3 3D account / logout button ---- */
.tk-navbar-logout {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tk-color-danger) 80%, #fff),
    var(--tk-color-danger) 55%,
    color-mix(in srgb, var(--tk-color-danger) 80%, #000));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--tk-color-danger) 80%, #fff);
  border-bottom: 3.5px solid color-mix(in srgb, var(--tk-color-danger) 60%, #000);
  border-radius: 9px;
  box-shadow: 0 4px 12px -1px color-mix(in srgb, var(--tk-color-danger) 45%, transparent),
              inset 0 1.5px .5px rgba(255, 255, 255, .45);
  transition: transform 140ms var(--tk-ease-spring), box-shadow 140ms;
}
.tk-navbar-logout svg,
.tk-navbar-logout .ti { color: #fff; stroke: #fff; }
.tk-navbar-logout:hover,
.tk-navbar-logout[aria-expanded="true"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tk-color-danger) 60%, #fff),
    color-mix(in srgb, var(--tk-color-danger) 85%, #fff) 50%,
    var(--tk-color-danger));
  color: #fff;
  transform: translateY(-2px);
}
.tk-navbar-logout:active { transform: translateY(2.5px) scale(.96); border-bottom-width: 1px; }

/* ---- F login polish ---- */
#loginForm .tk-btn-primary { transition: transform 200ms var(--tk-ease-spring), box-shadow 220ms var(--tk-ease-spring); }
#loginForm .tk-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tk-color-brand) 45%, transparent);
}
#loginForm .tk-btn-primary:active { transform: translateY(1px) scale(.97); }
#loginForm input:focus {
  border-color: var(--tk-color-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-color-brand) 30%, transparent);
  transition: box-shadow 160ms;
}

/* ==== Sidebar polish B1–B5 (map #148 PR 2; look locked in #151) ====
   Markup: _SidebarMain.cshtml (rail dots) and _Layout.cshtml (logo toggle,
   edge arrow). Every toggle goes through shell.js's single collapse
   mechanism; sidebar width is unchanged (B6 out of scope). */
:root { --tk-ease-bounce: cubic-bezier(.34, 1.56, .64, 1); }

/* B1 submenu tree: line + branch + dot per leaf (expanded sidebar) */
.tk-sidebar:not(.is-collapsed) .tk-nav-group.is-open > .tk-nav-group-body {
  /* the rail runs under the parent's icon centre and the leaves' text lines up with the parent's label (owner 2026-10-04) */
  margin-left: 20px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--tk-color-brand) 25%, transparent);
}
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf { position: relative; transition: background-color 140ms, color 140ms, transform 140ms var(--tk-ease-spring); }
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 6px; height: 2px;
  background: color-mix(in srgb, var(--tk-color-brand) 25%, transparent);
}
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf::after {
  content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--tk-color-text-tertiary); background: var(--tk-surface-table-bg);
  transition: all 180ms ease;
}
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf:hover { transform: translateX(3px); }
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf:hover::after { border-color: var(--tk-color-brand); background: color-mix(in srgb, var(--tk-color-brand) 45%, #fff); transform: translateY(-50%) scale(1.2); }
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf.sb-active::before { background: var(--tk-color-brand); }
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf.sb-active::after {
  border-color: #fff; background: var(--tk-color-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tk-color-brand) 30%, transparent); transform: translateY(-50%);
}
/* the dot sits on the rail, outside the highlighted pill; the pill is not nudged right when active, and a click shows no black ring */
.tk-sidebar:not(.is-collapsed) .tk-nav-group-body > .tk-nav-leaf.sb-active:hover { transform: none; }
.tk-sidebar:not(.is-collapsed) .tk-nav-leaf:focus { outline: none; }
.tk-sidebar:not(.is-collapsed) .tk-nav-leaf:focus-visible { outline: 2px solid color-mix(in srgb, var(--tk-color-brand) 55%, transparent); outline-offset: -2px; }

/* B2 collapsed rail: raised buttons, bounce on hover, press, solid dark-blue active, dots under open group */
.tk-sidebar.is-collapsed :is(.tk-nav-item, .tk-nav-group-btn) {
  border-radius: 12px;
  background: color-mix(in srgb, var(--tk-surface-table-bg) 65%, transparent);
  border: 1px solid var(--tk-surface-divider);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform 250ms var(--tk-ease-bounce), box-shadow 220ms, background-color 180ms, border-color 180ms, color 180ms,
              width 280ms var(--tk-ease-spring), height 280ms var(--tk-ease-spring), padding 280ms var(--tk-ease-spring); /* size glides with the rail (owner 2026-10-12) */
}
.tk-sidebar.is-collapsed :is(.tk-nav-item, .tk-nav-group-btn):hover,
.tk-sidebar.is-collapsed .tk-nav-group:hover > .tk-nav-group-btn {
  transform: translateY(-3px) scale(1.08);
  border-color: color-mix(in srgb, var(--tk-color-brand) 45%, transparent);
  color: var(--tk-color-brand);
  box-shadow: 0 8px 18px -2px color-mix(in srgb, var(--tk-color-brand) 28%, transparent);
}
.tk-sidebar.is-collapsed :is(.tk-nav-item, .tk-nav-group-btn):active { transform: translateY(1.5px) scale(.94); transition-duration: 90ms; }
.tk-sidebar.is-collapsed :is(.tk-nav-item.sb-active, .tk-nav-group.is-open > .tk-nav-group-btn) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tk-color-brand) 85%, #000), color-mix(in srgb, var(--tk-color-brand) 50%, #000));
  border: 1.5px solid var(--tk-color-brand); color: #fff;
  box-shadow: 0 8px 20px -2px color-mix(in srgb, var(--tk-color-brand) 45%, transparent), inset 0 1.5px .5px rgba(255, 255, 255, .35);
}
.tk-sidebar.is-collapsed :is(.tk-nav-item.sb-active, .tk-nav-group.is-open > .tk-nav-group-btn) .tk-nav-icon { color: #fff; }
.tk-rail-dots { display: none; }
.tk-sidebar.is-collapsed .tk-nav-group.is-open > .tk-rail-dots {
  display: flex; flex-direction: column; position: relative; width: 44px; margin: 2px auto 6px; padding: 6px 0;
}
.tk-rail-stem { position: absolute; left: 17px; top: 0; bottom: 6px; width: 1.5px; background: color-mix(in srgb, var(--tk-color-brand) 45%, transparent); }
.tk-rail-dot { position: relative; display: block; height: 18px; margin: 1px 0; z-index: 2; }
.tk-rail-dot::before { content: ''; position: absolute; left: 17px; top: 50%; width: 7px; height: 1.5px; background: color-mix(in srgb, var(--tk-color-brand) 45%, transparent); }
.tk-rail-dot::after { content: ''; position: absolute; left: 24px; top: 50%; margin-top: -3.25px; width: 6.5px; height: 6.5px; border-radius: 50%; background: color-mix(in srgb, var(--tk-color-text-tertiary) 45%, transparent); transition: all 160ms var(--tk-ease-bounce); }
.tk-rail-dot:hover::after, .tk-rail-dot.is-synced-hover::after { background: color-mix(in srgb, var(--tk-color-brand) 60%, #fff); transform: scale(1.2); }
.tk-rail-dot.sb-active::after { background: var(--tk-color-brand); transform: scale(1.25); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--tk-color-brand) 25%, transparent); }

/* B3 flyout: caret pointing at the rail button, invisible hover bridge, slide-in, leaf hover bar */
.tk-sidebar.is-collapsed .tk-nav-flyout::before {
  content: ''; position: absolute; left: -6px; top: 14px; width: 12px; height: 12px;
  background: inherit; border-left: 1px solid var(--tk-surface-divider); border-bottom: 1px solid var(--tk-surface-divider);
  transform: rotate(45deg);
}
.tk-sidebar.is-collapsed .tk-nav-flyout::after { content: ''; position: absolute; left: -20px; top: -10px; bottom: -10px; width: 26px; }
.tk-sidebar.is-collapsed :is(.tk-nav-group:hover, .tk-nav-group.is-flyout-open) > .tk-nav-flyout { animation: tkFlyIn 150ms var(--tk-ease-spring); }
@keyframes tkFlyIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-leaf { transition: all 130ms ease; border-left: 3.5px solid transparent; }
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-leaf:hover:not(.sb-active),
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-leaf.is-synced-hover:not(.sb-active) {
  background: color-mix(in srgb, var(--tk-color-brand) 10%, transparent); color: var(--tk-color-brand);
  border-left-color: var(--tk-color-brand); transform: translateX(3px);
}

/* Smooth rail collapse/expand (owner, 2026-09-29): layout.css animates width only, so
   flex-basis snapped and the sidebar jumped; it also used --tk-motion-slow, which is 0ms on
   RDP / Windows Server (reduced motion). Animate both with a fixed duration, and keep the
   labels on one line so they clip instead of re-wrapping while the width changes. */
.tk-sidebar {
  transition: width 280ms var(--tk-ease-spring), flex-basis 280ms var(--tk-ease-spring), padding 280ms var(--tk-ease-spring), gap 280ms var(--tk-ease-spring);
}
.tk-sidebar .tk-nav-label,
.tk-sidebar .tk-nav-section-label { white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 767px) { .tk-sidebar { transition: transform 280ms var(--tk-ease-spring); } }

/* Rail spacing and flyout look matched to the AI Studio screens (owner, 2026-09-29):
   44px buttons with roomier spacing, bigger flyout rows, solid brand active leaf. */
/* the open group / current page keeps its solid dark look while hovered (AI Studio) */
.tk-sidebar.is-collapsed .tk-nav-item.sb-active:hover,
.tk-sidebar.is-collapsed .tk-nav-group.is-open > .tk-nav-group-btn:hover,
.tk-sidebar.is-collapsed .tk-nav-group.is-open:hover > .tk-nav-group-btn {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tk-color-brand) 95%, #fff), color-mix(in srgb, var(--tk-color-brand) 60%, #000));
  border-color: var(--tk-color-brand); color: #fff;
  box-shadow: 0 12px 24px -2px color-mix(in srgb, var(--tk-color-brand) 55%, transparent);
}
.tk-sidebar.is-collapsed .tk-nav-group.is-open:hover > .tk-nav-group-btn .tk-nav-icon,
.tk-sidebar.is-collapsed .tk-nav-item.sb-active:hover .tk-nav-icon { color: #fff; }
.tk-sidebar.is-collapsed { gap: 14px; padding-top: 18px; }
.tk-sidebar.is-collapsed .tk-nav-group { display: flex; flex-direction: column; align-items: center; }
.tk-sidebar.is-collapsed .tk-nav-divider { display: none; }
.tk-sidebar.is-collapsed .tk-nav-flyout { width: 250px; padding: 8px; border-radius: 14px; }
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-flyout-title {
  font-family: var(--tk-font-lao-heading-family); padding: 6px 10px 8px; margin-bottom: 4px; font-size: 15px; font-weight: 700;
  color: var(--tk-color-text-secondary); border-bottom-color: var(--tk-surface-divider);
}
.tk-sidebar.is-collapsed .tk-nav-flyout { gap: 2px; }
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-leaf { padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45; font-weight: 500; }
.tk-sidebar.is-collapsed .tk-nav-flyout .tk-nav-leaf.sb-active {
  background: var(--tk-color-brand); color: var(--tk-color-on-accent); font-weight: 700;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tk-color-brand) 35%, transparent);
  border-left-color: transparent;
}

/* B4 edge arrow: hover the sidebar's right edge to reveal a round < / > button */
.tk-sidebar-resizer { display: block; position: relative; flex: 0 0 0; width: 0; z-index: 30; }
.tk-sidebar-resizer::before { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 28px; cursor: pointer; }
.tk-sidebar.is-collapsed + .tk-sidebar-resizer::before { left: 0; width: 16px; }
.tk-sidebar-resizer-btn {
  position: absolute; left: -14px; top: 140px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--tk-surface-table-bg); border: 1.5px solid var(--tk-surface-divider); color: var(--tk-color-text-secondary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .16); display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: translateY(-50%) scale(.65);
  transition: opacity 160ms var(--tk-ease-spring), transform 160ms var(--tk-ease-spring), background-color 150ms, color 150ms;
}
/* collapsed too: the button sits across the edge line, not beside it (owner 2026-10-12) */
.tk-sidebar.is-collapsed + .tk-sidebar-resizer .tk-sidebar-resizer-btn { left: -14px; }
.tk-sidebar-resizer:hover .tk-sidebar-resizer-btn, .tk-sidebar-resizer-btn:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.tk-sidebar-resizer-btn:hover { background: var(--tk-color-brand); border-color: var(--tk-color-brand); color: #fff; transform: translateY(-50%) scale(1.18); }
.tk-sidebar-resizer-btn svg { transition: transform 240ms var(--tk-ease-spring); }
.tk-sidebar.is-collapsed + .tk-sidebar-resizer .tk-sidebar-resizer-btn svg { transform: rotate(180deg); }
.tk-sidebar-resizer { align-self: stretch; }
.tk-sidebar-resizer-btn { transition: top 90ms ease-out, opacity 160ms var(--tk-ease-spring), transform 160ms var(--tk-ease-spring), background-color 150ms, color 150ms; }
/* beside an open rail flyout the edge goes inert (shell.js sets is-blocked) */
.tk-sidebar-resizer.is-blocked .tk-sidebar-resizer-btn { opacity: 0; pointer-events: none; }
.tk-sidebar-resizer.is-blocked::before { cursor: default; }
/* While a rail flyout is showing, the edge strip must not sit on top of it:
   it overlaps the flyout's left side and would break the B3 hover bridge. */
.tk-sidebar.is-collapsed:has(.tk-nav-group:hover, .tk-nav-group.is-flyout-open) + .tk-sidebar-resizer { pointer-events: none; }
.tk-sidebar.is-collapsed:has(.tk-nav-group:hover, .tk-nav-group.is-flyout-open) + .tk-sidebar-resizer .tk-sidebar-resizer-btn { opacity: 0; }
@media (max-width: 767px) { .tk-sidebar-resizer { display: none; } }

/* B5 logo is the toggle: logo morphs to expand icon on hover while collapsed, tooltip below */
.tk-logo-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  transition: background-color 160ms, transform 140ms;
}
.tk-logo-toggle:hover { background: color-mix(in srgb, var(--tk-color-brand) 10%, transparent); }
.tk-logo-toggle:active { transform: scale(.92); }
.tk-logo-toggle .tk-navbar-mark { transition: opacity 220ms var(--tk-ease-spring), transform 220ms var(--tk-ease-spring); }
.tk-logo-expand {
  position: absolute; inset: 2px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tk-color-brand) 14%, var(--tk-surface-table-bg)); color: var(--tk-color-brand);
  border: 1px solid color-mix(in srgb, var(--tk-color-brand) 35%, transparent);
  opacity: 0; transform: scale(.72) rotate(-20deg); pointer-events: none;
  transition: opacity 220ms var(--tk-ease-spring), transform 220ms var(--tk-ease-spring);
}
.tk-logo-toggle.is-active:hover .tk-navbar-mark { opacity: 0; transform: scale(.72) rotate(20deg); }
.tk-logo-toggle.is-active:hover .tk-logo-expand { opacity: 1; transform: none; }
.tk-logo-tip {
  position: absolute; top: calc(100% + 9px); left: 0; transform: translateY(-5px); /* left-aligned: the logo sits at the viewport edge */
  background: #1e293b; color: #fff; font-family: var(--tk-font-lao-family); font-size: 12px; padding: 4px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; z-index: 1000;
  transition: opacity 160ms, transform 160ms var(--tk-ease-spring), visibility 160ms;
}
.tk-logo-tip::after { content: ''; position: absolute; bottom: 100%; left: 12px; border: 5px solid transparent; border-bottom-color: #1e293b; }
.tk-logo-toggle:hover .tk-logo-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 180ms; }

@media (max-width: 767px) { .tk-logo-tip { display: none; } }

/* ==== Office info card (map #148 E, #154): navbar office name → read-only modal ==== */
.tk-office-trigger {
  border: 0; background: none; padding: 2px 6px; margin: -2px -6px; border-radius: 6px;
  font: inherit; color: inherit; cursor: pointer;
  transition: background-color 140ms, color 140ms;
}
.tk-office-trigger:hover { background: var(--tk-surface-hover); color: var(--tk-color-brand); }
.tk-office-scrim {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--tk-color-scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: tkOfficeFade 160ms ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tk-office-scrim { background: rgba(15, 23, 42, .55); }
}
.tk-office-box {
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--tk-surface-table-bg); color: var(--tk-color-text-primary);
  border-radius: 18px; border: 1px solid var(--tk-border-panel);
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
  animation: tkOfficeRise 220ms var(--tk-ease-spring);
}
@keyframes tkOfficeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tkOfficeRise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tk-office-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--tk-surface-divider); }
.tk-office-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px;
  color: var(--tk-color-brand); background: color-mix(in srgb, var(--tk-color-brand) 14%, var(--tk-surface-table-bg));
}
.tk-office-title { font-family: var(--tk-font-lao-heading-family); font-size: 17px; font-weight: 700; }
.tk-office-sub { font-family: var(--tk-font-lao-family); font-size: 13px; color: var(--tk-color-text-secondary); }
.tk-office-close { margin-left: auto; }
.tk-office-rows { margin: 0; padding: 8px 20px; }
.tk-office-rows > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--tk-surface-divider); }
.tk-office-rows > div:first-child { border-top: 0; }
.tk-office-rows dt { font-family: var(--tk-font-lao-family); font-size: 13.5px; color: var(--tk-color-text-secondary); font-weight: 500; }
.tk-office-rows dd { margin: 0; font-family: var(--tk-font-lao-family); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tk-office-rows small { color: var(--tk-color-text-tertiary); font-weight: 400; }
.tk-office-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--tk-surface-divider); }
@media (prefers-reduced-motion: reduce) { .tk-office-scrim, .tk-office-box { animation: none; } }

/* ---- Reduced motion (#149 Q5, revised by owner 2026-09-29 on PR 156) ----
   Windows Server / remote-desktop sessions report prefers-reduced-motion by
   default, which hid every effect. Owner chose the middle way: small button,
   dropdown and bar feedback always runs (fixed ms durations above, so the
   zeroed --tk-motion-* tokens don't touch them); only the whole-page A1
   fade/slide honours the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .tk-main-content,
  .tk-main-content.htmx-swapping,
  .tk-main-content.htmx-settling {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* Navbar office name on one line (owner 2026-10-19): a long company name wrapped to 2-3 lines on a narrow window and
   ran out of the top bar. The name is cut with "..." instead; the whole name is in its tooltip and the office card. */
.tk-nav-office { align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tk-nav-office .tk-office-trigger { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-nav-office .tk-nav-user { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--tk-color-text-secondary); }

/* Logout: flat red with a light shadow, no 3D edge or lift (owner 2026-10-23) */
.tk-navbar-logout,
.tk-navbar-logout:hover,
.tk-navbar-logout[aria-expanded="true"] {
  border: 1px solid transparent; border-radius: 8px; transform: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 3px 8px -3px color-mix(in srgb, var(--tk-color-danger) 50%, transparent);
}
.tk-navbar-logout { background: var(--tk-color-danger); }
.tk-navbar-logout:hover, .tk-navbar-logout[aria-expanded="true"] { background: color-mix(in srgb, var(--tk-color-danger) 85%, #000); }
.tk-navbar-logout:active { transform: none; background: color-mix(in srgb, var(--tk-color-danger) 75%, #000); box-shadow: none; }

/* Home menu page — glass toolbar, chips, 3D tiles, section headers
   (map #148 PR 3; decisions in #153 Q7 and #150 A4). Loaded after
   motion.css, so it wins by order. Phone layout (app-icon grid, < 768px)
   stays as components.css defines it; the 3D tile look is desktop only. */

/* ---- A4 unified brand-blue: every section uses the brand tone ----
   !important: beats the per-section .tk-tone-* modifiers in components.css,
   which set --tk-tone with a more specific selector. */
.tk-quick-item,
.tk-home-head { --tk-tone: var(--tk-color-brand) !important; }

/* ---- C2 glass toolbar: search right-aligned on the top row, chips below ---- */
.tk-home-tools.tk-toolbar {
  border-radius: 16px;
  padding: var(--tk-space-4) var(--tk-space-5);
  gap: var(--tk-space-3);
}
.tk-home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.tk-home-topbar-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tk-font-lao-heading-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--tk-color-text-primary);
}
.tk-home-tools .tk-home-search {
  max-width: 260px;
  margin-left: auto;
}
.tk-home-tools .tk-home-search input {
  height: 38px;
  border-radius: 10px;
  background: var(--tk-surface-table-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  font-size: 13.5px;
}
.tk-home-chips {
  gap: 7px;
  padding-top: 10px;
  border-top-color: color-mix(in srgb, var(--tk-color-text-tertiary) 28%, transparent);
}
.tk-home-chip {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--tk-border-panel);
  background: var(--tk-surface-table-bg);
  color: var(--tk-color-text-secondary);
  font-family: var(--tk-font-lao-family);
  font-size: 13px;
  box-shadow: 0 1.5px 3px rgba(15, 23, 42, .04);
  transition: transform 160ms var(--tk-ease-spring), box-shadow 160ms var(--tk-ease-spring),
              background-color 160ms, color 160ms, border-color 160ms;
}
.tk-home-chip:hover {
  color: var(--tk-color-text-primary);
  border-color: color-mix(in srgb, var(--tk-color-brand) 35%, var(--tk-border-panel));
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .07);
}
.tk-home-chip:active { transform: translateY(.5px) scale(.98); }
.tk-home-chip.is-active { border-color: transparent; }
.tk-home-chip.is-active:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
@media (max-width: 640px) {
  .tk-home-topbar { flex-direction: column; align-items: stretch; }
  .tk-home-tools .tk-home-search { max-width: none; margin-left: 0; }
}

/* ---- Section header: badge + title (no item count — owner, PR 158 test) ---- */
.tk-home-head {
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.tk-home-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-home-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--tk-tone);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--tk-tone) 18%, var(--tk-surface-table-bg)),
    color-mix(in srgb, var(--tk-tone) 8%, var(--tk-surface-table-bg)));
  border: 1px solid color-mix(in srgb, var(--tk-tone) 24%, transparent);
  box-shadow: 0 3px 8px -1px color-mix(in srgb, var(--tk-tone) 22%, transparent);
}
.tk-home-title { font-family: var(--tk-font-lao-heading-family); font-size: 17px; letter-spacing: -.2px; }

/* ---- C3 3D tiles (desktop) ---- */
@media (min-width: 768px) {
  .tk-home-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 16px;
  }
  .tk-quick-item {
    justify-content: flex-start;
    gap: 12px;
    padding: 18px 12px 16px;
    min-height: 128px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--tk-tone) 2.5%, var(--tk-surface-table-bg));
    border: 1px solid color-mix(in srgb, var(--tk-tone) 9%, var(--tk-border-panel));
    box-shadow: 0 1px 3px rgba(15, 23, 42, .03), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform 220ms var(--tk-ease-spring), box-shadow 220ms var(--tk-ease-spring),
                background-color 180ms, border-color 180ms;
  }
  .tk-quick-circle {
    width: 62px;
    height: 62px;
    font-size: 26px;
    color: var(--tk-tone);
    background: linear-gradient(160deg, var(--tk-surface-table-bg) 0%,
      color-mix(in srgb, var(--tk-tone) 12%, var(--tk-surface-table-bg)) 45%,
      color-mix(in srgb, var(--tk-tone) 16%, var(--tk-surface-table-bg)) 100%);
    border: 1px solid color-mix(in srgb, var(--tk-tone) 26%, transparent);
    box-shadow: 0 6px 16px -2px color-mix(in srgb, var(--tk-tone) 24%, transparent),
                0 2px 5px rgba(15, 23, 42, .05),
                inset 0 1.5px 1.5px rgba(255, 255, 255, .6),
                inset 0 -2px 3px color-mix(in srgb, var(--tk-tone) 14%, transparent);
    transition: transform 260ms var(--tk-ease-spring), box-shadow 260ms var(--tk-ease-spring),
                background 200ms, color 200ms, border-color 200ms;
  }
  .tk-quick-lbl {
    font-family: var(--tk-font-lao-family);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    max-width: 136px;
    transition: color 180ms;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .tk-quick-item:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--tk-tone) 7%, var(--tk-surface-table-bg));
    border-color: color-mix(in srgb, var(--tk-tone) 26%, var(--tk-border-panel));
    box-shadow: 0 10px 24px -4px color-mix(in srgb, var(--tk-tone) 20%, transparent),
                0 3px 8px -2px rgba(15, 23, 42, .05);
  }
  .tk-quick-item:hover .tk-quick-circle {
    transform: translateY(-3px) scale(1.08);
    background: linear-gradient(145deg, color-mix(in srgb, var(--tk-tone) 80%, #fff), var(--tk-tone));
    border-color: var(--tk-tone);
    color: var(--tk-color-on-accent);
    box-shadow: 0 14px 28px -4px color-mix(in srgb, var(--tk-tone) 48%, transparent),
                inset 0 1.5px 1.5px rgba(255, 255, 255, .5),
                inset 0 -2px 4px rgba(0, 0, 0, .2);
  }
  .tk-quick-item:hover .tk-quick-lbl { color: var(--tk-tone); font-weight: 700; }
}
@media (min-width: 768px) {
  .tk-quick-item:active { transform: translateY(1px) scale(.98); }
  .tk-quick-item:active .tk-quick-circle { transform: scale(.93); }
}
[data-theme="dark"] .tk-quick-item { box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
[data-theme="dark"] .tk-quick-circle {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .15), inset 0 -2px 3px rgba(0, 0, 0, .4);
}

/* ==== C1/C4 menu | Dashboard switch and dashboard (map #148 PR 5, #153) ==== */
.tk-home-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tk-surface-table-bg) 70%, transparent);
  border: 1px solid var(--tk-border-panel);
}
.tk-home-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tk-color-text-secondary);
  font: inherit;
  font-family: var(--tk-font-lao-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, box-shadow 160ms;
}
.tk-home-switch-btn:hover { color: var(--tk-color-text-primary); }
.tk-home-switch-btn.is-active {
  background: var(--tk-color-brand);
  color: var(--tk-color-on-accent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tk-color-brand) 35%, transparent);
}
/* the menu's search box and category chips only apply to the menu view */
.tk-home-tools.is-dashboard .tk-home-chips,
.tk-home-tools.is-dashboard .tk-home-search { display: none; }
.tk-home-view { display: flex; flex-direction: column; gap: var(--tk-space-5); }

/* Dashboard layout follows the owner's AI Studio screenshot (PR 160 review). */
.tk-dash-loading { display: flex; align-items: center; gap: 10px; padding: 40px; justify-content: center; color: var(--tk-color-text-secondary); }
.tk-dash { display: flex; flex-direction: column; gap: 18px; font-variant-numeric: tabular-nums; }
.tk-dash-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.tk-dash-hero-title { margin: 0; font-family: var(--tk-font-lao-heading-family); font-size: 20px; font-weight: 700; color: var(--tk-color-text-primary); }
.tk-dash-hero-meta { margin-top: 2px; font-family: var(--tk-font-lao-family); font-size: 13.5px; color: var(--tk-color-text-secondary); }
.tk-dash-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.tk-dash-card {
  background: var(--tk-surface-table-bg);
  border: 1px solid var(--tk-border-panel);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .03), 0 6px 18px -6px rgba(15, 23, 42, .06);
  min-width: 0;
}
[data-theme="dark"] .tk-dash-card { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .45); }
.tk-dash .is-pos { color: var(--tk-color-success); }
.tk-dash .is-neg { color: var(--tk-color-danger); }

/* icon tiles */
.tk-dash-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px; font-size: 19px;
  --c: var(--tk-color-brand);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--tk-surface-table-bg));
}
.tk-dash-ico.is-green { --c: var(--tk-color-success); }
.tk-dash-ico.is-amber { --c: var(--tk-color-warning); }

/* period picker under the hero: year (to the Working Date), month, quarter, half (owner 2026-10-21) */
.tk-dash-period { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.tk-dash-period .tk-seg { align-items: stretch; }
/* the month / quarter / half drop-down matches the buttons beside it (owner 2026-10-21 "not balanced"): the row's height
   (stretch, not a fixed 31px), 8px radius, 14px regular text in the accent colour, a narrow gap */
.tk-dash-period .tk-fy-pick { box-sizing: border-box; padding: 0 8px; border-radius: 8px; gap: 4px; }
.tk-dash-period .tk-fy-pick select { padding: 0 2px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--tk-color-accent); }
/* row 1: three pillars */
.tk-dash-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .tk-dash-pillars { grid-template-columns: 1fr; } }
.tk-dash-pillar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tk-dash-pillar-title { font-family: var(--tk-font-lao-family); font-size: 14.5px; font-weight: 700; color: var(--tk-color-text-secondary); text-align: right; }
.tk-dash-big { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--tk-color-text-primary); text-align: right; line-height: 1.2; }
.tk-dash-big-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tk-dash-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--tk-color-brand); background: color-mix(in srgb, var(--tk-color-brand) 14%, var(--tk-surface-table-bg));
}
.tk-dash-pill.is-grey { color: var(--tk-color-text-secondary); background: var(--tk-surface-stripe); }
.tk-dash-rows { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--tk-surface-divider); display: flex; flex-direction: column; gap: 8px; }
.tk-dash-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.tk-dash-rows dt { font-family: var(--tk-font-lao-family); font-size: 13.5px; font-weight: 500; color: var(--tk-color-text-secondary); }
.tk-dash-rows dd { margin: 0; font-weight: 700; color: var(--tk-color-text-primary); white-space: nowrap; }
.tk-dash-rows dd.is-pos { color: var(--tk-color-success); }
.tk-dash-rows dd.is-neg { color: var(--tk-color-danger); }
.tk-dash-debts { display: flex; flex-direction: column; gap: 8px; }
.tk-dash-debts > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--tk-surface-stripe);
}
.tk-dash-debts span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tk-font-lao-family); font-size: 13.5px; color: var(--tk-color-text-secondary); }
.tk-dash-debts i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tk-dash-debts b { font-weight: 700; color: var(--tk-color-text-primary); white-space: nowrap; }
.tk-dash i.is-blue { background: var(--tk-color-brand); }
.tk-dash i.is-red { background: var(--tk-color-danger); }
.tk-dash i.is-amber { background: var(--tk-color-warning); }
.tk-dash i.is-green { background: var(--tk-color-success); }

/* row 2: ratio + rates (narrow) | feed (wide) */
.tk-dash-bottom { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 2.2fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .tk-dash-bottom { grid-template-columns: 1fr; } }
.tk-dash-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--tk-font-lao-family); font-size: 15px; font-weight: 700; color: var(--tk-color-text-primary);
}
.tk-dash-card-head .ti { color: var(--tk-color-brand); font-size: 18px; }
.tk-dash-sep { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tk-surface-divider); }
.tk-dash-bar { margin-bottom: 12px; }
.tk-dash-bar > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.tk-dash-bar span { font-family: var(--tk-font-lao-family); color: var(--tk-color-text-secondary); }
.tk-dash-bar b { font-weight: 700; }
.tk-dash-track { height: 8px; border-radius: 999px; background: var(--tk-surface-stripe); overflow: hidden; }
.tk-dash-track i { display: block; height: 100%; border-radius: inherit; transition: width 400ms var(--tk-ease-spring); }
.tk-dash-rates { display: flex; flex-direction: column; gap: 8px; }
.tk-dash-rates > div {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; background: var(--tk-surface-stripe); font-size: 13px;
}
.tk-dash-rates b { color: var(--tk-color-brand); font-weight: 700; font-size: 14px; }
.tk-dash-rates span { font-family: var(--tk-font-lao-family); color: var(--tk-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dash-rates em { font-style: normal; color: var(--tk-color-text-secondary); white-space: nowrap; }
.tk-dash-rates strong { color: var(--tk-color-text-primary); }

.tk-dash-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-dash-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--tk-surface-stripe); border: 1px solid var(--tk-border-panel); }
.tk-dash-tabs button {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tk-color-text-secondary); font: inherit; font-family: var(--tk-font-lao-family); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tk-dash-tabs button.is-active { background: var(--tk-surface-table-bg); color: var(--tk-color-brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.tk-dash-tabs .n { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; text-align: center; background: var(--tk-surface-divider); color: var(--tk-color-text-secondary); }
.tk-dash-tabs button.is-active .n { background: color-mix(in srgb, var(--tk-color-brand) 14%, var(--tk-surface-table-bg)); color: var(--tk-color-brand); }
.tk-dash-more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tk-font-lao-family); font-size: 13.5px; font-weight: 600; color: var(--tk-color-brand); text-decoration: none; }
.tk-dash-more:hover { text-decoration: underline; }
.tk-dash-feed { display: flex; flex-direction: column; gap: 10px; }
.tk-dash-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--tk-border-panel); border-radius: 12px; background: var(--tk-surface-stripe);
}
.tk-dash-item.is-cancelled { opacity: .6; }
.tk-dash-item-main { flex: 1; min-width: 0; }
.tk-dash-item-title { font-family: var(--tk-font-lao-family); font-size: 14.5px; font-weight: 700; color: var(--tk-color-text-primary); overflow-wrap: anywhere; }
.tk-dash-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--tk-color-text-tertiary); }
.tk-dash-item-meta b { color: var(--tk-color-brand); font-weight: 700; }
.tk-dash-item-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tk-dash-item-amt { text-align: right; font-size: 16px; font-weight: 800; color: var(--tk-color-brand); white-space: nowrap; }
.tk-dash-item-amt small { display: block; font-size: 12px; font-weight: 500; color: var(--tk-color-text-tertiary); }
.tk-dash-empty { padding: 16px 0; text-align: center; color: var(--tk-color-text-tertiary); font-family: var(--tk-font-lao-family); }

/* ---- key tiles: the two daily entry points (Journal, Tax invoice) (owner 2026-10-03).
   Marked only with a gold halo round the icon. The tile itself keeps the normal look: a tinted background,
   a coloured border or a filled circle reads as "selected" / "hover" and confuses users. ---- */
.tk-quick-item.is-key .tk-quick-circle { position: relative; }
.tk-quick-item.is-key .tk-quick-circle::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(245, 166, 35, .6);
  box-shadow: 0 0 12px rgba(245, 166, 35, .35);
}

/* TaxRIS filing / payment per month (owner 2026-10-29): label + 12 month cells, each a round chip with its own mark */
.tk-dash-taxyear { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tk-color-text-secondary); }
.tk-dash-tax { display: flex; flex-direction: column; gap: 6px; }
.tk-dash-tax-row { display: grid; grid-template-columns: 70px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; }
.tk-dash-tax-row.is-head span { font-size: 11px; text-align: center; color: var(--tk-color-text-secondary); font-variant-numeric: tabular-nums; }
.tk-dash-tax-row .lbl { font-family: var(--tk-font-lao-family); font-size: 13px; font-weight: 600; color: var(--tk-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-dash-tax-row .c { display: grid; place-items: center; aspect-ratio: 1; max-width: 30px; width: 100%; margin: 0 auto; border-radius: 8px; font-size: 13px; line-height: 1; cursor: default;
  background: var(--tk-surface-stripe); color: var(--tk-color-text-tertiary, #94a3b8); }
.tk-dash-tax-row .c.is-paid { background: color-mix(in srgb, var(--tk-color-success) 14%, transparent); color: var(--tk-color-success); }
.tk-dash-tax-row .c.is-filed { background: color-mix(in srgb, var(--tk-color-warning) 16%, transparent); color: var(--tk-color-warning); }
.tk-dash-tax-row .c.is-not { background: var(--tk-surface-stripe); color: var(--tk-color-text-secondary); }
.tk-dash-tax-row .c.is-late { background: color-mix(in srgb, var(--tk-color-danger) 14%, transparent); color: var(--tk-color-danger); }
.tk-dash-tax-row .c.is-future { background: transparent; border: 1px dashed var(--tk-border-panel); }
.tk-dash-tax-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-family: var(--tk-font-lao-family); font-size: 12px; }
.tk-dash-tax-legend .is-paid { color: var(--tk-color-success); }
.tk-dash-tax-legend .is-filed { color: var(--tk-color-warning); }
.tk-dash-tax-legend .is-not { color: var(--tk-color-text-secondary); }
.tk-dash-tax-legend .is-late { color: var(--tk-color-danger); }
/* refresh: icon button before the year, spins while TaxRIS is asked */
.tk-dash-taxbtn { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tk-color-success) 40%, transparent); background: color-mix(in srgb, var(--tk-color-success) 8%, transparent); color: var(--tk-color-success); }
.tk-dash-taxbtn:hover, .tk-dash-taxbtn:focus-visible { background: var(--tk-color-success); color: var(--tk-color-on-accent, #fff); }
.tk-dash-taxbtn[disabled] { cursor: progress; opacity: .7; }
.tk-dash-taxbtn.is-spin .ti { animation: ti-spin 1s linear infinite; transform-origin: 50% 50%; }
.tk-dash-taxbtn ~ .tk-dash-taxyear { margin-left: 8px; }
/* while TaxRIS is asked: the chips shimmer in a wave across the months, the row being asked is lit, a bar under the grid */
@keyframes tk-tax-wave { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } }
.tk-dash-tax.is-busy .tk-dash-tax-row:not(.is-head) .c { animation: tk-tax-wave 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 70ms); }
.tk-dash-tax.is-busy .tk-dash-tax-row.is-asking .c { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tk-color-success) 45%, transparent); }
.tk-dash-tax.is-busy .tk-dash-tax-row.is-asking .lbl { color: var(--tk-color-success); }
.tk-dash-taxprog { margin-top: 10px; }
.tk-dash-taxprog[hidden] { display: none; }
.tk-dash-taxprog .bar { height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--tk-color-success) 14%, transparent); }
.tk-dash-taxprog .bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg, var(--tk-color-success), color-mix(in srgb, var(--tk-color-success) 55%, #fff), var(--tk-color-success)); background-size: 200% 100%; animation: tk-tax-flow 1.4s linear infinite; }
@keyframes tk-tax-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
.tk-dash-taxprog .txt { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-family: var(--tk-font-lao-family); font-size: 12px; color: var(--tk-color-text-secondary); }
.tk-dash-taxprog .pct { font-family: var(--tk-font-ui-family); color: var(--tk-color-success); font-variant-numeric: tabular-nums; }
.tk-dash-taxprog.is-ok .bar i { animation: none; background: var(--tk-color-success); }
.tk-dash-taxprog.is-ok .step { color: var(--tk-color-success); font-weight: 600; }
.tk-dash-taxprog.is-fail .bar i { animation: none; background: var(--tk-color-danger); }
.tk-dash-taxprog.is-fail .step, .tk-dash-taxprog.is-fail .pct { color: var(--tk-color-danger); }
@media (prefers-reduced-motion: reduce) {
  .tk-dash-tax.is-busy .tk-dash-tax-row:not(.is-head) .c { animation: none; opacity: .6; }
  .tk-dash-taxprog .bar i { animation: none; transition: none; }
}
/* home menu | dashboard swipe on phones and tablets (owner 2026-10-29): the new view slides in from the side it came from (transform only, #10) */
@keyframes tk-swipe-l { from { transform: translateX(-36px); } to { transform: none; } }
@keyframes tk-swipe-r { from { transform: translateX(36px); } to { transform: none; } }
.tk-swipe-from-left { animation: tk-swipe-l .22s cubic-bezier(.2,.8,.2,1); }
.tk-swipe-from-right { animation: tk-swipe-r .22s cubic-bezier(.2,.8,.2,1); }
/* filed, not paid, past the deadline: the amber mark keeps a small red overdue mark beside it */
.tk-dash-tax-row .c:has(.late) { display: flex; align-items: center; justify-content: center; }
.tk-dash-tax-row .c .late { font-style: normal; font-size: 8px; margin-left: 1px; color: var(--tk-color-danger); }

/* Phone layout (owner 2026-10-19: make the system easy to use on a phone). Loaded last in the bundle and only changes
   things below 768px, so the desktop stays as it is. Shared pieces only - every list and form page picks it up:
   - the page tabs scroll sideways in one row; the page's action buttons get their own row under them
   - the period bar (today, the 12 months, all) is one row that scrolls sideways instead of 3 rows of chips
   - filters, search and date ranges stack to full width; buttons are at least 40px high for a thumb
   - inputs use 16px text so iPhone Safari does not zoom in on focus
   - the totals bar stacks; tables keep their own sideways scroll and never widen the page */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .tk-main-content { padding-left: 10px !important; padding-right: 10px !important; }
  .tk-page { gap: 10px; }

  /* toolbar */
  .tk-toolbar, .tk-toolbar:not(.tk-home-tools) { padding: 10px; border-radius: 14px; gap: 10px; }
  .tk-toolbar-top { flex-wrap: wrap !important; gap: 8px !important; }
  .tk-toolbar-top > .tk-tabs {
    flex: 1 1 100% !important; width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .tk-toolbar-top > .tk-tabs::-webkit-scrollbar { display: none; }
  .tk-toolbar:not(.tk-home-tools) .tk-tab, .tk-tab {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 6px 12px !important; font-size: 14.5px !important;
  }
  /* the buttons next to the tabs (print, print selected, Excel...) go to a row of their own */
  .tk-toolbar-top > .tk-btn, .tk-toolbar-top > .tk-toolbar-actions, .tk-toolbar-top > .dropdown,
  .tk-toolbar-top > a.tk-btn, .tk-toolbar-top > .tk-paper-toggle {
    flex: 1 1 auto; justify-content: center; margin-left: 0 !important; min-height: 40px; font-size: 14px;
  }
  .tk-toolbar-actions { flex-wrap: wrap; width: 100%; }
  .tk-toolbar-actions > * { flex: 1 1 auto; justify-content: center; }

  /* period bar: one row, swipe sideways */
  .tk-period-bar {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; margin: 0 -2px;
  }
  .tk-period-bar::-webkit-scrollbar { display: none; }
  .tk-period-bar > * { flex: 0 0 auto; }
  .tk-pchip { padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }

  /* filters and search: full width, one per row; the date range keeps from/to side by side */
  .autofilter { gap: 8px; }
  .autofilter > *, .af-search, .af-select { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; }
  .autofilter > .tk-btn, .autofilter > button, .af-clear, .autofilter > .count-badge { flex: 1 1 auto !important; }
  .autofilter .tk-input-group { width: 100% !important; display: flex; }
  .autofilter .tk-input-group .tk-input { flex: 1 1 0; min-width: 0; }
  .af-search { padding: 8px 12px; }

  /* touch targets and no zoom on focus */
  .tk-btn { min-height: 40px; }
  .tk-btn-icon { min-width: 40px; min-height: 40px; }
  input, select, textarea, .tk-input, .af-search input { font-size: 16px !important; }

  /* tables: their own sideways scroll, never the page */
  .tk-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }

  /* totals / pager bar under a list */
  .tk-summary-bar { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .tk-summary-figs { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .tk-summary-bar .tk-period-bar { justify-content: flex-start; }

  /* forms */
  .tk-formcard { border-radius: 14px; }
  .tk-form-foot, .tk-formcard-foot { position: sticky; bottom: 0; z-index: 5; }
  .tk-form-foot .tk-btn, .tk-formcard-foot .tk-btn { flex: 1 1 0; }
  /* an empty list says so at the left, not in the middle of a table wider than the phone */
  .tk-table-empty td { text-align: left !important; }
}

/* drop-downs built by shell.js (buildMobileSelects) from the tabs, period chips and page buttons: phone only */
.tk-msel { display: none; }
@media (max-width: 767px) {
  .tk-msel {
    display: block; width: 100%; min-height: 44px; padding: 8px 40px 8px 14px; border-radius: 12px;
    border: 1px solid var(--tk-border-panel); background-color: var(--tk-surface-table-bg); color: var(--tk-color-text-primary);
    font-family: var(--tk-font-lao-family); font-size: 16px; font-weight: 600;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .tk-msel-actions { font-weight: 400; color: var(--tk-color-text-secondary); }
  .tk-msel-item, .tk-msel-src { display: none !important; }
  /* an input group in a toolbar (account picker on the ledger...) stays inside the phone width */
  .tk-toolbar .tk-input-group { width: 100% !important; max-width: 100%; }
  .tk-toolbar .tk-input-group > * { min-width: 0; }
  /* report pages: year, period type and month side by side in one row */
  .tk-seg { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 6px; }
  .tk-seg > .tk-fy-pick { flex: 0 0 auto; }
  .tk-seg > .tk-msel { flex: 1 1 0; min-width: 0; width: auto; padding: 8px 28px 8px 10px; font-size: 15px; background-position: right 8px center; }
}