/* Triniteq POS Lite — cloud portal
 *
 * The brand palette and shell from the Digital Style Guide (Apr 2026), the same
 * one TQ Platform and Orders & Billing are built on: orange primary, coral
 * accent, dark grey sidebar, Zircon page. Somebody who administers a venue in
 * one of those and then opens this should not have to work out that it is ours.
 *
 * Shared by /login, /portal and /enrol, so the sign-in page and the console
 * cannot drift apart.
 */

:root {
    /* Brand */
    --tq-orange: #FF751A;
    --tq-orange-hover: #FF5F07;
    --tq-orange-soft: rgba(255, 117, 26, .14);
    --tq-coral: #FE3838;
    --tq-green: #21AD7E;
    --tq-grey: #2B2B2B;

    /* Surfaces — Zircon page, white panels */
    --bg: #F6F9FF;
    --surface: #FFFFFF;
    --surface-2: #FBFCFE;
    --panel: #F1F4FB;

    /* Text */
    --ink: #2B2B2B;
    --ink-sub: #45464B;
    --muted: #6A6C74;

    /* Lines */
    --line: rgba(43, 43, 43, .10);
    --line-strong: rgba(43, 43, 43, .18);

    /* Status */
    --ok: #197a58;
    --ok-bg: #D8EBE4;
    --warn: #8a5100;
    --warn-bg: #FAE4D3;
    --bad: #C4262E;
    --bad-bg: #F6D8D9;

    /* Shape — the brand leans fully rounded */
    --radius-sm: 8px;
    --radius: 11px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow: 0 4px 16px rgba(16, 24, 40, .08), 0 1px 4px rgba(16, 24, 40, .04);

    /* Sidebar */
    --sidebar-w: 232px;
    --sidebar-bg: #2B2B2B;
    --sidebar-line: rgba(255, 255, 255, .08);
    --sidebar-link: rgba(255, 255, 255, .80);
    --sidebar-icon: rgba(255, 255, 255, .58);
    --sidebar-section: rgba(255, 255, 255, .42);
    --sidebar-active-bg: rgba(255, 117, 26, .16);
    --sidebar-active-line: rgba(255, 117, 26, .38);
    --sidebar-active-text: #FF9349;
    --sidebar-hover-bg: rgba(255, 255, 255, .06);

    --topbar-h: 54px;

    --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Dark mode restates the surfaces only. The brand orange, the status colours
   and the sidebar are already dark-surface colours and carry over unchanged. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161A;
        --surface: #1B1E24;
        --surface-2: #1F232A;
        --panel: #22262E;

        --ink: #E8EAED;
        --ink-sub: #C3C7CE;
        --muted: #949AA4;

        --line: rgba(255, 255, 255, .10);
        --line-strong: rgba(255, 255, 255, .18);

        --ok: #6EE7A0;
        --ok-bg: rgba(33, 173, 126, .16);
        --warn: #F4C15C;
        --warn-bg: rgba(255, 117, 26, .16);
        --bad: #FF9A92;
        --bad-bg: rgba(254, 56, 56, .16);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--tq-orange); }

code {
    font-family: var(--mono);
    font-size: 12.5px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    padding: 1px 5px;
    border-radius: 4px;
}

.mono { font-family: var(--mono); font-size: 12.5px; }
.hidden { display: none !important; }

/* ── App shell ───────────────────────────────────────────────────────────── */

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-line);
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; overflow: hidden;
}

.sidebar .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px; height: var(--topbar-h);
    border-bottom: 1px solid var(--sidebar-line);
    flex-shrink: 0;
}

/* mix-blend-mode: screen knocks the black PNG background out on the dark
   sidebar, the same way TQ Platform's brand mark is handled. */
.sidebar .brand-logo {
    width: 30px; height: 30px; flex-shrink: 0;
    background-image: url('/img/triniteq-icon.png');
    background-size: contain; background-position: center; background-repeat: no-repeat;
    mix-blend-mode: screen;
}

.sidebar .brand-text { min-width: 0; }
.sidebar .brand-title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.sidebar .brand-subtitle { font-size: 11px; color: rgba(255, 255, 255, .50); margin-top: 1px; }

.side-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }

.side-section {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sidebar-section); padding: 14px 8px 6px;
}

/* justify-content is restated because the shared button rule centres its
   content, which is right for a toolbar button and wrong for a nav row: it
   left "Accounts" floating in the middle of the sidebar while the rows with a
   count badge sat left, because the badge's auto margin happened to push them
   there. */
.side-nav button {
    display: flex; align-items: center; justify-content: flex-start; gap: 9px;
    width: 100%; text-align: left;
    padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--sidebar-link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}

.side-nav button > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.side-nav button:hover { background: var(--sidebar-hover-bg); color: rgba(255, 255, 255, .95); }

.side-nav button.active {
    background: var(--sidebar-active-bg);
    border-color: var(--sidebar-active-line);
    color: var(--sidebar-active-text);
    font-weight: 650;
}

.side-nav .count {
    margin-left: auto; padding-left: 8px; flex-shrink: 0;
    font-size: 11px; color: var(--sidebar-icon); font-family: var(--mono);
}

.side-nav button.active .count { color: var(--sidebar-active-text); }

.sidebar-foot { border-top: 1px solid var(--sidebar-line); padding: 12px 14px; flex-shrink: 0; }
.sidebar-foot .who { color: #fff; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sidebar-foot .role { color: rgba(255, 255, 255, .45); font-size: 11px; margin-bottom: 8px; }

.topbar {
    height: var(--topbar-h); display: flex; align-items: center; gap: 12px;
    padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}

.topbar h1 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.topbar .crumb { color: var(--muted); font-size: 13px; }
.spacer { margin-left: auto; }

main { padding: 20px; max-width: 1500px; }

/* ── Panels ──────────────────────────────────────────────────────────────── */

/* align-items: start, because a grid row is as tall as its tallest card and
   without this every short card is padded out to match it. The Menu panel had
   99px of content in a 583px box, and the whole screen wore that three times
   over. */
.grid {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/* Two wide panels rather than three narrow ones, for a pair of cards that
   carry GUIDs. At 330px a 36-character identifier is squeezed into about
   230px of field. */
.grid.pair { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }

/* For the one panel that has no business in a column. */
.grid > section.wide { grid-column: 1 / -1; }

section {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px;
}

section h2 {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); margin: 0 0 12px; font-weight: 700;
}

/* A heading inside a panel: quieter than the panel's own, loud enough to say
   which half of it you are reading. */
section h3 {
    font-size: 12px; margin: 0 0 10px; font-weight: 700; color: var(--ink-sub);
}

.head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.head h2 { margin: 0; }

dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
dt { color: var(--muted); white-space: nowrap; }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
dd.wrap { text-align: left; font-size: 12px; line-height: 1.45; }

.empty { padding: 22px; text-align: center; color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ── Explanations ────────────────────────────────────────────────────────────
   The outlet screen carried 533 words of prose, permanently, in among the
   fields — read once on the first visit and skimmed past on every visit after.
   Kept, because it is what makes the screen usable the first time, but folded
   away: one sentence stays, the rest is a click. Warnings are never put in
   here. Those are state, not documentation, and belong in front of somebody.
*/
.explain { margin-top: 6px; }
.explain > summary {
    cursor: pointer; color: var(--tq-orange); font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.explain > summary::-webkit-details-marker { display: none; }
.explain > summary::before { content: "?"; font-weight: 700;
    display: inline-grid; place-items: center; width: 14px; height: 14px;
    border-radius: 50%; font-size: 10px;
    background: var(--tq-orange-soft); color: var(--tq-orange); }
.explain[open] > summary { margin-bottom: 6px; }
.explain > summary:hover { text-decoration: underline; }
/* Indented under its own summary, so an open one reads as an aside rather than
   as the panel resuming. */
.explain > :not(summary) { padding-left: 19px; }
.explain.overrides { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs button {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--muted); padding: 8px 14px; margin-bottom: -1px;
}
.tabs button:hover:not(.active) { background: transparent; color: var(--ink-sub); }
.tabs button.active { color: var(--tq-orange); border-bottom-color: var(--tq-orange); }

/* How many things are still outstanding behind a tab nobody is looking at.
   Hiding setup is only safe if it says when it still wants something. */
.tab-count {
    background: var(--warn-bg); color: var(--warn); border-radius: 999px;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
}

/* ── Controls ────────────────────────────────────────────────────────────── */

button, .btn {
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 6px 13px; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-sub);
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    text-decoration: none; transition: background .12s, border-color .12s, color .12s;
}

button:hover:not(:disabled), .btn:hover { background: var(--panel); border-color: var(--tq-orange); color: var(--tq-orange); }
button:disabled { opacity: .5; cursor: default; }

button.primary, .btn.primary { background: var(--tq-orange); border-color: var(--tq-orange); color: #fff; }
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--tq-orange-hover); border-color: var(--tq-orange-hover); color: #fff; }

button.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }

button.link {
    border: 0; background: transparent; color: var(--muted); padding: 4px 6px;
}
button.link:hover { background: transparent; color: var(--tq-orange); }

input, select {
    font: inherit; font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}

input:focus, select:focus {
    outline: none; border-color: var(--tq-orange);
    box-shadow: 0 0 0 3px var(--tq-orange-soft);
}

input[type=number] { width: 92px; }

.field { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 9px; }
.field label { color: var(--muted); font-size: 13px; }
.field input[type=text], .field input:not([type]), .field input[type=number],
.field input[type=email], .field input[type=password], .field select { width: 100%; }
.field input[type=checkbox] { justify-self: start; width: auto; accent-color: var(--tq-orange); }

/* An outlet under the customer it belongs to. */
.side-nav button.nested { padding-left: 26px; font-size: 13px; }
.side-nav button.nested span:first-child { opacity: .88; }

/* A table cell that opens something. Reads as a link, behaves as a button —
   which is what it is, since there is no URL to give it. */
button.linky {
  background: none; border: 0; padding: 0; font: inherit; color: var(--tq-orange);
  cursor: pointer; text-align: left;
}
button.linky:hover { text-decoration: underline; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
    text-align: left; font-weight: 650; color: var(--muted);
    padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .04em;
}

td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.gone td { color: var(--muted); }
td.num { font-family: var(--mono); font-weight: 700; font-size: 14px; }

tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--surface-2); }

/* ── Pills, notes, credentials ───────────────────────────────────────────── */

.pill {
    display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: 650; white-space: nowrap;
}

.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.accent { background: var(--tq-orange-soft); color: var(--tq-orange); }

.notes { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.notes li { border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 500; }
.notes li.ok { background: var(--ok-bg); color: var(--ok); }
.notes li.warn { background: var(--warn-bg); color: var(--warn); }
.notes li.bad { background: var(--bad-bg); color: var(--bad); }

/* Shown once and never again — only a hash is kept. Deliberately loud. */
.once {
    background: var(--warn-bg); color: var(--warn); border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}

.once .value {
    font-family: var(--mono); font-size: 13.5px; display: block; margin-top: 7px;
    overflow-wrap: anywhere; user-select: all; font-weight: 700;
}