/* SmartMarket back office + General Admin dashboard */
:root {
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e2e8f0; --line-2: #cbd5e1; --bg: #f1f5f9; --card: #fff;
  --nav: #0f1b2d; --nav-2: #1b2a41; --nav-fg: #cbd5e1; --accent: #2563eb; --accent-bg: #eff6ff;
  --ok: #15803d; --ok-bg: #dcfce7; --warn: #b45309; --warn-bg: #fef3c7; --bad: #b91c1c; --bad-bg: #fee2e2; --info-bg: #e0f2fe; --info: #0369a1;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 14px; color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 22px; margin: 0; } h2 { font-size: 16px; margin: 0 0 12px; } h3 { font-size: 14px; margin: 16px 0 8px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .r, .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, monospace; }
kbd { font: 600 11px Consolas, monospace; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; background: #f8fafc; }

/* Layout */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100%; }
.side { background: var(--nav); color: var(--nav-fg); display: flex; flex-direction: column; overflow-y: auto; }
.side .brand { display: flex; gap: 10px; align-items: center; padding: 16px; color: #fff; font-weight: 700; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.side .brand small { display: block; font-weight: 400; color: #8da2c0; font-size: 11px; }
.nav-group { padding: 10px 16px 4px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #6b7f9e; font-weight: 700; }
.side a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--nav-fg); font-weight: 500; border-left: 3px solid transparent; }
.side a.nav:hover { background: var(--nav-2); color: #fff; }
.side a.nav.on { background: var(--nav-2); color: #fff; border-left-color: var(--accent); }
.side a.nav .badge { margin-left: auto; }
.side .me { margin-top: auto; padding: 14px 16px; border-top: 1px solid #22324b; font-size: 12px; }
.side .me b { color: #fff; display: block; font-size: 13px; }
.main { overflow-y: auto; min-width: 0; }
.topline { display: flex; align-items: center; gap: 12px; padding: 16px 24px 0; flex-wrap: wrap; }
.topline .grow { flex: 1; }
.page { padding: 16px 24px 40px; }

/* Cards & grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.kpi .l { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.kpi .v { font-size: 26px; font-weight: 750; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.hero { background: var(--nav); border-color: var(--nav); color: #fff; }
.kpi.hero .l { color: #8da2c0; } .kpi.hero .v { color: #4ade80; font-size: 32px; } .kpi.hero .s { color: #8da2c0; }
.kpi.click { cursor: pointer; } .kpi.click:hover { border-color: var(--accent); }
.kpi.warn .v { color: var(--warn); } .kpi.bad .v { color: var(--bad); } .kpi.good .v { color: var(--ok); }
.up { color: var(--ok); } .down { color: var(--bad); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.section-title h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-2); }

/* Buttons & forms */
.btn { border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 8px; padding: 8px 13px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: #f8fafc; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger { background: #fff; border-color: #fca5a5; color: var(--bad); }
.btn.danger.solid { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.big { padding: 12px 18px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input, select, textarea { font: inherit; color: var(--ink); }
.in, .field input, .field select, .field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.in:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field { display: block; margin-bottom: 10px; }
.field > span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.field.check { display: flex; align-items: center; gap: 8px; } .field.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters .in { width: auto; min-width: 140px; }
.filters .in.grow { flex: 1; min-width: 220px; }

/* Tables */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; background: #f8fafc; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tr:hover td { background: #fafcff; }
.tbl tr.click { cursor: pointer; }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 700; background: #f8fafc; border-top: 1px solid var(--line); }
.tbl .sel-col { width: 32px; }
.tbl input.cell { width: 100%; min-width: 70px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px; }
.tbl input.cell.bad { border-color: var(--bad); background: var(--bad-bg); }
.empty { text-align: center; color: var(--muted); padding: 36px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #e2e8f0; color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); } .badge.blue { background: var(--accent-bg); color: var(--accent); } .badge.dark { background: var(--nav); color: #fff; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
.dot.on { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; } .dot.off { background: #ef4444; }

/* Live feed */
.feed { max-height: 380px; overflow-y: auto; }
.feed-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 2px; border-bottom: 1px solid #f1f5f9; }
.feed-row b.amt { font-variant-numeric: tabular-nums; }
.feed-row .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.feed-row.new { background: #f0fdf4; animation: fadeNew 3s forwards; }
@keyframes fadeNew { to { background: transparent; } }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); font-weight: 700; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
.live-dot.off { color: var(--muted); } .live-dot.off::before { background: #94a3b8; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* Bars (simple charts) */
.chart svg { width: 100%; height: 190px; display: block; }
.chart .bar { fill: var(--accent); } .chart .bar:hover { fill: #1d4ed8; }
.chart text { font-size: 10px; fill: var(--muted); }
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #e2e8f0; margin: 10px 0 8px; }
.split i { display: block; height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--c); vertical-align: -1px; }

/* Notices */
.notice { padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; border-left: 4px solid; background: #f8fafc; }
.notice.INFO { border-color: var(--info); } .notice.WARNING { border-color: var(--warn); background: #fffbeb; } .notice.CRITICAL { border-color: var(--bad); background: #fef2f2; }
.notice b { display: block; } .notice small { color: var(--muted); }
.callout { padding: 12px 14px; border-radius: 10px; background: var(--accent-bg); color: #1e3a8a; font-size: 13px; margin-bottom: 12px; }
.callout.warn { background: var(--warn-bg); color: #713f12; } .callout.bad { background: var(--bad-bg); color: #7f1d1d; } .callout.ok { background: var(--ok-bg); color: #14532d; }

/* Steps (import) */
.steps { display: flex; gap: 10px; margin-bottom: 14px; }
.step { flex: 1; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--muted); }
.step b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: var(--ink-2); margin-right: 8px; font-size: 12px; }
.step.on { border-color: var(--accent); color: var(--ink); } .step.on b { background: var(--accent); color: #fff; }
.step.done b { background: var(--ok); color: #fff; }
.drop { border: 2px dashed var(--line-2); border-radius: 12px; padding: 36px; text-align: center; background: #fff; cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--accent-bg); }
.sumbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.sumbox div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.sumbox b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.issues { margin: 0; padding-left: 16px; font-size: 12px; } .issues li.e { color: var(--bad); } .issues li.w { color: var(--warn); }

/* Labels */
.label-preview { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; background: #e2e8f0; border-radius: 10px; max-height: 480px; overflow: auto; }
.label { background: #fff; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; padding: 1.2mm 1.5mm; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.label .ln { font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.05; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.label .lp { font-weight: 800; line-height: 1; }
.label svg { display: block; max-width: 100%; }
.label .lc { font-family: Consolas, monospace; letter-spacing: .5px; line-height: 1; }
#label-print { display: none; }
@media print {
  body.printing-labels > *:not(#label-print) { display: none !important; }
  body.printing-labels #label-print { display: block !important; }
  body.printing-labels { background: #fff; }
  body.printing-labels .label { box-shadow: none; page-break-after: always; break-after: page; }
  body.printing-labels .sheet { display: grid; page-break-after: always; }
  body.printing-labels .sheet .label { page-break-after: auto; break-after: auto; }
  body.printing-doc > *:not(#doc-print) { display: none !important; }
  body.printing-doc #doc-print { display: block !important; }
}
#doc-print { display: none; font-family: Arial, sans-serif; color: #000; }
#doc-print table { width: 100%; border-collapse: collapse; font-size: 11px; }
#doc-print th, #doc-print td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
#doc-print td.r, #doc-print th.r { text-align: right; }

/* Modal / toast */
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; padding: 20px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal.wide { max-width: 980px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head .x { border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; z-index: 90; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast.bad { background: var(--bad); } .toast.ok { background: var(--ok); }

/* Login */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 0%, #1e3356, var(--nav) 60%); padding: 16px; }
.login .card { max-width: 400px; width: 100%; padding: 26px; }
.login .brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }

.scanbox { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--nav); color: #e2e8f0; margin-bottom: 12px; }
.scanbox .in { background: #fff; }
.scan-state { font-size: 12px; font-weight: 700; color: #4ade80; white-space: nowrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { border: 0; background: none; padding: 9px 14px; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.explain { font-size: 12px; color: var(--ink-2); max-width: 520px; line-height: 1.45; }
.perm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }

@media (max-width: 1200px) { .g6 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { display: none; } .g3, .g2 { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; } .page, .topline { padding-left: 14px; padding-right: 14px; } }

.modal svg { width: 100%; height: auto; display: block; }
.simple td { padding: 6px 4px; border-bottom: 1px solid #f1f5f9; }
.side .badge { margin-left: auto; }

/* Small business accounting: everyday tasks first, detailed books on demand. */
.ac-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:18px;background:linear-gradient(120deg,#142743,#173f60);color:#fff;margin-bottom:18px}
.ac-eyebrow{font-size:10px;letter-spacing:1.6px;color:#94c7e7;font-weight:750}.ac-hero h2{font-size:28px;line-height:1.2;letter-spacing:-.6px;margin:10px 0}.ac-hero p{max-width:680px;color:#c7d8e7;line-height:1.6;margin:0}.ac-mode{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}.ac-mode .btn:not(.primary){background:#fff;color:#243c56}
.ac-status{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;background:#e8f6ef;border:1px solid #c3e5d1;border-radius:12px;margin:18px 0}.ac-status p{margin:6px 0 0;line-height:1.5;color:#425366}.ac-status-warn{background:#fff8e6;border-color:#f1d49a}
.ac-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}.ac-metric{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;color:var(--ink)}.ac-metric:hover{border-color:var(--accent)}.ac-metric>span{font-size:12px;font-weight:650;color:var(--ink-2)}.ac-metric strong{font-size:29px;font-variant-numeric:tabular-nums;letter-spacing:-.8px}.ac-metric small{color:var(--muted);line-height:1.5}
.ac-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 16px}.ac-section-title h2{margin:0}.ac-section-title p{margin:7px 0 0}.ac-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ac-task{display:flex;text-align:left;align-items:center;gap:13px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:17px;font:inherit;color:var(--ink);cursor:pointer}.ac-task:hover{border-color:var(--accent);background:#f7fbff}.ac-task>span:nth-child(2){flex:1}.ac-task b{display:block;font-size:13px}.ac-task small{display:block;color:var(--muted);margin-top:5px;font-size:11px;line-height:1.5}.ac-task-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#175e85;background:#edf5fb;font-size:20px;flex-shrink:0}
.ac-checklist{padding-left:22px;line-height:1.6}.ac-checklist li{margin:10px 0}.ac-checklist small{display:block;color:var(--muted);margin-top:3px}.ac-cash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ac-cash-grid>a,.ac-cash-grid>div{padding:14px;background:#f6f9fc;border-radius:10px;color:var(--ink-2)}.ac-cash-grid b{display:block;font-size:20px;margin-top:8px;color:var(--ink)}.ac-glossary{margin-top:20px}.ac-glossary summary{cursor:pointer;font-weight:700}.ac-glossary p{line-height:1.65}.ac-statement{margin-top:18px}.ac-statement h3{text-transform:capitalize}.ac-statement p{line-height:1.65}
@media(max-width:1150px){.ac-hero{align-items:flex-start;flex-direction:column}.ac-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.ac-hero{padding:20px}.ac-hero h2{font-size:23px}.ac-task-grid,.ac-metrics,.ac-cash-grid{grid-template-columns:1fr}.ac-status{align-items:flex-start;flex-direction:column}.ac-status .btn-row{flex-wrap:wrap}}