/* LinxPos Portal - in the LinxPos website's design (www_linxpos site.css): its
   fonts, its navy-ink ground and Industel navy, blue for actions and amber
   for emphasis, pill buttons and the hexagon mark. The working pages are on
   the website's light "paper" band so dense tables stay easy to read; dark
   when the device asks for it. Keep in step with the website when it changes. */
@import url("/fonts/fonts.css");

:root {
    --ink-950: #02050C; --ink-900: #050B1A; --ink-800: #081226; --ink-700: #0C1B3A;
    --navy: #052670; --navy-600: #0A3A9E; --blue: #1E5BD6; --blue-400: #5B93F5; --signal: #F5A524; --signal-700: #8A4B00;

    --bg: #F4F6FB; --surface: #FFFFFF; --ink: #0C1B3A; --muted: #4F5D7A; --line: #D9E0EE;
    --accent: var(--blue); --accent-ink: #FFFFFF; --accent-soft: #E7ECF7; --stripe: #F8FAFD;
    --ok: #1E8A5A; --warn: var(--signal-700); --danger: #B3372B; --bar: var(--ink-900); --bar-ink: rgba(226, 236, 255, .78);
    --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--ink-900); --surface: var(--ink-800); --ink: #EEF3FF; --muted: rgba(216, 227, 250, .68); --line: #1A2A4C;
        --accent: var(--blue-400); --accent-ink: var(--ink-950); --accent-soft: #10244F; --stripe: #0A162E;
        --ok: #4CC38A; --warn: var(--signal); --danger: #EF7A6D; --bar: var(--ink-950); color-scheme: dark;
    }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.ok { color: var(--ok); }
code, .mono { font-family: var(--mono); font-size: .9em; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.appbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; color: #fff; flex-wrap: wrap;
          background: radial-gradient(120% 220% at 0% 0%, rgba(10, 58, 158, .55), transparent 60%), var(--bar); }
.appbar .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
                 font: 700 19px/1 var(--display); letter-spacing: .015em; }
.appbar .brand svg { width: 34px; height: 34px; flex: none; }
.appbar .brand em { font: 600 11px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.appbar .site { font-size: 13px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(140,170,230,.22); padding: 4px 12px; border-radius: 999px; }
.appbar .site option { color: #000; }
.appbar .who { margin-left: auto; font-size: 13px; opacity: .85; }
.appbar .plain { color: #fff; }
.tabs { display: flex; gap: 2px; padding: 0 12px; background: var(--bar); overflow-x: auto; }
.tabs a { color: var(--bar-ink); text-decoration: none; font-weight: 600; padding: 10px 16px; border-radius: 8px 8px 0 0; white-space: nowrap; }
.tabs a.on { background: var(--bg); color: var(--ink); }
/* The sections: the website's nav - a link per section, amber under the one you are in */
.app > .tabs { padding: 0 14px; border-bottom: 1px solid rgba(140, 170, 230, .16); }
.app > .tabs a { position: relative; border-radius: 0; padding: 11px 14px 13px; font-size: 14.5px; transition: color .2s; }
.app > .tabs a:hover { color: #fff; }
.app > .tabs a.on { background: transparent; color: #fff; }
.app > .tabs a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--signal); }
.content { padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; width: 100%; }
.sub { display: flex; gap: 6px; flex-wrap: wrap; }
.sub a { font-weight: 600; font-size: 13.5px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 16px; padding: 5px 13px; text-decoration: none; }
.sub a.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* list on the left, the record on the right */
.md { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .md { grid-template-columns: 1fr; } }
.list { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; max-height: calc(100vh - 170px); overflow-y: auto; }
.list button.item { text-align: left; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 7px 10px; font: inherit; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.list button.item:hover { background: var(--bg); }
.list button.item.on { background: var(--accent-soft); border-color: var(--line); }
.list small { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.list .search { margin-bottom: 6px; }
.list .new { margin-top: 6px; }
.list .heading { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; }

.form { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.form > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { font: 600 11px var(--mono); padding: 3px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.group { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.group > h3 { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field small { font-size: 12px; }
input, select, textarea { font: 15px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { font-family: var(--mono); font-size: 13px; }
input[type=color] { padding: 2px; height: 34px; width: 56px; }
input[type=number] { max-width: 110px; }
.money { display: flex; align-items: center; gap: 4px; } .money input { max-width: 130px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row .t { display: flex; flex-direction: column; }
.row .t span { font-size: 13px; color: var(--muted); }
.switch { width: 42px; height: 24px; border-radius: 12px; background: var(--line); border: 0; position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { left: 21px; }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg button { font: 13px var(--body); padding: 5px 11px; color: var(--muted); background: var(--surface); border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips .t { background: var(--accent-soft); color: var(--accent); border-radius: 14px; padding: 3px 6px 3px 12px; display: inline-flex; align-items: center; gap: 4px; }
.chips .t button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; padding: 0 4px; }
.btn { font: 600 14px var(--body); border-radius: 999px; padding: 7px 17px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
       transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: linear-gradient(120deg, var(--blue) 0%, var(--navy-600) 100%); border-color: transparent; color: #fff; }
.btn.primary:hover:not(:disabled) { box-shadow: 0 10px 24px -10px rgba(30, 91, 214, .7); }
.btn.accent { background: var(--signal); border-color: transparent; color: var(--ink-950); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.plain { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 4px 6px; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 600px) { .groups { grid-template-columns: 1fr; } }
.savebar { position: sticky; bottom: 0; background: var(--surface); padding-bottom: 4px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; flex-wrap: wrap; }
.savebar .note { margin-right: auto; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }

.signin { max-width: 400px; margin: 40px auto; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }

/* menus tree */
.tree { display: flex; flex-direction: column; gap: 3px; }
.node { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.node.menu { background: var(--accent-soft); }
.node.on { outline: 2px solid var(--accent); }
.node.drop { border-style: dashed; border-color: var(--accent); }
.node .grip { color: var(--muted); cursor: grab; font-family: var(--mono); }
.node .kind { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.node .twist { width: 18px; text-align: center; color: var(--muted); border: 0; background: none; cursor: pointer; }

/* skin preview and zone editor */
.look { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .look { grid-template-columns: 1fr; } }
.canvas { position: relative; background: #0E1320; border-radius: 10px; overflow: hidden; width: 100%; }
.canvas .z { position: absolute; border: 2px solid; border-radius: 4px; font: 11px var(--body); padding: 2px 4px; overflow: hidden; cursor: move; }
.canvas .z.on { outline: 2px solid #fff; z-index: 2; }
.zones td, .zones th { padding: 3px 6px; font-size: 13px; text-align: left; }
.zones input { width: 70px; padding: 3px 5px; }
.swatch { display: flex; align-items: center; gap: 10px; }

/* keyboards and button bars */
.kbd { display: grid; gap: 4px; max-width: 100%; }
.kbd .key { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; overflow: hidden; min-height: 38px; padding: 2px; text-align: center; }
.kbd .key img { width: 100%; height: 100%; object-fit: fill; }
.kbd .key.on { outline: 2px solid var(--accent); background: var(--accent-soft); }
.kbd .empty { border: 1px dashed var(--line); border-radius: 6px; cursor: pointer; min-height: 38px; }
.bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 640px; }
.bar .slot { min-height: 54px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; font-size: 13px; padding: 4px; }
.bar .slot.used { background: #4169E1; color: #FFFDD0; font-weight: 700; }
.bar .slot.on { outline: 3px solid var(--warn); }
.bar .slot.dh { grid-row: span 2; }

/* settings list and history */
.setting { display: grid; grid-template-columns: 1fr minmax(160px, 320px); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.setting .name { font-weight: 600; }
.setting .help { color: var(--muted); font-size: 13.5px; }
.setting .code { font: 11px var(--mono); color: var(--muted); }
.setting .val { grid-row: 1 / 4; grid-column: 2; display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.setting .val input, .setting .val select { width: 100%; }
@media (max-width: 700px) { .setting { grid-template-columns: 1fr; } .setting .val { grid-row: auto; grid-column: 1; justify-content: flex-start; } }
table.history { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.history th, table.history td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; vertical-align: top; }
table.history td.diff { font-family: var(--mono); font-size: 12px; max-width: 560px; overflow-wrap: anywhere; }
.scroll { overflow-x: auto; }

/* item menus: the tree, the product finder, tiles as the till shows them */
.im-tree { max-height: 420px; overflow-y: auto; }
.im-found { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; }
.im-hit { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.im-hit.on { outline: 2px solid var(--accent); }
.im-hit img, .im-hit .im-nopic { width: 44px; height: 44px; object-fit: contain; flex: none; border-radius: 6px; background: #fff; }
.im-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.im-preview > div { cursor: pointer; }
.im-tile { width: 100%; max-width: 140px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px; border-radius: 10px; background: #fff; color: #14181F; border: 2px solid var(--line); font-weight: 700; font-size: 13px; text-align: center; }
.im-tile.folder { background: #E8EEFB; border-color: #3F6FD8; }
.im-tile img, .im-tile .im-nopic { width: 100%; height: 88px; object-fit: contain; }
.im-confirm { border: 1px solid var(--warn); border-radius: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.im-preview { overflow-x: auto; }
.im-grid { display: grid; gap: 8px; }
.im-cell { min-height: 150px; border-radius: 10px; display: flex; align-items: stretch; justify-content: stretch; }
.im-cell.empty { border: 2px dashed var(--line); }
.im-cell .im-drag { width: 100%; cursor: grab; }
.im-cell .im-drag .im-tile { max-width: none; height: 146px; }

/* Receipt logo preview: a strip of receipt paper, an 80 mm roll's width of text */
.rcpt-paper { width: min(100%, 44ch); background: #fff; color: #111; border: 1px solid var(--line); border-radius: 4px;
              padding: 14px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
              box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.rcpt-paper img { image-rendering: pixelated; display: block; }
.rcpt-paper pre { font: 12px var(--mono); margin: 0; align-self: stretch; padding: 0 1ch; overflow: hidden; }

/* ---- the portal's own ---- */
.content.narrow { max-width: 520px; margin: 0 auto; }
.appbar .who small { opacity: .7; margin-left: 4px; }
.appbar a.plain { color: #fff; text-decoration: none; font-size: 13px; }
form.inline { display: inline; margin: 0; }
.signin .row { justify-content: flex-start; }
.notice { border: 1px solid var(--warn); background: var(--bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.big { font-size: 20px; letter-spacing: .04em; user-select: all; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.danger { color: var(--danger); border-color: var(--danger); }
.search { min-width: 280px; }
table.rows { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.rows th, table.rows td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; vertical-align: top; }
table.rows th { font: 700 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
table.rows tr.click { cursor: pointer; }
table.rows tr.click:hover td { background: var(--bg); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.card .n { font-size: 26px; font-weight: 800; }
.card:hover { border-color: var(--accent); }
@media (max-width: 700px) { .search { min-width: 0; width: 100%; } table.rows { display: block; overflow-x: auto; } }
.form > .row { justify-content: flex-start; flex-wrap: wrap; }

/* ---- LinxPos Data (from src/datamaint), scoped to its pages ---- */
.dm h1, .dm h2 { margin: 0; font-weight: 700; }
.dm h1 { font-size: 22px; }
.dm h2 { font-size: 18px; }
.dm .mono { font-family: var(--mono); font-size: .9em; }
.dm .nowrap { white-space: nowrap; }
.dm .spacer { flex: 1; }
.dm .tabs a.end { margin-left: auto; }
.dm .content { padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.dm a:focus-visible, .dm button:focus-visible, .dm input:focus-visible, .dm select:focus-visible, .dm tr:focus-visible, .dm summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm input, .dm select { font: 15px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-width: 0; }
.dm input[readonly], .dm select:disabled { opacity: .7; }
.dm input.upper { text-transform: uppercase; }
.dm .btn { font: 600 14px var(--body); border-radius: 8px; padding: 7px 15px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.dm .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm .head h1 { display: flex; align-items: baseline; gap: 10px; }
.dm .head .count { font: 600 13px var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.dm .head .search { width: min(340px, 100%); background: var(--surface); }
.dm .intro { font-size: 14px; }
.dm .gridwrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: calc(100vh - 250px); }
.dm table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.dm table.grid th { position: sticky; top: 0; background: var(--surface); z-index: 1; text-align: left; border-bottom: 1px solid var(--line); padding: 0; }
.dm table.grid tr.filters th { top: 38px; padding: 4px 6px 6px; }
.dm table.grid tr.filters input, .dm table.grid tr.filters select { width: 100%; font-size: 13px; padding: 4px 7px; min-width: 70px; }
.dm table.grid th .sort { all: unset; box-sizing: border-box; display: flex; gap: 4px; width: 100%; padding: 9px 10px 7px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap; height: 38px; }
.dm table.grid th .sort:hover { color: var(--ink); }
.dm table.grid th .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dm table.grid th[aria-sort="ascending"] .sort, .dm table.grid th[aria-sort="descending"] .sort { color: var(--accent); }
.dm table.grid th.num .sort { justify-content: flex-end; }
.dm table.grid .arrow { font-size: 10px; width: 10px; }
.dm table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.dm table.grid tbody tr:nth-child(even) td { background: var(--stripe); }
.dm table.grid tbody tr { cursor: pointer; }
.dm table.grid tbody tr:hover td { background: var(--accent-soft); }
.dm table.grid tbody tr.on td { background: var(--accent-soft); box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--accent) 8%, transparent); }
.dm table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dm table.grid td.yes { color: var(--ok); font-weight: 700; text-align: center; }
.dm table.grid tr.none td { text-align: center; color: var(--muted); padding: 30px; cursor: default; background: var(--surface) !important; }
.dm table.grid.history td { white-space: normal; vertical-align: top; cursor: default; }
.dm table.grid.history tbody tr { cursor: default; }
.dm table.grid.history td.diff { font-size: 13px; max-width: 600px; }
.dm table.grid.history s { color: var(--muted); }
.dm .tag { font: 600 12px var(--body); padding: 1px 8px; border-radius: 9px; }
.dm .tag.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.dm .tag.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.dm .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dm .pager select { padding: 3px 6px; font-size: 13px; margin-left: 4px; }
.dm .backdrop { position: fixed; inset: 0; background: rgba(10, 14, 24, .35); z-index: 10; }
.dm .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); z-index: 11; box-shadow: -8px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.dm .drawer form { display: flex; flex-direction: column; height: 100%; }
.dm .drawer header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dm .drawer header .close { margin-left: auto; font-size: 18px; color: var(--muted); }
.dm .drawer .body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.dm .drawer footer { border-top: 1px solid var(--line); padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.dm .drawer footer .note { display: flex; flex-direction: column; font-size: 13.5px; color: var(--muted); gap: 2px; }
.dm .drawer footer .note:empty { display: none; }
.dm .drawer footer .buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dm .drawer .confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--warn); border-radius: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.dm .drawer .confirm span { margin-right: auto; font-weight: 600; }
.dm .grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; }
.dm details.group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 12px; }
.dm details.group summary { cursor: pointer; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.dm details.group[open] summary { margin-bottom: 8px; }
.dm .field label { font-weight: 600; }
.dm .field input.short { max-width: 140px; }
.dm .field.bad input, .dm .field.bad select { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.dm .field.bad label { color: var(--danger); }
.dm .money { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.dm .money input { max-width: 140px; }
.dm .boolfield { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.dm .boolfield label { color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.dm .boolfield small { grid-column: 1 / -1; }
.dm .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
@media (prefers-reduced-motion: reduce) {
    .dm .switch::after { transition: none; }
}
@media (max-width: 640px) {
    .dm .gridwrap { max-height: none; }
    .dm .head .search { width: 100%; }
}
.content:has(.dm) { max-width: none; }
/* a section's own tabs (Setup, Data) under the portal's */
.tabs.sub-tabs { background: transparent; border-bottom: 1px solid var(--line); padding: 0 2px; border-radius: 0; }
.tabs.sub-tabs a { color: var(--muted); padding: 8px 14px; }
.tabs.sub-tabs a.on { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-color: var(--surface); margin-bottom: -1px; }
h1:focus { outline: none; }
table.rows tr.on td { background: var(--accent-soft); }
/* the Logs page */
.filters:not(tr) { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.filters .field input, .filters .field select { min-width: 0; width: 150px; }
.filters .field.grow { flex: 1; min-width: 200px; }
.filters .field.grow input { width: 100%; }
.filters .actions { display: flex; gap: 8px; }
table.rows td.what { font-family: var(--mono); font-size: 12.5px; max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.small { font-size: 12.5px; font-weight: 400; }
.pager-row { justify-content: flex-start; }
.record dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; font-size: 14px; }
.record dl.facts dt { color: var(--muted); }
.record dl.facts dd { margin: 0; }
pre.json { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 12.5px/1.45 var(--mono); overflow-x: auto; max-height: 460px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-receipt { background: #fffdf6; color: #222; border-radius: 4px; padding: 18px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.15); width: fit-content; max-width: 100%; }
.staff-receipt pre { margin: 0; font: 12.5px/1.35 var(--mono); overflow-x: auto; }
.staff-receipt .id { margin-top: 10px; font-size: 10.5px; color: #777; }
@media (max-width: 700px) { .filters .field input, .filters .field select { width: 100%; } .filters .field { flex: 1 1 140px; } }
.filters .field.grow select { width: 100%; max-width: 520px; }
.card .n.warn { color: var(--warn); }
table.rows tr.gone td { opacity: .55; }
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--danger); }

/* ---- the Screens menu in the bar ---- */
.screens { position: relative; margin-left: auto; }
.screens + .who { margin-left: 0; }
.screens-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px var(--body); color: #fff; cursor: pointer;
               background: rgba(255,255,255,.06); border: 1px solid rgba(140,170,230,.3);
               padding: 6px 14px; border-radius: 999px; transition: background .2s; }
.screens-btn:hover { background: rgba(255,255,255,.12); }
.screens-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.screens-btn .caret { opacity: .7; font-size: 11px; }
.screens-backdrop { position: fixed; inset: 0; z-index: 40; }
.screens-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: min(420px, 92vw); max-height: 75vh; overflow-y: auto;
               background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 10px;
               box-shadow: 0 24px 60px rgba(10,20,40,.28); animation: screens-in .18s ease-out; }
@keyframes screens-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.screens-sec + .screens-sec { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.screens-sec h4 { margin: 6px 10px 4px; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.screens-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.screens-item:hover { background: var(--accent-soft); }
.screens-item b { display: block; font-size: 14px; }
.screens-item small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.screens-item .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.screens-item .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ic-receipt { background: linear-gradient(135deg, #3F6FD8, #7B5CFA); }
.ic-receipt2 { background: linear-gradient(135deg, #22C1C3, #3F6FD8); }
.ic-kitchen { background: linear-gradient(135deg, #F28B30, #E0473B); }
.ic-till { background: linear-gradient(135deg, #2FA36B, #22C1C3); }
.screens-item .dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.screens-item .dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.screens-none { margin: 4px 10px 8px; font-size: 13px; color: var(--muted); }

/* ---- the Receipts page ---- */
.receipt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.receipt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
                background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }
.receipt-card.voided, .receipt-card.refunded { background-image: linear-gradient(180deg, color-mix(in srgb, var(--warn) 10%, transparent), transparent 60%); }
.rc-top { display: flex; justify-content: space-between; align-items: center; }
.rc-type { font-weight: 700; }
.rc-total { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rc-meta { font-size: 13px; }
.rc-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rc-actions .btn { text-decoration: none; }

/* Item options (Setup > Selling) and an item's extras (Data > Items) */
.option-q .row h3 { margin: 0; }
.answers { width: 100%; }
.answers td:first-child input { width: 100%; }
.answers .money input { width: 80px; }
.option-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.linked-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.row.linked { justify-content: flex-start; }
.row.linked input { width: 170px; }
.small { font-size: 12.5px; }
.tips .tip-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tips .tip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; }
.tips .money input { width: 80px; }
/* The Tills page's install code: the field, then its buttons */
.install-code { justify-content: flex-start; align-items: flex-end; margin: 8px 0 18px; flex-wrap: wrap; }
.install-code .field { flex: 0 1 460px; }
.install-code input { font-family: var(--mono, monospace); letter-spacing: .06em; }

/* Logs: ticking records to export */
.select-row { justify-content: flex-start; gap: 12px; margin: 8px 0; }
table.logs td.tick, table.logs th.tick { width: 28px; text-align: center; }

/* Logs: a record's JSON, double-clicked */
.json-backdrop { position: fixed; inset: 0; background: rgba(10, 14, 24, .55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.json-dialog { background: var(--panel, #fff); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; padding: 18px 20px; outline: none; }
.json-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.json-head h2 { flex: 1; margin: 0; font-size: 20px; }
.json-head .small { display: block; font-weight: normal; margin-top: 4px; }
.json-dialog pre.json-pretty { flex: 1; overflow: auto; max-height: none; margin: 0; padding: 14px 16px; border: 0; border-radius: 8px; background: #1b2233; color: #dfe6f3; font-size: 13.5px; line-height: 1.5; white-space: pre; }
.json-dialog .jk { color: #8fc1ff; }
.json-dialog .js { color: #a8e6a1; }
.json-dialog .jn { color: #f5c06f; }
.json-dialog .jb { color: #f29bd1; }

/* Logs: a transaction's records share a pale colour (given out in turn down the page) */
table.logs tr.tx0 td { background: #eef5ff; }
table.logs tr.tx1 td { background: #effaf1; }
table.logs tr.tx2 td { background: #fff6e8; }
table.logs tr.tx3 td { background: #f6efff; }
table.logs tr.tx4 td { background: #eaf8f8; }
table.logs tr.tx5 td { background: #fff0f3; }
table.logs tr.click:hover td { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .04); }
table.logs tr.on td { background: var(--accent-soft); }
.record-head { display: flex; align-items: flex-start; gap: 12px; }
.record-head h2 { flex: 1; }
/* Logs: the record panel - folds to its title; open, a fixed height that scrolls inside */
.record .record-head { align-items: center; }
.record .record-head h2 { margin: 0; cursor: pointer; }
.record .fold { min-width: 36px; padding: 4px 8px; }
.record .record-body { height: 420px; overflow-y: auto; margin-top: 12px; padding-right: 4px; }
.record .record-body pre.json { max-height: none; }
.record.collapsed { padding-bottom: 14px; }

/* Operators: the ones a store does without */
.list .hidden-op { display: flex; align-items: center; justify-content: space-between; gap: 8px; opacity: .75; cursor: default; }
.pw-row { display: flex; align-items: center; gap: 8px; }
.pw-row input[maxlength] { flex: 1; min-width: 0; }
.pw-row .check { white-space: nowrap; }

/* ---- signing in: the website's dark ground (www_linxpos .hero) ---- */
.account { --bg: var(--ink-900); --surface: rgba(255, 255, 255, .035); --ink: #EEF3FF; --muted: rgba(216, 227, 250, .7);
           --line: rgba(150, 180, 240, .2); --accent: var(--blue-400); --danger: #FF8A7D; color-scheme: dark;
           position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink);
           background: radial-gradient(80% 60% at 85% 10%, rgba(30, 91, 214, .28), transparent 70%),
                       radial-gradient(60% 50% at 0% 100%, rgba(5, 38, 112, .5), transparent 70%), var(--ink-900); }
.account-lattice { position: absolute; inset: 0; z-index: -1; background-image: url("/img/hex-lattice.svg"); background-size: 68px 118px; opacity: .45;
                   mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 15%, transparent 75%);
                   -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 15%, transparent 75%); }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px); flex-wrap: wrap; }
.account-bar .brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: .015em; }
.account-bar .brand svg { width: 40px; height: 40px; }
.account-bar .brand em { font: 600 11px var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.account-site { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.account-site:hover { color: #fff; }
.account .content.narrow { flex: 1; width: 100%; max-width: 460px; padding: 4vh 16px 40px; }
.account .signin { margin: 0; gap: 16px; padding: 30px 28px; border-radius: 22px; border-color: var(--line);
                   background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
                   box-shadow: 0 2px 4px rgba(2, 6, 18, .3), 0 28px 60px -20px rgba(2, 6, 18, .65);
                   backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.account .signin h1 { font-size: 28px; }
.account .field { color: var(--muted); font-size: 13.5px; }
.account input { background: rgba(2, 5, 12, .55); border-color: var(--line); color: #fff; padding: 10px 12px; }
.account input:focus { border-color: var(--blue-400); }
.account .signin .btn { align-self: stretch; text-align: center; text-decoration: none; padding: 11px 18px; font-size: 15px; }
.account .signin .btn:not(.primary) { background: transparent; color: var(--ink); }
.account .quiet { align-self: center; color: var(--muted); font-size: 14px; }
.account .quiet:hover { color: #fff; }
.account-foot { text-align: center; padding: 18px 16px 24px; font-size: 12.5px; color: rgba(200, 214, 245, .5); }