/* Dashboard shell — shared by the operations console and the customer's order
   view. Both are dashboards: a sidebar naming where you are and what can be
   worked on, a bar for identity and the one thing that is searched, and a
   content area of cards. Keeping one implementation is what stops the two from
   drifting into different products.

   The information design follows what operations consoles converge on. The
   surface stays in this brand's palette and type: DESIGN.md §9 rules out the
   gradients, glassmorphism and dashboard-kit typefaces most of them ship with.
*/

/* --- Console shell --------------------------------------------------------
   Three regions: a sidebar that names where you are and what can be worked on,
   a top bar for the one thing that is searched, and a content area of cards.
   The structure follows the shape operations consoles converge on; the surface
   stays in this brand's palette and type — DESIGN.md §9 rules out the violet
   gradients and Inter that most dashboard kits ship with. */
/* `[hidden]` is a user-agent rule with almost no specificity, so any class that
   sets `display` silently defeats it. Without this the whole shell — sidebar,
   top bar, empty stat cards — renders behind the login form, showing the
   console's structure to anyone who visits the URL. */
.console-shell[hidden] { display: none; }

.console-shell {
  display: grid;
  grid-template-areas: "sidebar topbar" "sidebar main";
  grid-template-columns: 226px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-items: start;
  border: 1px solid var(--line, #d9d4c7);
  background: var(--card, #fdfaf3);
}

.console-sidebar {
  grid-area: sidebar; align-self: stretch;
  display: flex; flex-direction: column; gap: 22px;
  padding: 18px 16px; border-right: 1px solid var(--line, #d9d4c7);
  background: var(--mist, #eef1ea);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; }
.sidebar-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--red, #b6462e); color: var(--card, #fdfaf3);
  font: 700 15px/1 var(--serif, serif);
}
.sidebar-name { display: grid; font: 700 15px/1.2 var(--sans); }
.sidebar-name small { font: 400 11px/1.4 var(--mono, monospace); opacity: .65; }
.nav-label {
  margin: 0 0 8px; font: 700 10px/1 var(--mono, monospace);
  letter-spacing: .16em; opacity: .55;
}
.sidebar-foot { margin: auto 0 0; font: 11px/1.7 var(--mono, monospace); opacity: .7; }

/* The queue menu is a menu, not a tab strip: it stays put while the area beside
   it changes, so the counts are always in view. */
.queue-tabs { display: grid; gap: 4px; margin: 0; }
.queue-tabs button {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; border: 0; text-align: left; border-radius: 3px;
  background: transparent; color: inherit; font: 600 13px/1.2 var(--sans); cursor: pointer;
}
.queue-tabs button:hover { background: rgba(29, 41, 35, .07); }
.queue-tabs button.is-active { background: var(--ink, #1d2923); color: var(--card, #fdfaf3); }
.nav-icon { font-size: 13px; opacity: .8; text-align: center; }
.nav-text { min-width: 0; }
.queue-count {
  min-width: 22px; padding: 1px 6px; text-align: center; border-radius: 999px;
  border: 1px solid currentColor; font: 700 10px/1.6 var(--mono, monospace);
}

.console-topbar {
  grid-area: topbar;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--line, #d9d4c7);
}
.topbar-search { display: flex; align-items: center; gap: 8px; flex: 1 1 380px; max-width: 520px; position: relative; }
.search-icon { position: absolute; left: 11px; opacity: .5; font-size: 15px; pointer-events: none; }
#search-q {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px 9px 32px;
  border: 1px solid var(--line, #d9d4c7); border-radius: 3px;
  background: var(--card, #fdfaf3); font-size: 14px;
}
.topbar-search button[type="submit"] {
  padding: 9px 16px; border: 1px solid var(--ink, #1d2923); border-radius: 3px;
  background: var(--ink, #1d2923); color: var(--card, #fdfaf3);
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.metrics-updated { margin: 0; font: 11px/1.4 var(--mono, monospace); opacity: .6; }
.topbar-user { font: 600 12px/1 var(--mono, monospace); opacity: .8; }

.console-main { grid-area: main; min-width: 0; padding: 20px; display: grid; gap: 18px; }

/* --- Stat cards ----------------------------------------------------------- */
.stat-cards {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0;
}
.stat-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon term" "icon value" "icon note";
  align-content: start; gap: 0 10px;
  padding: 14px; border: 1px solid var(--line, #d9d4c7); border-radius: 4px;
}
.stat-icon {
  grid-area: icon; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--mist, #eef1ea); font-size: 15px;
}
.stat-card dt { grid-area: term; margin: 0; font-size: 11px; letter-spacing: .04em; opacity: .7; }
.stat-card dd { grid-area: value; margin: 2px 0 0; font: 700 20px/1.15 var(--mono, monospace); }
.stat-note { grid-area: note; margin: 3px 0 0; font-size: 11px; opacity: .68; }
/* Money owed to us is the only figure that shrinks by chasing rather than by
   selling, so it is the one worth spotting from across the room. */
.stat-card.is-money dd { color: var(--green, #315c45); }
.stat-card.is-money .stat-icon { background: rgba(49, 92, 69, .12); }
.stat-card.is-action dd { color: var(--red, #b6462e); }
.stat-card.is-action .stat-icon { background: rgba(182, 70, 46, .12); }
.stat-note.is-warning { color: var(--red, #b6462e); font-weight: 700; }

/* --- Panels and charts ---------------------------------------------------- */
.panel { padding: 16px 18px; border: 1px solid var(--line, #d9d4c7); border-radius: 4px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.panel-head h2 { margin: 0; font-size: 15px; }
.panel-note { margin: 0; font-size: 11px; opacity: .7; }
.chart-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.chart { color: var(--ink, #1d2923); }
.chart svg { display: block; width: 100%; height: 190px; }
.chart-empty { margin: 24px 0; font-size: 13px; opacity: .7; text-align: center; }

.bar-orders { fill: var(--green, #315c45); fill-opacity: .8; }
.line-money { stroke: var(--red, #b6462e); stroke-width: 2; }
.axis-label { fill: currentColor; fill-opacity: .6; font: 10px var(--mono, monospace); }
.ring-total { fill: currentColor; font: 700 22px var(--mono, monospace); }
.ring-caption { fill: currentColor; fill-opacity: .6; font: 9px var(--mono, monospace); }

.key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }
.key-orders { background: var(--green, #315c45); }
.key-money { background: var(--red, #b6462e); }
.chart-legend { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12px; }
.chart-legend li { display: flex; align-items: center; gap: 8px; }
.mix-awaiting { background: #c9a227; } .ring.mix-awaiting { stroke: #c9a227; }
.mix-reported { background: var(--red, #b6462e); } .ring.mix-reported { stroke: var(--red, #b6462e); }
.mix-confirmed { background: var(--green, #315c45); } .ring.mix-confirmed { stroke: var(--green, #315c45); }
.mix-shipped { background: #5d7f6d; } .ring.mix-shipped { stroke: #5d7f6d; }
.mix-delivered { background: #9aa89f; } .ring.mix-delivered { stroke: #9aa89f; }

.search-summary { margin: 0 0 12px; font-size: 12px; opacity: .8; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1240px) { .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .chart-row { grid-template-columns: minmax(0, 1fr); } }
/* Below this the sidebar has nowhere to sit; it becomes a header strip. */
@media (max-width: 900px) {
  .console-shell { grid-template-areas: "sidebar" "topbar" "main"; grid-template-columns: minmax(0, 1fr); }
  .console-sidebar { border-right: 0; border-bottom: 1px solid var(--line, #d9d4c7); }
  .queue-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-label { grid-column: 1 / -1; }
  .console-topbar { flex-wrap: wrap; }
}
@media (max-width: 620px) { .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A card spanning the full content column with its facts packed into the left
   third reads as a broken layout. Above this width the decision moves beside
   the evidence, which is where the eye already is after reading the facts. */
@media (min-width: 1180px) {
  .queue-item {
    display: grid;
    grid-template-areas: "head head" "facts actions";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px; align-items: start;
  }
  .queue-item > .queue-head { grid-area: head; }
  .queue-item > .queue-facts { grid-area: facts; }
  .queue-item > .queue-actions { grid-area: actions; margin-top: 0; align-self: center; }
}