/* Your app custom styles here */

/* ---------------------------------------------------------------- Layout tokens
   Same scale as the sibling storefront project
   (newyorkspizza2026.orderlemon.dev/src/css/app.scss) - shared spacing/radius
   vocabulary so both apps read as one visual family, not two different
   products glued together. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* Pill-shaped primary buttons everywhere - same "one variable is the whole
   native answer for both iOS/Android" choice the storefront makes. Also
   feeds .segmented's active-pill radius (My account's Light/Auto/Dark
   control). */
:root,
.ios,
.md {
  --f7-button-border-radius: 999px;
}

/* Steppers borderless everywhere, matching the storefront's product-card/
   cart-line steppers - not used much in this app today, kept for
   consistency if a future page adds one. */
.stepper {
  --f7-stepper-border-width: 0px;
}

/* Bars flush with the page background - one continuous surface per
   platform/mode, not a separate bar shade. Same choice the storefront
   makes for its navbar/toolbar/tabbar. */
:root,
.ios,
.md {
  --f7-bars-bg-color: var(--f7-page-bg-color);
  --f7-navbar-bg-color: var(--f7-page-bg-color);
  --f7-toolbar-bg-color: var(--f7-page-bg-color);
}

/* iOS navbar buttons (add/edit/ellipsis/...) in the system blue tint, same
   as the back link and native iOS Settings - framework7.css's own .ios rule
   sets --f7-navbar-link-color to the plain text color instead of the theme
   color, which only left the back chevron looking tinted (it renders via a
   background-image, not text color) while every other navbar link read as
   plain gray/black text. */
.ios {
  --f7-navbar-link-color: var(--f7-theme-color);
}

/* Same lighter item-title weight everywhere a list uses this "grouped
   options" pattern (section-title-pad label + list-strong.inset/nav-list
   rows) - home's nav menu, and every settings page built the same way
   (My account, Shop & ordering tabs, Company & legal, Plan & billing,
   Payouts & fees, ...). */
.list-strong.inset .item-title,
.nav-list .item-title {
  font-weight: 400;
}

/* Weekday chip row - custom component (F7 has no multi-select day picker) */
.weekday-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}
.weekday-chip {
  flex: 1 1 auto;
  min-width: 40px;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  background: var(--f7-list-bg-color, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--f7-list-item-border-color);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: var(--f7-text-color);
  transition: background-color 0.15s, color 0.15s;
}
.weekday-chip.active {
  background: var(--f7-theme-color);
  border-color: var(--f7-theme-color);
  color: #fff;
}

/* Native iOS/Android hairline separators between rows in every grouped
   list (shop picker, home menu, settings menus, category/product lists,
   ...) - framework7.css only draws these when a list also carries its own
   .list-dividers(-ios/-md) class, which nothing in this app adds, so every
   .list-strong list is opted in globally here instead of touching every
   page that builds one. */
.list-strong .item-inner:after {
  content: '';
  position: absolute;
  background-color: var(--f7-list-item-border-color);
  display: block;
  z-index: 15;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}

/* Section label above a group of settings/list rows - identical typography
   to the storefront's .section-header-title (native iOS/Android Settings
   convention: small, gray, uppercase, letter-spaced). */
.section-title-pad {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--f7-block-footer-text-color);
}

/* Framework7's default .list margin (35px top/bottom) reads as too far from
   the label right above it and leaves too much air between one group and
   the next. Close both: label sits snug on its list, and the list's own
   bottom margin (plus the next label's top padding) is what separates one
   group from the next. */
.section-title-pad + .list {
  margin-top: var(--space-2);
}
.list-strong.inset,
.nav-list {
  margin-bottom: var(--space-2);
}

/* Home large title = the current shop's name, which can be long ("New York
   Pizza - Ghent Dampoort") - wrap it onto extra lines instead of Framework7's
   default single-line ellipsis. js/pages/home.js then grows
   --f7-navbar-large-title-height to the wrapped height so the page content
   offset and collapse-on-scroll still line up. */
.home-navbar .title-large,
.home-navbar .title-large-text {
  white-space: normal;
}

/* Pages with a bottom-right Fab (add/create) - keep the last list row
   clear of the button so it can still be tapped. */
.page-with-fab .page-content {
  padding-bottom: calc(var(--f7-page-content-extra-padding-bottom, 0px) + 88px + var(--f7-safe-area-bottom));
}
/* Fab in the solid theme color on both themes - MD otherwise defaults to
   the pale Material "primary container" tone. */
.md .fab {
  --f7-fab-bg-color: var(--f7-theme-color);
  --f7-fab-text-color: #fff;
}

.locked-hint {
  font-size: 13px;
  color: var(--f7-block-footer-text-color);
}

/* Every list row's secondary line (category product count, product badges,
   shop address, ...) - same light-gray/smaller treatment everywhere rather
   than relying on Framework7's default (which reads full-strength/same-size
   as the title on iOS). ".list .item-subtitle" (framework7.css) sets its
   own color/size at higher specificity than a bare ".item-subtitle" would,
   so this matches that selector rather than losing to it. */
.list .item-subtitle {
  font-size: 13px;
  color: var(--f7-block-footer-text-color);
}

/* One hours range row: two native time inputs side by side ("09:00 –
   12:00") inside a single list row - Framework7 has no two-input row. */
.hours-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hours-range-inputs input {
  flex: 1 1 0;
  min-width: 0;
}

/* Dashboard stat tiles - same card language as the storefront's
   .product-card (radius-md, hairline border, page-bg surface). */
.stat-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--f7-list-item-border-color);
  box-shadow: none;
}
.stat-card .stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 13px;
  color: var(--f7-block-footer-text-color);
  margin-top: 2px;
}

/* Login gate - centered brand block above the email/password list. */
.login-page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.login-brand {
  text-align: center;
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.login-brand-title {
  font-size: 28px;
  font-weight: 800;
}
.login-brand-subtitle {
  font-size: 15px;
  color: var(--f7-block-footer-text-color);
  margin-top: 2px;
}