/* =========================================
   STALL HOLDER ACCOUNT LAYOUT (sidebar UI)
   Paste at bottom of styles.css
========================================= */

body.stallHolder {
  background: #fbf3e6;
}

/* keep your existing topbar colors, just spacing */
.shTopbarInner {
  gap: 18px;
}

.shStallTitle {
  font-weight: 900;
  font-size: 26px;
  color: #111;
}

.shTopRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.shUserBtn {
  border: none;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
  padding: 10px 10px;
}

.shCaret {
  font-weight: 900;
}

.shLogout {
  padding: 12px 18px;
  border-radius: 10px;
}

/* page layout */
.shPage {
  padding: 18px 18px 70px;
}

.shLayout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
}

/* sidebar */
.shSide {
  background: #2c2c2c;
  border-radius: 14px;
  padding: 14px 12px;
  color: #fff;
  height: fit-content;
}

.shNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-decoration: none;
  color: #fff;
  font-weight: 900;

  padding: 14px 14px;
  border-radius: 12px;
  margin-bottom: 10px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.shNav:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shNav.active {
  background: #df8f3b; /* matches your active pill color vibe */
  color: #fff;
}

.shBadge {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e11d48;
  font-size: 12px;
  font-weight: 900;
  padding: 0 8px;
}

.shSideDivider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 10px 8px 14px;
}

/* content */
.shContent {
  min-width: 0;
}

.shHead {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin-bottom: 14px;
}

.shHead h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}

.shHead p {
  margin: 6px 0 0;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 800;
}

/* profile block */
.shProfileGrid {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  padding: 16px;
  align-items: center;
}

.shName {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}

.shMetaRows {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.shMetaRows > div {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}

.shMetaRows > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.shPhone {
  margin-top: 10px;
  font-weight: 900;
}

.shBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* stall info rows */
.shFormRows {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.shRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.shRow .k {
  font-weight: 900;
}

.shGrade {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #dc2626;
  color: #fff;
  font-weight: 900;
}

.shRowEnd {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  border-bottom: none;
}

/* preferences */
.shPrefs {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: center;
}

.shCheck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.shCheck input {
  width: 18px;
  height: 18px;
}

.shPrefsEnd {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* staff */
.shStaff {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.shStaff .k {
  font-weight: 900;
}

/* responsive */
@media (max-width: 980px) {
  .shLayout {
    grid-template-columns: 220px 1fr;
  }
}

@media (max-width: 760px) {
  .shLayout {
    grid-template-columns: 1fr;
  }

  .shSide {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .shNav {
    flex: 1 1 160px;
    margin-bottom: 0;
  }

  .shProfileGrid {
    grid-template-columns: 90px 1fr;
  }

  .shBtns {
    grid-column: 1 / -1;
  }

  .shPrefs {
    grid-template-columns: 1fr;
  }
}
.shTopbarInner {
  gap: 18px;
}
.shStallTitle {
  font-weight: 900;
  font-size: 26px;
  color: #111;
}
.shTopRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.shUserBtn {
  border: none;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
  padding: 10px;
}
.shMuted {
  opacity: 0.7;
}
.shCaret {
  font-weight: 900;
}
.shLogout {
  padding: 12px 18px;
  border-radius: 10px;
}

.shPage {
  padding: 18px 18px 70px;
}
.shLayout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
}

.shSide {
  background: #2c2c2c;
  border-radius: 14px;
  padding: 14px 12px;
  color: #fff;
  height: fit-content;
}
.shNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  padding: 14px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.shNav:hover {
  background: rgba(255, 255, 255, 0.1);
}
.shNav.active {
  background: #df8f3b;
  color: #fff;
}

.shBadge {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e11d48;
  font-size: 12px;
  font-weight: 900;
  padding: 0 8px;
}
.shSideDivider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 10px 8px 14px;
}

.shContent {
  min-width: 0;
}
.shHead {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin-bottom: 14px;
}
.shHead h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}
.shHead p {
  margin: 6px 0 0;
  opacity: 0.75;
  font-weight: 800;
}

.shProfileGrid {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  padding: 16px;
  align-items: center;
}
.shName {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.shMetaRows {
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.shMetaRows > div {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}
.shMetaRows > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.shPhone {
  margin-top: 10px;
  font-weight: 900;
}
.shBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shFormRows {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}
.shRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.shRow .k {
  font-weight: 900;
}
.shRowEnd {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}

.shGrade {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #6b7280;
  color: #fff;
  font-weight: 900;
}
.shGrade.gradeA {
  background: #dc2626;
}
.shGrade.gradeB {
  background: #f97316;
}
.shGrade.gradeC {
  background: #f59e0b;
}
.shGrade.gradeD {
  background: #6b7280;
}

.shPrefs {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: center;
}
.shCheck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.shCheck input {
  width: 18px;
  height: 18px;
}
.shPrefsEnd {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.shStaff {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.actionsRow {
  padding: 14px 16px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.shDangerNote {
  margin: 0 16px 16px;
  font-weight: 800;
  opacity: 0.65;
}

@media (max-width: 760px) {
  .shLayout {
    grid-template-columns: 1fr;
  }
  .shSide {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .shNav {
    flex: 1 1 160px;
    margin-bottom: 0;
  }
  .shProfileGrid {
    grid-template-columns: 90px 1fr;
  }
  .shBtns {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .shPrefs {
    grid-template-columns: 1fr;
  }
}
.hpModalOverlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  z-index: 9999;
}
.hpModal {
  width: min(92vw, 520px);
  max-height: 85vh;
  overflow: auto;
  border-radius: 14px;
}
.hpModalBody {
  max-height: calc(85vh - 140px);
  overflow: auto;
}
@media (max-width: 480px) {
  .hpModal {
    width: 94vw;
    max-height: 88vh;
  }
  .hpModalFoot {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hpModalBtn {
    width: 100%;
  }
}
.hpTimeRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.hpTimeLabel {
  font-weight: 900;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

.hpTimePreview {
  margin-top: 10px;
  font-weight: 900;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .hpTimeRow {
    grid-template-columns: 1fr;
  }
}
/* ============================
   Mobile Polish – Account Page
============================ */
@media (max-width: 600px) {
  /* ---------- Header ---------- */
  .topbar {
    padding: 0;
  }

  .topbar-inner {
    padding: 10px 14px;
    gap: 10px;
  }

  .stallTitle,
  .topbar h1 {
    font-size: 20px;
    line-height: 1.1;
  }

  .brand-logo {
    width: 42px;
    height: 42px;
  }

  .userMenu,
  .userName {
    font-size: 14px;
  }

  /* ---------- Sidebar (grid nav) ---------- */
  .sidebar,
  .dashSide,
  .sideNav {
    padding: 12px;
    gap: 10px;
    border-radius: 16px;
  }

  .sidebar a,
  .dashSide a,
  .sideNav a {
    padding: 12px 8px;
    font-size: 14px;
    border-radius: 12px;
    min-height: 48px;
  }

  .sidebar .badge,
  .sidebar .count {
    font-size: 11px;
    width: 22px;
    height: 22px;
  }

  /* ---------- Section headers ---------- */
  .pageTitle,
  .sectionTitle,
  .cardTitle {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .pageSubtitle {
    font-size: 14px;
  }

  /* ---------- Cards ---------- */
  .card,
  .panel,
  .sectionCard,
  .settingsCard {
    padding: 14px;
    border-radius: 16px;
  }

  /* ---------- Profile row ---------- */
  .profileRow,
  .profileInfo {
    gap: 12px;
  }

  .profileAvatar {
    width: 72px;
    height: 72px;
  }

  /* ---------- Buttons ---------- */
  .btn,
  button {
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
  }

  .btn.small {
    padding: 8px 12px;
    font-size: 13px;
  }
}
/* ===== Stats Overview Cards ===== */
.statsTitle {
  margin: 10px 0 12px;
  font-weight: 900;
}

.statsRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.statBox {
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.statTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.statNum {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.statLabel {
  margin-top: 10px;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
}

/* top-right decoration lines */
.statLines {
  width: 42px;
  height: 18px;
  border-radius: 4px;
  opacity: 0.55;
  background:
    linear-gradient(#000 0 0) 0 0/100% 3px no-repeat,
    linear-gradient(#000 0 0) 0 7px/70% 3px no-repeat,
    linear-gradient(#000 0 0) 0 14px/85% 3px no-repeat;
}

/* color variants */
.statPending {
  background: #e8b97b;
}
.statProgress {
  background: #9db9ef;
}
.statSales {
  background: #aaf08c;
}
.statCancelled {
  background: #e39590;
}

/* Mobile: swipe row */
@media (max-width: 768px) {
  .statsRow {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
  }
  .statBox {
    min-width: 210px;
    flex: 0 0 auto;
  }
}
/* ===== Bulk Action Bar ===== */
.bulkBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  margin: 10px 0 14px;
}

.bulkLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulkLabel {
  font-weight: 700;
}

.bulkBar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #aaa;
  font-weight: 600;
}

/* Mobile stack */
@media (max-width: 600px) {
  .bulkBar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .bulkLeft {
    flex-wrap: wrap;
  }

  .bulkBar button {
    width: 100%;
  }
}
/* =========================
   Stall Dashboard: mobile fixes
   (paste at bottom of styles.css)
========================= */

@media (max-width: 760px) {
  /* stop sideways overflow */
  html,
  body {
    overflow-x: hidden;
  }

  /* Filters row MUST wrap instead of forcing wide grid */
  .searchWrap .filters {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 10px;
  }

  /* Make Apply button full width */
  .searchWrap .filters .applyBtn,
  .searchWrap .filters button {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Search bar full width */
  .searchWrap .searchBar {
    width: 100%;
  }

  /* Status tabs wrap nicely */
  .shTabs {
    flex-wrap: wrap;
  }
  .shTabs > button {
    flex: 1 1 48%;
    min-width: 140px;
  }

  /* Table area scrolls instead of breaking layout */
  .shContent table {
    min-width: 720px; /* allow horizontal scroll inside wrapper */
  }
}

/* Stall holder menu action row */
.menuActionsTop {
  width: 100%;
  max-width: 640px;
  margin: 6px auto 0;
  display: flex;
  justify-content: flex-end;
}

/* inside each menu card */
.menuMid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
}

.menuNameRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.menuName {
  font-weight: 900;
}

.menuPrice {
  font-weight: 900;
}

.menuThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.menuThumbPh {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.55);
}

/* Buttons row */
.menuActionRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* reuse your orange button look (copyBtn is already defined in your CSS) */
.ghostBtn {
  background: #fff !important;
  border: 2px solid rgba(0, 0, 0, 0.25) !important;
  color: #333 !important;
}

.dangerBtn2 {
  background: #d9382c !important;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2f2f2f;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== New order highlight ===== */
.orderNew {
  animation: flash 1.2s ease;
}

@keyframes flash {
  0% {
    background: #fff3cd;
  }
  100% {
    background: transparent;
  }
}
.prep {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* status colours */
.prep.pending {
  background: #fff3cd;
  color: #8a6d3b;
}

.prep.in-progress {
  background: #dbeafe;
  color: #1e40af;
}

.prep.completed {
  background: #dcfce7;
  color: #166534;
}

.prep.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

button {
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

button:active {
  transform: scale(0.97);
}
.skeleton {
  height: 14px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
/* ===== Simple modal (RENAMED to avoid clashing with hpModalOverlay/hpModal) ===== */
.hpSimpleModal[hidden] {
  display: none;
}

.hpSimpleModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* fixed alpha */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.hpSimpleModalCard {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
/* FORCE hidden to always hide (prevents CSS overrides) */
[hidden] {
  display: none !important;
}
/* ===== Price beside Edit (Menu Card) ===== */
.menuActionCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 140px;
}

.menuPriceAction {
  font-size: 20px;
  font-weight: 800;
  text-align: left;
}

/* ===== Stall menu action buttons FIX ===== */
.menuCard .menuActionRow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 180px; /* keeps buttons inside card */
}

.menuCard .menuActionRow .copyBtn {
  height: auto !important; /* override fixed height */
  min-height: 44px;
  padding: 12px 18px;
  line-height: 1.15;
  white-space: nowrap; /* keep text on one line */
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .menuCard .menuActionRow {
    width: 100% !important; /* kill fixed width */
    max-width: 100% !important;
  }
}
@media (max-width: 520px) {
  .menuCard .menuActionRow button {
    min-height: 44px;
    font-size: 14px;
  }
}
.hpStallImagePreview {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  margin-top: 10px;
}

/* =========================================
   HYGIENE PAGE STYLES (New)
========================================= */

/* Main layout */
.page.hygienePage {
  background: #fbf3e6;
  padding: 24px 16px 60px;
  display: block;
}

.hygieneGrid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

/* Cards */
.hygieneCard {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.hygieneCard h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: #111;
}

/* Select Stall */
.selectCard select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
}

/* Big Grade Card (Red box in screenshot) */
.gradeBigCard {
  background: #ff0000; /* Default A */
  color: #fff;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  transition: background-color 0.3s ease;
}

.bigGrade {
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
}

.gradeLabel {
  font-size: 18px;
  font-weight: 700;
  margin-top: 10px;
  opacity: 0.95;
}

/* Upcoming Inspection Card */
.upcomingCard {
  border: 2px solid #f7a036;
  background: #fffaf0;
}

.upcomingRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.upcomingDate {
  font-size: 20px;
  font-weight: 900;
  color: #c2780e;
}

.upcomingTag {
  background: #fef3c7;
  color: #92400e;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
}

.upcomingOfficer {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  margin: 0 0 8px;
}

.upcomingHint {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
  font-style: italic;
}

/* License Info */
.licenseRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.licenseDays {
  font-size: 24px;
  font-weight: 900;
  color: #166534;
}

.licenseTag {
  background: #dcfce7;
  color: #166534;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
}

.licenseTag.active {
  background: #dcfce7;
  color: #166534;
}

.licenseTag.warning {
  background: #fef3c7;
  color: #92400e;
}

.licenseTag.expired {
  background: #fee2e2;
  color: #b91c1c;
}

.licenseBar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}

.licenseFill {
  height: 100%;
  background: #00c853;
  border-radius: 99px;
  transition: width 0.5s ease;
}

.licenseDates {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  font-weight: 700;
}

/* Chart Section */
.cardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chartWrap {
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 30px 10px 0; /* padding top for value labels */
  border-bottom: 1px solid #ddd;
  position: relative;
  margin-bottom: 10px;
}

.chartEmpty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: #999;
  z-index: 2;
}

.chartCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.chartBar {
  width: 24px;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 4px;
}

.chartLabel {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.chartValue {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  margin-bottom: 6px;
}

.chartGrid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 0;
  pointer-events: none;
  padding-top: 30px; /* match container padding */
  padding-bottom: 30px; /* space for labels */
}

.chartLine {
  border-top: 1px dashed #eee;
  width: 100%;
  height: 1px;
}

.chartFooter {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

/* History List */
.historyList {
  display: flex;
  flex-direction: column;
}

.histRow {
  display: grid;
  grid-template-columns: 100px 70px 60px 1fr;
  gap: 14px;
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  align-items: center;
  font-size: 14px;
}

.histRow:last-child {
  border-bottom: none;
}

.histHead {
  font-weight: 900;
  background: #f3f4f6;
  border-radius: 8px;
  color: #374151;
  padding: 12px 14px;
  margin-bottom: 6px;
}

.histGrade {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 800px) {
  .hygieneGrid {
    grid-template-columns: 1fr;
  }

  .gradeBigCard {
    min-height: 200px;
  }

  /* Transform table to cards on mobile */
  .histHead {
    display: none;
  }

  .histRow.histDataRow {
    display: block; /* stack elements */
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #eee;
  }

  .histRow.histDataRow > div {
    margin-bottom: 6px;
  }

  .histRow.histDataRow > div:nth-child(1) {
    /* Date */
    font-weight: 900;
    color: #333;
    display: inline-block;
  }

  .histRow.histDataRow > div:nth-child(3) {
    /* Grade */
    float: right;
    margin-top: -24px;
  }
}

/* =========================================
   HYGIENE HISTORY PAGE (styles.css)
========================================= */

/* Mobile Header (matches screenshot) */
.mobileHeader {
  display: none; /* hidden on desktop */
  background: #f7a036; /* orange */
  padding: 14px 16px;
  align-items: center;
  gap: 14px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 900;
}

.mobileHeader h1 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  flex: 1;
  text-align: center; /* center based on screenshot */
  margin-right: 24px; /* balance back btn */
}

.mobileBackBtn {
  background: transparent;
  border: none;
  font-size: 32px;
  font-weight: 300; /* thin arrow */
  line-height: 0.5;
  cursor: pointer;
  padding: 0;
}

/* Page Layout */
.historyPage {
  background: #fbf3e6;
  padding: 24px 16px 60px;
}

.hhGrid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar */
.hhSidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hhBackLink {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.hhStallInfo {
  text-align: center;
}

.hhStallImg {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hhStallName {
  font-size: 22px;
  font-weight: 900;
  margin: 0;
}

/* Current Grade Card (Green Box) */
.currentGradeCard {
  background: #a7eeb8; /* pale green */
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #0d5f23;
}

.cgLabel {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cgValue {
  font-size: 32px;
  font-weight: 900;
}

/* Content Area */
.hhContent {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.hhPageTitle {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 900;
}

/* Controls Row */
.hhControls {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hhSearch {
  flex: 1;
}
.hhSearch input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
}

.hhFilters select {
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  min-width: 120px;
  background: #fff;
  cursor: pointer;
}

/* Mobile Pills */
.hhPills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  width: 100%;
}

.hhPill {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid #ccc;
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hhPill.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Desktop Table */
.hhTableWrap {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.hhTable {
  width: 100%;
  border-collapse: collapse;
}

.hhTable th {
  background: #eee;
  padding: 14px;
  text-align: left;
  font-weight: 800;
  color: #555;
}

.hhTable td {
  padding: 14px;
  border-top: 1px solid #eee;
  font-size: 14px;
  vertical-align: middle;
}

.hhBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}
.badgeRed {
  background: #dc2626;
}
.badgeGreen {
  background: #16a34a;
}
.badgeOrange {
  background: #ca8a04;
}
.badgeBlue {
  background: #2f6bff;
}

/* Mobile Cards */
.hhMobileList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hhMobileCard {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left-width: 8px; /* The colored bar */
  border-left-style: solid;
}

.borderRed {
  border-left-color: #dc2626;
}
.borderGreen {
  border-left-color: #16a34a;
}
.borderOrange {
  border-left-color: #ca8a04;
}
.borderBlue {
  border-left-color: #2f6bff;
}

.mcHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.mcDate {
  font-size: 18px;
  font-weight: 900;
  color: #111;
}

.mcRef {
  font-size: 12px;
  color: #999;
  font-weight: 700;
  margin-top: 2px;
}

.mcBody {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 14px;
}

.mcDivider {
  height: 1px;
  background: #eee;
  margin-bottom: 12px;
}

.mcFoot {
  display: flex;
  justify-content: space-between;
}

.mcLabel {
  display: block;
  font-size: 11px;
  color: #888;
  font-weight: 700;
}

.mcVal {
  font-size: 14px;
  font-weight: 900;
  color: #222;
}

/* Footer / Pagination */
.hhFooter {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eee;
  padding: 10px 14px;
  border-radius: 0 0 16px 16px; /* round bottom only if inside card */
}
/* override radius if mobile load more */
@media (max-width: 800px) {
  .hhFooter {
    background: transparent;
    padding: 0;
    justify-content: center;
  }
}

.hhCount {
  font-size: 13px;
  font-weight: 700;
  color: #666;
}

.hhPagination {
  display: flex;
  gap: 6px;
}

.pgBtn {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  color: #555;
}
.pgBtn.active {
  background: #f7a036;
  color: #fff;
  border-color: #f7a036;
}

.loadMoreBtn {
  width: 100%;
  height: 48px;
  background: #fff;
  border: 1px solid #333;
  border-radius: 99px;
  font-weight: 800;
  font-size: 15px;
}

/* RESPONSIVE TOGGLES */
.mobileOnly {
  display: none !important;
}
.desktopOnly {
  display: block !important;
}

@media (max-width: 800px) {
  .mobileOnly {
    display: flex !important;
  }
  /* hack for block elements */
  div.mobileOnly {
    display: block !important;
  }
  .hhPills.mobileOnly {
    display: flex !important;
  }

  .desktopOnly {
    display: none !important;
  }

  /* Adjust Layout */
  .hhGrid {
    grid-template-columns: 1fr;
    display: block;
  }

  /* Hide standard Topbar on Mobile for this specific page look?
     The screenshot implies a custom header.
     We can hide .topbar and show .mobileHeader. */
  .topbar {
    display: none !important;
  }

  .mobileHeader {
    display: flex;
  }

  .historyPage {
    padding: 16px;
    background: #fff8ee;
  }

  .hhContent {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* =========================================
   HYGIENE TREND PAGE (Detailed Analytic)
========================================= */

.trendPage {
  background: #fbf3e6;
  padding: 24px 16px 60px;
}

.htGrid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

.htContent {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.htBottomRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Specific Chart Tweaks for this page */
.bigChart {
  height: 260px;
  padding-top: 40px;
}

/* Detailed Score Breakdown */
.breakdownList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.bdRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bdTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #111;
}

.bdTrack {
  height: 10px;
  background: #e5e5e5;
  border-radius: 99px;
  overflow: hidden;
}

.bdFill {
  height: 100%;
  border-radius: 99px;
}

/* Market Comparison */
.subLabel {
  font-size: 12px;
  color: #777;
  margin: -10px 0 16px;
}

.marketStats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 24px;
}

.mDivider {
  width: 1px;
  height: 50px;
  background: #ddd;
}

.mStat {
  text-align: center;
}

.mVal {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.bigGreen {
  color: #00c853;
}

.mLabel {
  font-size: 12px;
  color: #666;
}

/* Comparison Bar Widget */
.compWidget {
  background: #f0f0f0;
  padding: 16px;
  border-radius: 12px;
}

.compLabels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  color: #333;
  margin-bottom: 8px;
}

.compStoreLabel {
  text-align: right;
  color: #777;
}

.compTrack {
  position: relative;
  height: 8px;
  background: #d4d4d4;
  border-radius: 99px;
}

.compBar {
  height: 100%;
  background: #00c853;
  border-radius: 99px;
}

.compMarker {
  position: absolute;
  top: -6px; /* align with bar visually */
  height: 34px;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compLine {
  width: 2px;
  height: 20px;
  background: #555;
}

.compVal {
  font-size: 10px;
  font-weight: 700;
  color: #555;
  margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 800px) {
  .htGrid {
    grid-template-columns: 1fr;
  }

  .htBottomRow {
    grid-template-columns: 1fr;
  }

  /* Hide sidebar on mobile (use custom header) */
  .trendPage .hhSidebar {
    display: none !important;
  }

  .trendPage .hhStallInfo {
    display: block; /* show inside card if needed, but for now sidebar is hidden */
  }

  /* Re-use hhMobile styles */
  .trendPage .hhSidebar.desktopOnly {
    display: flex !important; /* Force show sidebar content? No, images show it separate */
  }

  /* Actually, looking at image:
     Mobile has a card at top with Image, Name, Grade.
     We can replicate the Sidebar inside the main content for mobile only. */
}

@media (max-width: 800px) {
  /* Show sidebar content as a card at the top */
  .trendPage .hhSidebar.desktopOnly {
    display: flex !important;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
  }

  .hhBackLink {
    display: block; /* keep back link */
  }
}