/* ---------- theme variables ---------- */
:root {
  color-scheme: light;
  --bg: #f4f4f5; --card: #fff; --ink: #111111; --muted: #6b6b73;
  --line: #e4e4e8; --hover: #fafafb; --chip: #ececef; --chip-hover: #dcdce1;
  --field: #fff; --field-line: #c9c9d1;
  --side: #fff; --brand-soft: #fdeceb;
  --brand: #ea3323;          /* Ultimate Repairs red */
  --accent: #cf2a1b;         /* buttons (white text on it passes contrast) */
  --accent-hover: #b32315;
  --link: #cf2a1b;
  --accent-ink: #fff;
  --ok: #1a7f4b; --err: #b3261e;
  --ok-bg: #d9f3e4; --err-bg: #f6dede;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f12; --card: #17181c; --ink: #f2f2f4; --muted: #9a9aa6;
  --line: #2a2b32; --hover: #1d1e23; --chip: #23242a; --chip-hover: #30313a;
  --field: #0f1013; --field-line: #3a3b44;
  --side: #121316; --brand-soft: rgba(234,51,35,.16);
  --link: #ff6b5e;
  --ok: #6ee7a1; --err: #ff8f86;
  --ok-bg: #11291d; --err-bg: #34161a;
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--ink); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.muted { color: var(--muted); }

/* ---------- logo (light / dark variants) ---------- */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* ---------- app shell: sidebar + top bar ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 248px; flex: 0 0 248px;
           background: var(--side); border-right: 1px solid var(--line);
           display: flex; flex-direction: column; padding: 1.1rem .8rem; }
.side-logo { display: block; padding: .3rem .6rem 1.3rem; }
.side-logo img { display: block; width: 150px; height: auto; }
.side-nav { display: flex; flex-direction: column; gap: .3rem; }
.side-link { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .85rem;
             border-radius: 12px; color: var(--muted); font: inherit; font-weight: 600;
             background: none; border: 0; cursor: pointer; text-align: left; }
.side-link:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-link.active { background: var(--brand-soft); color: var(--link); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem;
             border-top: 1px solid var(--line); padding-top: .9rem; }
.user { display: flex; align-items: center; gap: .75rem; padding: .2rem .5rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff;
          display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-meta small { color: var(--muted); }
.content { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between;
          padding: .75rem 2rem; border-bottom: 1px solid var(--line); background: var(--side); }
.shop-badge { display: flex; align-items: center; gap: .75rem; font-weight: 600; font-size: 1.05rem; }
.shop-badge img { border-radius: 9px; display: block; }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
button.link:hover { color: var(--link); }
.logo-lg { display: block; margin: 0 auto 1rem; width: min(320px, 80%); height: auto; }

.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
                border: 1px solid var(--line); background: var(--chip); color: var(--ink); cursor: pointer; padding: 0; }
.theme-toggle:hover { background: var(--chip-hover); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-float { position: fixed; top: 14px; right: 14px; z-index: 5; }

/* ---------- layout ---------- */
main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
main.app-main { max-width: none; margin: 0; padding: 1.75rem 2rem 3rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
        padding: 1.25rem; margin-bottom: 1.25rem; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; margin: .9rem 0 .3rem; }
input, select, textarea { width: 100%; padding: .6rem .7rem; font: inherit; color: inherit;
  border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea { min-height: 110px; resize: vertical; }
.btn, button.btn { display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 8px; padding: .65rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn.secondary { background: var(--chip); color: var(--ink); }
.btn.secondary:hover { background: var(--chip-hover); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1; min-width: 150px; }
.row .shrink { flex: 0 0 auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); opacity: .75; white-space: nowrap; }
thead th { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
td { padding: .85rem .6rem; }
tr:hover td { background: var(--hover); }

/* ---------- status badges ---------- */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem;
         font-weight: 600; background: var(--chip); color: var(--ink); white-space: nowrap; }
.s-received { background: #e0ebff; color: #1646b8; }
.s-waiting-for-call { background: #fdf0cf; color: #8a5a00; }
.s-waiting-for-parts { background: #fde4d6; color: #a2410d; }
.s-in-repair { background: #ede4fb; color: #5a2bb0; }
.s-ready-for-collection { background: #d9f3e4; color: #1a7f4b; }
.s-collected { background: #eceff3; color: #5b6578; }
.s-cancelled { background: #f6dede; color: #b3261e; }
:root[data-theme="dark"] .s-received { background: #1b2c57; color: #8fb1ff; }
:root[data-theme="dark"] .s-waiting-for-call { background: #3a2c0a; color: #f5c45a; }
:root[data-theme="dark"] .s-waiting-for-parts { background: #3b2013; color: #ffa878; }
:root[data-theme="dark"] .s-in-repair { background: #2c1d4d; color: #c7a6ff; }
:root[data-theme="dark"] .s-ready-for-collection { background: #11291d; color: #6ee7a1; }
:root[data-theme="dark"] .s-collected { background: #25262c; color: #a4a8b5; }
:root[data-theme="dark"] .s-cancelled { background: #34161a; color: #ff8f86; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chips a { padding: .3rem .8rem; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: .9rem; }
.chips a.on { background: var(--ink); color: var(--bg); text-decoration: none; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--err-bg); color: var(--err); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.timeline small { color: var(--muted); display: block; }
dl.facts { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; white-space: pre-wrap; }
.login-box { max-width: 380px; margin: 12vh auto; }

/* ---------- repairs home ---------- */
.page-head { display: flex; justify-content: space-between; align-items: center;
             gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; font-size: 1.9rem; }
.big-btn { display: inline-flex; align-items: center; gap: .75rem; background: var(--accent);
           color: #fff; font-weight: 700; font-size: 1.1rem; padding: .7rem 1.5rem .7rem .8rem;
           border-radius: 16px; box-shadow: 0 10px 24px rgba(207,42,27,.28);
           transition: transform .12s, box-shadow .12s, background .12s; }
.big-btn:hover { background: var(--accent-hover); transform: translateY(-1px); text-decoration: none; color: #fff;
                 box-shadow: 0 14px 28px rgba(207,42,27,.34); }
.big-btn .plus { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
                 background: rgba(255,255,255,.22); font-size: 1.6rem; line-height: 1; font-weight: 400; }

.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
         margin-bottom: 1.25rem; }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, 1fr); gap: .8rem; } }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .1rem;
        padding: .95rem 1rem .85rem; border-radius: 14px; color: #fff; min-height: 98px;
        transition: transform .12s, box-shadow .12s; }
.tile:hover { transform: translateY(-2px); text-decoration: none; color: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.2); }
.tile::after { content: ""; position: absolute; right: -28px; top: -32px; width: 100px; height: 100px;
               border-radius: 50%; background: rgba(255,255,255,.13); }
.tile.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.tile-icon { position: absolute; right: .8rem; top: .8rem; z-index: 1; display: grid; place-items: center;
             width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.2); }
.tile-num { font-size: 2rem; font-weight: 800; line-height: 1.1; z-index: 1; margin-top: .15rem; }
.tile-label { font-size: .92rem; opacity: .95; z-index: 1; margin-top: auto; }
.t-total     { background: linear-gradient(135deg, #2b2b30, #0c0c0e); }
.t-received  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.t-call{ background: linear-gradient(135deg, #e0a30b, #b45309); }
.t-waiting   { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.t-repair    { background: linear-gradient(135deg, #fb923c, #ea580c); }
.t-ready     { background: linear-gradient(135deg, #14b8a6, #0f766e); }
:root[data-theme="dark"] .t-total { background: linear-gradient(135deg, #3a3b44, #1f2026); }

/* ---------- tablet kiosk (always light) ---------- */
body.kiosk { background: var(--bg); min-height: 100vh; border-top: 8px solid var(--brand); }
.kiosk-wrap { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kiosk-wrap h1 { font-size: 2rem; text-align: center; margin-bottom: .25rem; }
.kiosk-wrap .sub { color: var(--muted); text-align: center; margin-bottom: 1.5rem; font-size: 1.1rem; }
.kiosk-card { background: #fff; border-radius: 18px; padding: 1.5rem;
              border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.kiosk-card label { font-size: 1.1rem; }
.kiosk-card input, .kiosk-card select, .kiosk-card textarea { font-size: 1.15rem; padding: .85rem .9rem; }
.kiosk-card .btn { width: 100%; font-size: 1.3rem; padding: 1rem; margin-top: 1.25rem; }
.consent { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.1rem; font-weight: 400; }
.consent input { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; margin-top: .1rem; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.done { text-align: center; padding-top: 8vh; }
.done .ref { font-size: 3.2rem; font-weight: 800; letter-spacing: .05em; background: var(--ink); color: #fff;
             display: inline-block; padding: .4rem 1.5rem; border-radius: 14px; margin: 1rem 0;
             border-bottom: 6px solid var(--brand); }
.shop-info { text-align: center; color: var(--muted); font-size: .95rem; margin-top: 1.5rem; }

/* ---------- repair card: tabs, parts table, modal ---------- */
[hidden] { display: none !important; }
.small { font-size: .85rem; }
.status-form { margin-top: .5rem; }
.tabs-card { padding-top: .4rem; }
.tabs { display: flex; gap: 1.6rem; border-bottom: 2px solid var(--line); margin-bottom: 1.1rem; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; cursor: pointer;
       font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--muted); padding: .85rem .2rem;
       margin-bottom: -2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--link); border-bottom-color: var(--brand); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; margin-bottom: .9rem; }
.panel-head h2 { margin: 0; font-size: 1.25rem; }
.big-btn.small { font-size: 1rem; padding: .5rem 1.2rem .5rem .6rem; border-radius: 12px; border: 0; cursor: pointer; font-family: inherit; }
.big-btn.small .plus { width: 1.8rem; height: 1.8rem; font-size: 1.3rem; }
.table-wrap { border: 1px solid var(--line); border-radius: 12px; padding: .4rem .8rem; overflow-x: auto; }
table.parts th, table.parts td { padding: .8rem .6rem; }
.num { text-align: right; white-space: nowrap; }
.dash { color: var(--brand); }
.neg { color: var(--err); }
.pos { color: var(--ok); }
table.parts tfoot td { background: var(--hover); border-bottom: 0; border-top: 2px solid var(--line); }
table.parts tfoot tr:hover td { background: var(--hover); }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
            border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; padding: 0; vertical-align: middle; }
.icon-btn:hover { background: var(--chip); color: var(--ink); }
.icon-btn.danger:hover { background: var(--err-bg); color: var(--err); }
.cost-line { margin: .75rem .25rem 0; }
.empty { padding: 1.2rem .25rem; }
.req { color: var(--brand); }
.btn.ghost { background: none; border: 1px solid var(--field-line); color: var(--ink); display: inline-flex;
             align-items: center; gap: .55rem; }
.btn.ghost:hover { background: var(--chip); }
.part-form-panel { border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.4rem 1.3rem;
                   margin-bottom: 1.1rem; background: var(--hover); }
.pf-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.8rem; align-items: start; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; gap: .5rem; } }
.part-form-panel h3 { font-size: 1.15rem; margin: 0 0 .2rem; }
.part-form-panel small { display: block; margin-top: .25rem; }
.part-form-panel label:first-of-type { margin-top: .6rem; }
.pf-side h3 { margin-bottom: .6rem; }
.part-form-panel input, .part-form-panel select { background: var(--field); }
dialog.modal { width: min(900px, 94vw); max-height: 92vh; overflow-y: auto; padding: 1.6rem 1.8rem;
               border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink);
               box-shadow: 0 30px 80px rgba(0,0,0,.45); }
dialog.modal::backdrop { background: rgba(0,0,0,.6); }
dialog.modal h2 { font-size: 1.8rem; margin-bottom: .6rem; }
dialog.modal .pf-grid { grid-template-columns: 1fr; gap: 0; }
dialog.modal .row.half > div { max-width: calc(50% - .4rem); }
@media (max-width: 700px) { dialog.modal .row.half > div { max-width: none; } dialog.modal { padding: 1.2rem; } }
dialog.modal h3 { font-size: 1.05rem; margin: 1.3rem 0 .6rem; }
dialog.modal small { display: block; margin-top: .25rem; }
table.breakdown { border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.breakdown th, table.breakdown td { padding: .6rem .9rem; }
table.breakdown tr:hover td { background: none; }
table.breakdown tr.strong td { font-weight: 700; border-bottom: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.4rem; }

/* ---------- small screens: sidebar becomes a top strip ---------- */
@media (max-width: 900px) {
  .app { display: block; }
  .sidebar { position: static; height: auto; width: auto; flex-direction: row; flex-wrap: wrap;
             align-items: center; gap: .5rem 1rem; padding: .7rem 1rem; border-right: 0;
             border-bottom: 3px solid var(--brand); }
  .side-logo { padding: 0; } .side-logo img { width: 110px; }
  .side-nav { flex-direction: row; }
  .side-link { width: auto; padding: .5rem .7rem; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; border: 0; padding: 0; }
  .user-meta { display: none; }
  .topbar { padding: .6rem 1rem; }
  main.app-main { padding: 1.25rem 1rem 2.5rem; }
}

/* ---------- print: always light ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --card: #fff; --ink: #111; --muted: #555; --line: #ddd; --link: #111;
  }
  .logo-dark, :root[data-theme="dark"] .logo-dark { display: none !important; }
  :root[data-theme="dark"] .logo-light { display: block !important; }
  .sidebar, .topbar, .noprint, .theme-float { display: none !important; }
  body { background: #fff; }
  .card { border: 0; }
}

.job-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.job-head h1 { margin:0; }
.job-head-actions { display:flex; align-items:center; gap:.6rem; }
.job-head-actions select { width:auto; min-width:200px; margin:0; }
@media (max-width:700px){ .job-head-actions { width:100%; } .job-head-actions select { flex:1; min-width:0; } }

dialog.modal.narrow { width: min(520px, 94vw); }
dialog.modal.narrow textarea { width: 100%; }
.job-head-actions .big-btn .plus { font-weight: 700; }
.pay-badge { padding: .25rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--chip); color: var(--muted); }
.pay-badge.p-paid { background: rgba(34,197,94,.16); color: #16a34a; }
.pay-badge.p-part-paid { background: rgba(245,158,11,.16); color: #d97706; }
.pay-badge.p-unpaid { background: rgba(239,68,68,.14); color: #dc2626; }
:root[data-theme="dark"] .pay-badge.p-paid { color: #4ade80; }
:root[data-theme="dark"] .pay-badge.p-part-paid { color: #fbbf24; }
:root[data-theme="dark"] .pay-badge.p-unpaid { color: #f87171; }
.link-btn { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; padding: .3rem .5rem; border-radius: 8px; }
.link-btn:hover { color: var(--ink); background: var(--chip); }
.pay-box { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.pay-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; }
.pay-summary .link-btn { margin-left: auto; }
.pay-table { margin-top: .6rem; width: 100%; }
.pay-table td { padding: .45rem .4rem; }
.info-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.info-list li { display: flex; align-items: center; gap: 1rem; }
.info-list small { color: var(--muted); display: block; }
.info-val { font-size: 1.1rem; min-height: 1.4rem; overflow-wrap: anywhere; }
.info-val a { color: inherit; text-decoration: none; }
.info-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.i-user { background: rgba(244,63,94,.16); color: #fb7185; }
.i-phone { background: rgba(217,70,239,.16); color: #e879f9; }
.i-mail { background: rgba(249,115,22,.16); color: #fb923c; }
.i-pin { background: rgba(56,189,248,.16); color: #38bdf8; }
.i-note { background: rgba(244,63,94,.16); color: #fb7185; }
@media print { .pay-box .link-btn, .job-head-actions { display: none; } }

.job-head-actions .big-btn { display:none; }
.pay-btn { display:inline-flex; align-items:center; gap:.6rem; background:#2a7a55; color:#fff; border:0; border-radius:12px; padding:.7rem 1.3rem; font:inherit; font-weight:600; cursor:pointer; }
.pay-btn:hover { background:#23684a; }
.kebab { position:relative; }
.kebab-btn { background:none; border:0; color:var(--muted); width:38px; height:42px; border-radius:10px; cursor:pointer; display:grid; place-items:center; }
.kebab-btn:hover { background:var(--chip); color:var(--ink); }
.kebab-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:190px; background:var(--card, var(--bg)); border:1px solid var(--line); border-radius:12px; padding:.35rem; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:20; display:flex; flex-direction:column; }
.kebab-menu[hidden] { display:none; }
.kebab-menu a, .kebab-menu button { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:0; background:none; color:var(--ink); font:inherit; text-align:left; text-decoration:none; border-radius:8px; cursor:pointer; }
.kebab-menu a:hover, .kebab-menu button:hover { background:var(--chip); }
.rc-top { background:var(--hover); border:1px solid var(--line); border-radius:14px; padding:1rem; display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:flex-end; margin:.4rem 0 1.2rem; }
.rc-number { background:#3b82f6; color:#fff; border-radius:12px; padding:.6rem 1.1rem; display:flex; align-items:center; gap:.8rem; }
.rc-number small { display:block; opacity:.85; }
.rc-number strong { font-size:1.2rem; }
.rc-selects { display:flex; gap:1rem; flex:1; min-width:280px; }
.rc-selects > div { flex:1; }
.rc-selects select { width:100%; margin:0; }
.prio-select.pr-high { color:#f59e0b; } .prio-select.pr-urgent { color:#ef4444; font-weight:600; }
.info-list.two-col { grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem; }
.info-list.two-col li.wide { grid-column:1 / -1; }
.info-val .muted { font-size:.85rem; }
.info-val.mono { font-family:ui-monospace,Menlo,monospace; }
.i-cal { background:rgba(34,197,94,.16); color:#4ade80; }
.i-grey { background:rgba(148,163,184,.18); color:#94a3b8; }
.i-warn { background:rgba(249,115,22,.16); color:#fb923c; }
@media (max-width:700px){ .info-list.two-col { grid-template-columns:1fr; } .rc-selects { flex-direction:column; } }

.rc-selects { min-width:0; }
.rc-top { align-items:stretch; }

tr.row-link { cursor: pointer; }

.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1rem; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.stat-big { font-size: 1.8rem; font-weight: 700; margin-top: .25rem; }
.stat-sub { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
table.stats td.num, table.stats th.num { text-align: right; white-space: nowrap; }
table.stats tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
table.stats tbody tr:hover td { background: none; }
.card h2 { font-size: 1.1rem; margin-bottom: .7rem; }
@media (max-width: 800px) { .card:has(table.stats) { overflow-x: auto; } }

.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.chart-head h2 { margin: 0; }
.seg { display: inline-flex; background: var(--chip); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); font-weight: 600; }
.hbars[hidden] { display: none; }
.hbar { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: .8rem; padding: .35rem 0; }
.hbar-name { font-weight: 500; }
.hbar-track { background: var(--chip); border-radius: 6px; height: 16px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: #d92d20; border-radius: 6px; min-width: 4px; }
.hbar-val { text-align: right; font-weight: 600; white-space: nowrap; }
.legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--muted); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; }
.sw-rev, .vcol.rev { background: #8b8d98; }
.sw-prof, .vcol.prof { background: #d92d20; }
.vcol.cnt { background: #d92d20; }
.vbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; align-items: end; height: 230px; margin-bottom: 1rem; }
.vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vbar-val { font-size: .72rem; color: var(--muted); min-height: 1rem; white-space: nowrap; }
.vbar-cols { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.vcol { display: block; width: 40%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; }
.vcol.cnt { width: 60%; max-width: 30px; }
.vbar-lbl { font-size: .75rem; text-align: center; margin-top: .35rem; color: var(--muted); line-height: 1.15; }
@media (max-width: 700px) { .hbar { grid-template-columns: 90px 1fr 70px; } .vbar-val { display: none; } }

.kiosk-card label { display: block; }
.device-block { border: 1px solid var(--line); border-radius: 14px; padding: .25rem 1rem 1rem; margin-top: 1.1rem; background: #fafafb; }
.device-head { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; }
.device-title { font-size: 1.05rem; }
.device-remove { background: none; border: 0; color: #d92d20; font: inherit; font-size: 1rem; cursor: pointer; padding: .3rem .5rem; }
.device-remove[hidden], .add-device[hidden] { display: none; }
.kiosk-card .btn.add-device { margin-top: 1rem; font-size: 1.15rem; padding: .85rem; }
.device-block .row { align-items: flex-start; }

.kebab-menu button.danger { color: #d92d20; }
.btn.danger-btn { background: #d92d20; color: #fff; }
.btn.danger-btn:hover { background: #b42318; }
.btn.ghost.danger-ghost { color: #d92d20; border-color: rgba(217,45,32,.5); }
.btn.ghost.danger-ghost:hover { background: rgba(217,45,32,.12); }
.cust-actions { display: flex; align-items: center; gap: .75rem; }

.print-btn { display:inline-flex; align-items:center; gap:.5rem; background: var(--chip); color: var(--ink); border:0; border-radius:12px; padding:.7rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; }
.print-btn:hover { background: var(--chip-hover); }
.print-menu .kebab-menu { min-width: 270px; right: auto; left: 0; }
.print-menu .kebab-menu a { flex-direction: column; align-items: flex-start; gap: .1rem; }
.print-menu .kebab-menu a small { color: var(--muted); font-size: .8rem; }

.panel-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.panel-actions form { margin: 0; }
.btn.ghost.quick-fee { padding: .7rem 1.1rem; border-radius: 12px; font-weight: 600; }

.avatar.sm { width: 34px; height: 34px; font-size: .9rem; flex: none; }
.note-form textarea { width: 100%; }
.note-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.note { display: flex; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--hover); }
.note-body { flex: 1; min-width: 0; }
.note-meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .9rem; }
.note-meta form { margin: 0 0 0 auto; }
.note-del { background: none; border: 0; color: var(--muted); cursor: pointer; padding: .25rem; border-radius: 6px; display: grid; place-items: center; }
.note-del:hover { color: #d92d20; background: var(--chip); }
.note-text { margin-top: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tab-count { background: var(--chip); color: var(--ink); border-radius: 999px; font-size: .75rem; padding: .05rem .5rem; margin-left: .3rem; }

.parcel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 1rem; }
.parcel-grid > div:nth-child(n+3) { grid-column: span 1; }
@media (max-width: 700px) { .parcel-grid { grid-template-columns: 1fr; } }
.parcel-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.parcel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--hover); }
.parcel-num { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.05rem; }
.parcel-sub { font-size: .88rem; margin-top: .2rem; }
.parcel-actions { display: flex; align-items: center; gap: .5rem; }
.parcel-actions form { margin: 0; }
.chip-sm { background: var(--chip); color: var(--ink); border-radius: 999px; font-size: .75rem; padding: .1rem .6rem; font-weight: 600; }

.done .meme { display: block; margin: 18px auto 6px; max-width: min(420px, 80vw); max-height: 32vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }

.diag-deduct { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--line, #c9ced6); border-radius: 10px; font-weight: 400; cursor: pointer; }
.diag-deduct input { width: auto; margin-top: 3px; }
.diag-deduct[hidden] { display: none; }

.diag-paid-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.diag-paid-form select { width: auto; padding: 8px 10px; }
.i-lock { background: rgba(234,179,8,.16); color: #facc15; }

.note-attach { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; flex-wrap: wrap; }
.attach-btn { cursor: pointer; margin: 0; }
.upload-progress { position: relative; height: 22px; border-radius: 11px; background: var(--hover); border: 1px solid var(--line); overflow: hidden; margin-top: .6rem; }
.upload-progress span { display: block; height: 100%; width: 0; background: var(--brand, #d93a2b); transition: width .15s; }
.upload-progress small { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.note-files { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.nfile { margin: 0; width: 150px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card, #fff); }
.nfile img, .nfile video { display: block; width: 100%; height: 112px; object-fit: cover; background: #000; }
.nfile video { height: 112px; }
.nfile:has(video) { width: 220px; } .nfile:has(video) video { height: 124px; }
.nfile-doc { display: flex; flex-direction: column; justify-content: center; height: 112px; padding: .6rem; font-size: .85rem; word-break: break-all; }
.nfile-doc small { color: var(--muted, #888); margin-top: .3rem; }
.nfile figcaption { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .25rem .5rem; font-size: .75rem; color: var(--muted, #888); }
.nfile figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfile figcaption form { margin: 0; }
.nfile-del { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.nfile-del:hover { color: #e5484d; }