/* ==========================================================================
   CGM back-office — design system
   Ground-up. Loads no Bootstrap, no legacy theme, no jQuery.

   Direction: an operations console — quiet, precise, slightly industrial.
   Signature: the LEDGER RAIL. Every operational record carries a 3px rule on
   its leading edge whose colour states what the record IS doing (pending,
   blocked, settled, live). That single device gives dense tables a visual
   grammar without turning the screen into a coloured dashboard.
   ========================================================================== */

:root {
  /* surfaces */
  --canvas:    #F3F5F7;
  --surface:   #FFFFFF;
  --raised:    #E9EEF2;
  --line:      #D5DDE4;
  --line-soft: #E6EBEF;

  /* ink */
  --ink:       #17212B;
  --ink-2:     #46545F;
  --ink-3:     #65727E;

  /* meaning — never decoration */
  --primary:   #086788;   /* deep blue-teal: actions, selection */
  --primary-w: #E3EEF2;
  --good:      #147D64;   /* money in, settled, healthy */
  --good-w:    #E2F0EB;
  --pending:   #B7791F;   /* waiting on a human */
  --pending-w: #FAF0DC;
  --danger:    #B42318;   /* money out, blocked, failed */
  --danger-w:  #FBE8E6;
  --focus:     #2D7FF9;

  /* type: Consolas/Menlo carry NO Thai glyphs, so the mono stack is for
     digits, ids and timestamps only — never for a Thai label */
  --ui:   'Noto Sans Thai', 'Leelawadee UI', Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* 4px unit */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;

  --rail: 3px;
  --row: 42px;
  --radius: 6px;
}

:root[data-theme="dark"] {
  --canvas:  #10161B; --surface: #182128; --raised: #202C35;
  --line:    #33424D; --line-soft: #232F38;
  --ink:     #E8EEF2; --ink-2: #B3C0CA; --ink-3: #9BAAB5;
  --primary: #3FA8CC; --primary-w: #12303B;
  --good:    #3FBF9B; --good-w: #102B25;
  --pending: #D9A441; --pending-w: #2E2513;
  --danger:  #E4746A; --danger-w: #2F1A18;
}

* { box-sizing: border-box; }
/* a class with display:grid/flex beats the UA stylesheet's [hidden]{display:none},
   which silently leaves "hidden" panels on screen */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas); color: var(--ink);
  font-family: var(--ui); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: var(--ui); font-size: 14px; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* digits line up in columns or the eye can't scan them */
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--good); } .neg { color: var(--danger); }
.muted { color: var(--ink-3); }

/* ---------- type scale ---------- */
.t-meta  { font-size: 12px; color: var(--ink-3); }
.t-table { font-size: 13px; }
.t-sect  { font-size: 16px; font-weight: 600; margin: 0; }
.t-page  { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.t-fig   { font-family: var(--mono); font-variant-numeric: tabular-nums;
           font-size: 28px; font-weight: 600; line-height: 1.15; }
.t-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- app frame ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.rail-nav {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: var(--s2);
         padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.brand img { max-height: 30px; max-width: 108px; }
.brand .mark { width: 26px; height: 26px; border-radius: var(--radius); background: var(--primary);
               color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.brand b { font-size: 14px; display: block; }
.brand span { font-size: 11px; color: var(--ink-3); }

.nav { flex: 1; overflow-y: auto; padding-bottom: var(--s6); }
.nav-group { padding: var(--s4) var(--s4) var(--s1); }
.nav a {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s4) 8px 13px; color: var(--ink-2); font-size: 13.5px;
  border-left: var(--rail) solid transparent;
}
.nav a:hover { background: var(--raised); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--primary-w); color: var(--primary);
                              border-left-color: var(--primary); font-weight: 600; }
.nav .count { margin-left: auto; font-family: var(--mono); font-size: 11px;
              background: var(--pending); color: #2A1F06; border-radius: 10px; padding: 0 7px; }
.nav .count.zero { display: none; }
.nav .count.due { background: var(--danger); color: #fff; }

.top { display: flex; align-items: center; gap: var(--s3); height: 56px;
       padding: 0 var(--s4); background: var(--surface);
       border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.crumb { font-size: 12px; color: var(--ink-3); }
.crumb b { color: var(--ink); font-size: 15px; font-weight: 600; }
.grow { margin-left: auto; }
.main { display: flex; flex-direction: column; min-width: 0; }
.page { padding: var(--s6) var(--s6) var(--s8); min-width: 0; }

/* ---------- ledger rail: the signature ---------- */
.rec {
  background: var(--surface); border: 1px solid var(--line);
  border-left: var(--rail) solid var(--ink-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rec--live    { border-left-color: var(--primary); }
.rec--pending { border-left-color: var(--pending); }
.rec--blocked { border-left-color: var(--danger); }
.rec--settled { border-left-color: var(--ink-3); }
.rec--good    { border-left-color: var(--good); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
       background: var(--surface); color: var(--ink-2); border-radius: var(--radius);
       padding: 7px 13px; font-size: 13px; cursor: pointer; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn--primary:hover { color: #fff; filter: brightness(1.08); }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--sm { padding: 4px 10px; font-size: 12px; }

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-size: 11.5px; color: var(--ink-3); }
.input, .field input, .field select {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas);
  padding: 8px 10px; font-size: 13.5px; min-width: 0;
}
.input:focus, .field input:focus, .field select:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
}

/* state chips — always carry a word, never colour alone */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
        padding: 1px 9px; border-radius: 11px; white-space: nowrap; }
.chip--pending { background: var(--pending-w); color: var(--pending); }
.chip--good    { background: var(--good-w);    color: var(--good); }
.chip--danger  { background: var(--danger-w);  color: var(--danger); }
.chip--mute    { background: var(--raised);    color: var(--ink-3); }
.chip--info    { background: var(--primary-w); color: var(--primary); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface);
              border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; padding: 10px var(--s3);
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface);
  position: sticky; top: 0;
}
table.data td { padding: 0 var(--s3); height: var(--row); border-bottom: 1px solid var(--line-soft);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--raised); }
table.data .r { text-align: right; }
/* the rail, applied to a row */
table.data tbody tr td:first-child { box-shadow: inset var(--rail) 0 0 transparent; }
table.data tr.is-pending td:first-child { box-shadow: inset var(--rail) 0 0 var(--pending); }
table.data tr.is-blocked td:first-child { box-shadow: inset var(--rail) 0 0 var(--danger); }
table.data tr.is-good    td:first-child { box-shadow: inset var(--rail) 0 0 var(--good); }
.empty { text-align: center; color: var(--ink-3); padding: var(--s8) var(--s4); }

/* ---------- cards & panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel__head { display: flex; align-items: center; gap: var(--s2);
               padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.panel__body { padding: var(--s4); }
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.stat { padding: var(--s3) var(--s4); }
.stat .k { font-size: 11.5px; color: var(--ink-3); }
.stat .v { font-family: var(--mono); font-variant-numeric: tabular-nums;
           font-size: 22px; font-weight: 600; line-height: 1.25; }
.stat .d { font-size: 11.5px; color: var(--ink-3); }

/* definition rows */
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px var(--s4); margin: 0; font-size: 13px; }
dl.kv dt { color: var(--ink-3); font-size: 12px; }
dl.kv dd { margin: 0; text-align: right; word-break: break-word; }

/* ---------- money confirm: a state machine, never one click ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(12,20,26,.55); z-index: 90;
            display: grid; place-items: center; padding: var(--s4); }
.sheet { background: var(--surface); border-radius: 8px; width: min(460px, 100%);
         border-top: var(--rail) solid var(--primary); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.sheet header { padding: var(--s4) var(--s4) var(--s2); }
.sheet h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sheet .body { padding: 0 var(--s4) var(--s4); }
.sheet footer { display: flex; gap: var(--s2); justify-content: flex-end;
                padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }
.sheet .recap { background: var(--canvas); border-radius: var(--radius);
                padding: var(--s3); margin: var(--s3) 0; }
.sheet .steps { display: flex; gap: var(--s1); margin-bottom: var(--s3); }
.sheet .steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); font-style: normal; }
.sheet .steps i.on { background: var(--primary); }

@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail-nav { position: fixed; left: -240px; z-index: 60; width: 232px; transition: left .18s; }
  .rail-nav.open { left: 0; }
  .page { padding: var(--s4); }
  .g3, .g2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ==========================================================================
   Screens
   ========================================================================== */

/* ---------- sign in ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: var(--s4);
          background: var(--canvas); }
.signin__card { width: min(380px, 100%); background: var(--surface);
                border: 1px solid var(--line); border-radius: 10px;
                border-top: var(--rail) solid var(--primary); padding: var(--s6); }
.signin__card h1 { font-size: 19px; margin: 0 0 var(--s1); }
.signin__card p { margin: 0 0 var(--s6); color: var(--ink-3); font-size: 13px; }
.signin__card .field { margin-bottom: var(--s3); }
.signin__card .btn { width: 100%; justify-content: center; padding: 10px; margin-top: var(--s2); }
.signin__err { background: var(--danger-w); color: var(--danger); border-radius: var(--radius);
               padding: var(--s2) var(--s3); font-size: 13px; margin-bottom: var(--s3); }
.signin__foot { text-align: center; color: var(--ink-3); font-size: 11.5px; margin-top: var(--s4); }

/* ---------- dashboard ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.figure { background: var(--surface); border: 1px solid var(--line);
          border-left: var(--rail) solid var(--ink-3); border-radius: 0 var(--radius) var(--radius) 0;
          padding: var(--s3) var(--s4); }
.figure--in    { border-left-color: var(--good); }
.figure--out   { border-left-color: var(--danger); }
.figure--net   { border-left-color: var(--primary); }
.figure--bonus { border-left-color: var(--pending); }
.figure .k { font-size: 11.5px; color: var(--ink-3); }
.figure .v { font-family: var(--mono); font-variant-numeric: tabular-nums;
             font-size: 26px; font-weight: 600; line-height: 1.2; }
.figure .d { font-size: 11.5px; color: var(--ink-3); }

/* work waiting: the first thing on the page, because it is the only thing
   with a deadline */
.due { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.due a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
         background: var(--surface); border: 1px solid var(--line);
         border-left: var(--rail) solid var(--ink-3); border-radius: 0 var(--radius) var(--radius) 0; }
.due a:hover { border-color: var(--primary); }
.due a.has { border-left-color: var(--pending); }
.due .n2 { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.due .lbl { font-size: 13px; }
.due .sub { font-size: 11.5px; color: var(--ink-3); }
.due .go { margin-left: auto; color: var(--ink-3); }

.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 1200px) { .two { grid-template-columns: 1fr; } .figures { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .due { grid-template-columns: 1fr; } }

/* chart */
.chart { padding: var(--s3) var(--s2) 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; gap: var(--s4); font-size: 11.5px; color: var(--ink-2);
          padding: 0 var(--s4) var(--s3); }
.legend i { display: inline-block; width: 14px; border-top: 2px solid; vertical-align: middle;
            margin-right: 5px; }
.legend .dash { border-top-style: dashed; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff;
       border-radius: var(--radius); padding: 6px 9px; font-size: 11.5px; line-height: 1.5;
       white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 5; }

/* inbox: ticket replies + what's new */
.inbox { display: flex; flex-direction: column; }
.inbox__item { display: block; padding: var(--s3) var(--s4);
               border-bottom: 1px solid var(--line-soft);
               border-left: var(--rail) solid transparent; }
.inbox__item:last-child { border-bottom: 0; }
.inbox__item:hover { background: var(--raised); }
.inbox__item.unread { border-left-color: var(--primary); background: var(--primary-w); }
.inbox__top { display: flex; align-items: baseline; gap: var(--s2); }
.inbox__top b { font-size: 13.5px; font-weight: 600; }
.inbox__when { margin-left: auto; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.inbox__text { font-size: 12.5px; color: var(--ink-2); margin-top: 3px;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; }
.inbox__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* ---------- members split view ---------- */
.split { display: grid; grid-template-columns: 340px 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.results { max-height: calc(100vh - 190px); overflow-y: auto; }
.result { display: block; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft);
          border-left: var(--rail) solid transparent; cursor: pointer; }
.result:last-child { border-bottom: 0; }
.result:hover { background: var(--raised); }
.result.on { background: var(--primary-w); border-left-color: var(--primary); }
.result .u { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.result .n3 { font-size: 11.5px; color: var(--ink-3); }

.mhead { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
         padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
.mhead .id { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.mhead .nm { font-size: 13px; color: var(--ink-2); }
.mhead .acts { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-soft); }
.strip > div { padding: var(--s3) var(--s4); border-right: 1px solid var(--line-soft); }
.strip > div:last-child { border-right: 0; }
@media (max-width: 800px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.tabs button { border: 0; background: transparent; color: var(--ink-2); padding: 9px 14px;
               font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent;
               margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.pane { padding: var(--s4); }
.pane[hidden] { display: none; }