/* ============================================================
   BYDEDS brand palette
   Taken from the brand identity sheet:
     olive #4D5A3A   black #121212   cream #F5F1E8   brown #8B5E3C
   ============================================================ */
:root {
  --olive: #4D5A3A;
  --olive-deep: #3B462C;
  --brown: #8B5E3C;
  --cream: #F5F1E8;

  --bg: #F5F1E8;              /* cream paper, as on the brand sheet */
  --card: #FFFDF9;            /* a warm white so cards lift off the cream */
  --text: #121212;
  --text-2: #6E6A5F;
  --text-3: #A9A496;

  --accent: #4D5A3A;          /* olive carries every action */
  --accent-soft: #E7EADF;

  --green: #4D5A3A;           /* profit reads as the brand colour */
  --red: #A83A2C;             /* a warm red, not an iOS one */
  --orange: #8B5E3C;          /* warnings borrow the brown */

  --sep: rgba(18, 18, 18, 0.10);
  --radius: 16px;
  --shadow: 0 1px 3px rgba(61, 55, 40, 0.07), 0 6px 18px rgba(61, 55, 40, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  /* Poppins is the brand typeface. The system stack behind it keeps the
     app legible if the font cannot be fetched. */
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Header ---------- */
.header {
  padding: max(env(safe-area-inset-top), 16px) 20px 10px;
  position: sticky;
  top: 0;
  background: rgba(245, 241, 232, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10;
}

.header h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.3px; }
.header .subtitle { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  margin-top: 8px;
  background: #fff4e5;
  color: #b25b00;
}
.db-badge.aws { background: #e6f7ec; color: #1d7a3d; }
.db-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.db-badge.aws .dot { background: var(--green); }

/* ---------- Content ---------- */
.content {
  flex: 1;
  padding: 8px 16px 110px;
  overflow-y: auto;
}

.page { display: none; animation: fadeIn 0.25s ease; }
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 6px 8px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.card-row:active { background: #f7f7fa; }
.card-row + .card-row { border-top: 1px solid var(--sep); }

/* Work groups use the same card language as the rest of the app. */
.work-intro { margin: 8px 0 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); color: var(--olive-deep); font-size: 14px; font-weight: 600; line-height: 1.5; }
.work-list { overflow: hidden; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.work-link { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 76px; padding: 13px 15px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.work-link + .work-link { border-top: 1px solid var(--sep); }
.work-link:active { background: var(--accent-soft); }
.work-link:focus-visible { position: relative; outline: 2px solid var(--accent); outline-offset: -2px; }
.work-mark { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 16px; font-weight: 700; }
.work-link > span:nth-child(2) { flex: 1; min-width: 0; }
.work-link strong, .work-link small { display: block; }
.work-link strong { font-size: 15px; font-weight: 600; }
.work-link small { margin-top: 2px; color: var(--text-2); font-size: 11px; line-height: 1.4; }
.work-chevron { flex: 0 0 auto; color: var(--text-3); font-size: 23px; }

.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 16px; font-weight: 600; }
.row-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.row-right { text-align: right; margin-left: 12px; }
.row-value { font-size: 16px; font-weight: 700; }
.row-value.green { color: var(--green); }
.stat-value.brown { color: var(--brown); }
.row-value.red { color: var(--red); }
.row-caption { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.num-chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
}

.chevron { color: var(--text-3); font-size: 18px; margin-left: 8px; }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-2);
}
.empty-state .icon { font-size: 44px; margin-bottom: 10px; }
.empty-state p { font-size: 14px; line-height: 1.5; }

.inventory-summary { padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 600; margin: 12px 0; }
.inventory-line { display: grid; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--sep); }
.inventory-line:last-child { border-bottom: 0; }
.inventory-line span { color: var(--text-2); font-size: 14px; }
.inventory-line small { color: var(--text-3); font-size: 12px; }
.inventory-item-row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
.inventory-item-row .row-title, .inventory-item-row .row-sub, .inventory-item-row .row-value, .inventory-item-row .row-caption { display: block; }
.inventory-archived-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sep); }
.inventory-archived-row:last-child { border-bottom: 0; }
.inventory-archived-row small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.inventory-archived-row button { border: 0; border-radius: 10px; padding: 9px 12px; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }

.schedule-tabs { display: flex; gap: 5px; background: var(--accent-soft); border-radius: 12px; padding: 4px; margin: 12px 0; }
.schedule-tabs button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.schedule-tabs button.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow); }
.schedule-card { padding: 13px 16px; border-bottom: 1px solid var(--sep); font-size: 14px; }
.schedule-card:last-child { border-bottom: 0; }
.schedule-card-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.schedule-card small { display: block; color: var(--text-2); margin-top: 5px; white-space: pre-wrap; }
.schedule-status { text-transform: capitalize; font-size: 12px; font-weight: 700; color: var(--text-2); }
.schedule-status.status-approved { color: var(--green); }
.schedule-status.status-rejected, .schedule-status.status-cancelled { color: var(--red); }
.schedule-card-actions { display: flex; gap: 8px; margin-top: 9px; }
.schedule-card-actions:empty { display: none; }
.schedule-card-actions button, .schedule-template button { border: 0; border-radius: 9px; padding: 7px 10px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.schedule-week-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0; text-align: center; }
.schedule-week-nav button { border: 0; border-radius: 9px; padding: 3px 14px; background: var(--card); color: var(--accent); font-size: 24px; cursor: pointer; }
.schedule-template { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--sep); }
.schedule-template:last-child { border-bottom: 0; }
.schedule-template strong { flex: 0 0 100%; font-size: 14px; }
.schedule-template input { width: 88px; min-width: 0; border: 1px solid var(--sep); border-radius: 8px; padding: 6px; font: inherit; }
.schedule-warnings { padding: 10px 14px; border-radius: 11px; background: #fff1dc; color: #765324; margin-bottom: 10px; font-size: 13px; }
.schedule-day { background: var(--card); border-radius: 13px; box-shadow: var(--shadow); margin-bottom: 10px; overflow: hidden; }
.schedule-day h3 { margin: 0; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--sep); }
.schedule-shift { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--sep); font-size: 13px; }
.schedule-shift:last-child { border-bottom: 0; }
.schedule-shift small { display: block; margin-top: 3px; color: var(--text-2); }
.schedule-shift button { border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 8px; min-width: 30px; height: 30px; font-size: 20px; cursor: pointer; }
.schedule-empty { padding: 8px 14px; color: var(--text-3); font-size: 13px; margin: 0; }

.leave-calendar { background: var(--card); border-radius: 16px; padding: 15px; margin-bottom: 16px; box-shadow: var(--shadow); }
.leave-calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.leave-calendar-heading h3 { margin: 0; font-size: 17px; }
.leave-calendar-heading button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 25px; cursor: pointer; }
.leave-calendar-hint { margin: 8px 0 13px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.leave-calendar-weekdays, .leave-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.leave-calendar-weekdays { margin-bottom: 5px; }
.leave-calendar-weekdays span { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-2); }
.leave-calendar-day { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 43px; padding: 3px 1px 8px; border: 1px solid transparent; border-radius: 10px; background: #f7f7f4; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.leave-calendar-day.is-weekend { background: #e5e5e3; }
.leave-calendar-day.is-outside { opacity: .45; }
.leave-calendar-day:disabled { opacity: .28; cursor: not-allowed; }
.leave-calendar-day.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.leave-calendar-day.is-holiday-focused { border-color: var(--holiday-color, var(--accent)); box-shadow: inset 0 0 0 1px var(--holiday-color, var(--accent)); }
.leave-calendar-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leave-holiday-mark { position: absolute; width: 17px; height: 4px; left: calc(50% - 8.5px); bottom: 4px; border-radius: 4px; background: var(--holiday-color); }
.leave-calendar-legend { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 12px; color: var(--text-2); }
.leave-calendar-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.leave-calendar-legend-head strong { color: var(--text); font-size: 13px; }
.leave-calendar-legend-head button { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 8px 10px; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.leave-calendar-legend-head button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leave-calendar-legend-items { display: flex; flex-wrap: wrap; gap: 7px 13px; }
.leave-calendar-legend-items span, .leave-calendar-holiday strong { display: inline-flex; align-items: center; gap: 6px; }
.leave-calendar-legend i, .leave-calendar-holiday i { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px; border-radius: 3px; background: var(--holiday-color); }
.leave-calendar-holiday { min-height: 35px; padding: 11px 0 0; font-size: 12px; color: var(--text-2); }
.leave-calendar-holiday strong { color: var(--text); }
.leave-calendar-holiday p { margin: 5px 0 0; line-height: 1.45; }
.leave-selected-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.leave-selected-dates div { padding: 10px 12px; border-radius: 11px; background: var(--card); }
.leave-selected-dates span { display: block; font-size: 11px; color: var(--text-2); }
.leave-selected-dates strong { display: block; margin-top: 3px; font-size: 13px; }
.leave-details-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 14px; box-sizing: border-box; background: rgba(35, 39, 29, .42); }
.leave-details-overlay[hidden] { display: none; }
.leave-details-card { width: 100%; max-height: calc(88dvh - 28px); overflow-y: auto; box-sizing: border-box; border-radius: 18px; background: var(--card); box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.leave-details-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 12px; }
.leave-details-dates span { display: block; color: var(--text-2); font-size: 13px; }
.leave-details-dates strong { display: block; margin-top: 5px; font-size: 15px; }
.leave-details-dates button { display: block; padding: 5px 0; margin-top: 8px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; text-align: left; text-decoration: underline; cursor: pointer; }
.leave-selected-holiday { margin: 0 20px 10px; padding: 9px 12px; border-radius: 9px; background: var(--accent-soft); color: var(--text-2); font-size: 12px; line-height: 1.4; }
.leave-details-card .field { padding: 16px 20px; }
.leave-details-card .field-stack { border-top: 1px solid var(--sep); }
.leave-details-card textarea { min-height: 126px; }
.leave-balance { margin: 0 20px 14px; padding: 11px 13px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 13px; line-height: 1.45; }
.leave-details-actions { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px 0; border-top: 1px solid var(--sep); }
.leave-details-actions button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: #efefec; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.leave-details-actions button:last-child { background: var(--accent); color: white; }
.leave-details-card > .field-note { margin: 10px 20px 18px; }
.leave-allowance-row { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--sep); }
.leave-allowance-row label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.leave-allowance-row small { display: block; margin-top: 2px; color: var(--text-2); font-size: 11px; font-weight: 400; }
.leave-allowance-row input { width: 56px; min-width: 0; padding: 7px; border: 1px solid var(--sep); border-radius: 8px; font: inherit; text-align: center; }
.leave-allowance-row button { padding: 8px 10px; border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.leave-policy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--sep); font-size: 14px; }
.leave-policy-row:first-child { border-top: 0; }
.leave-policy-row > span:last-child { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
.leave-policy-row input { width: 19px; height: 19px; accent-color: var(--accent); }

/* ---------- Dashboard stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.stat-card.wide { grid-column: 1 / -1; }
.stat-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.4px; }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }
.stat-value.blue { color: var(--brown); }   /* revenue reads in the brand's brown */
.stat-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: var(--bar-h, 130px); margin-top: 14px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar-stack {
  width: 100%;
  max-width: 34px;
  height: calc(var(--bar-h, 130px) - 30px);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 6px;
  overflow: hidden;
}
.bar-seg {
  width: 100%;
  min-height: 2px;
  transition: height 0.4s ease;
}
.bar-seg:last-child { border-radius: 6px 6px 0 0; }
.bar-label { font-size: 11px; color: var(--text-2); font-weight: 600; }
.bar-val { font-size: 10px; color: var(--text-3); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.btn:active { transform: scale(0.98); opacity: 0.85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-danger { background: #ffecec; color: var(--red); }
.btn-ghost { background: transparent; color: var(--accent); }

.fab {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  right: max(calc(50% - 220px), 20px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(77, 90, 58, 0.38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: transform 0.15s;
}
.fab:active { transform: scale(0.92); }
.fab svg { width: 26px; height: 26px; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--sep);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}

.tab {
  flex: 1;
  padding: 10px 0 8px;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-3);
  font-family: inherit;
  transition: color 0.15s;
}
.tab .tab-icon { display: block; line-height: 0; margin-bottom: 3px; }
.tab .tab-icon svg { width: 23px; height: 23px; margin: 0 auto; display: block; }
.tab .tab-name { font-size: 10.5px; font-weight: 600; }
.tab.active { color: var(--accent); }

/* ---------- Modal (sheet) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 50;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}
.sheet.open { transform: translate(-50%, 0); }

/* Three columns of equal weight so the title sits dead centre no
   matter how wide the buttons are, or whether they are there at all.
   space-between could not do that: it centres the gap, not the text. */
.sheet-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 10px;
}
.sheet-header > *:first-child { justify-self: start; text-align: left; }
.sheet-header > *:last-child  { justify-self: end;   text-align: right; }
.sheet-header h2 { font-size: 18px; font-weight: 700; text-align: center; white-space: nowrap; }

/* A stacked, two-line sheet title. "Thursday, 3 Sept 2026" on one line
   is wider than the gap between Cancel and Save on a narrow phone, and
   shrinking the type until it fits would make the one thing that must
   not be misread the smallest thing on the screen. The date carries the
   weight; the weekday is the softer line above it. */
.sheet-title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.2;
  white-space: normal;
}
.sheet-title-weekday {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.sheet-title-date { font-size: 17px; font-weight: 700; color: var(--text); }

/* Sits under the last drink, well away from the steppers. Destructive
   and admin-only, so it is never the thing a thumb finds by accident. */
.day-clear-btn { margin-top: 22px; }

/* Hidden but still holding its place in the layout */
.invisible { visibility: hidden !important; pointer-events: none; }
.sheet-header .sheet-btn {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  padding: 4px 2px;
}
.sheet-header .sheet-btn.save { font-weight: 700; }

.sheet-body { overflow-y: auto; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }

/* A field that is worked out rather than filled in. It sits in the same
   row as the inputs above it so the three read as one sum, but it is
   plainly not something you can type into. */
.field-derived .field-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.field-derived .field-value.loss { color: var(--red); }

/* ---------- Update bar ---------- */
.update-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom));
  /* Above the login screen (200), because the first thing a phone ever
     caches is the login page and an update can land there. Below the
     confirm dialog (300), so a question is never covered. */
  z-index: 250;
  width: min(440px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  background: var(--text);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.28);
  animation: fadeIn 0.25s ease;
}
.update-text { font-size: 14px; font-weight: 500; }
.update-btn {
  background: var(--cream);
  color: var(--text);
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.update-btn:active { transform: scale(0.97); }

/* ---------- Sign-up name pair ---------- */
.name-row { display: flex; gap: 10px; }
.name-row .auth-input { flex: 1; min-width: 0; }

/* ---------- Profile rows ---------- */
/* Only the admin's rows open anything, so only they look like they do. */
.kv-tappable { cursor: pointer; }
.kv-tappable:active { background: var(--accent-soft); }
.kv-chev { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.kv-key small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  margin-top: 1px;
}
.kv-note {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  border-top: 1px solid var(--sep);
}

/* ---------- Users list ---------- */
.user-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
/* The owner label is a statement of fact, not a disabled control. */
.user-self-label.owner { color: var(--accent); font-weight: 700; }

/* ---------- Activity: people list ---------- */
/* Name on the left, when they last touched anything on the right, in a
   quieter face so the eye reads the names first. */
.person-name { font-size: 16px; font-weight: 600; }
.person-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.person-when {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-align: right;
  margin-left: 12px;
  flex-shrink: 0;
  max-width: 42%;
}
.person-when.quiet { color: var(--text-3); font-style: italic; }

/* The role segment sits above the list, not in a card. */
#actSeg { margin: 4px 0 2px; }

/* ---------- Waiting for approval ---------- */
.pending-badge { font-size: 34px; text-align: center; margin: 6px 0 10px; }
.pending-lead {
  font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 8px;
}
.pending-note {
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
  text-align: center; margin-bottom: 18px;
}

/* ---------- Dialog text input ---------- */
.dialog-input {
  /* Narrower than the dialog so both borders are visible and it reads
     as a box to type into, rather than a bar across the whole card. */
  display: block;
  width: 78%;
  max-width: 230px;
  padding: 12px 14px;
  /* Tight to the question above, clear of the buttons below - the
     gap either side of it should read as deliberate. */
  margin: 4px auto 20px;
  text-align: center;
  border: 1px solid var(--sep);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
}
.dialog-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Users: waiting accounts ---------- */
.users-group {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2);
  /* 14px, matching .user-row's padding, so the heading starts on the
     same vertical line as the names under it rather than 10px left. */
  margin: 16px 14px 6px;
}
.user-row.pending { background: var(--accent-soft); }
.role-chip.wait { background: #FBF0DC; color: #8A5A1E; }
.role-chip.job  { background: var(--brown-soft, #F1E5DA); color: var(--brown); }
.user-btn.approve { background: var(--accent); color: #fff; }

/* ---------- Figures table ---------- */
.fig-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px 62px;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 14px;
}
.fig-row + .fig-row { border-top: 1px solid var(--sep); }
.fig-row.head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.fig-name { font-weight: 600; }
.fig-val {
  text-align: right;
  font-variant-numeric: tabular-nums;   /* figures line up down the column */
}
.fig-row:not(.head) .fig-val { font-weight: 700; }

/* ---------- Trend chart ---------- */
.trend-card { padding: 14px 12px 10px; }
.trend-period-seg { margin-bottom: 8px; }
.trend-period-seg .seg-btn { font-size: 12.5px; }
.trend-seg { margin-bottom: 10px; }
.trend-seg .seg-btn { font-size: 12.5px; }
#trendChart svg { display: block; overflow: visible; }

/* ---------- Tickable chart legend ---------- */
/* A legend entry is a control here, so it has to look like one - and
   a ticked-off drink must still be visible, or you cannot tick it back. */
.legend-toggle {
  border: 1px solid var(--sep);
  background: var(--card);
  border-radius: 100px;
  padding: 5px 11px 5px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, background .15s;
}
.legend-toggle:active { background: var(--accent-soft); }
.legend-toggle.off { opacity: .42; }
.legend-toggle.off .legend-dot { background: var(--text-3) !important; }
.legend-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Both measures can be on at once, so these are toggles, not a choice
   of one. The inactive state still has to read as pressable. */
.trend-seg .seg-btn { position: relative; }
.trend-seg .seg-btn.active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Set-password screen ---------- */
/* Arriving from an email, people should not have to remember which
   address they used. */
.np-account {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  word-break: break-all;
}

/* ---------- Forms ---------- */
.form-group {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.field + .field { border-top: 1px solid var(--sep); }
.field label { font-size: 15px; font-weight: 500; flex-shrink: 0; }
.field .hint { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }

.field input, .field select {
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  text-align: right;
  color: var(--accent);
  font-weight: 600;
  outline: none;
  width: 100%;
  min-width: 0;
}
.field input::placeholder { color: var(--text-3); font-weight: 400; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Day stepper rows */
.day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.day-entry-group + .day-entry-group { border-top: 1px solid var(--sep); }
.day-name { font-size: 15px; font-weight: 500; }

/* The small print under a drink's name in the day sheet. Was three
   inline styles repeated per row; it earns a class now that a retired
   drink adds a second line of it. */
.day-sub { font-size: 11.5px; color: var(--text-3); margin-left: 17px; }
.day-sub-soft { opacity: 0.75; }

/* A drink that has been taken off the menu but still has sales on this
   day. It reads quieter than a live row - it is history being corrected,
   not a drink anyone can sell - and says plainly how to clear it. */
.day-row.retired .day-name { color: var(--text-2); }
.day-sub-retired { color: var(--orange); }
.day-addon-list { margin: 0 16px 10px 33px; border-left: 2px solid var(--accent-soft); }
.day-addon-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0 7px 12px; }
.day-addon-row + .day-addon-row { border-top: 1px solid var(--sep); }
.day-addon-info { min-width: 0; }
.day-addon-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.day-addon-row .day-sub { margin-left: 0; }
.day-addon-row .stepper { flex-shrink: 0; }
.day-financial-total { padding: 8px 16px 2px; color: var(--text-2); font-size: 12px; text-align: right; }
.day-financial-total[hidden] { display: none; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: var(--bg);
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.stepper button:active { background: #e3e3ea; }
.stepper input {
  width: 52px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  color: var(--text);
}

.week-total-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.week-total-banner .label { font-size: 14px; font-weight: 600; color: var(--accent); }
.week-total-banner .value { font-size: 22px; font-weight: 800; color: var(--accent); }

/* Toast */
.toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -80px);
  background: #1c1c1e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.toast.show { transform: translate(-50%, 0); }

.week-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  margin-bottom: 12px;
}
.week-picker button {
  border: none;
  background: var(--bg);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 17px;
  color: var(--accent);
  cursor: pointer;
}
/* Invisible but still occupying its slot, so the label stays centred
   whether or not the forward arrow is available. */
.week-picker button.slot-hidden {
  visibility: hidden;
  pointer-events: none;
}

.week-picker .week-label { flex: 1; font-size: 14px; font-weight: 700; text-align: center; }
.week-picker .week-label small { display: block; font-weight: 500; color: var(--text-2); font-size: 11.5px; margin-top: 1px; }

/* ---------- Sales calendar ---------- */
.cal-card { padding: 12px 8px 10px; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-cell {
  aspect-ratio: 0.82;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  border: 1.5px solid transparent;
}
.cal-cell:active { transform: scale(0.93); }
.cal-cell.empty { cursor: default; pointer-events: none; }
.cal-cell.has-sales { background: var(--accent-soft); }
.cal-cell.today { border-color: var(--accent); }

.cal-daynum { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cal-cell.today .cal-daynum { color: var(--accent); font-weight: 800; }

.cal-total {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
  min-height: 15px;
}

.cal-dots {
  display: flex;
  gap: 2.5px;
  margin-top: 1px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
}
.cal-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   LOGIN / AUTH SCREEN
   ============================================================ */

[hidden] { display: none !important; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 24px) 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 32px 24px 26px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.auth-logo {
  display: block;
  /* Large enough that "Crafted Coffee, Made Fresh" is readable rather
     than a smudge. Room for it comes from dropping the subtitle. */
  width: 228px;
  height: auto;
  margin: 2px auto 14px;
}





.auth-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 6px;
  line-height: 1.45;
}
.auth-sub b { color: var(--text); font-weight: 700; }
/* No step text, no gap. */
.auth-sub:empty { display: none; }

.auth-step { display: none; margin-top: 22px; }
.auth-step.active { display: block; }

.auth-input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--sep);
  border-radius: 14px;
  background: var(--bg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--text-3); font-weight: 400; letter-spacing: normal; }

.auth-input.code {
  /* Codes can be 6-10 digits, so scale with the viewport rather than
     letting a long one overflow the card on a narrow phone. */
  font-size: clamp(20px, 6.5vw, 28px);
  font-weight: 800;
  letter-spacing: 6px;
  text-indent: 6px;
  padding: 14px 10px;
}
.auth-input.code::placeholder { letter-spacing: normal; text-indent: 0; }

.auth-step .btn { margin-bottom: 8px; }
.auth-step .btn-ghost { padding: 10px; font-size: 14px; font-weight: 600; }
.auth-step .btn:disabled { opacity: 0.45; cursor: default; }

.auth-error {
  display: none;
  background: #ffecec;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 11px 14px;
  border-radius: 12px;
  margin-top: 12px;
  text-align: left;
}
.auth-error.show { display: block; }

.auth-demo {
  display: none;
  background: #fff4e5;
  color: #b25b00;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.auth-demo.show { display: block; }
.auth-demo .demo-code {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
  margin-top: 4px;
  color: #8a4600;
}

.auth-note {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 18px;
}

/* ---------- Header account button ---------- */
/* Mark on the left, page title centred, account on the right. Equal
   side columns so the title sits in the middle whatever it says. */
.header-top {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 10px;
}
.header-logo {
  width: 32px;
  height: auto;
  justify-self: start;
}
.header-titles { min-width: 0; text-align: center; }

.account-btn {
  flex-shrink: 0;
  justify-self: end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.1s;
}
.account-btn:active { transform: scale(0.92); }

/* ---------- Account dropdown menu ---------- */
.account-wrap { position: relative; flex-shrink: 0; justify-self: end; }

.account-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 234px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.18s, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.18s;
}
.account-menu.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--sep);
}
.account-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}
.account-menu-who { min-width: 0; }
.account-menu-name { font-size: 14px; font-weight: 700; }
.account-menu-email {
  font-size: 11.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.account-menu-item + .account-menu-item { border-top: 1px solid var(--sep); }
.account-menu-item:active { background: #f0f0f5; }
.account-menu-item.danger { color: var(--red); }
.ami-icon { width: 20px; line-height: 0; flex-shrink: 0; }
.ami-icon svg { width: 19px; height: 19px; display: block; }

/* ---------- Profile sheet ---------- */
.profile-hero { text-align: center; padding: 8px 0 6px; }
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 6px 18px rgba(77, 90, 58, 0.32);
}
.profile-email { font-size: 17px; font-weight: 700; word-break: break-all; }
.profile-shop { font-size: 13px; color: var(--text-2); margin-top: 3px; }

/* Read-only key/value rows inside a form-group */
.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.kv-row + .kv-row { border-top: 1px solid var(--sep); }
.kv-row .kv-key { font-size: 15px; font-weight: 500; }
.kv-row .kv-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  text-align: right;
  word-break: break-word;
}
.kv-row .kv-val.accent { color: var(--accent); }
.kv-row .kv-val.green { color: var(--green); }
.kv-row .kv-val.orange { color: var(--orange); }

.settings-warn {
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.5;
  margin-top: 10px;
}

/* ---------- In-app confirm dialog ---------- */
.dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.dialog-wrap.open { opacity: 1; visibility: visible; }

.dialog {
  width: 100%;
  max-width: 300px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transform: scale(0.86);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.dialog-wrap.open .dialog { transform: scale(1); }

.dialog-title {
  font-size: 16px;
  font-weight: 700;
  padding: 20px 20px 0;
}
.dialog-msg {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
  padding: 6px 20px 18px;
  white-space: pre-line;
}
/* An input directly beneath supplies its own spacing, so the message
   must not add a second gap on top of it. */
.dialog-msg:has(+ .dialog-input:not([hidden])) { padding-bottom: 4px; }

.dialog-actions {
  display: flex;
  border-top: 1px solid var(--sep);
}
.dialog-btn {
  flex: 1;
  padding: 13px 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.dialog-btn + .dialog-btn { border-left: 1px solid var(--sep); }
.dialog-btn:active { background: #ededf2; }
.dialog-btn.primary { font-weight: 700; }
.dialog-btn.primary.danger { color: var(--red); }

/* A choice of several, stacked, each with the plain-English line that
   says what it means. Roles are the only thing that asks this, and
   picking one from a list of names alone would be guesswork. */
.dialog-choices { border-top: 1px solid var(--sep); }
.dialog-choice {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.dialog-choice + .dialog-choice { border-top: 1px solid var(--sep); }
.dialog-choice:active { background: #ededf2; }
.dialog-choice .dc-name { font-size: 15px; font-weight: 700; color: var(--text); }
.dialog-choice .dc-what { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.dialog-choice.current .dc-name::after {
  content: " \00b7 current";
  font-weight: 500;
  color: var(--text-3);
}
.dialog-choice.current { opacity: 0.55; }

/* ---------- Segmented control (Daily / Weekly / Monthly) ---------- */
.seg {
  display: flex;
  gap: 2px;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 11px;
  padding: 2px;
  margin-bottom: 12px;
}
.seg-btn {
  flex: 1;
  padding: 8px 4px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.seg-btn.active {
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- Horizontal bar chart (daily view) ---------- */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}
.hbar-row {
  display: grid;
  grid-template-columns: 33% 1fr auto;
  align-items: center;
  gap: 9px;
}
.hbar-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  height: 22px;
  background: var(--bg);
  border-radius: 7px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: 7px;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.hbar-val {
  font-size: 14px;
  font-weight: 800;
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Email typo suggestion ---------- */
.auth-suggest {
  background: #fff4e5;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  text-align: left;
}
.auth-suggest-q {
  font-size: 13px;
  font-weight: 600;
  color: #b25b00;
  line-height: 1.45;
  word-break: break-all;
}
.auth-suggest-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.asg-btn {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-radius: 10px;
  background: rgba(178, 91, 0, 0.12);
  color: #b25b00;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.asg-btn.yes { background: var(--accent); color: #fff; }
.asg-btn:active { opacity: 0.8; }

/* ---------- Password fields ---------- */
.auth-seg { margin: 20px 0 4px; }

.pw-wrap { position: relative; }
.pw-wrap .auth-input { padding-right: 62px; }
.pw-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -5px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
}

.auth-input[type="password"],
.auth-input[type="email"] { text-align: left; font-size: 15px; font-weight: 500; }

.pw-meter {
  height: 4px;
  border-radius: 3px;
  background: rgba(118, 118, 128, 0.16);
  overflow: hidden;
  margin: 2px 2px 6px;
}
.pw-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--red);
  transition: width 0.25s, background 0.25s;
}
.pw-hint {
  font-size: 11.5px;
  color: var(--text-3);
  text-align: left;
  padding: 0 2px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.pw-hint.good { color: var(--green); font-weight: 600; }
.pw-hint.bad { color: var(--orange); font-weight: 600; }

.auth-ok {
  display: none;
  background: #e6f7ec;
  color: #1d7a3d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  padding: 11px 14px;
  border-radius: 12px;
  margin-top: 12px;
  text-align: left;
}
.auth-ok.show { display: block; }

/* ---------- Locked input during the reset cooldown ---------- */
.auth-input:disabled {
  background: rgba(118, 118, 128, 0.1);
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
  cursor: not-allowed;
}

/* ---------- Users list (admin) ---------- */
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.user-row + .user-row { border-top: 1px solid var(--sep); }
.user-row.inactive { opacity: 0.55; }

.user-main { min-width: 0; flex: 1; }
.user-email {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-meta { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

.role-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(118, 118, 128, 0.14);
  color: var(--text-2);
}
.role-chip.admin { background: var(--accent-soft); color: var(--accent); }
/* Superadmin reads as the strongest of the three - solid rather than
   tinted - because it is the only role that can change who has access.
   An operator gets no chip colour at all: it is the ordinary case, and
   colouring everything would leave nothing standing out. */
.role-chip.superadmin { background: var(--accent); color: var(--cream); }
.role-chip.operator { background: var(--bg); color: var(--text-2); }
/* An account the rest of the shop cannot see. Dashed rather than filled:
   it should read as absent, not as another rank. */
.role-chip.concealed {
  background: transparent;
  color: var(--text-2);
  border: 1px dashed var(--text-3);
}
.role-chip.off { background: #ffecec; color: var(--red); }
.you-chip {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Two by two, and every button PINNED to its cell:

       Job title | Disable      Row 1
       Role      | Delete       Row 2

   Placed explicitly rather than left to flow. An admin has no floor job
   and so no Job title button, and under auto-flow the other three slid
   up a place - Disable and Role sharing row 1, Delete alone underneath.
   Each row then had its controls somewhere slightly different, which is
   exactly the thing you learn to stop trusting. The top-left cell is
   left empty instead. */
.user-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  flex-shrink: 0;
  justify-items: stretch;
}
.user-actions > .ua-job    { grid-column: 1; grid-row: 1; }
.user-actions > .ua-active { grid-column: 2; grid-row: 1; }
.user-actions > .ua-role   { grid-column: 1; grid-row: 2; }
.user-actions > .ua-delete { grid-column: 2; grid-row: 2; }

/* The owner's label and your own role label are not buttons and should
   not be squeezed into half a row. Approve and Decline on a waiting
   account are not placed at all: with no pinned buttons beside them
   they flow into row 1 and fill it. */
.user-actions > .user-self-label { grid-column: 1 / -1; }
.user-btn {
  border: none;
  border-radius: 8px;
  /* Tighter than it was. Two columns of buttons take roughly twice the
     width of one, and the name beside them is what pays for it - at
     10px of padding the join date wrapped onto its own line. */
  padding: 6px 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.user-btn.danger { color: var(--red); background: #ffecec; }
.user-btn:disabled { opacity: 0.4; cursor: default; }

.user-self-label {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(118, 118, 128, 0.12);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: default;
}

/* ---------- Confirm-account step ---------- */
.confirm-to {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: 12px;
  word-break: break-all;
}
.confirm-to b { color: var(--text); }

/* ---------- Activity log ---------- */
.act-row {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  align-items: flex-start;
}
.act-row + .act-row { border-top: 1px solid var(--sep); }

.act-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.act-icon.insert { background: #e6f7ec; color: #1d7a3d; }
.act-icon.update { background: var(--accent-soft); color: var(--accent); }
.act-icon.delete { background: #ffecec; color: var(--red); }

.act-main { min-width: 0; flex: 1; }
.act-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.act-title b { font-weight: 800; }
.act-meta { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.act-changes {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 5px;
  line-height: 1.5;
  background: var(--bg);
  border-radius: 8px;
  padding: 6px 9px;
  word-break: break-word;
}
.act-changes .fld { font-weight: 700; color: var(--text); }
.act-changes .to { color: var(--accent); font-weight: 700; }

/* ---------- Days that have not happened yet ---------- */
/* Closed days: in the future, or older than a staff member may edit.
   Both are untappable and both read as out of reach. */
.cal-cell.future,
.cal-cell.locked {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}
.cal-cell.future .cal-daynum,
.cal-cell.locked .cal-daynum { color: var(--text-3); }


/* ============================================================
   STARTUP SPLASH
   ============================================================
   Ported from BYDEDS-splashscreen.html. Two changes from that
   standalone page:

     1. The logo was a 407 KB base64 data URI, repeated three times
        (the <img>, and twice more as a CSS mask for the shine). It is
        byte-identical to assets/logo-lockup.png, which the service
        worker already caches, so all three now point at the file.
     2. `.is-gone` is new. The exit animation ends at opacity 0, but an
        invisible full-screen layer still swallows every tap, so the
        element is removed from the layout once the animation is done.

   The phone draws its OWN splash before this one - Android from the
   manifest icon and background_color, iOS from the touch icon. Nothing
   in a web app can suppress that. What it can do is match it: both are
   the same cream, so the seam does not read as two screens.
   ============================================================ */

.loading-screen.is-gone { display: none !important; }

/* ============================================================
   STARTUP LOADING SCREEN
   The original BYDEDS lockup stays untouched. Motion comes from
   light, depth and center-origin ripple layers around that asset.
   ============================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  min-width: 100%;
  min-height: 100dvh;
  padding:
    max(env(safe-area-inset-top), 24px)
    max(env(safe-area-inset-right), 22px)
    max(env(safe-area-inset-bottom), 24px)
    max(env(safe-area-inset-left), 22px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 253, 248, 0.98) 0 15%, rgba(250, 247, 239, 0.82) 42%, rgba(245, 241, 232, 0.98) 78%),
    var(--cream);
  perspective: 1100px;
  transform: translateZ(0);
  will-change: opacity, visibility;
}

/* Slow ambient depth keeps the cream field from looking digitally flat. */
.loading-screen::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -24vmax;
  background:
    radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.72), transparent 31%),
    radial-gradient(circle at 18% 18%, rgba(139, 94, 60, 0.055), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(77, 90, 58, 0.045), transparent 27%);
  filter: blur(18px);
}

/* One complete premium light pass every two seconds, continuously. */
.loading-shine {
  position: absolute;
  z-index: -1;
  top: -35%;
  bottom: -35%;
  left: -78%;
  width: 58%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.72) 49%,
    rgba(255, 255, 255, 0.16) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(22px);
  transform: translate3d(0, 0, 0) skewX(-8deg);
  animation: loadingShine 2000ms cubic-bezier(0.42, 0, 0.22, 1) infinite;
  will-change: transform, opacity;
}

@keyframes loadingShine {
  0%   { transform: translate3d(0, 0, 0) skewX(-8deg); opacity: 0; }
  12%  { opacity: 0.62; }
  50%  { opacity: 0.95; }
  88%  { opacity: 0.58; }
  100% { transform: translate3d(315%, 0, 0) skewX(-8deg); opacity: 0; }
}

.loading-logo-stage {
  position: relative;
  z-index: 2;
  width: clamp(218px, 58vw, 322px);
  transform: translateZ(26px) scale(1);
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 18px 22px rgba(60, 53, 39, 0.06))
    drop-shadow(0 3px 5px rgba(60, 53, 39, 0.04));
  will-change: transform, opacity, filter;
}

.loading-logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* A second light pass is masked by the exact supplied PNG. It adds the
   requested polished shine without recolouring or redrawing the logo. */
.loading-logo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.9) 49%,
    rgba(255, 255, 255, 0.16) 60%,
    transparent 70%
  );
  -webkit-mask: url("assets/logo-lockup.png") center / contain no-repeat;
  mask: url("assets/logo-lockup.png") center / contain no-repeat;
  transform: translate3d(-145%, 0, 0);
  opacity: 0;
  animation: loadingLogoShine 2000ms cubic-bezier(0.42, 0, 0.22, 1) infinite;
  will-change: transform, opacity;
}

@keyframes loadingLogoShine {
  0%, 9% { transform: translate3d(-145%, 0, 0); opacity: 0; }
  20%    { opacity: 0.18; }
  48%    { opacity: 0.5; }
  78%    { opacity: 0.16; }
  100%   { transform: translate3d(145%, 0, 0); opacity: 0; }
}

.loading-ripple {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(126vmax, 1500px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loading-ripple::before {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0 7%, rgba(255,255,255,0.38) 18%, rgba(255,255,255,0) 64%);
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.45);
}

.loading-droplet {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, rgba(255,255,255,0.68) 22%, rgba(245,241,232,0.14) 66%, rgba(77,90,58,0.12) 100%);
  box-shadow: 0 4px 14px rgba(77, 90, 58, 0.12), inset -2px -3px 5px rgba(139, 94, 60, 0.08);
}

.loading-ripple-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(139, 94, 60, 0.025),
    inset 0 0 18px rgba(255, 255, 255, 0.26),
    0 0 22px rgba(77, 90, 58, 0.035);
  will-change: transform, opacity, filter;
}

.loading-screen.is-exiting {
  pointer-events: none;
  animation: loadingScreenFade 820ms cubic-bezier(0.22, 0.72, 0.18, 1) forwards;
}
.loading-screen.is-exiting .loading-shine,
.loading-screen.is-exiting .loading-logo-stage::after {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 150ms ease;
}
.loading-screen.is-exiting .loading-logo-stage {
  animation: loadingLogoExit 820ms cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
}
.loading-screen.is-exiting .loading-droplet {
  animation: loadingDrop 360ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.loading-screen.is-exiting .loading-ripple::before {
  animation: loadingRefraction 620ms 40ms ease-out forwards;
}
.loading-screen.is-exiting .loading-ripple-ring.ring-1 {
  animation: loadingRipple 680ms 70ms cubic-bezier(0.16, 0.7, 0.22, 1) forwards;
}
.loading-screen.is-exiting .loading-ripple-ring.ring-2 {
  animation: loadingRipple 720ms 125ms cubic-bezier(0.16, 0.7, 0.22, 1) forwards;
}
.loading-screen.is-exiting .loading-ripple-ring.ring-3 {
  animation: loadingRipple 760ms 180ms cubic-bezier(0.16, 0.7, 0.22, 1) forwards;
}

@keyframes loadingDrop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  40%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes loadingRefraction {
  0%   { inset: 48%; opacity: 0; }
  25%  { opacity: 0.46; }
  100% { inset: 7%; opacity: 0; }
}

@keyframes loadingRipple {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.025); filter: blur(0); }
  15%  { opacity: 0.66; }
  70%  { opacity: 0.26; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: blur(1.2px); }
}

@keyframes loadingLogoExit {
  0%   { opacity: 1; transform: translateZ(26px) scale(1); filter: drop-shadow(0 18px 22px rgba(60,53,39,0.06)); }
  35%  { opacity: 0.92; transform: translateZ(48px) scale(1.055); }
  100% { opacity: 0; transform: translateZ(150px) scale(1.42); filter: blur(2.2px) drop-shadow(0 30px 34px rgba(60,53,39,0.02)); }
}

@keyframes loadingScreenFade {
  0%, 36% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

@media (min-width: 700px) {
  .loading-logo-stage { width: clamp(286px, 34vw, 350px); }
}

@media (min-width: 1100px) {
  .loading-logo-stage { width: clamp(300px, 24vw, 372px); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .loading-logo-stage { width: clamp(190px, 34vh, 252px); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-shine,
  .loading-logo-stage::after { animation: none; opacity: 0; }
  .loading-screen.is-exiting { animation: loadingScreenFade 180ms linear forwards; }
  .loading-screen.is-exiting .loading-logo-stage { animation: none; opacity: 0; transition: opacity 180ms linear; }
  .loading-screen.is-exiting .loading-droplet,
  .loading-screen.is-exiting .loading-ripple::before,
  .loading-screen.is-exiting .loading-ripple-ring { animation: none; opacity: 0; }
}


/* ---------- Dashboard blocks (layout set by the superadmin) ---------- */
/* Every piece of the dashboard sits in one two-column grid. A block is
   full width unless the layout makes it half, so two halves share a row. */
.dash-block {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.dash-block.half { grid-column: auto; }
.dash-block > .stat-card { flex: 1; }
.dash-block.half .stat-value { font-size: clamp(18px, 5.6vw, 26px); overflow-wrap: anywhere; }
.dash-section .section-label { margin: 8px 6px 8px; }
.dash-section > .card { margin-bottom: 0; flex: 1; }

/* ---------- Edit mode ---------- */
/* The tab bar and + button give way to the edit bar, so there is no
   wandering off to another tab with the layout half done. */
body.dash-editing .tabbar,
body.dash-editing .fab { display: none !important; }

.dash-edit-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(480px, 100%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--sep);
  box-shadow: 0 -6px 18px rgba(61, 55, 40, 0.10);
}
.dash-edit-bar[hidden] { display: none; }
.dash-edit-title { min-width: 0; display: flex; flex-direction: column; }
.dash-edit-title strong { font-size: 14px; white-space: nowrap; }
.dash-edit-title span { font-size: 11px; color: var(--text-2); }
.dash-edit-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dash-edit-btn {
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(118, 118, 128, 0.12);
  color: var(--text);
  cursor: pointer;
}
.dash-edit-btn.primary { background: var(--accent); color: #fff; }

.dash-editing .dash-block {
  outline: 1.5px dashed rgba(77, 90, 58, 0.45);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* The block's own buttons and rows sleep while it is being arranged. */
.dash-editing .dash-block > :not(.dash-tools) { pointer-events: none; user-select: none; }
.dash-block.is-hidden > :not(.dash-tools) { opacity: 0.35; }

.dash-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
  padding: 3px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
.dash-tools button {
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  border-radius: 9px;
}
.dash-tools button:active { background: rgba(255, 255, 255, 0.16); }
.dash-tools svg { width: 18px; height: 18px; display: block; }
.dash-handle,
.dash-tool {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The grip is the only thing a finger can drag by - the rest of the
   block still scrolls the page. */
.dash-handle { touch-action: none; cursor: grab; }
.dash-spacer { flex: 1; }
.dash-block.dragging {
  z-index: 50;
  opacity: 0.94;
  box-shadow: 0 14px 34px rgba(61, 55, 40, 0.28);
  border-radius: var(--radius);
}
body.dash-dragging,
body.dash-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- Block heights ---------- */
/* Charts are redrawn to the height (the bar chart through --bar-h, the
   trend chart in lineChartSvg); cards holding one figure grow so they
   line up with a taller neighbour; long lists scroll when compact. */
.dash-block.h-compact { --bar-h: 92px; }
.dash-block.h-tall    { --bar-h: 200px; }
.dash-block.h-xtall   { --bar-h: 280px; }

.dash-block.h-compact > .stat-card { padding: 12px 14px; }
.dash-block.h-compact .stat-value { font-size: 21px; margin-top: 3px; }
.dash-block.h-tall > .stat-card  { min-height: 170px; }
.dash-block.h-xtall > .stat-card { min-height: 240px; }

.dash-block.h-compact .hbar-chart,
.dash-section.h-compact > .card:not(.trend-card) {
  max-height: 240px;
  overflow-y: auto;
}
.dash-block.h-compact .hbar-chart { max-height: 150px; }

/* Five tools must fit a half-width block on a phone. */
.dash-block.half .dash-handle,
.dash-block.half .dash-tool { width: 29px; }
.dash-height { position: relative; }
.dash-height span {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Guest accounts ---------- */
.guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  background: #FBF0DC;
  color: #6B4518;
  border: 1px dashed rgba(139, 94, 60, 0.45);
}
.guest-banner[hidden] { display: none; }
.guest-banner-text { min-width: 0; display: flex; flex-direction: column; }
.guest-banner-text strong { font-size: 13.5px; }
.guest-banner-text span { font-size: 11.5px; opacity: 0.9; }
.guest-banner-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  padding: 8px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--brown);
  color: #fff;
  cursor: pointer;
}

.users-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.users-group-row .user-btn { text-transform: none; letter-spacing: 0; }
.users-empty { padding: 4px 14px 14px; font-size: 12.5px; color: var(--text-3); }
.role-chip.guest { background: #FBF0DC; color: #8A5A1E; }
.guest-until { font-size: 11.5px; color: var(--text-2); }
.guest-until.soon { color: var(--orange); font-weight: 600; }
.guest-until.over { color: var(--red); font-weight: 600; }
.user-sub.masked { font-style: italic; color: var(--text-3); }

/* A card label with its period above the name: THIS MONTH / GROSS PROFIT */
.stat-label .stat-period,
.stat-label .stat-name { display: block; }
.stat-label .stat-period { font-size: 10.5px; color: var(--text-3); margin-bottom: 1px; }
.menu-thumb { position: relative; width: 72px; height: 72px; flex: 0 0 72px; border-radius: 12px; overflow: hidden; }
.menu-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-thumb-image.is-framed { position: absolute; max-width: none; height: auto; object-fit: unset; }
.menu-thumb-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; }
.menu-item-row .menu-thumb { margin-right: 14px; }
.menu-item-row .row-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}
.menu-item-row .row-title { white-space: normal; line-height: 1.3; }
.menu-item-row .row-right,
.menu-item-row .chevron { flex-shrink: 0; }
@media (max-width: 420px) {
  .menu-item-row { padding: 14px 10px; }
  .menu-item-row .num-chip { width: 26px; height: 26px; margin-right: 6px; font-size: 12px; }
  .menu-item-row .menu-thumb { width: 50px; height: 50px; flex-basis: 50px; margin-right: 6px; }
  .menu-item-row .row-right { margin-left: 6px; }
  .menu-item-row .row-value { font-size: 14px; }
  .menu-item-row .row-caption { font-size: 10px; }
  .menu-item-row .chevron { margin-left: 4px; }
}
@media (max-width: 360px) {
  .menu-item-row .num-chip { width: 24px; height: 24px; margin-right: 4px; }
  .menu-item-row .menu-thumb { width: 46px; height: 46px; flex-basis: 46px; margin-right: 4px; }
}
.menu-photo-stage { position: relative; display: inline-block; max-width: 100%; margin: 8px 0; line-height: 0; overflow: hidden; border-radius: 12px; }
.menu-photo-stage[hidden] { display: none; }
.menu-photo-preview { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; border-radius: 12px; background: #f5f1e8; }
.menu-crop-marker { position: absolute; box-sizing: border-box; border: 2px dashed #fff; border-radius: 12px; background: #fff3; box-shadow: 0 0 0 9999px #0005; cursor: grab; touch-action: none; }
.menu-crop-marker:active { cursor: grabbing; }
.menu-crop-marker:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.menu-crop-handle { position: absolute; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid white; border-radius: 50%; background: #1e3021; box-shadow: 0 1px 5px #0007; touch-action: none; z-index: 1; }
.menu-crop-handle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.menu-crop-handle.nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.menu-crop-handle.n { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.menu-crop-handle.ne { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.menu-crop-handle.e { right: 0; top: 50%; transform: translate(50%, -50%); cursor: ew-resize; }
.menu-crop-handle.se { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.menu-crop-handle.s { left: 50%; bottom: 0; transform: translate(-50%, 50%); cursor: ns-resize; }
.menu-crop-handle.sw { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.menu-crop-handle.w { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }
#menuPhotoEditor, #menuAddonEditor { padding: 12px; }
#mPhoto { max-width: 100%; }
.field-note { color: var(--text-3); font-size: 12px; line-height: 1.5; margin: 8px 0; }
.addon-row { padding: 12px 0; border-bottom: 1px solid var(--sep); }
.addon-row input { box-sizing: border-box; min-width: 0; border: 1px solid var(--sep); border-radius: 8px; padding: 9px; background: #fff; color: var(--text); font: inherit; }
.addon-name { width: 100%; margin-bottom: 8px; }
.addon-numbers { display: flex; gap: 8px; align-items: end; }
.addon-numbers label { flex: 1; min-width: 0; font-size: 11px; color: var(--text-3); }
.addon-numbers input { display: block; width: 100%; margin-top: 3px; }
.addon-numbers button { border: 0; background: transparent; color: var(--red); font-size: 24px; cursor: pointer; }
.announcement-card { padding: 16px; border-bottom: 1px solid var(--sep); }
.announcement-card h3 { margin: 4px 0 8px; font-size: 16px; }
.announcement-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.announcement-meta { color: var(--text-3); font-size: 11px; }
.field-stack { display: block; }
.field-stack label { display: block; margin-bottom: 8px; }
.field-stack textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--sep); border-radius: 8px; padding: 10px; font: inherit; resize: vertical; }