/* Bhakti House console skin ("My BHIO").
   Loaded globally from App.razor but scoped entirely to `.console`, so the public
   marketing site is untouched by every rule in this file.

   How it works: CSS custom properties inherit. Redeclaring the tokens from
   bhio-ui/css/tokens.css on `.console` re-skins every brand.css class inside that
   subtree without touching a single line of markup, which is what lets the whole
   admin area change look by swapping one @layout line.

   What that does NOT cover, and the reason the second half of this file exists:
   Bootstrap 5.3 compiles literal hex into its component classes
   (.btn-primary sets --bs-btn-bg:#0d6efd, .form-control:focus hardcodes #86b7fe).
   tokens.css sets --bs-primary and nothing in Bootstrap reads it. Those components
   must be overridden explicitly or they stay Bootstrap blue.

   Palette: near-black on white, a neutral gray ramp, brand purple as the single
   accent. Load order: bootstrap -> tokens -> brand -> console -> scoped page css. */

.console {
  /* ---- Private ramp. Not for use outside this file; the mappings below are the API. ---- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f8f9fa;
  --n-100: #f1f3f5;
  --n-200: #e9ecef;
  --n-300: #dee2e6;
  --n-400: #ced4da;
  --n-500: #adb5bd;
  --n-600: #6c757d;
  --n-700: #495057;
  --n-800: #343a40;
  --n-900: #1a1d20;
  --n-950: #0b0c0d;

  --a-500: #55185D;
  --a-600: #431349;
  --a-700: #290849;
  --a-tint: rgba(85, 24, 93, 0.08);
  --a-ring: rgba(85, 24, 93, 0.25);

  --sem-danger:  #b42318;
  --sem-success: #067647;
  --sem-warning: #b54708;
  --sem-info:    #175cd3;

  /* ================================================================
     Token overrides - these re-skin brand.css by inheritance
     ================================================================ */

  /* Raw brand palette. Gold becomes purple: the console has one accent, not two. */
  --purple-900: var(--a-700);
  --purple-700: var(--a-500);
  --gold-600: var(--a-500);
  --yellow-400: var(--a-600);

  /* Warm surfaces flatten to the neutral ramp. */
  --sand-300: var(--n-100);
  --cream-200: var(--n-50);
  --cream-100: var(--n-0);
  --cream-50: var(--n-0);
  --cream-0: var(--n-0);
  --lavender-50: var(--n-25);

  --ink-900: var(--n-950);
  --ink-700: var(--n-800);
  --ink-600: var(--n-900);
  --ink-500: var(--n-600);
  --ink-400: var(--n-600);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.85);

  --line-purple: var(--n-200);
  --line-gold: var(--n-200);
  --line-neutral: var(--n-200);

  --brand-primary: var(--a-500);
  --brand-primary-strong: var(--a-700);
  --brand-accent: var(--a-500);
  --brand-accent-bright: var(--a-600);

  --surface-page: var(--n-0);
  --surface-page-alt: var(--n-50);
  --surface-card: var(--n-0);
  --surface-well: var(--n-50);
  --surface-hero: var(--n-50);
  --surface-invert: var(--n-950);

  --text-heading: var(--n-950);
  --text-body: var(--n-900);
  --text-muted: var(--n-600);
  --text-link: var(--a-500);
  --text-on-invert: #ffffff;

  --border-accent: var(--a-500);
  --divider: var(--n-200);

  /* Gradients go flat. A console does not need a gradient. */
  --grad-gold: var(--a-500);
  --grad-purple: var(--n-950);
  --tint-accent-soft: var(--a-tint);

  /* ---- Typography: one family, a tighter scale than the marketing site ---- */
  --font-display: var(--font-body);

  --text-hero: 2rem;
  --text-display: 1.875rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-h4: 1rem;

  --text-lead: 1.05rem;
  --text-base: 0.95rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;

  --lh-body: 1.6;
  --lh-ui: 1.5;

  --section-pad-y: 1.5rem;
  --section-pad-y-lg: 2rem;
  --content-max: 42rem;

  /* ---- Effects: square-ish corners, hairlines instead of shadows, no motion ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 12px;
  /* Every gold pill in brand.css gets its shape from this. 6px turns them all into
     standard rectangular buttons without touching a single rule. */
  --radius-pill: 6px;

  --border-card: 1px solid var(--n-200);

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 12px rgba(11, 12, 13, 0.08);
  --shadow-xl: 0 12px 32px rgba(11, 12, 13, 0.12);
  --shadow-purple: none;
  --shadow-gold: none;
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-divider: none;
  --shadow-brand-btn: none;
  --shadow-brand-btn-hover: none;
  --shadow-brand-soft: none;
  --shadow-accent-tint: none;
  --shadow-social-hover: none;
  --text-shadow-mantra: none;

  /* Cards and buttons do not move under the cursor in a console. */
  --lift-hover: none;
  --lift-card: none;

  /* ================================================================
     Bootstrap bridge. These ARE read by Bootstrap 5.3.
     ================================================================ */
  --bs-body-bg: var(--n-0);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--n-900);
  --bs-body-color-rgb: 26, 29, 32;
  --bs-emphasis-color: var(--n-950);
  --bs-emphasis-color-rgb: 11, 12, 13;
  --bs-secondary-color: var(--n-600);
  --bs-secondary-bg: var(--n-100);
  --bs-tertiary-color: var(--n-600);
  --bs-tertiary-bg: var(--n-50);
  --bs-heading-color: var(--n-950);
  --bs-border-color: var(--n-200);
  --bs-border-color-translucent: var(--n-200);

  --bs-link-color: var(--a-500);
  --bs-link-color-rgb: 85, 24, 93;
  --bs-link-hover-color: var(--a-700);

  --bs-primary: var(--a-500);
  --bs-primary-rgb: 85, 24, 93;
  --bs-secondary: var(--n-600);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success: var(--sem-success);
  --bs-success-rgb: 6, 118, 71;
  --bs-danger: var(--sem-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-warning: var(--sem-warning);
  --bs-warning-rgb: 181, 71, 8;
  --bs-info: var(--sem-info);
  --bs-info-rgb: 23, 92, 211;

  /* Alerts and badges resolve through the -subtle trio. */
  --bs-primary-text-emphasis: var(--a-700);
  --bs-primary-bg-subtle: var(--a-tint);
  --bs-primary-border-subtle: rgba(85, 24, 93, 0.25);
  --bs-success-text-emphasis: #054f31;
  --bs-success-bg-subtle: #ecfdf3;
  --bs-success-border-subtle: #abefc6;
  --bs-danger-text-emphasis: #912018;
  --bs-danger-bg-subtle: #fef3f2;
  --bs-danger-border-subtle: #fecdca;
  --bs-warning-text-emphasis: #93370d;
  --bs-warning-bg-subtle: #fffaeb;
  --bs-warning-border-subtle: #fedf89;
  --bs-info-text-emphasis: #124ea8;
  --bs-info-bg-subtle: #eff8ff;
  --bs-info-border-subtle: #b2ddff;
  --bs-secondary-bg-subtle: var(--n-50);
  --bs-secondary-border-subtle: var(--n-200);

  --bs-focus-ring-color: var(--a-ring);

  /* Shell geometry. Exposed as tokens because page-level fixed/sticky elements have to
     offset against the topbar and sidebar - see the block at the end of this file. */
  --console-topbar-h: 56px;
  --console-sidebar-w: 15rem;
  --console-tabbar-h: 60px;

  /* ---- The shell paints itself: body is outside .console and keeps the public theme ---- */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  color: var(--n-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-ui);
}

.console h1, .console h2, .console h3,
.console h4, .console h5, .console h6 {
  font-family: var(--font-body);
  color: var(--n-950);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.console a { text-decoration: none; }
.console a:hover { text-decoration: underline; }

/* ================================================================
   Bootstrap components that hardcode hex and cannot inherit
   ================================================================ */

.console .btn {
  --bs-btn-font-size: var(--text-sm);
  --bs-btn-font-weight: var(--fw-medium);
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-padding-x: 0.875rem;
}

.console .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--a-500);
  --bs-btn-border-color: var(--a-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--a-600);
  --bs-btn-hover-border-color: var(--a-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--a-700);
  --bs-btn-active-border-color: var(--a-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--a-500);
  --bs-btn-disabled-border-color: var(--a-500);
  --bs-btn-focus-shadow-rgb: 85, 24, 93;
}

.console .btn-outline-primary {
  --bs-btn-color: var(--a-500);
  --bs-btn-border-color: var(--a-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--a-500);
  --bs-btn-hover-border-color: var(--a-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--a-600);
  --bs-btn-active-border-color: var(--a-600);
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-300);
  --bs-btn-focus-shadow-rgb: 85, 24, 93;
}

.console .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--n-700);
  --bs-btn-border-color: var(--n-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--n-800);
  --bs-btn-hover-border-color: var(--n-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--n-900);
  --bs-btn-active-border-color: var(--n-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-500);
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

/* The workhorse: 66 usages across the admin area. A white button with a hairline
   border, which is what a secondary action should look like beside a purple primary. */
.console .btn-outline-secondary {
  --bs-btn-color: var(--n-900);
  --bs-btn-bg: var(--n-0);
  --bs-btn-border-color: var(--n-300);
  --bs-btn-hover-color: var(--n-950);
  --bs-btn-hover-bg: var(--n-50);
  --bs-btn-hover-border-color: var(--n-400);
  --bs-btn-active-color: var(--n-950);
  --bs-btn-active-bg: var(--n-100);
  --bs-btn-active-border-color: var(--n-400);
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-bg: var(--n-0);
  --bs-btn-disabled-border-color: var(--n-200);
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
}

.console .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sem-danger);
  --bs-btn-border-color: var(--sem-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #912018;
  --bs-btn-hover-border-color: #912018;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a1b14;
  --bs-btn-active-border-color: #7a1b14;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sem-danger);
  --bs-btn-disabled-border-color: var(--sem-danger);
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.console .btn-outline-danger {
  --bs-btn-color: var(--sem-danger);
  --bs-btn-border-color: #fecdca;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sem-danger);
  --bs-btn-hover-border-color: var(--sem-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
  --bs-btn-disabled-color: var(--n-500);
  --bs-btn-disabled-border-color: var(--n-200);
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.console .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sem-success);
  --bs-btn-border-color: var(--sem-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #054f31;
  --bs-btn-hover-border-color: #054f31;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #044229;
  --bs-btn-active-border-color: #044229;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sem-success);
  --bs-btn-disabled-border-color: var(--sem-success);
  --bs-btn-focus-shadow-rgb: 6, 118, 71;
}

.console .btn-light {
  --bs-btn-color: var(--n-900);
  --bs-btn-bg: var(--n-50);
  --bs-btn-border-color: var(--n-200);
  --bs-btn-hover-color: var(--n-950);
  --bs-btn-hover-bg: var(--n-100);
  --bs-btn-hover-border-color: var(--n-300);
}

/* Forms: the focus ring and the checked box are literal #86b7fe / #0d6efd. */
.console .form-control,
.console .form-select {
  border-color: var(--n-300);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: 0.4375rem 0.75rem;
  color: var(--n-900);
}

.console .form-control::placeholder { color: var(--n-500); }

.console .form-control:focus,
.console .form-select:focus,
.console .form-check-input:focus {
  border-color: var(--a-500);
  box-shadow: 0 0 0 3px var(--a-ring);
}

.console .form-check-input:checked {
  background-color: var(--a-500);
  border-color: var(--a-500);
}

.console .form-check-input { border-color: var(--n-400); }

.console .form-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--n-800);
  margin-bottom: 0.3125rem;
}

.console .form-control:disabled,
.console .form-select:disabled {
  background-color: var(--n-50);
  color: var(--n-600);
}

.console .form-floating > label { color: var(--n-600); }

.console .text-danger { color: var(--sem-danger) !important; }
.console .validation-message { color: var(--sem-danger); font-size: var(--text-xs); }

.console .table {
  --bs-table-border-color: var(--n-200);
  font-size: var(--text-sm);
}

.console .table > thead th {
  font-weight: var(--fw-semibold);
  color: var(--n-700);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.console .alert {
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: 0.75rem 1rem;
}

.console .badge { font-weight: var(--fw-medium); }

.console .nav-tabs {
  --bs-nav-tabs-link-active-color: var(--a-500);
  --bs-nav-tabs-link-active-border-color: var(--n-200) var(--n-200) var(--n-0);
}

.console .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--n-200);
}

/* ================================================================
   brand.css classes that need more than a token swap
   ================================================================ */

/* .card-brand is the most-used brand class in the admin area (42 usages).
   Flatten it: hairline border, no shadow, no lift, tighter padding. */
.console .card-brand,
.console .card-brand-topline,
.console .card-brand-outline,
.console .card-brand-well,
.console .card-brand-feature {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 1.25rem;
  transition: border-color var(--dur-fast) ease;
}

.console .card-brand:hover,
.console .card-brand-topline:hover,
.console .card-brand-outline:hover,
.console .card-brand-well:hover,
.console .card-brand-feature:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--n-300);
}

.console .card-brand-well { background: var(--n-50); }

.console .card-brand-dark {
  background: var(--n-950);
  border: 1px solid var(--n-950);
  color: #fff;
}

.console .card-brand-title {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--n-950);
}

.console .card-brand-text {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: var(--lh-ui);
}

/* The gold gradient on .btn-brand flattens to purple via --grad-gold, but its :hover
   swaps to background:--brand-primary-strong / color:--brand-accent, which in this
   palette is purple text on purple. Override both states explicitly. */
.console .btn-brand,
.console .btn-brand-lg,
.console .btn-brand-sm,
.console .btn-brand-dark {
  background: var(--a-500);
  color: #fff;
  border: 1px solid var(--a-500);
  box-shadow: none;
  font-weight: var(--fw-medium);
}

.console .btn-brand:hover,
.console .btn-brand-lg:hover,
.console .btn-brand-sm:hover,
.console .btn-brand-dark:hover {
  background: var(--a-600);
  border-color: var(--a-600);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.console .btn-brand-outline,
.console .btn-brand-outline-dark {
  background: var(--n-0);
  color: var(--n-900);
  border: 1px solid var(--n-300);
  box-shadow: none;
}

.console .btn-brand-outline:hover,
.console .btn-brand-outline-dark:hover {
  background: var(--n-50);
  border-color: var(--n-400);
  color: var(--n-950);
  transform: none;
}

/* IconCircle (10 usages, all on the dashboard) fills with --grad-gold and draws its
   glyph in --brand-primary-strong: purple on purple once the tokens swap. */
.console .icon-circle,
.console .icon-circle-sm,
.console .icon-circle-lg {
  background: var(--a-tint);
  color: var(--a-500);
  box-shadow: none;
}

/* The gold underline bar under SectionHeading reads as decoration here. */
.console .section-heading {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--n-950);
}

.console .section-heading::after { display: none; }

.console .page-header {
  background: transparent;
  border-bottom: 1px solid var(--n-200);
  padding: 0 0 1rem;
}

.console .section-divider { display: none; }

.console .callout {
  background: var(--n-50);
  border-left: 3px solid var(--a-500);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.console .gold-link,
.console .text-gold { color: var(--a-500); }

/* Focus visibility: brand.css sets a 3px gold outline. Keep the behaviour, change the hue. */
.console :focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 2px;
}

/* ================================================================
   Page elements that must offset against the shell

   These pages were written for the old full-width top-nav layout, where a fixed bar at
   left:0 and a sticky banner at top:0 were both correct. Under the sidebar shell they
   would slide beneath the sidebar and beneath the topbar respectively. The selectors are
   global on purpose: the elements carry a Blazor scope attribute, but they still carry
   their class, so a global rule matches. Both are phone-first screens, so the sidebar
   offset applies only from lg up, where the drawer becomes a column.
   ================================================================ */

.console .position-banner {
  top: var(--console-topbar-h);
}

/* brand.css insets the DataGrid search field to clear its magnifier icon
   (.data-grid-search .form-control { padding-left: 2.4rem }). The generic form-control
   padding above matches at the same specificity and loads later, so it would undo that
   and drop the icon on top of the placeholder. Restore it at higher specificity. */
.console .data-grid-search .form-control {
  padding-left: 2.4rem;
}

/* ================================================================
   The giving store

   Global rather than scoped, because these classes are shared across the store pages and the
   StoreCard component - scoped CSS would stamp each page separately and the card would fall
   outside its parent page scope. Everything resolves from the .console tokens above.
   ================================================================ */

.store-hero {
  margin-bottom: 2rem;
}

.store-title {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.store-lead {
  color: var(--n-600);
  max-width: 44rem;
  margin: 0;
}

.store-section-heading {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* ---- Search ---- */
.store-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.store-search-field {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
}

.store-search-field > i {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-500);
  font-size: 0.875rem;
  pointer-events: none;
}

.store-search-field .form-control {
  padding-left: 2.375rem;
}

/* ---- Shelves ---- */
.store-shelves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.store-shelf {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--n-200);
  border-radius: 999px;
  background: var(--n-0);
  color: var(--n-700);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.store-shelf:hover {
  border-color: var(--n-400);
  color: var(--n-950);
  text-decoration: none;
}

.store-shelf.active {
  background: var(--a-500);
  border-color: var(--a-500);
  color: #fff;
}

.store-shelf-count {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---- Product grid ---- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.store-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.store-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-0);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.store-card:hover {
  border-color: var(--n-400);
  box-shadow: 0 4px 12px rgba(11, 12, 13, 0.06);
  text-decoration: none;
}

.store-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--n-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.store-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-card-icon {
  font-size: 2rem;
  color: var(--a-500);
  opacity: 0.5;
}

.store-card-tag {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(11, 12, 13, 0.75);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.store-card-category {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n-500);
  margin-bottom: 0.25rem;
}

.store-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  color: var(--n-950);
}

.store-card-blurb {
  font-size: 0.875rem;
  color: var(--n-600);
  margin: 0 0 1rem;
  line-height: 1.45;
}

.store-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.store-card-price {
  font-weight: 650;
  color: var(--n-950);
}

.store-card-price-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--n-500);
}

.store-card-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-500);
  white-space: nowrap;
}

/* ---- Item detail ---- */
.store-back {
  font-size: 0.875rem;
  color: var(--n-600);
  text-decoration: none;
}

.store-detail {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.store-detail-media {
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-50);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-detail-icon {
  font-size: 3.5rem;
  color: var(--a-500);
  opacity: 0.45;
}

.store-detail-title {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.store-detail-blurb {
  color: var(--n-600);
  margin-bottom: 1rem;
}

.store-detail-text {
  color: var(--n-700);
  line-height: 1.6;
}

.store-buy {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  background: var(--n-25);
}

/* ---- Give any amount ----
   The shortcut past the shelves, and the first thing on the storefront. Tinted rather than
   outlined so it reads as the action on a page otherwise made of cards. */
.store-cta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--a-ring);
  border-radius: var(--radius-lg);
  background: var(--a-tint);
}

.store-cta-title {
  font-size: 1.125rem;
  font-weight: 650;
  margin: 0;
}

.store-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.store-cta-button {
  white-space: nowrap;
}

/* ---- Amount presets ----
   Links, not script: the store works with JavaScript off, so filling in the box costs a round
   trip. Sized as proper touch targets - this is the row most gifts are chosen from. */
.store-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.store-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--n-300);
  border-radius: 999px;
  background: var(--n-0);
  color: var(--n-800);
  font-weight: 600;
  text-decoration: none;
}

.store-amount:hover {
  border-color: var(--a-500);
  color: var(--a-500);
  text-decoration: none;
}

.store-amount.active {
  background: var(--a-500);
  border-color: var(--a-500);
  color: #fff;
}

/* ---- The giving form on its own page ---- */
.store-give-page {
  max-width: 34rem;
  margin: 0 auto;
}

/* ---- Thank you ---- */
.store-thanks {
  max-width: 34rem;
  margin: 2rem auto;
  text-align: center;
}

.store-thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--a-tint);
  color: var(--a-500);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.store-thanks-offer {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  background: var(--n-25);
  text-align: left;
}

@media (min-width: 768px) {
  .store-detail {
    grid-template-columns: 5fr 6fr;
    align-items: start;
  }

  .store-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .store-cta-actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  /* The presets sit beside the button here, so the stacked spacing would double up. */
  .store-cta-actions .store-amounts {
    margin-bottom: 0;
  }

  .store-title {
    font-size: 2rem;
  }
}

/* ================================================================
   The console/store top bar

   Global rather than scoped because two layouts share it - ConsoleLayout for the
   portal and StoreLayout for the giving store. Blazor scoped CSS stamps only the
   component that declares it, so a scoped copy would style one and not the other.
   ================================================================ */

.console-burger {
    background: none;
    border: none;
    color: var(--text-body);
    font-size: 1.125rem;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--radius-md);
}

.console-burger:hover {
    background: var(--surface-well);
}

.console-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-width: 0;
}

.console-brand:hover {
    text-decoration: none;
}

.console-logo {
    height: 28px;
    width: auto;
}

.console-wordmark {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.console-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.console-topbar-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
}

.console-topbar-link:hover {
    color: var(--text-body);
    background: var(--surface-well);
    text-decoration: none;
}

.console-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-body);
    max-width: 16rem;
}

.console-user:hover {
    background: var(--surface-well);
}

.console-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-user-caret {
    font-size: 0.625rem;
    color: var(--text-muted);
}

.console-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--console-topbar-h);
    padding: 0 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--divider);
}

/* ================================================================
   Phone sizing

   Below md everything a finger has to hit is at least 44px (Apple's 44pt, Material's 48dp,
   comfortably over WCAG 2.2's 24px floor), and body text and form fields are 16px. The inputs
   matter twice over: iOS Safari zooms the whole page in on any field under 16px the moment it
   is focused, and leaves it zoomed. Console-only - tokens.css is not touched.
   ================================================================ */

@media (max-width: 767.98px) {
  .console:not(.store) {
    --text-base: 1rem;
    --text-sm: 0.9375rem;
    --text-xs: 0.875rem;
    font-size: var(--text-base);
  }

  .console:not(.store) .form-control,
  .console:not(.store) .form-select,
  .console:not(.store) .form-control-sm,
  .console:not(.store) .form-select-sm {
    font-size: 1rem;
    min-height: 2.75rem;
  }

  /* Padding rather than a min-height, so the label stays centred in every button. 0.6875rem a
     side plus a 1.5 line of text and the border comes to 45px. */
  .console:not(.store) .btn {
    --bs-btn-padding-y: 0.6875rem;
  }

  .console:not(.store) .form-check {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  .console:not(.store) .form-check-input {
    width: 1.25em;
    height: 1.25em;
  }

  .console:not(.store) .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  /* Full-size page buttons only fit a phone when the far pages drop out. */
  .console:not(.store) .data-grid .dg-page-far {
    display: none;
  }

  /* An icon on its own (a receipt, a PDF) still needs a thumb-sized target. */
  .console:not(.store) .icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* ================================================================
   Bottom tab bar (phones and small tablets)

   Home first, Menu last, and between them the first two jobs this person holds, in a fixed
   order - see ConsoleTabBar. The Menu button opens the same drawer the sidebar becomes below lg,
   so the burger in the top bar is only shown when the tab bar is not.
   ================================================================ */

.console-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1025;
  display: flex;
  height: calc(var(--console-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-page);
  border-top: 1px solid var(--divider);
}

.console-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.35rem 0.25rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.1;
  text-decoration: none;
}

.console-tab > i {
  font-size: 1.2rem;
}

.console-tab > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-tab:hover {
  color: var(--text-heading);
  text-decoration: none;
}

.console-tab.active {
  color: var(--brand-accent);
  font-weight: var(--fw-semibold);
}

@media (max-width: 991.98px) {
  .console:has(.console-tabbar) .console-main {
    padding-bottom: calc(var(--console-tabbar-h) + env(safe-area-inset-bottom));
  }

  .console:has(.console-tabbar):not(:has(.cart-bar)) .console-burger {
    display: none;
  }

  .console:has(.console-tabbar) .status-floating {
    bottom: calc(var(--console-tabbar-h) + env(safe-area-inset-bottom) + 0.75rem);
  }
}

/* A sale in progress owns the bottom of the screen: the tab bar steps aside for the cart, and a
   message moves to the top rather than landing on the cart. */
.console:has(.cart-bar) .console-tabbar {
  display: none;
}

.console:has(.cart-bar) .console-main {
  padding-bottom: 0;
}

.console:has(.cart-bar) .status-floating {
  top: calc(var(--console-topbar-h) + 0.75rem);
  bottom: auto;
}

/* ================================================================
   Selling: the gift shop counter and the distribution logger

   Both are worked standing up on a phone, and both are the same shape - a grid of things to
   tap, and the sale so far pinned to the bottom - so they share these rules rather than keeping
   a copy each.
   ================================================================ */

.sell-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.625rem;
  /* Room for the cart bar, so the last row is never trapped underneath it. */
  padding-bottom: 22rem;
}

.sell-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 6rem;
  padding: 0.75rem;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  text-align: left;
  font: inherit;
}

button.sell-tile {
  cursor: pointer;
}

button.sell-tile:hover:not(:disabled) {
  border-color: var(--brand-accent);
}

button.sell-tile:active:not(:disabled) {
  background: var(--tint-accent-soft);
}

.sell-tile:disabled,
.sell-tile.is-out {
  opacity: 0.6;
}

.sell-tile-name {
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sell-tile-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sell-tile-price {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

.sell-tile-badge {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--brand-accent);
  color: var(--on-dark);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.console .cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  max-height: 65vh;
  overflow-y: auto;
  padding: 0.75rem 0 calc(1rem + env(safe-area-inset-bottom));
  background: var(--surface-page);
  border-top: 1px solid var(--divider);
  box-shadow: 0 -0.5rem 1.5rem rgba(11, 12, 13, 0.1);
}

@media (min-width: 992px) {
  .console .cart-bar {
    left: var(--console-sidebar-w);
  }
}

.cart-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--divider);
}

.cart-line-name {
  flex: 1 1 8rem;
  min-width: 0;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  line-height: 1.3;
}

.cart-line-price {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
}

.cart-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cart-stepper .btn {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}

.cart-qty {
  min-width: 2rem;
  font-weight: var(--fw-semibold);
  text-align: center;
}

.cart-line-total {
  min-width: 4.5rem;
  font-weight: var(--fw-semibold);
  text-align: right;
}

.cart-price-edit {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-price-edit .input-group {
  max-width: 11rem;
}

.cart-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
}

.cart-total {
  font-size: 1.375rem;
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

/* ================================================================
   Settings links (SettingsLinks): the set-up pages at the foot of an area's main page
   ================================================================ */

.settings-links {
  margin-top: 2.5rem;
  max-width: 40rem;
}

.settings-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.settings-links li + li {
  border-top: 1px solid var(--divider);
}

.settings-links a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.25rem;
  padding: 0.625rem 1rem;
  color: var(--text-body);
  text-decoration: none;
}

.settings-links a:hover {
  background: var(--surface-well);
  text-decoration: none;
}

.settings-links a > i:first-child {
  width: 1.25rem;
  text-align: center;
  color: var(--text-muted);
}

.settings-links a > span {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.settings-link-title {
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.settings-link-description {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.settings-link-chevron {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* A row of the page's everyday links, under the toolbar. */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ================================================================
   Choice cards: picking what you are about to do, with a line saying what each choice means
   (Move stock's "Bring stock in / Move between places / Correct a count").
   ================================================================ */

.choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.choice-card > i {
  width: 1.25rem;
  margin-top: 0.15rem;
  color: var(--brand-accent);
  text-align: center;
}

.choice-card:hover {
  border-color: var(--brand-accent);
}

.choice-card.active {
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
  background: var(--tint-accent-soft);
}

.choice-card-title {
  display: block;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

.choice-card-text {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* The unread count on the topbar bell. Absolute, so it does not widen a bar that has to fit a
   phone; the link it sits in is position-relative. */
.console .notification-badge {
    position: absolute;
    top: 0.1rem;
    right: 0;
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    transform: translate(35%, -25%);
}