/* Staff home. Kept separate from the sales workspace and public storefront. */
body.staff.dashboard-view {
  --dashboard-navy: #223449;
  --dashboard-blue: #116dde;
  --dashboard-line: #d8dfe4;
  background: linear-gradient(130deg, #c5cfe5 0%, #d9dfe2 52%, #c6ded7 100%);
  color: #20292f;
}
body.staff.dashboard-view .topbar {
  height: 72px;
  padding: 10px 18px;
  gap: 17px;
  background: var(--dashboard-navy);
  color: #fff;
  border-bottom: 1px solid #142639;
}
body.staff.dashboard-view .topbrand { width: auto; min-width: 218px; }
body.staff.dashboard-view .topbrand img { border-radius: 50%; }
body.staff.dashboard-view .topbrand small,
body.staff.dashboard-view .account-chip span { color: #bdcbd9; }
body.staff.dashboard-view .topbar .badge { background: #384c60; color: #e3edf5; }
body.staff.dashboard-view .topbar .sound-button { background: #304a67; border: 1px solid #405a76; color: #deebf8; }
body.staff.dashboard-view .account-chip { border-color: #4b5d6f; }
body.staff.dashboard-view .workspace { min-height: calc(100dvh - 72px); }
body.staff.dashboard-view .rail {
  width: 52px;
  height: calc(100dvh - 72px);
  top: 72px;
  padding: 6px 4px;
  gap: 5px;
  background: #e2e7eb;
  border-right: 1px solid #c4ccd4;
  overflow-y: auto;
}
body.staff.dashboard-view .rail button { min-height: 44px; padding: 10px 4px; color: #52697b; border: 1px solid #cad3db; border-radius: 3px; }
body.staff.dashboard-view .rail button > span:not(.count) { display: none; }
body.staff.dashboard-view .rail button.active { background: #6bcde5; color: #17394c; border-color: #54bbd7; }
body.staff.dashboard-view .rail button:hover { background: #d0e4ee; }
body.staff.dashboard-view .rail .count { right: 0; top: 0; color: #fff; background: #db5d00; }
body.staff.dashboard-view .rail .bottom { font-size: 0; }
body.staff.dashboard-view .workspace-content { padding: 18px; min-width: 0; }

body.staff .dashboard-view { min-width: 0; }
body.staff .dashboard-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
body.staff .dashboard-heading h1 { margin: 0; color: #2a3d51; font-size: 21px; line-height: 1.3; letter-spacing: -.4px; }
body.staff .dashboard-heading > label { display: flex; flex-direction: row; align-items: center; gap: 9px; color: #4b6072; font-size: 12px; }
body.staff .dashboard-heading select { width: auto; min-width: 170px; min-height: 36px; padding: 7px 32px 7px 10px; border-color: #c0cad7; border-radius: 5px; background: #f1f4f8; font-size: 12px; }
body.staff .dashboard-test-note { margin: 0 0 16px; padding: 10px 13px; border: 1px solid #d8cfb6; border-radius: 7px; background: #fbf4e5; color: #715c31; font-size: 12px; line-height: 1.5; }
body.staff .dashboard-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
body.staff .dashboard-card {
  min-width: 0;
  min-height: 112px;
  padding: 17px 18px 15px;
  border: 1px solid #e2e7eb;
  border-radius: 18px;
  background: #eef2f4;
  box-shadow: 0 2px 4px #3a516209;
}
body.staff .dashboard-card-label { margin: 0 0 4px; color: #657078; font-size: 13px; line-height: 1.35; font-weight: 600; text-transform: uppercase; letter-spacing: .1px; }
body.staff .dashboard-card-value { display: block; margin: 0; color: #11181d; font-size: clamp(25px, 2.4vw, 35px); font-weight: 750; line-height: 1.12; letter-spacing: -.8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.staff .dashboard-card-comparison { display: block; margin-top: 5px; color: #5c6c78; font-size: 12px; line-height: 1.35; font-weight: 650; }
body.staff .dashboard-card-comparison.is-positive { color: #21764b; }
body.staff .dashboard-card-comparison.is-negative { color: #ac2d35; }
body.staff .dashboard-card-comparison.is-neutral { color: #697783; }
body.staff .dashboard-card-caption { display: block; margin-top: 5px; color: #74818b; font-size: 11px; line-height: 1.35; }

body.staff .dashboard-chart-panel { min-width: 0; padding: 16px; border: 1px solid #e3e8eb; border-radius: 18px; background: #eef2f4; box-shadow: 0 2px 4px #3a516209; }
body.staff .dashboard-chart-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; border-bottom: 1px solid #d3dce3; margin-bottom: 12px; padding-bottom: 10px; }
body.staff .dashboard-chart-heading h2 { margin: 0; color: #242d34; font-size: 14px; line-height: 1.4; font-weight: 700; text-transform: uppercase; }
body.staff .dashboard-chart-heading p { margin: 0; color: #6c7983; font-size: 11px; }
body.staff .dashboard-chart-legend { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 18px; font-size: 12px; color: #465663; }
body.staff .dashboard-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
body.staff .dashboard-legend-item > span[data-channel] { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; border: 1px solid #7bc3da; background: #8ed3e8; }
body.staff .dashboard-legend-item > span[data-channel="table"] { background: #8ed3e8; border-color: #7bc3da; }
body.staff .dashboard-legend-item > span[data-channel="delivery"] { background: #ffb2b2; border-color: #f6969e; }
body.staff .dashboard-legend-item > span[data-channel="pickup"] { background: #ffd389; border-color: #f1a82c; }
body.staff .dashboard-chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; border: 1px solid #e6eaee; background: #fff; }
body.staff svg.dashboard-chart { display: block; width: 100%; min-width: 600px; height: auto; background: #fff; font-family: Arial, Helvetica, sans-serif; }
body.staff .dashboard-chart .dashboard-grid-line { stroke: #dce2e6; stroke-width: 1; }
body.staff .dashboard-chart .dashboard-axis-line { stroke: #c9d2d9; stroke-width: 1; }
body.staff .dashboard-chart .dashboard-axis-label { fill: #52616c; font-size: 13px; }
body.staff .dashboard-chart .dashboard-bar[data-channel="table"] { fill: #8ed3e8; stroke: #7bc3da; stroke-width: 1.5; }
body.staff .dashboard-chart .dashboard-bar[data-channel="delivery"] { fill: #ffb2b2; stroke: #f6969e; stroke-width: 1.5; }
body.staff .dashboard-chart .dashboard-bar[data-channel="pickup"] { fill: #ffd389; stroke: #f1a82c; stroke-width: 1.5; }
body.staff .dashboard-chart .dashboard-bar:focus-visible { outline: none; stroke: #234b72; stroke-width: 3; }
body.staff .dashboard-chart-empty { margin: 0; padding: 18px; text-align: center; color: #687b8a; font-size: 13px; line-height: 1.5; }
body.staff .dashboard-accessible-data { margin-top: 12px; color: #566b7d; font-size: 12px; }
body.staff .dashboard-accessible-data summary { cursor: pointer; width: fit-content; padding: 5px 0; line-height: 1.4; }
body.staff .dashboard-accessible-data[open] { overflow-x: auto; }
body.staff .dashboard-accessible-data table { margin-top: 10px; background: #fff; min-width: 510px; }
body.staff .dashboard-accessible-data caption { padding: 8px 0; text-align: left; color: #647789; font-size: 11px; }
body.staff .dashboard-accessible-data th { background: #e8edf2; color: #465c70; font-size: 11px; font-weight: 600; }
body.staff .dashboard-accessible-data td { color: #344858; font-size: 12px; font-variant-numeric: tabular-nums; }
body.staff .dashboard-loading { min-height: 200px; display: grid; place-items: center; padding: 35px; text-align: center; color: #516879; font-size: 14px; }
body.staff .dashboard-error { max-width: 620px; padding: 25px; margin: 12px auto; border: 1px solid #dec5c4; border-radius: 14px; background: #fff7f5; text-align: center; color: #8c4140; font-size: 14px; line-height: 1.6; }
body.staff .dashboard-error p { margin: 0 0 14px; }
body.staff .dashboard-error button { color: #fff; background: #116dde; border-color: #116dde; font-size: 13px; }
body.staff .dashboard-error button:hover { background: #0d5bb9; border-color: #0d5bb9; }
body.staff.dashboard-view :is(button, a, input, select, summary):focus-visible { outline: 3px solid #165d94; outline-offset: 3px; }
body.staff.dashboard-view .topbar :is(button, a):focus-visible { outline-color: #9edbf7; }

@media (min-width: 1550px) {
  body.staff.dashboard-view .workspace-content { padding: 22px; }
  body.staff .dashboard-card { min-height: 120px; }
  body.staff .dashboard-card-label { font-size: 14px; }
  body.staff .dashboard-chart-panel { padding: 18px; }
  body.staff .dashboard-chart-heading h2 { font-size: 16px; }
}
@media (max-width: 1000px) {
  body.staff.dashboard-view .workspace-content { padding: 15px; }
  body.staff .dashboard-cards { gap: 12px; }
  body.staff .dashboard-card { padding: 15px 14px; min-height: 112px; border-radius: 14px; }
  body.staff .dashboard-card-label { font-size: 11px; min-height: 29px; }
  body.staff .dashboard-card-value { font-size: 26px; }
  body.staff .dashboard-card-comparison { font-size: 11px; }
}
@media (max-width: 800px) {
  body.staff.dashboard-view .topbar { gap: 10px; padding: 10px 12px; }
  body.staff.dashboard-view .topbrand { min-width: 0; }
  body.staff.dashboard-view .topbrand small { display: none; }
  body.staff.dashboard-view .account-chip { display: none; }
  body.staff .dashboard-heading { align-items: flex-start; }
  body.staff .dashboard-heading h1 { font-size: 20px; }
  body.staff .dashboard-heading > label { gap: 7px; font-size: 11px; }
  body.staff .dashboard-heading select { min-width: 145px; font-size: 11px; }
  body.staff .dashboard-chart-heading { align-items: flex-start; flex-direction: column; }
  body.staff .dashboard-chart-legend { justify-content: flex-start; gap: 8px 13px; font-size: 11px; }
  body.staff .dashboard-chart-panel { padding: 13px; border-radius: 14px; }
}
@media (max-width: 620px) {
  body.staff.dashboard-view .topbar { height: 62px; padding: 8px 10px; gap: 9px; }
  body.staff.dashboard-view .topbrand img { width: 34px; height: 34px; }
  body.staff.dashboard-view .topbrand strong { font-size: 12px; letter-spacing: .7px; }
  body.staff.dashboard-view .topbar .clock { display: none; }
  body.staff.dashboard-view .topbar .badge { font-size: 9px; padding: 4px 6px; }
  body.staff.dashboard-view .topbar .sound-button { font-size: 10px; padding: 7px; }
  body.staff.dashboard-view .workspace { min-height: calc(100dvh - 62px); }
  body.staff.dashboard-view .rail { width: 44px; height: calc(100dvh - 62px); top: 62px; padding: 4px 3px; }
  body.staff.dashboard-view .rail button { min-height: 40px; padding: 8px 2px; }
  body.staff.dashboard-view .rail button svg { width: 19px; height: 19px; }
  body.staff.dashboard-view .workspace-content { padding: 13px 10px; }
  body.staff .dashboard-heading { gap: 10px; margin-bottom: 12px; }
  body.staff .dashboard-heading h1 { font-size: 18px; }
  body.staff .dashboard-heading > label { width: 100%; justify-content: space-between; }
  body.staff .dashboard-heading select { min-height: 40px; max-width: 180px; font-size: 12px; }
  body.staff .dashboard-test-note { margin-bottom: 12px; padding: 9px 11px; font-size: 11px; }
  body.staff .dashboard-cards { grid-template-columns: 1fr; gap: 10px; margin-bottom: 13px; }
  body.staff .dashboard-card { min-height: 98px; padding: 14px 15px; border-radius: 13px; }
  body.staff .dashboard-card-label { font-size: 12px; min-height: 0; }
  body.staff .dashboard-card-value { font-size: 29px; }
  body.staff .dashboard-chart-panel { padding: 11px; border-radius: 13px; }
  body.staff .dashboard-chart-heading h2 { font-size: 12px; }
  body.staff .dashboard-chart-heading { gap: 9px; padding-bottom: 9px; margin-bottom: 10px; }
  body.staff .dashboard-chart-legend { gap: 6px 10px; font-size: 10px; }
  body.staff .dashboard-legend-item { gap: 4px; }
  body.staff .dashboard-legend-item > span[data-channel] { width: 10px; height: 10px; }
  body.staff .dashboard-chart-scroll { margin-right: -1px; }
  body.staff .dashboard-chart-empty { padding: 14px 6px; font-size: 12px; }
  body.staff .dashboard-error { padding: 20px 14px; font-size: 13px; }
}
@media (max-width: 390px) {
  body.staff.dashboard-view .topbar .badge { display: none; }
  body.staff .dashboard-heading > label { flex-wrap: wrap; }
  body.staff .dashboard-heading select { width: 100%; max-width: none; }
}