/* ============================================================
   VBDASH -- Sales dashboard

   Self-hosted only. No web font, no framework, no CDN request:
   the page must render identically in a phone browser and in
   the older embedded browser control inside VisualBOSS.

   Figures are the subject, so the type scale is built around
   them: the KPI number is the largest thing on the screen, the
   fractional part is stepped down so the eye reads the whole
   part first, and every numeric column is tabular so digits
   line up down the page.
   ========================================================= */

:root {
  --bg:        #f3f3f8;
  --panel:     #ffffff;
  --ink:       #1c1c2b;
  --muted:     #6e6e85;
  --faint:     #9a9ab0;
  --line:      #e7e7f0;

  --indigo:    #6c63d6;
  --indigo-dk: #4a3fb0;
  --indigo-md: #8c85dd;
  --indigo-lt: #c9c5ee;

  --up:        #2e7d46;
  --down:      #c0392b;

  --tone-green:  #e2efdd;
  --tone-blue:   #dee5f8;
  --tone-violet: #e8e1f6;
  --tone-sand:   #efe7c8;

  --r:    14px;
  --r-sm: 9px;
  --gap:  14px;

  --sans: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Liberation Mono", Menlo,
          monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

/* Inside VisualBOSS the window is already framed, so the page
   loses its outer breathing room and its sign-out control. */
body.embedded .wrap { padding: 10px 10px 24px; }

h1, h2, h3 { margin: 0; font-weight: 600; }

/* --- Top bar ------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: var(--gap);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--tone-violet);
  color: var(--indigo-dk);
  flex: none;
}
.brand-mark svg { fill: currentColor; }

.topbar h1 { font-size: 19px; letter-spacing: -0.01em; }

.crumbs {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.asof { white-space: nowrap; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.iconbtn:hover { background: var(--bg); color: var(--ink); }

.signout {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.signout:hover { color: var(--ink); }

/* --- Stale warning ------------------------------------------
   A dashboard that announces its own staleness is safe. One
   that silently shows yesterday's numbers as live is not. */

.stale {
  background: #fdf3d8;
  border: 1px solid #e8d38a;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: var(--gap);
  font-size: 13.5px;
  color: #6b5310;
}

/* --- KPI row 1 ---------------------------------------------- */

/* Two columns built with floats rather than CSS Grid.
 *
 * The VisualBOSS host is a Shell.Explorer.2 control -- the
 * Internet Explorer engine -- which has no usable Grid support.
 * A grid-only layout collapses to a single tall column there,
 * which is a worse dashboard, not a differently-styled one.
 * Floats work in every engine, and Grid is layered back on
 * below for browsers that have it. */

.kpi-grid { margin-bottom: var(--gap); }
.kpi-grid::after,
.dlv-strip::after,
.two-up::after,
.pay-wrap::after,
.rank-list li::after,
.pay-legend li::after {
  content: "";
  display: table;
  clear: both;
}

.kpi {
  float: left;
  width: 49%;
  margin: 0 2% var(--gap) 0;
  border-radius: var(--r);
  padding: 16px 18px 14px;
  border: 1px solid rgba(0, 0, 0, .04);
  min-height: 132px;
}
.kpi:nth-child(even) { margin-right: 0; }

.tone-green  { background: var(--tone-green); }
.tone-blue   { background: var(--tone-blue); }
.tone-violet { background: var(--tone-violet); }
.tone-sand   { background: var(--tone-sand); }
.tone-plain  { background: var(--panel); border-color: var(--line); }

.kpi header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kpi h3 {
  font-size: 13.5px;
  font-weight: 500;
  color: #40405a;
}

.kpi-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .75);
  flex: none;
}

.kpi-value {
  margin: 10px 0 auto;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Step the decimals down: the eye should land on the whole
   number first, then the minor units. */
.kpi-value .frac,
.dlv-value .frac {
  font-size: 0.62em;
  font-weight: 500;
  color: #4a4a63;
}

.kpi-foot,
.dlv-foot {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.cmp { color: var(--muted); }

/* --- Delta ---------------------------------------------------
   Colour follows whether the movement is *good*, not whether
   it is up. Falling pending deliveries is a green fall. */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.delta-up   { color: var(--up); }
.delta-down { color: var(--down); }
.delta-flat { color: var(--faint); }

/* --- Panels -------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: var(--gap);
}

.panel h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.panel-head h2 { margin-bottom: 0; }

.empty {
  color: var(--muted);
  font-size: 13.5px;
  padding: 18px 0;
  text-align: center;
}

.empty-state { text-align: center; padding: 44px 20px; }
.empty-state h2 { font-size: 18px; margin-bottom: 10px; }
.empty-state p  { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.empty-state code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- Card 5: ranked sites ------------------------------------
   Numbered because this genuinely is a ranking, not decoration. */

.rank-list { list-style: none; margin: 0; padding: 0; }

.rank-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  line-height: 22px;
}
.rank-list li:last-child { border-bottom: 0; }

.rank-list .rank-no { float: left; margin-right: 12px; }
.rank-list .rank-dl { float: right; width: 70px; }
.rank-list .rank-val { float: right; margin-right: 14px; }

.rank-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--tone-violet);
  color: var(--indigo-dk);
  font-size: 12px;
  font-weight: 600;
}

.rank-nm  { color: #33334a; }
.rank-val { font-weight: 600; font-size: 16px; }
.rank-dl  { text-align: right; }
.rank-dl .delta { background: transparent; padding: 2px 0; }

/* --- KPI row 2: deliveries ----------------------------------- */

.dlv-strip {
  background: #fafafd;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: var(--gap);
}

.dlv {
  float: left;
  width: 33.33%;
  padding: 14px 16px 13px;
  border-left: 1px solid var(--line);
}
.dlv:first-child { border-left: 0; }

.dlv h3 {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.dlv-value {
  margin: 8px 0 2px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dlv-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* --- Charts --------------------------------------------------
   Every chart is inline SVG built by PHP, so its colours come
   from this stylesheet rather than from the markup. */

.chart { width: 100%; height: auto; display: block; }

.grid { stroke: var(--line); stroke-width: 1; }
.axis { stroke: #dcdce8; stroke-width: 1; }

.ax     { fill: var(--faint); font-size: 10.5px; font-family: var(--sans); }
.ax-y   { text-anchor: end; }
.ax-x   { text-anchor: middle; }

.bar-cur { fill: var(--indigo); }
.bar-prv { fill: var(--indigo-lt); }

.line { fill: none; stroke-width: 2; stroke-linejoin: round;
        stroke-linecap: round; }
.ln-w0 { stroke: var(--indigo-dk); }
.ln-w1 { stroke: var(--indigo-md); }
.ln-w2 { stroke: var(--indigo-lt); }

.dot { fill: var(--indigo-dk); }

/* Legend keys */
.legend {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.key {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 3px;
  margin-left: 10px;
  vertical-align: -1px;
}
.legend .key:first-child { margin-left: 0; }

.key-cur { background: var(--indigo); }
.key-prv { background: var(--indigo-lt); }
.key-w0  { background: var(--indigo-dk); }
.key-w1  { background: var(--indigo-md); }
.key-w2  { background: var(--indigo-lt); }

/* --- Donut --------------------------------------------------- */

.pay-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
}

.donut { width: 100%; max-width: 200px; height: auto; display: block;
         margin: 0 auto; }

.donut-total {
  text-anchor: middle;
  font-size: 19px;
  font-weight: 600;
  fill: var(--ink);
  font-family: var(--sans);
}
.donut-sub {
  text-anchor: middle;
  font-size: 9.5px;
  fill: var(--faint);
  font-family: var(--sans);
}

.sl0 { fill: #6c63d6; }  .sl0-key { background: #6c63d6; }
.sl1 { fill: #5ba46e; }  .sl1-key { background: #5ba46e; }
.sl2 { fill: #b99b3a; }  .sl2-key { background: #b99b3a; }
.sl3 { fill: #7b5ea7; }  .sl3-key { background: #7b5ea7; }
.sl4 { fill: #b4553c; }  .sl4-key { background: #b4553c; }
.sl5 { fill: #3f8f8a; }  .sl5-key { background: #3f8f8a; }

.sl0-stroke { stroke: #6c63d6; } .sl1-stroke { stroke: #5ba46e; }
.sl2-stroke { stroke: #b99b3a; } .sl3-stroke { stroke: #7b5ea7; }
.sl4-stroke { stroke: #b4553c; } .sl5-stroke { stroke: #3f8f8a; }

.pay-legend { list-style: none; margin: 0; padding: 0; }

.pay-legend li {
  display: grid;
  grid-template-columns: 16px 1fr auto 54px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
}
.pay-legend .key { margin-left: 0; }
.pay-nm  { color: #33334a; }
.pay-val { text-align: right; }
.pay-pct { text-align: right; color: var(--muted); }

/* --- Tables --------------------------------------------------
   On a narrow screen these scroll sideways rather than hiding
   columns: a sales figure that is off-screen can be reached,
   one that has been dropped cannot. */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 460px;
}

th {
  text-align: left;
  font-weight: 500;
  color: var(--faint);
  font-size: 12px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 9px 10px;
  border-bottom: 1px solid #f2f2f7;
}
tbody tr:last-child td { border-bottom: 0; }

th.r, td.r { text-align: right; }
th.c, td.c { text-align: center; color: var(--faint); width: 34px; }

.mono { font-family: var(--mono); font-size: 12.5px; }

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.two-up .panel { margin-bottom: 0; }

.foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}

/* --- Login --------------------------------------------------- */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 30px 24px;
  width: 100%;
  max-width: 370px;
}

.login-card h1 { font-size: 20px; margin-top: 14px; }

.login-sub {
  margin: 4px 0 20px;
  color: var(--muted);
  font-size: 13.5px;
}

.login-card label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 5px;
}

.login-card input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 15px;
  border: 1px solid #d8d8e6;
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
  background: #fcfcfe;
}
.login-card input:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}

.login-card button {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--indigo-dk);
  color: #fff;
  font: 600 15px var(--sans);
  cursor: pointer;
}
.login-card button:hover { background: #3d3499; }

.error {
  background: #fdeceb;
  border: 1px solid #f2c2bd;
  color: #8f2b20;
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 15px;
}

.note {
  background: #eef1fb;
  border: 1px solid #d3daf3;
  color: #3a4270;
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin: 0 0 15px;
}

.login-foot {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.5;
}

/* --- Focus and motion ---------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Mobile --------------------------------------------------
   One column. Nothing is removed; the layout simply stacks and
   the tables gain a horizontal scroll. */

@media (max-width: 860px) {
  .pay-wrap  { grid-template-columns: 1fr; gap: 14px; }
  .two-up    { grid-template-columns: 1fr; }
  .two-up .panel { margin-bottom: var(--gap); }
}

@media (max-width: 620px) {
  .wrap { padding: 10px 10px 30px; }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .topbar-right { width: 100%; justify-content: space-between; }

  .kpi-grid  { grid-template-columns: 1fr; }
  .kpi       { min-height: 0; }
  .kpi-value { font-size: 32px; }

  .dlv-strip { grid-template-columns: 1fr; }

  .rank-list li {
    grid-template-columns: 24px 1fr auto;
    row-gap: 2px;
  }
  .rank-dl { grid-column: 3; }

  .pay-legend li { grid-template-columns: 14px 1fr auto; }
  .pay-pct { display: none; }
}