:root {
  --hub-navy: #471242;
  --hub-navy-deep: #30102f;
  --hub-teal: #3ab87e;
  --hub-coral: #f26c4e;
  --hub-gold: #fcaf17;
  --hub-ink: #22313f;
  --hub-muted: #66788a;
  --hub-line: #dce5ec;
  --hub-canvas: #fffdf8;
  --hub-surface: #ffffff;
  --hub-radius: 12px;
  --bs-primary: #1e5a2d;
  --bs-primary-rgb: 30, 90, 45;
  --bs-link-color: #1e5a2d;
  --bs-link-hover-color: #164520;
  --bs-body-color: var(--hub-ink);
  --bs-body-bg: var(--hub-canvas);
  --bs-border-color: var(--hub-line);
  --bs-font-sans-serif: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { min-height: 100%; }

body { margin: 0; font-size: .925rem; line-height: 1.5; }
.pos-report-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pos-report-tabs a { padding: .5rem .7rem; border: 1px solid #d5e1db; border-radius: 8px; color: #264439; text-decoration: none; font-size: .86rem; }
.pos-report-tabs a:hover, .pos-report-tabs a:focus, .pos-report-tabs a.active { background: #2a7655; border-color: #2a7655; color: #fff; }
.pos-report-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.pos-report-kpis>div { padding: 1rem; border: 1px solid #dce8df; border-radius: 10px; background: #fff; }
.pos-report-kpis span { display: block; color: #5a7065; font-size: .82rem; }
.pos-report-kpis strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pos-report-totals { margin: 0; max-width: 620px; }
.pos-report-totals>div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #edf1ed; }
.pos-report-totals dt { font-weight: 400; }.pos-report-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.pos-report-page .table { font-variant-numeric: tabular-nums; }
.pos-item-controls label { flex: 1 1 13rem; }
.pos-item-controls .pos-item-search { flex: 2 1 17rem; }
.pos-report-app { min-height: 100vh; color: var(--hub-ink); background: var(--hub-canvas); }
.topbar { min-height: 64px; background: #fff; border-bottom: 1px solid #d8ddd5; display: flex; align-items: center; gap: 14px; padding: 8px 24px; flex-wrap: wrap; }
.topbar .brand-logo { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; text-decoration: none; }
.topbar .brand-mark { display: inline-block; width: 47px; height: 40px; overflow: hidden; flex-shrink: 0; }
.topbar .brand-mark img { display: block; width: auto; max-width: none; height: 40px; }
.topbar .brand-title { color: #2eb678; font-size: 1.2rem; font-weight: 750; letter-spacing: -.035em; white-space: nowrap; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: .88rem; }
.topbar form { margin: 0; }
.topbar .nav-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 15px; border: 1px solid #d8ddd5; border-radius: 10px; background: #fff; color: #23483e; font-size: .85rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.topbar .nav-button:hover { background: #edf1e8; }
.topbar .nav-button:focus-visible { outline: 3px solid #c09b46; outline-offset: 3px; }
.pos-app-main { width: min(100%, 1540px); margin: 0 auto; padding: 1.25rem clamp(1rem, 3vw, 2rem) 3rem; }
.pos-sales-chart-frame { width: 100%; overflow: hidden; }
.pos-sales-chart svg { display: block; width: 100%; max-width: 100%; height: auto; font-family: inherit; }
.pos-chart-grid { stroke: #e2e9e5; stroke-width: 1; }
.pos-chart-axis { stroke: #78978b; stroke-width: 1.5; }
.pos-chart-tick { fill: #60766c; font-size: 11px; }
.pos-chart-positive { fill: #2a7655; }
.pos-chart-negative { fill: #bd514c; }
.pos-chart-positive:hover, .pos-chart-negative:hover { opacity: .72; }
@media(max-width:700px) { .pos-report-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .pos-report-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; } .pos-report-tabs a { white-space: nowrap; } }
@media(max-width:760px) { .topbar { min-height: 56px; padding: 6px 12px; gap: 7px; } .topbar .brand-mark { width: 38px; height: 32px; } .topbar .brand-mark img { height: 32px; } .topbar .brand-title { font-size: 1.06rem; } .topbar nav { gap: 6px; font-size: .8rem; } .topbar .nav-button { min-height: 38px; padding: 8px 12px; font-size: .8rem; } }
.report-login { max-width: 28rem; margin: 5vh auto; }