/*
 * Material Design 3 -inspired theme layer over Bootstrap 5.
 *
 * Scope, deliberately: this is a CSS-only visual layer on top of the
 * vendored Bootstrap build (see static/vendor/README.md) — no new
 * framework, no build step, per the project's "Django + HTMX + Alpine,
 * not a SPA framework" architecture rule. It re-points a handful of
 * Bootstrap's component-scoped CSS variables and adds a small set of
 * Material-flavoured rules (elevation shadows, rounded corners, pill
 * buttons, pared-back borders).
 *
 * `--store-primary` / `--store-accent` default to the platform's own
 * Material baseline tones below. On storefront pages,
 * templates/storefront/base.html overrides just those two custom
 * properties (via an inline <style> block sourced from
 * storefront.context_processors.store_theme) whenever a business has
 * picked its own brand colors — everything in this file keeps working
 * unchanged because it only ever reads the variables, never a literal
 * color. Dashboard pages (templates/base.html) never override them, so
 * platform chrome always stays on the fixed Material palette below —
 * per-business branding is a storefront-only concept.
 */

:root {
  --store-primary: #6750a4;
  --store-accent: #625b71;
  --store-font: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;

  --md-surface: #fffbfe;
  --md-surface-variant: #f3edf7;
  --md-on-surface: #1c1b1f;
  --md-on-surface-variant: #49454f;
  --md-outline: #cac4d0;

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-pill: 20px;

  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

body {
  font-family: var(--store-font);
  color: var(--md-on-surface);
  background-color: #f7f2fa;
}

/* Top app bar */
.navbar {
  background-color: var(--md-surface) !important;
  box-shadow: var(--md-elevation-1);
  border-bottom: none;
}

.navbar-brand {
  font-weight: 500;
  color: var(--md-on-surface) !important;
}

/* Cards: flat + elevated instead of bordered */
.card {
  border: none;
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-1);
}

.card:hover {
  box-shadow: var(--md-elevation-2);
}

/* Buttons: pill-shaped, brand-colored via the theme variables */
.btn {
  border-radius: var(--md-radius-pill);
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--store-primary);
  --bs-btn-border-color: var(--store-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--store-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--store-primary) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--store-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--store-primary) 70%, black);
  --bs-btn-disabled-bg: var(--store-primary);
  --bs-btn-disabled-border-color: var(--store-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--store-primary);
  --bs-btn-border-color: var(--store-primary);
  --bs-btn-hover-bg: var(--store-primary);
  --bs-btn-hover-border-color: var(--store-primary);
  --bs-btn-active-bg: var(--store-primary);
  --bs-btn-active-border-color: var(--store-primary);
}

.btn-secondary {
  --bs-btn-bg: var(--store-accent);
  --bs-btn-border-color: var(--store-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--store-accent) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--store-accent) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--store-accent) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--store-accent) 70%, black);
}

/* Utility classes that use Bootstrap's rgba(--bs-primary-rgb) pattern
   internally don't pick up --store-primary automatically (that would
   need every value re-expressed as an R,G,B triple) — overridden
   directly here instead, same !important precedence Bootstrap's own
   utilities use. */
.bg-primary {
  background-color: var(--store-primary) !important;
}

.text-primary {
  color: var(--store-primary) !important;
}

.border-primary {
  border-color: var(--store-primary) !important;
}

/* Forms */
.form-control,
.form-select {
  border-radius: var(--md-radius-sm);
  border-color: var(--md-outline);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--store-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--store-primary) 25%, transparent);
}

/* Dropdowns, alerts, tables: soften corners + shadows to match */
.dropdown-menu {
  border: none;
  border-radius: var(--md-radius-sm);
  box-shadow: var(--md-elevation-2);
}

.alert {
  border: none;
  border-radius: var(--md-radius-sm);
}

.table {
  --bs-table-border-color: var(--md-outline);
}

.badge {
  border-radius: var(--md-radius-sm);
  font-weight: 500;
}

/* Small fixed-size helpers so per-business theme previews only need
   inline styles for the actual dynamic color values (see
   templates/businesses/partials/theme_settings_panel.html and
   templates/storefront/base.html). */
.navbar-brand img {
  height: 28px;
}

.brand-logo-preview {
  max-height: 64px;
}

/* Store profile settings (templates/businesses/store_profile.html and
   its partials). */
.store-profile-cover-preview {
  max-height: 140px;
  width: 100%;
  object-fit: cover;
}

.store-profile-photo-preview {
  max-height: 100px;
}

.store-hours-table td,
.store-hours-table th {
  vertical-align: middle;
}

.store-hours-table input[type="time"] {
  min-width: 8.5rem;
}

.theme-preview {
  border-radius: 8px;
  overflow: hidden;
  padding: 1.25rem;
}

.theme-preview__card {
  border: 1px solid;
  border-radius: 6px;
  padding: 1rem;
}

.theme-preview__heading {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.theme-preview__body {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 0;
}

.theme-preview__btn {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
}

.theme-preview__badge {
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.storefront-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.storefront-image-placeholder {
  aspect-ratio: 1;
}

.storefront-qty-input {
  max-width: 8rem;
}

.storefront-grid-thumb {
  object-fit: cover;
}

/* Employees app (see templates/employees/) */
.employee-form-card {
  max-width: 640px;
}

.leave-balance-input {
  width: 5rem;
}

/* Inventory app (see templates/inventory/) */
.inventory-threshold-input {
  width: 5rem;
}

/* Payments app (see templates/payments/) */
.cod-settings-card {
  max-width: 640px;
}

.storefront-confirmation-card {
  max-width: 32rem;
}

/* ============================================================
 * Dashboard shell: persistent sidebar navigation across every
 * business-scoped page (see templates/base.html and
 * templates/components/dashboard_sidebar.html). Rendered only when
 * request.business is set; plain pages (home/about, no business
 * context) get dashboard-shell--no-sidebar instead, which just
 * re-centers the content to roughly the old Bootstrap .container width
 * now that the wrapper is a full-width .container-fluid.
 * ============================================================ */
.dashboard-shell {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.dashboard-shell--no-sidebar .dashboard-main {
  max-width: 1140px;
  margin-inline: auto;
}

.dashboard-sidebar {
  width: 232px;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1.25rem 0.75rem;
  border-right: 1px solid var(--md-outline);
  min-height: calc(100vh - 64px);
  position: sticky;
  top: 0;
}

.dashboard-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.dashboard-sidebar__section--footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-outline);
}

.dashboard-sidebar__heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin: 0.5rem 0.5rem 0.25rem;
}

.dashboard-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--md-radius-pill);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar__link svg {
  flex-shrink: 0;
}

.dashboard-sidebar__link:hover {
  background-color: var(--md-surface-variant);
  color: var(--md-on-surface);
}

.dashboard-sidebar__link.active {
  background-color: color-mix(in srgb, var(--store-primary) 14%, transparent);
  color: var(--store-primary);
}

.dashboard-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 1.5rem 3rem;
}

@media (max-width: 767.98px) {
  .dashboard-shell {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-height: 0;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--md-outline);
    padding: 0.5rem;
    gap: 0.25rem;
  }

  .dashboard-sidebar__section,
  .dashboard-sidebar__section--footer {
    flex-direction: row;
    margin-bottom: 0;
    border: none;
    padding: 0;
  }

  .dashboard-sidebar__heading {
    display: none;
  }

  .dashboard-sidebar__link span {
    white-space: nowrap;
  }

  .dashboard-main {
    padding: 1.25rem 1rem 2rem;
  }
}

/* ============================================================
 * Quantity stepper (storefront cart + add-to-cart panel).
 * ============================================================ */
.storefront-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-pill);
  overflow: hidden;
  float:right;
}

.storefront-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.storefront-qty-btn:hover:not(:disabled) {
  background-color: var(--md-surface-variant);
  color: var(--store-primary);
}

.storefront-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.storefront-qty-value {
  min-width: 2.25rem;
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.storefront-qty-value-input {
  width: 3rem;
  border: none;
  text-align: center;
  font-weight: 500;
  background: transparent;
  -moz-appearance: textfield;
}

.storefront-qty-value-input::-webkit-outer-spin-button,
.storefront-qty-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.storefront-qty-value-input:focus {
  outline: none;
}

.storefront-grid-add-result {
  min-height: 1.25rem;
}

/* ============================================================
 * Storefront product grid card + nav polish.
 * ============================================================ */
.storefront-product-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.storefront-product-card:hover {
  transform: translateY(-2px);
}

.storefront-cart-table td {
  vertical-align: middle;
}

/* ============================================================
 * General polish: typography, empty states, focus rings.
 * ============================================================ */
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  letter-spacing: -0.01em;
}

.btn:focus-visible,
.form-control:focus-visible,
.dashboard-sidebar__link:focus-visible {
  outline: 2px solid var(--store-primary);
  outline-offset: 2px;
}

.empty-state-icon {
  color: var(--md-on-surface-variant);
  margin-bottom: 0.5rem;
}

.notification-bell__badge {
  position: absolute;
  top: 0.1rem;
  right: -0.15rem;
  font-size: 0.65rem;
  padding: 0.2em 0.4em;
}

.notification-bell__menu {
  width: 320px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
}

.notification-bell__item {
  white-space: normal;
}

.notification-bell__item--unread {
  font-weight: 600;
  background-color: var(--md-surface-variant, rgba(0, 0, 0, 0.03));
}

/* Storefront top bar: sticky so cart/search stay reachable while
   scrolling a long product list. */
.storefront-navbar {
  position: sticky;
  top: 0;
  z-index: 1020;
}