/* Poppins — self-hosted (public/fonts) so it also works offline in mobile/desktop builds */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/public/fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/public/fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/public/fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/public/fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/public/fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/public/fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/public/fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/public/fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/public/fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/public/fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --ink: #17231f;
  --muted: #78837e;
  --line: #e8ede9;
  --paper: #ffffff;
  --canvas: #f7f9f7;
  --green: #237b57;
  --green-dark: #176345;
  --green-soft: #e9f4ed;
  --lime: #d7ed9f;
  --amber: #eaa64e;
  --chart-muted: #c9dfce;
  --shadow: 0 16px 48px rgba(28, 54, 41, .07);
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--green);
  color: white;
  font-size: 17px;
  font-weight: 700;
}

.portal {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 24px;
}

.portal-header, .portal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-header-note, .eyebrow, .aside-kicker {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.65px;
}

.portal-header-note { color: #8b9690; }
.portal-intro { margin: 79px 0 37px; }
.portal-intro .eyebrow { display: block; margin-bottom: 16px; }

h1, h2, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Numbers line up in metrics, money, IDs and charts */
.metric-value, .chart-value, .overview-stat-value, .activity-amount, .chart-change,
.queue-ticket-id, .route-preview, .chart-day { font-variant-numeric: tabular-nums; }

/* Small caps-style labels: Poppins needs a touch of weight + air when uppercase */
.eyebrow, .aside-kicker, .portal-header-note, .overview-kicker, .nav-heading,
.workspace-label, .sample-label, .chart-period { font-weight: 600; text-transform: uppercase; }

.portal-intro h1, .auth-content h1, .page-heading h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 66px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.portal-intro .portal-title-last { color: var(--green); }
.portal-copy { max-width: 480px; margin: 19px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.role-card {
  display: flex;
  min-height: 232px;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(28, 54, 41, .025);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.role-card:hover, .role-card:focus-visible {
  transform: translateY(-4px);
  border-color: #b7d4c2;
  box-shadow: var(--shadow);
  outline: none;
}

.role-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.role-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.role-card:nth-child(2) .role-mark { background: #edf2fb; color: #5470ab; }
.role-card:nth-child(3) .role-mark { background: #fbf1e5; color: #a76f2e; }
.role-card:nth-child(4) .role-mark { background: #f3edfa; color: #8060a5; }
.role-arrow { color: #99a59e; font-size: 18px; transition: transform .2s ease; }
.role-card:hover .role-arrow { transform: translate(2px, -2px); color: var(--green); }
.role-card-name { margin-bottom: 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.role-card-description { min-height: 40px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.role-card-link { margin-top: auto; padding-top: 17px; color: var(--green); font-size: 12px; font-weight: 700; }
.portal-footer { margin-top: 57px; color: #87918c; font-size: 11px; }
.portal-footer-link { color: #6d7b72; font-size: 11px; font-weight: 600; }
.portal-footer-link:hover { color: var(--green); }

.auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); background: white; }
.auth-panel { display: flex; min-height: 100vh; flex-direction: column; padding: 32px clamp(28px, 7vw, 100px); }
.auth-content { width: min(100%, 410px); margin: auto; padding: 48px 0; }
.back-link { display: inline-block; margin-bottom: 39px; color: #77827c; font-size: 12px; }
.back-link:hover { color: var(--green); }
.auth-content .eyebrow { display: block; margin-bottom: 12px; }
.auth-content h1 { font-size: 40px; letter-spacing: -0.04em; }
.auth-copy { margin: 11px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin: 17px 0 8px; color: #39453f; font-size: 12px; font-weight: 600; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #dfe6e1; border-radius: 9px; background: white; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
.auth-form input::placeholder { color: #a6afaa; }
.auth-form input:focus { border-color: #7eae90; box-shadow: 0 0 0 3px rgba(35, 123, 87, .1); }
.primary-button { min-height: 49px; margin-top: 25px; border: 0; border-radius: 9px; background: var(--green); color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s; }
.primary-button:hover { transform: translateY(-1px); background: var(--green-dark); }
.form-error { padding: 12px 14px; border: 1px solid #f1d4ce; border-radius: 8px; background: #fff5f2; color: #a64b37; font-size: 12px; line-height: 1.5; }
.auth-footnote { margin: 20px 0 0; color: #89938e; font-size: 11px; text-align: center; }
.auth-footer { width: min(100%, 410px); margin: 0 auto; padding: 20px 0 7px; color: #929b96; font-size: 11px; }
.auth-aside { position: relative; display: flex; min-height: 100vh; align-items: center; justify-content: center; overflow: hidden; padding: 50px; background: #1c4938; color: white; }
.auth-aside::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 22%, rgba(216, 238, 158, .17), transparent 38%), radial-gradient(ellipse at 17% 83%, rgba(112, 172, 137, .2), transparent 36%); content: ""; }
.aside-orbit { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(226, 244, 218, .12); border-radius: 50%; }
.orbit-one { top: -226px; right: -179px; }
.orbit-two { bottom: -315px; left: -152px; width: 540px; height: 540px; }
.aside-content { position: relative; z-index: 1; width: min(100%, 430px); }
.aside-kicker { color: #b9d994; }
.aside-content h2 { max-width: 390px; margin: 20px 0 14px; font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; }
.aside-content p { max-width: 355px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.8; }
.aside-caption { display: flex; align-items: center; gap: 9px; margin-top: 72px; color: rgba(255,255,255,.82); font-size: 11px; }
.aside-caption-dot, .status-dot, .chart-legend-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #a7d57d; }

.dashboard-body { background: #f7f9f7; }
.dashboard-layout { display: grid; min-height: 100vh; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 23px 15px 15px; border-right: 1px solid var(--line); background: white; }
.sidebar-brand { padding: 0 8px 26px; font-size: 17px; }
.sidebar-brand .brand-mark { width: 33px; height: 33px; border-radius: 11px; font-size: 15px; }
.workspace-switcher { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px 9px; border: 1px solid var(--line); border-radius: 10px; }
.workspace-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.workspace-info, .profile-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.workspace-name { overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace-label { color: #98a19b; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.workspace-chevron { color: #89948d; font-size: 15px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; }
.nav-heading { margin: 0 0 8px 10px; color: #a0aaa4; font-size: 11px; font-weight: 700; letter-spacing: 1.25px; }
.nav-link { display: flex; min-height: 39px; align-items: center; gap: 11px; padding: 0 10px; border-radius: 8px; color: #69756e; font-size: 13px; font-weight: 500; transition: color .16s, background .16s; }
.nav-link:hover { background: #f6f8f6; color: var(--green); }
.nav-link-active, .nav-link-active:hover { background: #edf5ef; color: var(--green-dark); font-weight: 700; }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: #f5f7f5; color: #819087; font-size: 10px; font-weight: 700; }
.nav-link-active .nav-icon { background: white; color: var(--green); }
.sidebar-bottom { margin-top: auto; }
.help-card { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 14px; padding: 13px; border: 1px solid #edf0ed; border-radius: 10px; background: #fafbfa; }
.help-icon { display: grid; width: 22px; height: 22px; margin-bottom: 10px; place-items: center; border-radius: 7px; background: #eaf3ec; color: var(--green); font-size: 12.5px; font-weight: 700; }
.help-title { font-size: 12.5px; font-weight: 700; }
.help-copy { margin-top: 4px; color: #89938d; font-size: 11.5px; }
.help-link { margin-top: 11px; color: var(--green); font-size: 11.5px; font-weight: 700; }
.profile-card { display: flex; align-items: center; gap: 9px; padding: 12px 6px 2px; border-top: 1px solid var(--line); }
.avatar, .topbar-avatar { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #eee7dc; color: #816d50; font-size: 11.5px; font-weight: 700; }
.profile-name { overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; }
.profile-role { color: #909a94; font-size: 11.5px; }
.logout-button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #7d8981; cursor: pointer; }
.logout-button:hover { border-color: #c5d8ca; color: var(--green); }
.dashboard-main { min-width: 0; }
.topbar { display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 50px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.84); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #3c4941; font-size: 12.5px; font-weight: 600; }
.breadcrumb-muted, .breadcrumb-divider { color: #98a29c; font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: 17px; }
.status-pill { display: flex; align-items: center; gap: 7px; color: #78847c; font-size: 11.5px; }
.status-dot { width: 6px; height: 6px; background: #69ad77; }
.topbar-avatar { width: 31px; height: 31px; }
.dashboard-content { width: min(1320px, 100%); margin: 0 auto; padding: 36px clamp(20px, 4vw, 50px) 42px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.page-heading .eyebrow { display: block; margin-bottom: 10px; font-size: 11px; }
.page-heading h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.035em; }
.page-description { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; }
.sample-label { padding: 7px 9px; border: 1px solid #e8eadc; border-radius: 6px; background: #fbfaef; color: #998447; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 11px; background: white; }
.metric-card { display: flex; min-height: 117px; flex-direction: column; padding: 17px 17px 14px; }
.metric-label { color: #77837b; font-size: 11.5px; font-weight: 500; }
.metric-value { margin: 9px 0 5px; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.metric-detail { color: #8a958e; font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .82fr); gap: 14px; margin-top: 16px; }
.panel { min-width: 0; padding: 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.panel-subtitle { margin: 5px 0 0; color: #929d96; font-size: 11px; }
.panel-action { padding-top: 3px; color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.activity-list { margin-top: 11px; }
.activity-row { display: grid; min-height: 57px; grid-template-columns: 29px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; border-top: 1px solid #f0f2f0; }
.activity-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #eef5ef; color: var(--green); font-size: 11.5px; font-weight: 700; }
.activity-row:nth-child(2) .activity-mark { background: #fbf2e5; color: #a87836; }
.activity-row:nth-child(3) .activity-mark { background: #edf1fa; color: #5b73a6; }
.activity-row:nth-child(4) .activity-mark { background: #f2edf8; color: #8063a1; }
.activity-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.activity-title { overflow: hidden; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-detail { overflow: hidden; color: #909a94; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-status { padding: 5px 7px; border-radius: 5px; background: #f2f5f2; color: #66756b; font-size: 10px; white-space: nowrap; }
.activity-amount { min-width: 53px; color: #4b5850; font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
.chart-period { padding: 5px 7px; border: 1px solid #edf0ed; border-radius: 5px; color: #7e8982; font-size: 10px; font-weight: 700; letter-spacing: .35px; white-space: nowrap; }
.chart-value { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.7px; }
.chart-change { padding: 4px 6px; border-radius: 5px; background: #edf6ef; color: var(--green); font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0; }
.chart-area { position: relative; height: 128px; margin-top: 14px; }
.chart-gridline { position: absolute; right: 0; left: 0; height: 1px; background: #f0f2ef; }
.chart-gridline:nth-child(1) { top: 10px; }
.chart-gridline:nth-child(2) { top: 48px; }
.chart-gridline:nth-child(3) { top: 86px; }
.chart-bars { position: absolute; inset: 0 0 19px; display: flex; align-items: flex-end; justify-content: space-around; }
.chart-column { display: flex; width: 22px; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.chart-bar { width: 17px; min-height: 10px; border-radius: 5px 5px 2px 2px; background: #c9dfce; }
.bar-1 { height: 33%; }.bar-2 { height: 46%; }.bar-3 { height: 57%; }.bar-4 { height: 67%; }.bar-5 { height: 77%; }.bar-6 { height: 89%; }.bar-7 { height: 100%; background: #39845d; }
.chart-day { position: absolute; bottom: -18px; color: #929d96; font-size: 10px; }
.chart-legend { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #849087; font-size: 11px; }
.chart-legend-dot { width: 6px; height: 6px; background: #39845d; }
.admin-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.admin-insight-panel { min-height: 238px; }
.admin-vertical-chart { display: grid; height: 155px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 19px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #f0f2ef 38px, transparent 39px); }
.admin-weekday { display: grid; height: 100%; grid-template-rows: 15px minmax(0, 1fr) 15px; justify-items: center; gap: 5px; }
.admin-bar-value, .admin-bar-day { color: #849087; font-size: 9px; white-space: nowrap; }
.admin-bar-track { display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: center; }
.admin-bar-fill { width: min(18px, 70%); min-height: 8px; border-radius: 4px 4px 2px 2px; background: #c9dfce; }
.orders-bar-1 { height: 58%; }.orders-bar-2 { height: 67%; }.orders-bar-3 { height: 64%; }.orders-bar-4 { height: 76%; }.orders-bar-5 { height: 82%; }.orders-bar-6 { height: 100%; background: #39845d; }.orders-bar-7 { height: 85%; }
.admin-breakdown-list { display: grid; gap: 13px; margin-top: 20px; }
.admin-breakdown-row { display: grid; gap: 6px; }
.admin-breakdown-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #59665e; font-size: 10.5px; }
.admin-breakdown-value { color: #344139; font-weight: 700; white-space: nowrap; }
.admin-progress-track { display: block; height: 6px; overflow: hidden; border-radius: 5px; background: #edf1ed; }
.admin-progress-fill { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: #39845d; }
.zone-bar-1 { width: 98.6%; }.zone-bar-2 { width: 97.9%; background: #5d9b72; }.zone-bar-3 { width: 96.8%; background: #82ad8d; }.zone-bar-4 { width: 94.2%; background: #a7bea9; }
.mix-delivered { width: 96.2%; background: #39845d; }.mix-preparing { width: 1.6%; background: #d29a4a; }.mix-transit { width: 1.9%; background: #6c8bc0; }.mix-new { width: .4%; background: #a58ac5; }
.admin-revenue-summary { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.admin-revenue-total { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.5px; }
.admin-revenue-change { padding: 5px 7px; border-radius: 5px; background: #edf6ef; color: var(--green); font-size: 10px; font-weight: 700; }
.admin-revenue-footer { display: grid; grid-template-columns: 1fr auto; gap: 12px 8px; padding-top: 15px; border-top: 1px solid #eef1ee; color: #849087; font-size: 10.5px; }
.admin-revenue-footer strong { color: #46534b; text-align: right; }
.bottom-note { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 11px 13px; border: 1px solid #e7ece7; border-radius: 8px; background: #f0f5f1; color: #738078; font-size: 11px; line-height: 1.5; }
.bottom-note-mark { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #dceade; color: var(--green); font-size: 11px; font-weight: 700; }
.admin-management { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.admin-module-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 20px; border-bottom: 1px solid var(--line); }
.admin-module-kicker { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.admin-module-toolbar h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.admin-module-controls { display: flex; align-items: center; gap: 9px; }
.admin-search, .admin-field input { min-height: 37px; padding: 0 11px; border: 1px solid #e3e8e3; border-radius: 7px; background: white; color: #344139; font: inherit; font-size: 11.5px; }
.admin-search { width: min(230px, 30vw); }
.admin-search:focus, .admin-field input:focus { outline: 2px solid #bed7c4; outline-offset: 1px; }
.admin-add-button, .admin-cancel-button { min-height: 36px; padding: 0 12px; border: 1px solid var(--green); border-radius: 7px; background: var(--green); color: white; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.admin-add-button:hover { filter: brightness(.94); }
.admin-feedback { min-height: 0; margin: 0; color: var(--green); font-size: 11px; }
.admin-feedback:not(:empty) { padding: 10px 20px 0; }
.admin-feedback-error { color: #a23e3e; }
.admin-table-wrap { overflow-x: auto; }
.admin-grid { display: grid; min-width: max(100%, 790px); grid-template-columns: repeat(var(--admin-grid-columns, 5), minmax(96px, 1fr)) minmax(190px, auto); align-items: center; }
.admin-management.is-readonly .admin-grid { min-width: max(100%, 640px); grid-template-columns: repeat(var(--admin-grid-columns, 5), minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-3 .admin-grid { grid-template-columns: repeat(3, minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-4 .admin-grid { grid-template-columns: repeat(4, minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-5 .admin-grid { grid-template-columns: repeat(5, minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-6 .admin-grid { grid-template-columns: repeat(6, minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-7 .admin-grid { grid-template-columns: repeat(7, minmax(96px, 1fr)); }
.admin-management.is-readonly.admin-cols-8 .admin-grid { grid-template-columns: repeat(8, minmax(96px, 1fr)); }
.admin-grid-header { background: #fafbfa; color: #758179; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.admin-grid-cell { min-width: 0; padding: 13px 15px; overflow-wrap: anywhere; border-bottom: 1px solid #eef1ee; font-size: 11.5px; }
.admin-grid-header .admin-grid-cell { font-size: 10px; }
.admin-grid-row .admin-grid-cell { color: #46534b; }
.admin-grid-body > .admin-grid-row:last-child .admin-grid-cell { border-bottom: 0; }
.admin-row-actions { display: flex; gap: 6px; }
.admin-row-button { min-height: 27px; padding: 0 8px; border: 1px solid #e3e8e3; border-radius: 5px; background: white; color: #536159; font: inherit; font-size: 10.5px; cursor: pointer; }
.admin-row-button:hover { border-color: #b7cfbd; color: var(--green); }
.admin-delete-button { color: #a84c4c; }
.admin-delete-button:hover { border-color: #e4baba; color: #963c3c; }
.admin-empty-row { grid-template-columns: 1fr; }
.admin-empty-cell { display: grid; height: 76px; grid-column: 1 / -1; place-items: center; color: #849087 !important; font-size: 11.5px; }
.admin-record-count { margin: 0; padding: 11px 20px; border-top: 1px solid var(--line); color: #849087; font-size: 10.5px; }
.admin-dialog { width: min(480px, calc(100% - 32px)); max-width: none; max-height: min(80vh, 720px); padding: 0; overflow: auto; border: 0; border-radius: 12px; background: transparent; color: inherit; }
.admin-dialog::backdrop { background: rgba(26, 37, 29, .45); }
.admin-dialog-panel { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 60px rgba(30, 45, 34, .18); }
.admin-dialog-panel h2 { margin: 0 0 17px; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.admin-editor-form { display: grid; gap: 12px; }
.admin-field { display: grid; gap: 6px; color: #647168; font-size: 11px; font-weight: 600; }
.admin-field input { width: 100%; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.admin-cancel-button { border-color: #e0e6e1; background: white; color: #5e6a62; }
.admin-detail-row { display: grid; grid-template-columns: minmax(110px, .7fr) 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1ee; font-size: 11.5px; }
.admin-detail-row dt { color: #839087; }
.admin-detail-row dd { margin: 0; color: #344139; font-weight: 600; }
.admin-dialog-panel > .admin-add-button { display: block; margin: 17px 0 0 auto; }

/* Locations and OpenStreetMap routing */
.locations-shell { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 14px; margin-top: 16px; align-items: start; }
.locations-map-panel { padding: 0; overflow: hidden; }
.locations-map-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.locations-map-header h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.locations-map-tools { display: flex; align-items: center; gap: 14px; }
.locations-legend { display: flex; align-items: center; gap: 10px; }
.locations-legend-item { display: flex; align-items: center; gap: 5px; color: #7d8881; font-size: 10px; white-space: nowrap; }
.locations-legend-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #b77332; }
.locations-legend-dot[data-kind="dropoff"] { background: #5873b7; }
.locations-legend-dot[data-kind="rider"] { background: #7256a5; }
.locations-fit-button { min-height: 30px; padding: 0 10px; border: 1px solid #e3e8e3; border-radius: 6px; background: white; color: #536159; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.locations-fit-button:hover { border-color: #b7cfbd; color: var(--green); }
.locations-map-canvas { position: relative; height: clamp(340px, 48vh, 520px); background: #e7eee8; }
.locations-map-canvas .leaflet-container { width: 100%; height: 100%; font-family: var(--font-sans); }
.locations-map-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: #7d8881; font-size: 11.5px; text-align: center; }
.route-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fbfcfb; }
.route-stat { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.route-stat-wide { padding-left: 12px; border-left: 1px solid #edf0ed; }
.route-stat-label { color: #8b968f; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.route-stat-value { overflow: hidden; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.route-pricing-note { margin: 0; padding: 9px 18px 12px; border-top: 1px dashed #e8ece8; background: #fbfcfb; color: #7f8b83; font-size: 10.5px; line-height: 1.5; }
.route-pricing-note:empty { display: none; }
.route-source[data-tone="osrm"] { color: var(--green-dark); }
.route-source[data-tone="estimate"] { color: #a76e2c; }
.locations-side { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.route-fields { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 9px; align-items: center; margin-top: 15px; }
.route-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.route-field > span { color: #7f8b83; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.route-select, .route-search-input { width: 100%; min-height: 37px; padding: 0 10px; border: 1px solid #e3e8e3; border-radius: 7px; background: white; color: #344139; font: inherit; font-size: 11.5px; }
.route-select:focus, .route-search-input:focus { border-color: #9dc0a8; outline: 2px solid #dceade; outline-offset: 0; }
.route-swap { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-height: 34px; border: 1px solid #e3e8e3; border-radius: 7px; background: #fafbfa; color: #6d7971; font-size: 15px; cursor: pointer; }
.route-swap:hover { border-color: #b7cfbd; color: var(--green); }
.route-actions { display: flex; gap: 8px; margin-top: 12px; }
.route-primary, .route-locate { min-height: 37px; flex: 1; padding: 0 10px; border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.route-primary { border: 1px solid var(--green); background: var(--green); color: white; }
.route-primary:hover { background: var(--green-dark); }
.route-locate { border: 1px solid #e3e8e3; background: white; color: #536159; }
.route-locate:hover { border-color: #b7cfbd; color: var(--green); }
.route-primary:disabled, .route-locate:disabled, .locations-fit-button:disabled { opacity: .55; cursor: default; }
.route-status { min-height: 17px; margin: 11px 0 0; color: #7f8b83; font-size: 10.5px; line-height: 1.5; }
.route-status[data-tone="loading"] { color: #8a6a2f; }
.route-status[data-tone="ok"] { color: var(--green-dark); }
.route-status[data-tone="error"] { color: #a84c4c; }
.route-search { margin-top: 13px; padding-top: 13px; border-top: 1px solid #f0f2f0; }
.route-search-results { display: flex; max-height: 168px; flex-direction: column; gap: 2px; margin-top: 8px; overflow: auto; }
.route-search-results:empty { display: none; }
.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f2f4f2; }
.search-result:last-child { border-bottom: 0; }
.search-result-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.search-result-name { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.search-result-label { display: -webkit-box; overflow: hidden; color: #8b968f; font-size: 10px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-result-actions { display: flex; gap: 4px; }
.search-result-button { min-height: 24px; padding: 0 7px; border: 1px solid #e3e8e3; border-radius: 5px; background: white; color: #536159; font: inherit; font-size: 9.5px; font-weight: 600; cursor: pointer; }
.search-result-button:hover { border-color: #b7cfbd; color: var(--green); }
.search-result-empty { padding: 8px 4px; color: #8b968f; font-size: 10.5px; }
.route-steps { display: flex; max-height: 232px; flex-direction: column; margin: 12px 0 0; padding: 0; overflow: auto; list-style: none; }
.route-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 9px 0; border-top: 1px solid #f0f2f0; }
.route-step:first-child { border-top: 0; }
.route-step-index { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); font-size: 9.5px; font-weight: 700; }
.route-step-instruction { color: #3f4c44; font-size: 10.5px; line-height: 1.5; }
.route-step-meta { color: #8b968f; font-size: 9.5px; white-space: nowrap; }
.route-step-empty { padding: 14px 0 2px; color: #8b968f; font-size: 10.5px; }
.locations-list-panel { grid-column: 1 / -1; }
.locations-list { display: flex; flex-direction: column; margin-top: 12px; }
.location-row { display: grid; min-height: 53px; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border-top: 1px solid #f0f2f0; }
.location-row:first-child { border-top: 0; }
.location-row.is-origin { background: linear-gradient(90deg, rgba(35, 123, 87, .06), transparent 60%); }
.location-row.is-destination { background: linear-gradient(90deg, rgba(210, 138, 67, .08), transparent 60%); }
.location-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #eef5ef; color: var(--green); font-size: 10px; font-weight: 700; }
.location-mark[data-kind="store"] { background: #fbf1e5; color: #a76f2e; }
.location-mark[data-kind="dropoff"] { background: #edf1fa; color: #5b73a6; }
.location-mark[data-kind="rider"] { background: #f2edf8; color: #8063a1; }
.location-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.location-name { font-size: 11.5px; font-weight: 700; }
.location-detail { overflow: hidden; color: #909a94; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.location-tag { padding: 4px 7px; border-radius: 5px; background: #f2f5f2; color: #66756b; font-size: 9.5px; white-space: nowrap; }
.location-actions { display: flex; gap: 5px; }
.location-button { min-height: 26px; padding: 0 8px; border: 1px solid #e3e8e3; border-radius: 5px; background: white; color: #536159; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; }
.location-button:hover { border-color: #b7cfbd; color: var(--green); }
.map-marker { background: none; border: 0; }
.map-marker-circle { display: grid; width: 28px; height: 28px; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--green); color: white; font-size: 9.5px; font-weight: 700; box-shadow: 0 3px 10px rgba(23, 35, 31, .28); }
.map-marker-circle[data-kind="store"] { background: #b77332; }
.map-marker-circle[data-kind="dropoff"] { background: #5873b7; }
.map-marker-circle[data-kind="rider"] { background: #7256a5; }
.map-marker-start .map-marker-circle { border-radius: 8px; background: #237b57; }
.map-marker-end .map-marker-circle { border-radius: 8px; background: #d2603a; }
.map-marker-current .map-marker-circle { box-shadow: 0 0 0 6px rgba(114, 86, 165, .18), 0 3px 10px rgba(23, 35, 31, .28); }
.map-popup { color: var(--ink); font-family: var(--font-sans); font-size: 11px; line-height: 1.5; }
.map-popup-name { display: block; font-size: 11.5px; font-weight: 700; }
.map-popup-address { display: block; margin-top: 2px; color: #7f8b83; }
.map-popup-actions { display: flex; gap: 5px; margin-top: 8px; }
.map-popup-button { min-height: 24px; padding: 0 8px; border: 1px solid #e3e8e3; border-radius: 5px; background: white; color: #536159; font: inherit; font-size: 9.5px; font-weight: 600; cursor: pointer; }
.map-popup-button:hover { border-color: #b7cfbd; color: var(--green); }
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 10px 30px rgba(23, 35, 31, .18); }
.leaflet-popup-content { margin: 11px 13px; }
.leaflet-control-attribution { font-family: var(--font-sans); font-size: 9px; }

.dashboard-body[data-role="customer"] { --green: #5873b7; --green-dark: #435d9c; --green-soft: #edf1fb; --chart-muted: #d7e0f5; }
.dashboard-body[data-role="merchant"] { --green: #b77332; --green-dark: #965a25; --green-soft: #fbf1e7; --chart-muted: #f1ddc6; }
.dashboard-body[data-role="rider"] { --green: #7256a5; --green-dark: #5d438d; --green-soft: #f1edfa; --chart-muted: #e5dcf2; }
.role-overview { display: flex; min-height: 137px; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 15px; padding: 21px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.role-overview-copy { min-width: 0; }
.overview-kicker { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.role-overview h2 { margin: 8px 0 5px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.role-overview p { margin: 0; color: #78847c; font-size: 11.5px; line-height: 1.6; }
.admin-overview { min-height: 121px; border-color: #e2ece4; background: linear-gradient(110deg, #f3f8f2, #fff 70%); }
.admin-overview .role-overview-copy { max-width: 350px; }
.admin-overview-stats { display: flex; align-items: center; gap: clamp(16px, 3vw, 42px); }
.overview-stat { display: flex; min-width: 65px; flex-direction: column; gap: 5px; }
.overview-stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
.overview-stat-label { color: #829087; font-size: 10px; white-space: nowrap; }
.customer-overview { position: relative; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(250px, 1fr) auto; gap: 20px; border-color: #e3e9f5; background: linear-gradient(110deg, #f1f4fc, #fff 80%); }
.customer-overview .overview-link { grid-column: 3; grid-row: 1; align-self: end; }
.delivery-progress { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.progress-step { position: relative; display: flex; align-items: center; gap: 6px; color: #97a0aa; font-size: 10px; white-space: nowrap; }
.progress-step::before { width: 8px; height: 8px; flex: 0 0 auto; border: 2px solid #dfe4ea; border-radius: 50%; background: white; content: ""; }
.progress-done::before { border-color: #7590d0; background: #7590d0; }
.progress-current { color: #4b65a8; font-weight: 700; }
.progress-current::before { border-color: #5873b7; box-shadow: 0 0 0 3px #dce4f7; }
.overview-link { display: inline-block; color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.merchant-overview { border-color: #f0e5d7; background: linear-gradient(110deg, #fcf6ef, #fff 80%); }
.merchant-overview .role-overview-copy { max-width: 265px; }
.queue-preview { display: flex; flex: 1; justify-content: flex-end; gap: 8px; }
.queue-ticket { display: flex; min-width: 125px; flex-direction: column; gap: 6px; padding: 11px; border: 1px solid #f0e9df; border-radius: 8px; background: rgba(255,255,255,.82); }
.queue-ticket-id { font-size: 11px; font-weight: 700; }
.queue-ticket-detail { color: #89928c; font-size: 10px; white-space: nowrap; }
.queue-ticket-status { align-self: flex-start; padding: 4px 6px; border-radius: 4px; background: #fbf0df; color: #a76e2c; font-size: 9px; font-weight: 700; }
.queue-empty { flex: 1; margin: 0; color: #89928c; font-size: 11px; }
.rider-overview { min-height: 153px; border-color: #e8e2f1; background: linear-gradient(110deg, #f5f1fb, #fff 70%); }
.rider-overview .role-overview-copy { max-width: 360px; }
.rider-overview .overview-link { margin-top: 12px; }
.route-preview { position: relative; display: flex; width: 180px; height: 92px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #ece7f4; border-radius: 9px; background: repeating-linear-gradient(0deg, #faf9fc, #faf9fc 15px, #f4f1f8 16px, #f4f1f8 17px); }
.route-line { position: absolute; right: 40px; left: 40px; height: 2px; background: repeating-linear-gradient(90deg, #ab98c9, #ab98c9 5px, transparent 5px, transparent 9px); }
.route-stop { z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; border: 3px solid white; border-radius: 50%; background: #7256a5; box-shadow: 0 0 0 1px #ded5ec; color: white; font-size: 5px; font-weight: 700; }
.route-dropoff { background: #d28a43; box-shadow: 0 0 0 1px #f0dfcc; }
.chart-panel .chart-bar { background: var(--chart-muted); }
.chart-panel .bar-7 { background: var(--green); }
.nav-link-active, .nav-link-active:hover { background: var(--green-soft); color: var(--green-dark); }
.nav-link-active .nav-icon { color: var(--green); }
.metric-card:first-child .metric-value { color: var(--green-dark); }

@media (min-width: 1500px) {
  .dashboard-content { padding-top: 48px; }
  .metric-card { min-height: 129px; padding: 20px; }
  .activity-row { min-height: 63px; }
  .chart-area { height: 148px; }
}

@media (max-width: 1000px) {
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-card { min-height: 208px; }
  .portal-intro { margin-top: 58px; }
  .dashboard-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .customer-overview .overview-link { grid-column: 2; grid-row: 2; }
  .merchant-overview { flex-wrap: wrap; }
  .merchant-overview .overview-link { margin-left: auto; }
}

@media (max-width: 700px) {
  .portal { width: min(100% - 32px, 500px); padding-top: 21px; }
  .portal-header-note { font-size: 10px; letter-spacing: 1px; }
  .portal-intro { margin: 52px 0 25px; }
  .portal-intro h1 { font-size: clamp(40px, 11vw, 56px); letter-spacing: -0.045em; }
  .portal-copy { font-size: 14px; }
  .role-grid { gap: 10px; }
  .role-card { min-height: 195px; padding: 15px; }
  .role-card-top { margin-bottom: 20px; }
  .role-card-name { font-size: 15px; }
  .role-card-description { font-size: 12.5px; }
  .portal-footer { align-items: flex-start; gap: 12px; margin-top: 33px; font-size: 11px; }
  .admin-module-toolbar { align-items: stretch; flex-direction: column; padding: 15px; }
  .admin-module-controls { align-items: stretch; flex-direction: column; }
  .admin-search { width: 100%; }
  .admin-add-button { align-self: flex-start; }
  .admin-feedback:not(:empty) { padding: 9px 15px 0; }
  .admin-grid-cell { padding: 11px 12px; }
  .admin-record-count { padding: 10px 15px; }
  .admin-analytics-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-insight-panel { min-height: 0; padding: 15px; }
  .admin-vertical-chart { height: 145px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-panel { min-height: 100vh; padding: 22px 26px; }
  .auth-content { padding: 40px 0; }
  .auth-footer { margin-top: 0; }
  .auth-aside { display: none; }
  .role-overview { align-items: flex-start; flex-direction: column; gap: 16px; padding: 17px; }
  .admin-overview-stats { width: 100%; justify-content: space-between; gap: 8px; }
  .customer-overview { display: flex; }
  .customer-overview .overview-link { align-self: flex-start; }
  .delivery-progress { width: 100%; }
  .queue-preview { width: 100%; justify-content: flex-start; }
  .queue-ticket { min-width: 0; flex: 1; }
  .queue-ticket-detail { white-space: normal; }
  .route-preview { width: 100%; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 13px 15px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-brand { padding: 0 3px 12px; }
  .workspace-switcher, .sidebar-bottom { display: none; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; gap: 5px; margin-top: 0; padding-bottom: 1px; scrollbar-width: thin; }
  .nav-heading { display: none; }
  .nav-link { min-height: 34px; flex: 0 0 auto; gap: 6px; padding: 0 8px; font-size: 11.5px; }
  .nav-icon { width: 19px; height: 19px; }
  .topbar { height: 53px; padding: 0 17px; }
  .status-pill { font-size: 0; }
  .status-dot { width: 8px; height: 8px; }
  .topbar-right { gap: 11px; }
  .dashboard-content { padding: 24px 16px 30px; }
  .page-heading h1 { font-size: 26px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric-card { min-height: 104px; padding: 13px; }
  .metric-value { font-size: 22px; }
  .panel { padding: 14px; }
  .activity-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; }
  .activity-amount { display: none; }
}

@media (max-width: 1000px) {
  .locations-shell { grid-template-columns: minmax(0, 1fr); }
  .locations-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 700px) {
  .locations-map-header { align-items: flex-start; flex-direction: column; }
  .locations-map-tools { width: 100%; justify-content: space-between; }
  .locations-map-canvas { height: 340px; }
  .route-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-stat-wide { grid-column: 1 / -1; padding-top: 8px; padding-left: 0; border-top: 1px solid #edf0ed; border-left: 0; }
  .locations-side { display: flex; }
  .location-row { grid-template-columns: 28px minmax(0, 1fr) auto; padding-top: 9px; }
  .location-actions { grid-column: 2 / -1; justify-content: flex-start; padding-bottom: 9px; }
  .location-tag { justify-self: end; }
  .route-steps { max-height: 200px; }
}

@media (max-width: 390px) {
  .role-card { min-height: 189px; padding: 12px; }
  .role-card-link { font-size: 11.5px; }
  .sample-label { font-size: 9px; }
  .page-heading h1 { font-size: 23px; }
  .locations-legend { gap: 7px; }
  .locations-legend-item { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}