/*
 * Silk Delights — shared design for every page.
 *
 * Blush & berry: a light blush top bar with berry writing, berry for main actions,
 * the brand gold as a fine accent, and green / amber / red only for money and order status.
 * The top bar ends in a gold stitched seam: the one decorative touch, everything else stays quiet.
 */

:root {
  /* Blush & berry, chosen by the team. Variable names kept from the first version. */
  --sd-mulberry: #8E2A52;        /* berry: main buttons, active tab, totals */
  --sd-mulberry-dark: #742344;
  --sd-mulberry-soft: #FCEBF0;   /* blush highlight */
  --sd-bar: #F8DDE6;             /* top bar */
  --sd-bar-text: #7E2348;
  --sd-bar-muted: #9B5A75;
  --sd-gold: #C99A3E;
  --sd-gold-soft: #F5EACB;
  --sd-ink: #2A2228;
  --sd-ink-2: #52444A;
  --sd-muted: #6B5B62;
  --sd-line: #F2DCE4;
  --sd-line-strong: #E6C6D2;
  --sd-page: #FBEEF3;             /* blush page background */
  --sd-blush: #FDF3F7;            /* panel heading band, table heads */
  --sd-blush-2: #FCE6EE;          /* secondary buttons, choice switches */
  --sd-surface: #FFFFFF;
  --sd-green: #1E7A4B;
  --sd-amber: #A86400;
  --sd-red: #B42318;
  --sd-radius: 12px;
  --sd-radius-sm: 8px;
  --sd-focus: 0 0 0 3px rgba(201, 154, 62, 0.30);
  --sd-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Page ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }

body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--sd-page) !important;
  color: var(--sd-ink);
  font-family: var(--sd-font) !important;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sd-font) !important;
  color: var(--sd-ink);
  letter-spacing: 0;
}

#appContainer { min-height: 100vh; }

/* Money and counts line up in columns */
td, th, .sd-num, [id^="d"][id$="Rev"], [id^="ri"], [id^="pay"] { font-variant-numeric: tabular-nums; }

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

.sd-appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sd-bar);
  color: var(--sd-bar-text);
}
.sd-appbar::after {
  /* the gold stitched seam */
  content: "";
  display: block;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sd-gold) 0 9px, transparent 9px 14px);
  opacity: 0.9;
}
.sd-appbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sd-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sd-brand-logo {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; padding: 3px; object-fit: contain; flex-shrink: 0;
}
.sd-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sd-brand-name { font-size: 12px; font-weight: 500; color: var(--sd-bar-muted); }
.sd-brand-page {
  font-size: 18px; font-weight: 600; color: var(--sd-bar-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-appbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sd-user { font-size: 13px; color: var(--sd-bar-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-appbar .sd-logout,
#logoutBtn.sd-logout {
  background: transparent !important;
  color: var(--sd-bar-text) !important;
  border: 1px solid rgba(126, 35, 72, 0.35) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 34px;
  width: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.sd-appbar .sd-logout:hover { background: rgba(126, 35, 72, 0.08) !important; }

/* ---------- Page tabs ---------- */

.sd-tabs {
  background: #FFFAFC !important;
  border-bottom: 1px solid var(--sd-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sd-tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sd-tabs-inner::-webkit-scrollbar { display: none; }
.sd-tabs .tab-button {
  display: inline-block;
  padding: 13px 12px 11px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sd-muted) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
}
.sd-tabs .tab-button:hover { color: var(--sd-ink) !important; background: transparent !important; }
.sd-tabs .tab-button.active {
  color: var(--sd-mulberry) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--sd-gold) !important;
}
.sd-tabs .tab-button[hidden] { display: none !important; }
/* Tabs each role can't open are hidden from the first moment (role saved at login) */
html[data-sd-role="manager"] .sd-tabs [data-sd-page="index.html"],
html[data-sd-role="manager"] .sd-tabs [data-sd-page="delivery.html"],
html[data-sd-role="manager"] .sd-tabs [data-sd-page="admin.html"],
html[data-sd-role="seller"] .sd-tabs [data-sd-page="index.html"],
html[data-sd-role="seller"] .sd-tabs [data-sd-page="delivery.html"],
html[data-sd-role="seller"] .sd-tabs [data-sd-page="manager.html"],
html[data-sd-role="seller"] .sd-tabs [data-sd-page="admin.html"],
html[data-sd-role="driver"] .sd-tabs [data-sd-page="index.html"],
html[data-sd-role="driver"] .sd-tabs [data-sd-page="manager.html"],
html[data-sd-role="driver"] .sd-tabs [data-sd-page="admin.html"] { display: none !important; }

/* ---------- View buttons (second row under the page tabs) ---------- */

.sd-views {
  display: flex;
  gap: 6px;
  padding: 0 0 12px;
  margin: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sd-views::-webkit-scrollbar { display: none; }
.sd-views button {
  flex: 1 0 auto;
  font-family: var(--sd-font) !important;
  font-size: 14px;
  font-weight: 500;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px !important;
  border: 1px solid #F1CFDC;
  background: var(--sd-blush-2);
  color: var(--sd-mulberry);
  white-space: nowrap;
}
.sd-views button.is-on { background: var(--sd-mulberry); border-color: var(--sd-mulberry); color: #fff; font-weight: 600; }
@media (min-width: 640px) { .sd-views button { flex: 0 0 auto; padding: 0 22px; } }
@media (max-width: 639px) { .sd-views button { padding: 0 10px; font-size: 13.5px; } }
/* The assistant manager: Sales and Manager tabs only; on the Manager page only Today (no view buttons) */
html[data-sd-role="assistant"] .sd-tabs [data-sd-page="index.html"],
html[data-sd-role="assistant"] .sd-tabs [data-sd-page="delivery.html"],
html[data-sd-role="assistant"] .sd-tabs [data-sd-page="admin.html"],
html[data-sd-role="assistant"] [data-sd-views] { display: none !important; }
[hidden] { display: none !important; }

.sd-limit-btn { width: 100%; margin-top: 10px; }

/* A summary strip of key numbers */
.sd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 900px) { .sd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-kpi { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); padding: 12px 14px; }
.sd-kpi .sd-figure-value { font-size: 22px; }
.sd-kpi-sub { font-size: 12.5px; color: var(--sd-muted); }
.sd-paytotal { background: var(--sd-blush); border-color: var(--sd-line-strong); }
/* Salaries: notice when the chosen month has not started, or slips were saved under such a month */
.sd-warnbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #FDF6EC; border: 1px solid #F4CF8E; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.sd-warnbox p { flex: 1 1 260px; margin: 0; font-size: 13.5px; color: var(--sd-ink-2); }
.sd-warnbox strong { color: var(--sd-amber); }
.sd-warnbox .sd-msg { flex-basis: 100%; margin: 0; }
.sd-warnbox .sd-msg:empty { display: none; }
.sd-paytotal .sd-figure-value { font-size: 26px; color: var(--sd-mulberry); margin: 2px 0; }
.sd-paytotal #payrollTotalNote { margin-top: 6px; }
.sd-paytotal #payrollTotalNote:empty { display: none; }

/* Compact rows that open on tap (outstanding suppliers) */
.sd-rowlist { margin: 0; }
.sd-rowlist > details { border-bottom: 1px solid var(--sd-line); }
.sd-rowlist > details:last-child { border-bottom: 0; }
.sd-rowlist summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  min-height: 44px;
}
.sd-rowlist summary::-webkit-details-marker { display: none; }
.sd-rowlist summary:focus-visible { outline: none; box-shadow: var(--sd-focus); border-radius: 8px; }
.sd-row-name { font-weight: 600; color: var(--sd-ink); }
.sd-row-sub { font-size: 12.5px; color: var(--sd-muted); }
.sd-row-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sd-row-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-row-chev { color: var(--sd-mulberry); transition: transform .15s ease; font-size: 13px; }
.sd-rowlist details[open] .sd-row-chev { transform: rotate(180deg); }
.sd-row-body { background: var(--sd-blush); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; color: var(--sd-ink-2); }
.sd-row-body .sd-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Password shown as a label (Admin Reports, login accounts) */
.sd-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: var(--sd-blush); border: 1px solid var(--sd-line); border-radius: 6px; padding: 2px 8px; color: var(--sd-ink); user-select: all; }

/* Small figure cards (Manager > Today > Cash & logistics) */
.sd-tiles { display: grid; gap: 8px; margin-bottom: 8px; }
.sd-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 640px) { .sd-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-tile { background: var(--sd-blush); border: 1px solid var(--sd-line); border-radius: 10px; padding: 10px 8px; text-align: center; min-width: 0; }
.sd-tile-label { font-size: 11.5px; font-weight: 600; color: var(--sd-muted); line-height: 1.25; }
.sd-tile-value { font-size: 19px; font-weight: 700; color: var(--sd-ink); font-variant-numeric: tabular-nums; margin-top: 3px; }
.sd-tile.is-brand { background: var(--sd-blush-2); border-color: #F1CFDC; }
.sd-tile.is-brand .sd-tile-label, .sd-tile.is-brand .sd-tile-value { color: var(--sd-mulberry); }
.sd-tile.is-green { background: #EEF7F1; border-color: #ADDBBE; }
.sd-tile.is-green .sd-tile-label, .sd-tile.is-green .sd-tile-value { color: var(--sd-green); }
.sd-tile.is-red { background: #FDF1F0; border-color: #F4B9B3; }
.sd-tile.is-red .sd-tile-label, .sd-tile.is-red .sd-tile-value { color: var(--sd-red); }

/* Manager page > Quick (orders and drivers) */
.sd-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sd-blush-2); border: 1px solid #F1CFDC; border-radius: 12px; margin: 0 0 12px; max-width: 460px; }
.sd-seg2 button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--sd-mulberry); font-family: var(--sd-font) !important; font-size: 15px; font-weight: 500; }
.sd-seg2 button.is-on { background: var(--sd-mulberry); color: #fff; font-weight: 600; }
.sd-qbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.sd-qbar { flex-wrap: nowrap; }
.sd-qbar input[type="date"] { flex: 1 1 auto; min-width: 0; max-width: 230px; }
.sd-qbar .sd-btn { padding: 8px 12px; }
.sd-qsearch { display: flex; gap: 8px; margin: 0 0 10px; }
.sd-qsearch input { flex: 1; min-width: 0; }
.sd-qchips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.sd-qedit { display: flex; flex-direction: column; gap: 14px; }
.sd-qitems { display: flex; flex-direction: column; gap: 6px; }
.sd-qitem { display: grid; grid-template-columns: minmax(0, 1fr) 54px 86px 40px; gap: 6px; align-items: center; }
.sd-qitem-head { font-size: 12px; font-weight: 600; color: var(--sd-muted); }
.sd-qitem input { min-height: 40px; padding: 6px 8px; width: 100%; box-sizing: border-box; }
.sd-qitem input.qty { text-align: center; }
.sd-qitem input.amt { text-align: right; }
.sd-qitem .sd-btn { min-height: 40px; padding: 0; font-size: 18px; }
.sd-qblock { border-top: 1px solid var(--sd-line); padding-top: 12px; }
.sd-qblock > label { display: block; font-size: 13px; font-weight: 600; color: var(--sd-ink-2); margin-bottom: 4px; }
.sd-qrow { display: flex; gap: 6px; align-items: flex-end; }
.sd-qrow input { flex: 1; min-width: 0; }
.sd-qdrivers { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .sd-qdrivers { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sd-qdriver { display: flex; flex-direction: column; gap: 12px; }
.sd-qtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sd-qtiles .sd-tile { padding: 6px 2px; }
.sd-qtiles .sd-tile-value { font-size: 17px; }
.sd-qmoney { display: flex; flex-direction: column; gap: 5px; }
.sd-qline { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.sd-qline > span:first-child { color: var(--sd-ink-2); }
.sd-qline small { color: var(--sd-muted); font-size: 12.5px; }
.sd-collect { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--sd-mulberry); color: #fff; border-radius: 10px; padding: 10px 12px; margin-top: 6px; font-weight: 600; }
.sd-collect strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.sd-qbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sd-qbtns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-qbtns.one { grid-template-columns: 1fr; }
.sd-seg3 { grid-template-columns: 1fr 1fr 1fr; max-width: 520px; }
.sd-qbtns .sd-btn { min-height: 44px; padding: 4px 2px; font-size: 13px; white-space: nowrap; }
.sd-qexp { background: var(--sd-blush); border: 1px solid var(--sd-line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sd-linkbtn { background: none; border: 0; padding: 0; color: var(--sd-mulberry); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
#qMsg:empty, .sd-qedit .sd-msg:empty, .sd-qexp .sd-msg:empty { display: none; }

/* Login accounts and staff rows (Admin Reports, Staff & logins) */
.sd-acct { padding: 12px 0; border-bottom: 1px solid var(--sd-line); }
.sd-acct:last-child { border-bottom: 0; }
.sd-acct-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sd-acct-pw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sd-acct-pw .sd-secret { font-size: 16px; padding: 5px 12px; letter-spacing: .02em; }
.sd-acct-change { margin-top: 6px; }
.sd-acct-change > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--sd-mulberry); }
.sd-acct-change > summary::-webkit-details-marker { display: none; }
.sd-acct-form { display: flex; gap: 6px; margin-top: 4px; }
.sd-acct-form input { flex: 1; min-width: 0; }
.sd-staffrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sd-line); flex-wrap: wrap; }
.sd-staffrow:last-child { border-bottom: 0; }
.sd-staffrow-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-staffrow-btns { align-items: center; }
.sd-staffrow > .sd-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-staffrow > .sd-row-name + .sd-staffrow-btns { flex-wrap: nowrap; }
.sd-jobsel { min-height: 38px; padding: 4px 8px; font-size: 14px; border-radius: 8px; }
.sd-jobsel.is-brand { background: var(--sd-blush-2); border-color: #F1CFDC; color: var(--sd-mulberry); font-weight: 600; }
.sd-staffrow-driver { flex-direction: column; align-items: stretch; gap: 8px; }
.sd-staffrow-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sd-staffrow-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-staffrow-menus label > span { display: block; font-size: 12px; color: var(--sd-muted); margin-bottom: 2px; }
.sd-staffrow-menus select { width: 100%; }
.sd-ratebox { background: var(--sd-blush); border: 1px solid var(--sd-line); border-radius: 10px; padding: 12px; margin: 0 0 12px; }
.sd-ratebox > label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
#smRateMsg:empty { display: none; }
.sd-acct .sd-msg:empty, #smStatus:empty, #usersStatus:empty { display: none; }

/* ---------- Page body ---------- */

.sd-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 12px 48px;
}
@media (min-width: 640px) { .sd-page { padding: 24px 20px 64px; } }

.sd-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.sd-pagehead h1, .sd-pagehead h2 { font-size: 20px !important; font-weight: 600 !important; margin: 0; color: var(--sd-ink) !important; }

#connectionStatus {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sd-muted) !important;
  margin: 0 !important;
}

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

.report-card {
  background: var(--sd-surface) !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: none !important;
  padding: 16px !important;
  margin-bottom: 16px;
  min-width: 0;
}
@media (min-width: 640px) { .report-card { padding: 20px !important; } }
.report-card .report-card { border-radius: var(--sd-radius-sm) !important; }

.report-header {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px 12px;
  border-bottom: 1px solid var(--sd-line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}
.report-card > .report-header {
  margin: -16px -16px 14px !important;
  padding: 12px 16px !important;
  background: var(--sd-blush);
  border-radius: var(--sd-radius) var(--sd-radius) 0 0;
}
@media (min-width: 640px) {
  .report-card > .report-header { margin: -20px -20px 16px !important; padding: 14px 20px !important; }
}
.report-header h2, .report-card > h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--sd-ink) !important;
  margin: 0;
}

/* Sub-panels inside a panel (white boxes in the old design) */
.sd-sub {
  background: #FFFBFC;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  padding: 14px;
}
.sd-sub h3, .sd-h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sd-ink) !important;
  margin: 0 0 10px !important;
}

/* Section accent bars from the old design become one consistent thin rule */
.report-card.border-t-4 { border-top-width: 1px !important; border-top-color: var(--sd-line) !important; }

/* ---------- Text sizes: nothing smaller than 11px ---------- */

.text-\[9px\], .text-\[10px\] { font-size: 11px !important; line-height: 1.35 !important; }
.text-\[11px\] { font-size: 12px !important; }
.text-xs { font-size: 12.5px !important; }

/* Labels in sentence case, not shouting capitals */
.uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.tracking-widest, .tracking-wider, .tracking-wide { letter-spacing: 0 !important; }

/* ---------- Forms ---------- */

input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="password"], input[type="search"], input[type="tel"], input:not([type]),
select, textarea {
  font-family: var(--sd-font) !important;
  font-size: 15px !important;
  color: var(--sd-ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--sd-line-strong) !important;
  border-radius: var(--sd-radius-sm) !important;
  min-height: 40px;
  padding: 8px 10px !important;
  box-shadow: none !important;
}
textarea { min-height: 72px; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--sd-gold) !important;
  box-shadow: var(--sd-focus) !important;
}
input[disabled], select[disabled], textarea[disabled], input[readonly] {
  background-color: var(--sd-page) !important;
  color: var(--sd-muted) !important;
}
label { color: var(--sd-ink-2); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--sd-mulberry); }

/* ---------- Buttons ---------- */

button { font-family: var(--sd-font) !important; border-radius: var(--sd-radius-sm); cursor: pointer; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: none !important; box-shadow: var(--sd-focus) !important; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

.sd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px;
  border-radius: var(--sd-radius-sm) !important;
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.sd-btn-primary, .btn-primary { background: var(--sd-mulberry) !important; color: #fff !important; border-color: var(--sd-mulberry) !important; }
.sd-btn-primary:hover, .btn-primary:hover { background: var(--sd-mulberry-dark) !important; }
.sd-btn-quiet { background: var(--sd-blush-2) !important; color: var(--sd-mulberry) !important; border-color: #F1CFDC !important; }
.sd-btn-quiet:hover { background: #F9D9E5 !important; }
.sd-btn-danger { background: #fff !important; color: var(--sd-red) !important; border-color: #F4B9B3 !important; }
.sd-btn-danger:hover { background: #FDF1F0 !important; }
.sd-btn-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }

/* The old pages used a different colour for almost every button. Ordinary actions now all
   use berry; red stays only for delete and cancel. Status labels (delivered, waiting...) are not buttons. */
button[class~="bg-emerald-500"],
button[class~="bg-emerald-600"],
button[class~="bg-emerald-700"],
button[class~="bg-emerald-800"],
button[class~="bg-green-500"],
button[class~="bg-green-600"],
button[class~="bg-green-700"],
button[class~="bg-green-800"],
button[class~="bg-teal-500"],
button[class~="bg-teal-600"],
button[class~="bg-teal-700"],
button[class~="bg-teal-800"],
button[class~="bg-sky-500"],
button[class~="bg-sky-600"],
button[class~="bg-sky-700"],
button[class~="bg-sky-800"],
button[class~="bg-blue-500"],
button[class~="bg-blue-600"],
button[class~="bg-blue-700"],
button[class~="bg-blue-800"],
button[class~="bg-cyan-500"],
button[class~="bg-cyan-600"],
button[class~="bg-cyan-700"],
button[class~="bg-cyan-800"],
button[class~="bg-amber-500"],
button[class~="bg-amber-600"],
button[class~="bg-amber-700"],
button[class~="bg-amber-800"],
button[class~="bg-orange-500"],
button[class~="bg-orange-600"],
button[class~="bg-orange-700"],
button[class~="bg-orange-800"],
button[class~="bg-yellow-500"],
button[class~="bg-yellow-600"],
button[class~="bg-yellow-700"],
button[class~="bg-yellow-800"],
button[class~="bg-indigo-500"],
button[class~="bg-indigo-600"],
button[class~="bg-indigo-700"],
button[class~="bg-indigo-800"],
button[class~="bg-purple-500"],
button[class~="bg-purple-600"],
button[class~="bg-purple-700"],
button[class~="bg-purple-800"],
button[class~="bg-violet-500"],
button[class~="bg-violet-600"],
button[class~="bg-violet-700"],
button[class~="bg-violet-800"],
button[class~="bg-fuchsia-500"],
button[class~="bg-fuchsia-600"],
button[class~="bg-fuchsia-700"],
button[class~="bg-fuchsia-800"],
button[class~="bg-pink-500"],
button[class~="bg-pink-600"],
button[class~="bg-pink-700"],
button[class~="bg-pink-800"] {
  background-color: var(--sd-mulberry) !important;
  border-color: var(--sd-mulberry) !important;
  color: #fff !important;
}
button[class~="bg-emerald-500"]:hover,
button[class~="bg-emerald-600"]:hover,
button[class~="bg-emerald-700"]:hover,
button[class~="bg-emerald-800"]:hover,
button[class~="bg-green-500"]:hover,
button[class~="bg-green-600"]:hover,
button[class~="bg-green-700"]:hover,
button[class~="bg-green-800"]:hover,
button[class~="bg-teal-500"]:hover,
button[class~="bg-teal-600"]:hover,
button[class~="bg-teal-700"]:hover,
button[class~="bg-teal-800"]:hover,
button[class~="bg-sky-500"]:hover,
button[class~="bg-sky-600"]:hover,
button[class~="bg-sky-700"]:hover,
button[class~="bg-sky-800"]:hover,
button[class~="bg-blue-500"]:hover,
button[class~="bg-blue-600"]:hover,
button[class~="bg-blue-700"]:hover,
button[class~="bg-blue-800"]:hover,
button[class~="bg-cyan-500"]:hover,
button[class~="bg-cyan-600"]:hover,
button[class~="bg-cyan-700"]:hover,
button[class~="bg-cyan-800"]:hover,
button[class~="bg-amber-500"]:hover,
button[class~="bg-amber-600"]:hover,
button[class~="bg-amber-700"]:hover,
button[class~="bg-amber-800"]:hover,
button[class~="bg-orange-500"]:hover,
button[class~="bg-orange-600"]:hover,
button[class~="bg-orange-700"]:hover,
button[class~="bg-orange-800"]:hover,
button[class~="bg-yellow-500"]:hover,
button[class~="bg-yellow-600"]:hover,
button[class~="bg-yellow-700"]:hover,
button[class~="bg-yellow-800"]:hover,
button[class~="bg-indigo-500"]:hover,
button[class~="bg-indigo-600"]:hover,
button[class~="bg-indigo-700"]:hover,
button[class~="bg-indigo-800"]:hover,
button[class~="bg-purple-500"]:hover,
button[class~="bg-purple-600"]:hover,
button[class~="bg-purple-700"]:hover,
button[class~="bg-purple-800"]:hover,
button[class~="bg-violet-500"]:hover,
button[class~="bg-violet-600"]:hover,
button[class~="bg-violet-700"]:hover,
button[class~="bg-violet-800"]:hover,
button[class~="bg-fuchsia-500"]:hover,
button[class~="bg-fuchsia-600"]:hover,
button[class~="bg-fuchsia-700"]:hover,
button[class~="bg-fuchsia-800"]:hover,
button[class~="bg-pink-500"]:hover,
button[class~="bg-pink-600"]:hover,
button[class~="bg-pink-700"]:hover,
button[class~="bg-pink-800"]:hover {
  background-color: var(--sd-mulberry-dark) !important;
}

/* ---------- Tables ---------- */

table { border-collapse: collapse; }
.report-card table thead th, .sd-table thead th {
  background: var(--sd-blush) !important;
  color: var(--sd-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--sd-line) !important;
}
.report-card table tbody td, .sd-table tbody td { border-bottom: 1px solid var(--sd-line); }
.report-card table tbody tr:last-child td, .sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table { width: 100%; font-size: 14px; }
.sd-table th, .sd-table td { padding: 9px 10px; text-align: left; }
.sd-table .r { text-align: right; }
.sd-table tbody tr.is-clickable { cursor: pointer; }
.sd-table tbody tr.is-clickable:hover td { background: var(--sd-mulberry-soft); }
.sd-table tbody tr.is-selected td { background: var(--sd-mulberry-soft); }

/* ---------- Small pieces ---------- */

.sd-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--sd-blush); color: var(--sd-ink-2);
  border: 1px solid var(--sd-line);
  white-space: nowrap;
}
.sd-pill.is-green { background: #EEF7F1; color: var(--sd-green); border-color: #ADDBBE; }
.sd-pill.is-amber { background: #FDF6EC; color: var(--sd-amber); border-color: #F4CF8E; }
.sd-pill.is-red   { background: #FDF1F0; color: var(--sd-red);   border-color: #F4B9B3; }
.sd-pill.is-brand { background: var(--sd-mulberry-soft); color: var(--sd-mulberry); border-color: #F8C9D8; }

.sd-help { font-size: 12.5px; color: var(--sd-muted); margin: 4px 0 0; }
.sd-msg { font-size: 13px; font-weight: 500; min-height: 18px; margin: 8px 0 0; }
.sd-msg.is-ok { color: var(--sd-green); }
.sd-msg.is-err { color: var(--sd-red); }
.sd-field { display: block; margin-bottom: 12px; }
.sd-field > span { display: block; font-size: 13px; font-weight: 500; color: var(--sd-ink-2); margin-bottom: 4px; }
.sd-field input, .sd-field select, .sd-field textarea { width: 100%; }
.sd-empty {
  border: 1px dashed var(--sd-line-strong);
  border-radius: var(--sd-radius-sm);
  padding: 14px;
  font-size: 14px;
  color: var(--sd-muted);
  background: var(--sd-page);
}

/* Two-way switch (e.g. Purchase / Payment) */
.sd-segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--sd-blush-2); border: 1px solid var(--sd-line);
  border-radius: 10px; padding: 3px; margin-bottom: 14px;
}
.sd-segment button {
  border: 0; background: transparent; min-height: 36px;
  font-size: 14px; font-weight: 500; color: var(--sd-muted); border-radius: 8px;
}
.sd-segment button.is-on { background: #fff; color: var(--sd-mulberry); font-weight: 600; box-shadow: 0 1px 2px rgba(42, 34, 40, 0.12); }

/* A figure: small label above a large number */
.sd-figure { display: flex; flex-direction: column; gap: 2px; }
.sd-figure-label { font-size: 12.5px; color: var(--sd-muted); }
.sd-figure-value { font-size: 22px; font-weight: 600; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.sd-figure-value small { font-size: 12px; font-weight: 500; color: var(--sd-muted); margin-left: 2px; }

/* ---------- Popups ---------- */

.fixed.inset-0.bg-gray-600, .fixed.inset-0.bg-black, .modal {
  background-color: rgba(56, 13, 31, 0.45) !important;
}
.fixed.inset-0 > .bg-white, .modal-content {
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(56, 13, 31, 0.25) !important;
}

/* ---------- Print ---------- */

@media print {
  .sd-appbar, .sd-tabs, .print-hide { display: none !important; }
  body { background: #fff !important; }
  .report-card { border: 0 !important; padding: 0 !important; }
}

/* ---------- Respect reduced motion ---------- */

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

/* Today > Orders: change status */
.sd-qstatus { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sd-qstatus .sd-btn { flex: 1 1 0; }
.sd-btn-ok { background: #fff !important; color: var(--sd-green) !important; border-color: #ADDBBE !important; }
.sd-btn-ok:hover { background: #EEF7F1 !important; }

/* Today > Drivers: In progress / Cancelled boxes open the driver's list of bills */
.sd-tile-btn { font: inherit; width: 100%; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sd-tile-btn:hover:not(:disabled) { border-color: currentColor; }
.sd-tile-btn.is-brand { color: var(--sd-mulberry); }
.sd-tile-btn.is-red { color: var(--sd-red); }
.sd-tile-btn.is-open { box-shadow: inset 0 0 0 2px currentColor; }
.sd-tile-btn:disabled { cursor: default; }
.sd-tile-btn:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: 2px; }
.sd-tile-hint { font-size: 11px; font-weight: 600; text-decoration: underline; margin-top: 1px; }
.sd-tile-amount { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; opacity: .85; }
.sd-qlist { border: 1px solid var(--sd-line); border-radius: 10px; background: #fff; overflow: hidden; }
.sd-qlist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--sd-blush); font-size: 13px; font-weight: 600; }
.sd-qlist-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--sd-line); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--sd-ink); }
.sd-qlist-row:hover { background: var(--sd-blush); }
.sd-qlist-row:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: -2px; }
.sd-qlist-main { display: flex; flex-direction: column; min-width: 0; }
.sd-qlist-main small { font-size: 12px; color: var(--sd-muted); overflow-wrap: anywhere; }

/* Today > Orders: the counts filter the list */
.sd-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 14px; cursor: pointer; }
.sd-chip:hover { filter: brightness(.97); }
.sd-chip:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: 2px; }
.sd-chip.is-on { background: var(--sd-ink-2); border-color: var(--sd-ink-2); color: #fff; }
.sd-chip.is-brand.is-on { background: var(--sd-mulberry); border-color: var(--sd-mulberry); color: #fff; }
.sd-chip.is-green.is-on { background: var(--sd-green); border-color: var(--sd-green); color: #fff; }
.sd-chip.is-red.is-on { background: var(--sd-red); border-color: var(--sd-red); color: #fff; }

/* Date calendar (Sales date, Move date): past days and Fridays greyed out */
.sd-dateinput { cursor: pointer; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E2A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px !important; }
.sd-cal { position: absolute; z-index: 1000; width: 288px; background: #fff; border: 1px solid var(--sd-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(42, 34, 40, .16); padding: 10px; font-size: 14px; color: var(--sd-ink); }
.sd-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sd-cal-title { font-weight: 600; }
.sd-cal-nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--sd-line); background: var(--sd-blush); color: var(--sd-mulberry); font-size: 18px; line-height: 1; cursor: pointer; }
.sd-cal-nav:disabled { opacity: .35; cursor: default; }
.sd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sd-cal-dow { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--sd-muted); padding: 4px 0; }
.sd-cal-dow.is-off { color: #C9B9C0; text-decoration: line-through; }
.sd-cal-day { height: 34px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--sd-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.sd-cal-day:hover:not(:disabled) { background: var(--sd-blush-2); color: var(--sd-mulberry); }
.sd-cal-day.is-other { color: var(--sd-muted); }
.sd-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--sd-mulberry); }
.sd-cal-day.is-chosen { background: var(--sd-mulberry); color: #fff; }
.sd-cal-day:disabled { color: #CDBFC5; background: repeating-linear-gradient(135deg, transparent 0 4px, #F7EEF2 4px 6px); cursor: not-allowed; text-decoration: line-through; }
.sd-cal-day:focus-visible, .sd-cal-nav:focus-visible, .sd-cal-link:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: 1px; }
.sd-cal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sd-line); }
.sd-cal-link { border: 0; background: none; font: inherit; font-weight: 600; color: var(--sd-mulberry); cursor: pointer; padding: 2px 4px; }
.sd-cal-note { font-size: 12px; color: var(--sd-muted); }

/* Today > Orders: move all in progress to tomorrow */
.sd-bulkmove { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-bulk-q { font-size: 13px; font-weight: 600; color: var(--sd-ink); }

/* Today > Orders: Pickup filter */
.sd-chip.is-amber.is-on { background: var(--sd-amber); border-color: var(--sd-amber); color: #fff; }
.sd-qrow select { flex: 1; min-width: 0; }

/* Today > Orders: orders on the left, the day's changes beside them on the right */
.sd-qsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sd-qsplit > .report-card, .sd-qsplit-side > .report-card { margin-top: 0; margin-bottom: 0; }
@media (max-width: 1023px) { .sd-qsplit { grid-template-columns: minmax(0, 1fr); } }

/* Today > Orders: admin-only Delete record */
.sd-qdelete { border-top-color: #F4B9B3; }
.sd-qdelete > label small { font-weight: 500; color: var(--sd-muted); }

/* Sales page: records of the day, grouped by area; a card opens the record in the form */
.sd-recfilters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.sd-recfilters label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sd-ink-2); }
.sd-recfilters label[hidden] { display: none; }
.sd-recfilters select { min-height: 36px; padding: 4px 8px; font-size: 14px; border-radius: 8px; min-width: 130px; }
.sd-reclist { display: flex; flex-direction: column; gap: 6px; }
.sd-recarea { margin-top: 10px; padding: 7px 12px; border-radius: 8px; border-left: 4px solid var(--sd-mulberry); background: var(--sd-mulberry-soft); color: var(--sd-mulberry); font-weight: 700; font-size: 15px; }
.sd-recarea:first-child { margin-top: 0; }
.sd-recarea span { font-weight: 500; font-size: 13px; }
.sd-reccard { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--sd-surface); border: 1px solid var(--sd-line-strong); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.sd-reccard:hover { background: var(--sd-blush); border-color: var(--sd-mulberry); }
.sd-reccard:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: 2px; }
.sd-reccard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sd-reccard-who { min-width: 0; }
.sd-reccard-who small { display: block; font-size: 12.5px; color: var(--sd-muted); margin-top: 2px; }
.sd-recid { font-weight: 700; color: var(--sd-mulberry); font-variant-numeric: tabular-nums; }
.sd-reccard-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sd-reccard-amt b { font-size: 15px; color: var(--sd-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-recitems { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sd-line); font-size: 12.5px; color: var(--sd-ink-2); }

/* Admin Reports > Areas: each area with its driver */
.sd-areaadd { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.sd-areaadd .sd-field { margin-bottom: 0; }
.sd-areaadd .sd-btn { min-height: 40px; }
@media (max-width: 639px) { .sd-areaadd { grid-template-columns: minmax(0, 1fr); } }
.sd-areatools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; padding-top: 12px; border-top: 1px solid var(--sd-line); }
.sd-areatools input { flex: 1 1 220px; min-width: 0; }
.sd-areatools select { flex: 0 1 220px; }
.sd-arealist { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 1024px) { .sd-arealist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sd-arealist > .sd-empty { grid-column: 1 / -1; }
.sd-arearow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto; gap: 4px 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--sd-line); }
.sd-arearow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-arearow select { width: 100%; }
.sd-arearow select.is-empty { color: var(--sd-amber); border-color: #F4CF8E; background: #FDF6EC; }
.sd-arearow-btns { display: flex; gap: 6px; justify-content: flex-end; }
.sd-arearow-msg { grid-column: 1 / -1; font-size: 12.5px; font-weight: 500; }
.sd-arearow-msg:empty { display: none; }
.sd-arearow-msg.is-ok { color: var(--sd-green); }
.sd-arearow-msg.is-err { color: var(--sd-red); }

/* Manager > Staff > Salaries: paying a saved slip from the income of chosen days */
.sd-paybox { margin-top: 14px; border: 1px solid var(--sd-line-strong); border-radius: 10px; padding: 12px; background: var(--sd-surface); }
.sd-paybox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; color: var(--sd-ink); }
.sd-paylist { margin-bottom: 10px; }
.sd-payrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sd-line); font-size: 14px; }
.sd-payrow small { color: var(--sd-muted); }
.sd-payrow b { font-variant-numeric: tabular-nums; }
.sd-payrow [data-pay-btns] { display: flex; gap: 6px; }
.sd-payrow.is-total { border-bottom: 0; font-weight: 600; }
.sd-paypanel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sd-line-strong); }
.sd-payline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px 8px; align-items: end; margin-bottom: 8px; }
.sd-payline label > span { display: block; font-size: 12px; color: var(--sd-muted); margin-bottom: 2px; }
.sd-payline input { width: 100%; }
.sd-payline small { grid-column: 1 / -1; font-size: 12px; color: var(--sd-muted); }
.sd-payline small.is-err, .sd-paysum .is-err { color: var(--sd-red); font-weight: 600; }
.sd-paysum { margin: 8px 0; font-size: 14px; font-weight: 600; }

/* =====================================================================
   Inside the Silk Delights phone app (html.sd-app, set from the app's user agent).
   White top bar with the page name, the page tabs as a bottom bar with icons,
   smaller type and calmer panels. The laptop pages are not affected.
   ===================================================================== */
html.sd-app { --sd-app-page: #F7F1F4; scrollbar-gutter: auto; overflow-y: auto; }
html.sd-app body { font-size: 14px; line-height: 1.45; background: var(--sd-app-page) !important; padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }

/* top bar */
html.sd-app .sd-appbar { background: #fff; box-shadow: 0 1px 0 var(--sd-line); }
html.sd-app .sd-appbar::after { display: none; }
html.sd-app .sd-appbar-inner { padding: 8px 12px 8px 14px; min-height: 52px; }
html.sd-app .sd-brand { gap: 9px; }
html.sd-app .sd-brand-logo { width: 28px; height: 28px; padding: 2px; box-shadow: 0 0 0 1px var(--sd-line); }
html.sd-app .sd-brand-name, html.sd-app .sd-user { display: none; }
html.sd-app .sd-brand-page { font-size: 17px; font-weight: 600; color: var(--sd-ink); }
html.sd-app .sd-appbar .sd-logout, html.sd-app #logoutBtn.sd-logout {
  border: 0 !important; padding: 6px 8px !important; min-height: 32px; font-size: 13px !important; color: var(--sd-mulberry) !important;
}

/* page tabs: bottom bar with icons */
html.sd-app .sd-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: #fff !important; border-bottom: 0 !important; border-top: 1px solid var(--sd-line) !important;
  padding-bottom: env(safe-area-inset-bottom);
}
html.sd-app .sd-tabs-inner { max-width: none; padding: 6px 4px 8px; gap: 0; overflow: visible; }
html.sd-app .sd-tabs .tab-button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 2px !important; border: 0 !important; font-size: 11.5px !important; font-weight: 500 !important;
  color: var(--sd-muted) !important; overflow: hidden; text-overflow: ellipsis;
}
html.sd-app .sd-tabs .tab-button::before {
  content: ""; display: block; width: 56px; height: 30px; border-radius: 15px;
  background: var(--sd-icon) center / 22px 22px no-repeat;
}
html.sd-app .sd-tabs .tab-button.active { color: var(--sd-mulberry) !important; font-weight: 600 !important; }
html.sd-app .sd-tabs .tab-button.active::before { background: var(--sd-icon-on) center / 22px 22px no-repeat, var(--sd-mulberry-soft); }
html.sd-app .sd-tabs [data-sd-page="operations-ops.html"] { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); --sd-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E2A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
html.sd-app .sd-tabs [data-sd-page="delivery.html"] { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); --sd-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E2A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
html.sd-app .sd-tabs [data-sd-page="manager.html"] { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); --sd-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E2A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
html.sd-app .sd-tabs [data-sd-page="admin.html"] { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M19 20v-7'/%3E%3C/svg%3E"); --sd-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E2A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M19 20v-7'/%3E%3C/svg%3E"); }

/* view buttons: compact chips that stay under the top bar */
html.sd-app .sd-views {
  position: sticky; top: 52px; z-index: 30; background: var(--sd-app-page);
  margin: -10px -12px 8px; padding: 8px 12px; gap: 6px;
}
html.sd-app .sd-views button { flex: 0 0 auto; min-height: 32px; padding: 0 14px; font-size: 13px; border-color: transparent; background: #fff; }
html.sd-app .sd-views button.is-on { background: var(--sd-mulberry); }
html.sd-app .sd-seg2 { max-width: none; margin-bottom: 10px; }
html.sd-app .sd-seg2 button { min-height: 34px; font-size: 13.5px; }

/* page and panels */
html.sd-app .sd-page { padding: 10px 12px 16px; }
html.sd-app .sd-pagehead { margin-bottom: 10px; gap: 6px 10px; }
html.sd-app .sd-pagehead h1, html.sd-app .sd-pagehead h2 { font-size: 16px !important; }
html.sd-app #connectionStatus { display: none !important; }
html.sd-app .report-card {
  border: 0 !important; border-radius: 16px !important; padding: 14px !important; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(142, 42, 82, 0.06) !important;
}
html.sd-app .report-card > .report-header {
  margin: -14px -14px 10px !important; padding: 12px 14px 0 !important;
  background: transparent; border-bottom: 0 !important; border-radius: 16px 16px 0 0;
}
html.sd-app .report-header { padding-bottom: 8px !important; margin-bottom: 10px !important; border-bottom-color: var(--sd-line) !important; }
html.sd-app .report-header h2, html.sd-app .report-card > h2 { font-size: 15px !important; }
html.sd-app .sd-sub { padding: 12px; border-radius: 12px; }
html.sd-app .sd-sub h3, html.sd-app .sd-h3 { font-size: 13.5px !important; }

/* numbers */
html.sd-app .sd-tiles { gap: 6px; }
html.sd-app .sd-tile { border-color: transparent; border-radius: 12px; padding: 8px 6px; }
html.sd-app .sd-tile-label { font-size: 11px; font-weight: 500; }
html.sd-app .sd-tile-value { font-size: 17px; margin-top: 1px; }
html.sd-app .sd-qtiles .sd-tile-value { font-size: 16px; }
html.sd-app .sd-figure-label { font-size: 12px; }
html.sd-app .sd-figure-value { font-size: 18px; }
html.sd-app .sd-kpi .sd-figure-value { font-size: 18px; }
html.sd-app .sd-paytotal .sd-figure-value { font-size: 22px; }

/* text, forms and buttons */
html.sd-app .text-3xl { font-size: 22px !important; }
html.sd-app .text-2xl { font-size: 19px !important; }
html.sd-app .text-xl { font-size: 16.5px !important; }
html.sd-app .text-lg { font-size: 15px !important; }
html.sd-app .text-base { font-size: 14px !important; }
html.sd-app .text-sm { font-size: 13px !important; }
html.sd-app .text-xs { font-size: 12px !important; }
html.sd-app .sd-help { font-size: 12px; }
html.sd-app .sd-row-sub { font-size: 12px; }
html.sd-app .sd-table { font-size: 13px; }
html.sd-app .sd-table th, html.sd-app .sd-table td { padding: 8px 8px; }
html.sd-app input[type="text"], html.sd-app input[type="number"], html.sd-app input[type="date"], html.sd-app input[type="month"],
html.sd-app input[type="password"], html.sd-app input[type="search"], html.sd-app input[type="tel"], html.sd-app input:not([type]),
html.sd-app select, html.sd-app textarea { font-size: 14px !important; min-height: 38px; padding: 7px 10px !important; }
html.sd-app .sd-btn { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
html.sd-app .sd-btn-sm { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
html.sd-app .sd-field > span { font-size: 12.5px; }

/* page heading with its date controls: one compact row (the view chip already names the page) */
html.sd-app .sd-pagehead > div:first-child:has(> h2) { display: none; }
html.sd-app .sd-pagehead > div { width: 100%; margin-top: 0 !important; justify-content: flex-start !important; }
html.sd-app .sd-pagehead label[for="dateSelector"] { display: none; }
html.sd-app .sd-pagehead > div > .flex { width: 100%; }
html.sd-app .sd-pagehead input[type="date"], html.sd-app .sd-pagehead input[type="month"] { flex: 1 1 auto; min-width: 0; }

/* Sales page > Driver route sheet: a row opens the bill */
.sd-route-row { cursor: pointer; transition: background-color .12s; }
.sd-route-row:hover td, .sd-route-row:focus-visible td { background: var(--sd-mulberry-soft); }
.sd-route-row:focus-visible { outline: 2px solid var(--sd-mulberry); outline-offset: -2px; }

/* In the phone app the route sheet table becomes one small card per stop:
   customer and total, then the invoices, then seller, phone and area. */
html.sd-app #driverRouteReportContent table,
html.sd-app #driverRouteReportContent tbody { display: block; width: 100%; min-width: 0 !important; }
html.sd-app #driverRouteReportContent thead { display: none; }
html.sd-app #driverRouteReportContent tr.sd-route-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 10px 6px; border-bottom: 1px solid var(--sd-line);
}
html.sd-app #driverRouteReportContent tr.sd-route-row > td {
  display: block; width: auto !important; padding: 0 !important; white-space: normal !important; border: 0;
}
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(2) { order: 1; flex: 1 1 55%; font-weight: 600; font-size: 14px !important; }
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(5) { order: 2; margin-left: auto; font-size: 14px !important; }
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(1) { order: 3; flex-basis: 100%; font-size: 11.5px !important; color: var(--sd-muted); }
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(3) { order: 4; font-size: 12.5px !important; }
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(4) { order: 5; display: inline-flex; align-items: center; font-size: 12.5px !important; }
html.sd-app #driverRouteReportContent tr.sd-route-row > td:nth-child(6) { order: 6; font-size: 12.5px !important; color: var(--sd-muted); }
html.sd-app #driverRouteReportContent .overflow-x-auto { overflow: visible; }

/* Manager > Overview: Real income on its own row (the most important figure) */
.sd-realincome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; }
.sd-realincome-main { display: flex; flex-direction: column; gap: 2px; }
.sd-realincome-label { font-size: 13px; font-weight: 600; color: var(--sd-muted); }
.sd-realincome-value { font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--sd-green); font-variant-numeric: tabular-nums; }
.sd-realincome-value small { font-size: 14px; font-weight: 500; color: var(--sd-muted); margin-left: 4px; }
.sd-realincome-parts { margin: 0; max-width: 700px; font-size: 12.5px; line-height: 1.7; color: var(--sd-muted); }
.sd-realincome-parts span { white-space: nowrap; }
.sd-realincome-parts b { font-weight: 600; color: var(--sd-ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .sd-realincome-parts { text-align: right; } }
html.sd-app .sd-realincome { gap: 6px; }
html.sd-app .sd-realincome-value { font-size: 30px; }
html.sd-app .sd-realincome-parts { font-size: 11.5px; line-height: 1.6; }