/* =====================================================================
   selffms - interface
   Built for a workshop floor: bright, dense where it needs to be,
   thumb-friendly on a phone, and quick on a slow connection.
   ===================================================================== */

:root {
    /* ---- surface ---- */
    --bg:        #f4f6f9;
    --panel:     #ffffff;
    --panel-2:   #fafbfd;
    --line:      #e4e8ee;
    --line-2:    #eef1f5;

    /* ---- ink ---- */
    --ink:       #171b21;
    --ink-2:     #3d4652;
    --muted:     #6b7787;

    /* ---- accent ---- */
    --accent:    #2f6bed;
    --accent-2:  #1f57d0;
    --accent-bg: #eef3fe;

    /* ---- state ---- */
    --ok-bg:   #e7f6ec;  --ok-ink:   #17753a;
    --bad-bg:  #fdecec;  --bad-ink:  #c02626;
    --warn-bg: #fff5e6;  --warn-ink: #9a5b13;
    --self-bg: #eaf1fe;  --self-ink: #1c4ba8;
    --dir-bg:  #fdf1e3;  --dir-ink:  #96530d;
    --adm-bg:  #eee9fc;  --adm-ink:  #4a32ab;

    /* ---- shape ---- */
    --r-sm: 6px;
    --r:    9px;
    --r-lg: 13px;
    --shadow:    0 1px 2px rgba(19, 26, 38, .05), 0 1px 3px rgba(19, 26, 38, .04);
    --shadow-md: 0 3px 6px rgba(19, 26, 38, .07), 0 8px 22px rgba(19, 26, 38, .07);
    --ring: 0 0 0 3px rgba(47, 107, 237, .22);

    /* ---- motion ---- */
    --fast: 120ms cubic-bezier(.2, .7, .3, 1);
    --med:  190ms cubic-bezier(.2, .7, .3, 1);

    --tap: 42px;              /* minimum touch target */
}

* { box-sizing: border-box; }

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

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

.mono, .mono * {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .92em;
    letter-spacing: -.1px;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; }

h2 {
    font-size: 15px;
    color: var(--ink-2);
    margin: 26px 0 11px;
    display: flex;
    align-items: baseline;
    gap: 9px;
}
h2:first-of-type { margin-top: 4px; }
h3 { font-size: 14.5px; margin-bottom: 12px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-bg); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-sm);
}

/* =====================================================================
   Top bar
   ===================================================================== */

.bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    height: 56px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
}
.bar > strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--ink);
    flex: 0 0 auto;
}

.bar nav {
    display: flex;
    gap: 2px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
}
.bar nav::-webkit-scrollbar { display: none; }

.bar nav a {
    position: relative;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--fast), background var(--fast);
}
.bar nav a:hover { color: var(--ink); background: var(--line-2); text-decoration: none; }
.bar nav a.on { color: var(--accent); background: var(--accent-bg); }
.bar nav a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--med);
}
.bar nav a.on::after { transform: scaleX(1); }

.bar .who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-left: auto;
    flex: 0 0 auto;
}
.bar .who strong { font-size: 13px; font-weight: 600; }
.bar .who a { color: var(--muted); }
.bar .who a:hover { color: var(--ink); }

.badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 17px;
    text-align: center;
    vertical-align: 1px;
}
.bar nav a.on .badge { background: var(--accent-2); }

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

/* =====================================================================
   Text bits
   ===================================================================== */

.muted { color: var(--muted); }
main > p.muted { font-size: 13.5px; margin: 0 0 14px; }

.err, .ok-box {
    padding: 10px 14px;
    border-radius: var(--r);
    font-size: 13.5px;
    margin: 0 0 14px;
    animation: drop var(--med) both;
}
.err    { color: var(--bad-ink); background: var(--bad-bg); border: 1px solid #f6d5d5; }
.ok-box { color: var(--ok-ink);  background: var(--ok-bg);  border: 1px solid #cfe9d8; }

@keyframes drop {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: .01em;
    white-space: nowrap;
}
.pill.ok     { background: var(--ok-bg);   color: var(--ok-ink); }
.pill.bad    { background: var(--bad-bg);  color: var(--bad-ink); }
.pill.admin  { background: var(--adm-bg);  color: var(--adm-ink); }
.pill.self   { background: var(--self-bg); color: var(--self-ink); }
.pill.direct { background: var(--dir-bg);  color: var(--dir-ink); }
.pill.cash   { background: var(--warn-bg); color: var(--warn-ink); }

.req { color: var(--bad-ink); }

/* =====================================================================
   Buttons
   ===================================================================== */

button, .btnlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 17px;
    min-height: 38px;
    border-radius: var(--r-sm);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--fast), border-color var(--fast),
                transform var(--fast), box-shadow var(--fast), color var(--fast);
}
button:hover { background: var(--accent-2); border-color: var(--accent-2); }
button:active { transform: translateY(1px); box-shadow: none; }

.btnlink {
    background: var(--panel);
    border-color: var(--line);
    color: var(--ink-2);
}
.btnlink:hover {
    background: var(--panel-2);
    border-color: #d3dae4;
    color: var(--ink);
    text-decoration: none;
}
.btnlink:active { transform: translateY(1px); }

button.small, .btnlink.small {
    padding: 6px 12px;
    min-height: 32px;
    font-size: 12.5px;
}

button.danger { background: var(--bad-ink); border-color: var(--bad-ink); }
button.danger:hover { background: #a71f1f; border-color: #a71f1f; }

button:disabled, button:disabled:hover {
    background: #eaeef3;
    border-color: #eaeef3;
    color: #a3adba;
    cursor: not-allowed;
    transform: none;
}

/* =====================================================================
   Inputs
   ===================================================================== */

input[type=text], input[type=password], input[type=search],
input[type=date], input[type=number], select, textarea {
    padding: 8px 11px;
    min-height: 38px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color var(--fast), box-shadow var(--fast);
    max-width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: #d3dae4; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: #9aa5b3; }
textarea { line-height: 1.5; resize: vertical; }

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7787' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

input[type=checkbox], input[type=radio] {
    width: 17px; height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}

/* =====================================================================
   Filter bar
   ===================================================================== */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 13px 14px;
    margin-bottom: 14px;
}
.filters label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}
.filters input, .filters select { font-size: 13.5px; min-height: 36px; }
.filters input.wide { min-width: 210px; }
.filters .quick { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chipgap { flex: 0 0 12px; }

.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--fast);
}
.chip:hover {
    background: var(--panel-2);
    border-color: #d3dae4;
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-1px);
}
.chip.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 550;
}
.chip.on:hover { background: var(--accent-2); transform: none; }

.livefilter {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 0 10px;
    padding-left: 32px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%236b7787' stroke-width='1.5'/%3E%3Cpath d='M9.3 9.3L12.5 12.5' stroke='%236b7787' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
}

/* ---- searchable select (built by ui.js from select[data-search]) ---- */
.combo { position: relative; }
.combo > input { width: 100%; padding-right: 28px; }
.combo.open > input { border-color: var(--accent); box-shadow: var(--ring); }
.combo .comboarrow {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none; color: var(--muted);
    transition: transform var(--fast);
}
.combo.open .comboarrow { transform: translateY(-50%) rotate(180deg); }
.combolist {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: 5px;
    animation: pop var(--fast) both;
}
@keyframes pop {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
.combolist div {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fast);
}
.combolist div:hover, .combolist div.hi { background: var(--accent-bg); color: var(--accent-2); }
.combolist div.none { color: var(--muted); cursor: default; }
.combolist div.none:hover { background: none; color: var(--muted); }

/* =====================================================================
   Tables
   ===================================================================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
th, td {
    padding: 10px 13px;
    text-align: left;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}

/* Text wraps by default so long customer names stay readable instead of
   stretching the table. Short, scannable values - codes, dates, numbers,
   pills - keep to one line. */
td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}
th,
td.mono, td.num, td.nowrap, td.tick, td.actions { white-space: nowrap; }
td .pill { white-space: nowrap; }

/* The wordiest columns get a proper measure. Without a generous minimum
   the browser squeezes them to nothing and the text runs a dozen lines
   deep, because every other column refuses to wrap. */
td.customer {
    min-width: 210px;
    max-width: 330px;
}
td.remarks, td.feedextra, td.cashcell, td.tabcell {
    min-width: 230px;
    max-width: 380px;
}
th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--muted);
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
tbody tr { transition: background var(--fast); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.picked { background: var(--accent-bg); }
tbody tr.picked:hover { background: #e4ecfd; }

td.num, th.num { text-align: right; }
td.num.hot { color: var(--bad-ink); font-weight: 650; }
td.nowrap { white-space: nowrap; }
tr.totalrow td { background: var(--panel-2); border-top: 2px solid var(--line); }

th.tick, td.tick { width: 40px; text-align: center; padding-right: 0; }
td.tick input, th.tick input { width: 18px; height: 18px; }

td.remarks, td.feedextra, td.cashcell, td.tabcell {
    font-size: 13px;
    line-height: 1.45;
}
td.feedextra { color: var(--muted); }
td.actions { white-space: nowrap; }
td .sub { font-size: 12px; margin-top: 2px; }
td .sub.note {
    display: inline-block;
    color: var(--ink-2);
    background: var(--line-2);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    margin-top: 3px;
}

/* wide tables scroll sideways instead of pushing the page out */
.tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r);
    margin-bottom: 2px;
}
.tablewrap > table { margin: 0; }
.filtercount { font-size: 12.5px; margin-left: 8px; }

/* =====================================================================
   Panels, forms, toolbars
   ===================================================================== */

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 17px;
}
.panel.narrow { max-width: 430px; }

.fields { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 15px; align-items: flex-start; }
.fields.col { flex-direction: column; gap: 13px; }
.fields label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}
.fields label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fields input, .fields select { min-width: 190px; }
.fields label.grow { flex: 1 1 340px; }
.fields label.grow textarea { width: 100%; }

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 13px 11px;
    margin: 0;
}
legend {
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 5px;
}
label.radio {
    display: inline-flex;
    flex-direction: row;      /* .fields label sets column - undo it here */
    flex: 0 0 auto;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    margin-right: 14px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    cursor: pointer;
}

.markform h3 { color: var(--ink); }
.markform { margin-bottom: 14px; }
.editpanel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.editpanel h3 { color: var(--accent-2); }

.toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px 13px;
    margin-bottom: 11px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.toolbar .muted { margin-right: auto; font-size: 12.5px; font-weight: 500; }

form.inline { display: inline-block; margin: 0 4px 0 0; }
form.inline select, form.inline input {
    padding: 4px 9px;
    min-height: 30px;
    font-size: 12.5px;
}
form.inline input.small { width: 128px; }

.tabpick { display: flex; flex-wrap: wrap; gap: 7px 15px; align-items: center; margin: 0 0 14px; }

/* =====================================================================
   View tabs
   ===================================================================== */

.viewtabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.viewtabs a {
    padding: 9px 17px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--fast);
}
.viewtabs a:hover {
    color: var(--ink);
    background: var(--panel-2);
    border-color: #d3dae4;
    text-decoration: none;
    transform: translateY(-1px);
}
.viewtabs a.on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 550;
    box-shadow: var(--shadow);
}
.viewtabs a.on:hover { transform: none; background: var(--ink); }

/* =====================================================================
   Cards, dashboard
   ===================================================================== */

.cards { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 18px; }
.card2 {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 13px 19px;
    min-width: 122px;
    transition: all var(--med);
}
.card2.warn { border-color: #f2d6b3; background: #fffdf9; }
a.card2.tile { text-decoration: none; color: inherit; display: block; }
a.card2.tile:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.cardnum { font-size: 25px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.cardlabel { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; }

.dashsplit { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.dashsplit > div { flex: 1 1 430px; min-width: 0; }

table.bars { border: 0; background: none; box-shadow: none; }
table.bars td { border: 0; padding: 3px 9px 3px 0; background: none; }
table.bars tbody tr:hover { background: none; }
.barday { width: 86px; font-size: 12.5px; }
.barday.istoday { font-weight: 650; color: var(--accent); }
.barcell { width: 100%; }
/* the little bar in the dashboard chart - NOT .bar, which is the top
   navigation. Two rules sharing that name turned the menu into a 16px
   blue block with the links spilling over the page. */
.chartbar {
    display: block;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), #5b8bf5);
    min-width: 3px;
    animation: grow var(--med) both;
}
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }

/* =====================================================================
   Journey
   ===================================================================== */

table.journey td { white-space: normal; vertical-align: top; }
table.journey td.petihead { min-width: 190px; max-width: 240px; }

.stage {
    border-left: 3px solid var(--line);
    padding: 2px 0 2px 10px;
    font-size: 12.5px;
    line-height: 1.5;
    min-width: 170px;
    max-width: 260px;
}
.stage.done { border-left-color: var(--ok-ink); }
.stage.todo { border-left-color: var(--line); opacity: .6; }
.stage.na   { border-left-color: #dfe3e9; opacity: .55; }
.stagename {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2px;
}
.stagehead { font-size: 13.5px; }

/* =====================================================================
   Sign in
   ===================================================================== */

/* the sign-in page centres its card in the window. Deliberately NOT
   called .center: that name belongs to the centred table columns. */
.centerpage { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 30px;
    width: 100%;
    max-width: 350px;
    animation: rise var(--med) both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
.card h1 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.02em; }
.card > p { margin: 0 0 17px; font-size: 13px; }
.card label {
    display: block;
    text-align: left;
    font-size: 11.5px;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--muted);
    margin: 0 0 5px;
}
.card input { width: 100%; margin-bottom: 11px; min-height: 42px; }
.card button { width: 100%; min-height: 42px; font-size: 14.5px; }

/* =====================================================================
   Phones and small tablets
   ===================================================================== */

@media (max-width: 860px) {
    body { font-size: 15px; }
    main { padding: 13px; }

    .bar {
        height: auto;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 9px 13px;
        position: static;
    }
    .bar > strong { font-size: 15px; }
    .bar .who { margin-left: auto; font-size: 12.5px; gap: 8px; }
    .bar nav {
        order: 3;
        width: 100%;
        gap: 5px;
        padding-bottom: 2px;
        margin: 0 -13px;
        padding-left: 13px;
        padding-right: 13px;
    }
    .bar nav a {
        padding: 9px 13px;
        border: 1px solid var(--line);
        font-size: 13.5px;
        min-height: var(--tap);
        display: flex;
        align-items: center;
    }
    .bar nav a.on { border-color: var(--accent); }
    .bar nav a::after { display: none; }

    /* ---- one card per row ---- */
    table, thead, tbody, tr, td { display: block; width: 100%; }
    table {
        border: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
    thead { display: none; }
    tbody tr {
        position: relative;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--shadow);
        padding: 11px 13px;
        margin-bottom: 9px;
    }
    tbody tr:hover { background: var(--panel); }
    tbody tr.picked {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent-bg);
        background: var(--panel);
    }
    tbody tr td,
    tbody tr td.mono, tbody tr td.num, tbody tr td.nowrap, tbody tr td.actions {
        border: 0;
        padding: 4px 0;
        white-space: normal;
        overflow-wrap: break-word;
        display: flex;
        align-items: baseline;
        gap: 11px;
        min-height: 0;
    }
    /* a value with a second line under it - "edited ... by ..." - is a
       flex item beside the value, not after it, unless the cell wraps */
    tbody tr td { flex-wrap: wrap; }
    tbody tr td .sub {
        flex: 1 1 100%;
        margin-left: calc(34% + 11px);
        margin-top: 1px;
    }
    tbody tr td.tick .sub { margin-left: 0; }

    tbody tr td::before {
        content: attr(data-label);
        flex: 0 0 34%;
        max-width: 34%;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
    }
    tbody tr td:empty { display: none; }
    tbody tr td.num, tbody tr td.num.hot { text-align: left; }

    /* the tick box becomes a big corner target */
    tbody tr td.tick {
        position: absolute;
        top: 6px; right: 6px;
        width: var(--tap); height: var(--tap);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    tbody tr td.tick::before { display: none; }
    tbody tr td.tick input { width: 22px; height: 22px; }
    tbody tr td:first-child + td { padding-right: var(--tap); }

    tr.totalrow td { background: none; border-top: 0; }
    td.remarks, td.feedextra, td.cashcell, td.tabcell, td.customer {
        max-width: none; min-width: 0;
    }
    .stage { max-width: none; min-width: 0; }

    /* ---- filters stack ---- */
    .filters { padding: 11px; gap: 9px; }
    .filters label { flex: 1 1 100%; }
    .filters input, .filters select, .filters .combo { width: 100%; min-height: var(--tap); }
    .filters input.wide { min-width: 0; }
    .filters > button, .filters > .btnlink { flex: 1 1 44%; min-height: var(--tap); }
    .chip { padding: 8px 14px; font-size: 13px; min-height: 36px; }

    /* ---- forms stack, targets grow ---- */
    .fields { gap: 11px; }
    .fields label, .fields label.grow { flex: 1 1 100%; }
    .fields label.radio { flex: 0 0 auto; }
    .fields input, .fields select, .fields textarea { width: 100%; min-width: 0; min-height: var(--tap); }
    fieldset { flex: 1 1 100%; }
    label.radio { min-height: var(--tap); margin-right: 18px; font-size: 15px; }
    label.radio input { width: 21px; height: 21px; }
    .panel { padding: 13px; }
    .panel button { width: 100%; min-height: var(--tap); font-size: 15px; }
    .panel .btnlink { width: 100%; min-height: var(--tap); margin-top: 8px; }

    /* ---- the action bar follows you down the page ---- */
    .toolbar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin: 0 -13px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -3px 14px rgba(19, 26, 38, .1);
        padding: 9px 13px calc(9px + env(safe-area-inset-bottom));
    }
    .toolbar .muted { flex: 1 1 100%; margin: 0 0 2px; order: -1; }
    .toolbar button { flex: 1 1 0; min-height: var(--tap); font-size: 14px; }

    .viewtabs { gap: 6px; }
    .viewtabs a { flex: 1 1 0; text-align: center; padding: 11px 8px; min-height: var(--tap); }

    .cards { gap: 9px; }
    .card2 { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 14px; }
    .cardnum { font-size: 22px; }

    .dashsplit { gap: 6px; }
    .livefilter { max-width: none; min-height: var(--tap); }
    h2 { margin: 20px 0 9px; }
}

@media (max-width: 420px) {
    .bar > strong { font-size: 14.5px; }
    /* cards stay two across even on a small phone - one per row turned
       the dashboard into a very long scroll */
    .card2 { flex: 1 1 calc(50% - 5px); padding: 11px 12px; }
    .cardnum { font-size: 20px; }
    tbody tr td::before { flex-basis: 40%; max-width: 40%; }
}

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

/* ---- printing ---- */
@media print {
    .bar, .filters, .toolbar, .viewtabs, .livefilter, .btnlink, button { display: none !important; }
    body { background: #fff; }
    table { box-shadow: none; }
}

/* ---- clickable cards ---- */
.cardhint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    opacity: .85;
}
a.card2.tile { position: relative; }
a.card2.tile::after {
    content: "›";
    position: absolute;
    top: 9px; right: 12px;
    color: var(--muted);
    font-size: 15px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity var(--fast), transform var(--fast);
}
a.card2.tile:hover::after { opacity: 1; transform: none; }
a.card2.tile:hover .cardnum { color: var(--accent); }

/* the whole bar row is a target, not just the coloured part */
.barhit { display: block; padding: 3px 0; }
.barhit:hover .chartbar { filter: brightness(1.12); }
.barday a { color: inherit; }
.barday a:hover { color: var(--accent); }

/* ---- category colours, so CREDIT and CASH read at a glance ---- */
.pill.cat-credit  { background: #e8eefc; color: #24479c; }
.pill.cat-cash    { background: #e6f6ec; color: #17703a; }
.pill.cat-advance { background: #f1e9fb; color: #5b32a3; }
.pill.cat-cc      { background: #e4f4f6; color: #10606c; }
.pill.cat-other   { background: #fdf0e3; color: #96530d; }

/* ---- centred columns ---- */
th.center, td.center { text-align: center; }
td.center .sub { text-align: center; }

/* ---- peti no and customer carry the row ---- */
td.strong { font-weight: 600; color: var(--ink); }
td.customer.strong { font-size: 14px; }

/* ---- date over time in one column ---- */
td.whenpair { line-height: 1.35; }
td.whenpair .sub { margin-top: 0; }

@media (max-width: 860px) {
    th.center, td.center { text-align: left; }
    td.center .sub { text-align: left; }
}

/* ---- category colours, so CREDIT and CASH read at a glance ---- */
.pill.cat-credit  { background: #e8eefc; color: #24479c; }
.pill.cat-cash    { background: #e6f6ec; color: #17703a; }
.pill.cat-advance { background: #f1e9fb; color: #5b32a3; }
.pill.cat-cc      { background: #e4f4f6; color: #10606c; }
.pill.cat-other   { background: #fdf0e3; color: #96530d; }

/* ---- centred columns ---- */
th.center, td.center { text-align: center; }
td.center .sub { text-align: center; }

/* ---- peti no and customer carry the row ---- */
td.strong { font-weight: 600; color: var(--ink); }
td.customer.strong { font-size: 14px; }

/* ---- date on top, time underneath ---- */
td.whenpair { line-height: 1.35; }
td.whenpair .sub { margin-top: 0; }

/* ---- yes above, no below ---- */
fieldset.stack { min-width: 132px; }
fieldset.stack label.radio { display: flex; margin: 0; padding: 5px 0; }

@media (max-width: 860px) {
    th.center, td.center { text-align: left; }
    td.center .sub { text-align: left; }
}

/* ---- headings that moved inside their boxes ---- */
.filters label.inlined, .fields label.inlined { gap: 0; }
.filters label.inlined > :not(input):not(select):not(textarea):not(.combo),
.fields  label.inlined > :not(input):not(select):not(textarea):not(.combo) {
    display: none;
}
.filters label.inlined .muted, .fields label.inlined .muted { display: none; }

/* a field whose caption stays put, e.g. the invoice box with its hint */
.fields label.keeplabel .muted {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11.5px;
}
input.bigfield {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    min-height: 44px;
    min-width: 220px;
}
input.bigfield::placeholder { font-size: 14px; font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------------
   WhatsApp page
   One event per small panel: the tick that turns it on, and the wording
   of the message right underneath it.
   --------------------------------------------------------------------- */
.panel.waevent {
    padding: 12px 14px;
    margin: 0 0 10px;
    background: var(--panel-2, #fbfcfd);
}
.panel.waevent label.radio { margin: 0 0 8px; }
textarea.watpl {
    width: 100%;
    font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

/* ---------------------------------------------------------------------
   Row actions
   Edit sits next to Undo at the end of every marked row, so one peti can
   be put back without ticking anything first.
   --------------------------------------------------------------------- */
td.actions > * + * { margin-left: 6px; }

@media (max-width: 860px) {
    /* the actions column has no heading, so it should not reserve room
       for one on a card */
    tbody tr td.actions { flex-wrap: wrap; gap: 8px; }
    tbody tr td.actions::before { display: none; }
    td.actions > * + * { margin-left: 0; }
    td.actions > button, td.actions > .btnlink { flex: 1 1 auto; min-height: var(--tap); }
}

/* ---------------------------------------------------------------------
   Thumbs, not cursors
   Below the tablet breakpoint every control a finger has to find is at
   least one tap target tall, and the row tick box is tapped by its whole
   cell rather than by the 22px square inside it (see ui.js).
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    /* every button, whatever it calls itself */
    button, .btnlink, button.small, .btnlink.small,
    input.small, select.small {
        min-height: var(--tap);
    }

    /* the little inline forms on the People page set their own height,
       and do it more specifically than a bare input selector can undo */
    form.inline { display: block; margin: 0 0 6px; }
    form.inline select, form.inline input, form.inline button {
        min-height: var(--tap);
        font-size: 16px;
    }
    form.inline input.small { width: 100%; }
    input[type="text"], input[type="search"], input[type="tel"],
    input[type="date"], input[type="password"], select, textarea {
        min-height: var(--tap);
        font-size: 16px;         /* anything smaller and iOS zooms the page */
    }
    textarea { min-height: calc(var(--tap) * 1.6); }

    tbody tr td.tick { cursor: pointer; }
    tbody tr td.tick input { width: 24px; height: 24px; }

    /* the nav scrolls sideways; say so, instead of hiding it at the edge */
    header.bar { position: relative; }
    header.bar::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 26px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--panel, #fff));
    }
}

/* ---------------------------------------------------------------------
   The folding filter bar
   Peti no and Invoice no are what a counter marks by, so on a phone they
   stay out in the open and everything else waits behind one button. The
   markup is identical either way; ui.js does the folding, so with no
   JavaScript at all the bar simply stays as it was.
   --------------------------------------------------------------------- */
.filtertoggle { display: none; }

@media (max-width: 860px) {
    form.filters { gap: 8px; align-items: stretch; }

    .filtertoggle { display: block; }
    .filtertoggle.on {
        background: var(--accent-bg);
        border-color: var(--accent);
        color: var(--accent);
    }

    .morefilters {
        display: none;
        flex: 1 1 100%;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        padding: 11px;
        margin-top: 2px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--panel);
    }
    .morefilters.open { display: flex; }
    .morefilters > label,
    .morefilters > .quick { flex: 1 1 100%; }

    /* one row of boxes, one row of buttons, and the folded ones below */
    form.filters > label.pri { order: 1; flex: 1 1 46%; min-width: 128px; }
    form.filters > button,
    form.filters > .btnlink  { order: 2; flex: 1 1 28%; }
    form.filters > .morefilters { order: 3; }
}

/* ---------------------------------------------------------------------
   Phone: data first, form second
   A counter is read before it is filled in. On a phone the table comes
   straight after the toolbar and the marking form waits underneath it,
   so the first thing on screen is the work, not the paperwork.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    form#rowform { display: flex; flex-direction: column; }
    form#rowform > .toolbar        { order: 1; }
    form#rowform > table           { order: 2; }
    form#rowform > .panel.markform { order: 3; margin-top: 12px; }

}

/* ---------------------------------------------------------------------
   The boxes at the end of a row
   Dispatch gets A / M / O, bilty gets a single tick. A big letter for
   the thumb and the name underneath it, so nobody has to be told what
   the letters stand for. Phones only: on a desktop the tick-and-mark
   form is quicker than reaching for a row.
   --------------------------------------------------------------------- */
th.rowpick, td.rowpick { display: none; }

.pickrow { display: flex; gap: 7px; width: 100%; }

.pickbox {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 52px;
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: background .13s ease, border-color .13s ease, transform .09s ease;
}
.pickbox b { font-size: 19px; font-weight: 650; line-height: 1; letter-spacing: -.01em; }
.pickbox span { font-size: 11px; color: var(--muted); line-height: 1.2; }
.pickbox:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    text-decoration: none;
}
.pickbox:hover b, .pickbox:hover span { color: var(--accent); }
.pickbox:active { transform: translateY(1px); }
.pickbox.wide b { font-size: 17px; }

@media (max-width: 860px) {
    th.rowpick { display: none; }
    td.rowpick { display: block; }
    tbody tr td.rowpick {
        padding: 9px 0 2px;
        margin-top: 5px;
        border-top: 1px solid var(--line-2);
    }
    tbody tr td.rowpick::before { display: none; }

    /* bilty types the note first, so its form and the button that opens
       it sit above the table - folded, so the data still leads */
    form#rowform > .markfoldtoggle { order: 0; align-self: flex-start; margin: 0 0 8px; }
    form#rowform > .panel.markform.first { order: 0; margin: 0 0 10px; }
    .markfoldtoggle.on {
        background: var(--accent-bg);
        border-color: var(--accent);
        color: var(--accent);
    }
    .alsobulk { margin-top: 8px; }
}

/* ---------------------------------------------------------------------
   The WhatsApp on/off switch
   A tick box is easy to miss on a setting that can message the whole
   shop, so this one reads as a switch and says which way it is set.
   --------------------------------------------------------------------- */
.switchrow { margin: 0 0 16px; }

.switch {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 4px 0;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch .slider {
    flex: 0 0 auto;
    position: relative;
    width: 50px;
    height: 28px;
    border-radius: 999px;
    background: var(--line);
    border: 1px solid var(--line);
    transition: background .16s ease, border-color .16s ease;
}
.switch .slider::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: transform .16s ease;
}
.switch input:checked + .slider {
    background: var(--ok-ink, #1f7a44);
    border-color: var(--ok-ink, #1f7a44);
}
.switch input:checked + .slider::after { transform: translateX(22px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }

.switchtext { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.switchtext strong { font-size: 15px; }