:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #6b7280;
  --border: #e7e2d8;
  --dark: #18222f;
  --dark-soft: #263445;
  --gold: #b89146;
  --gold-soft: #f4ead3;
  --danger: #b91c1c;
  --success: #16803c;
  --shadow: 0 10px 28px rgba(24, 34, 47, 0.10);
  --radius: 22px;
  --ib-navy: #0b1220;
  --ib-blue: #2563eb;
  --ib-line: #dbe3ef;
  --ib-muted: #64748b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, #f9f7f1, var(--bg), #eee9df);
  color: var(--text);
  min-height: 100vh;
}

header {
  background: rgba(24, 34, 47, 0.96);
  color: white;
  padding: 18px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.brand {
  font-size: 22px;
  font-weight: 800;
}

nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

nav::-webkit-scrollbar {
  display: none;
}

nav > * {
  flex-shrink: 0;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
}

nav a:hover {
  background: rgba(255,255,255,0.12);
}

nav a.nav-icon {
  padding: 9px 12px;
  font-size: 16px;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
}

.user-box .user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.user-box .user-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: white;
  text-decoration: none;
  font-size: 13px;
  flex-shrink: 0;
}

.user-box .user-logout:hover {
  background: rgba(255,255,255,0.32);
}

.site-icon-btn {
  background: rgba(255,255,255,0.12);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.site-icon-btn:hover {
  background: rgba(255,255,255,0.22);
}

/* Site-wide dark mode: a blanket color-invert rather than a hand-built
   theme (the rest of the site's CSS - this file, shop.css,
   inventory-count.css, plus inline styles - is all hardcoded light-theme
   colors, so a real per-page dark theme would mean reworking every one of
   them). Images/video are inverted right back so photos don't look like
   negatives. */
html.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode img,
html.dark-mode video,
html.dark-mode picture {
  filter: invert(1) hue-rotate(180deg);
}

main {
  padding: 32px;
  max-width: 1500px;
  margin: 0 auto;
}

.catalog-title {
  font-size: 36px;
  margin-bottom: 18px;
}

/* HOME */
.hero {
  background: linear-gradient(135deg, white, #fbf7ec);
  padding: 60px 34px;
  border-radius: 28px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.hero h1 {
  font-size: 46px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 18px;
  color: var(--muted);
}

.button,
button {
  background: linear-gradient(135deg, var(--dark), var(--dark-soft));
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 800;
}

/* FILTER BAR */
.filter-bar {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
  position: relative;
  z-index: 100;
}

.new-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-top-row {
  display: grid;
  grid-template-columns: 48px 170px 135px 135px 135px 135px 82px 70px;
  gap: 10px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.filter-group label,
.hidden-search-input label {
  font-size: 11px;
  font-weight: 900;
  color: var(--dark);
}

.big-search-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 15px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden-search-input {
  display: none;
}

.hidden-search-input.show-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hidden-search-input input {
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 14px;
}

.search-btn,
.clear-btn {
  height: 42px;
  min-height: 42px;
  border-radius: 13px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.search-btn {
  background: #111827;
  color: white;
}

.clear-btn {
  background: #f3f4f6;
  color: #111827;
}

/* BRAND DARK BOX */
.vendor-dark {
  background: #e81b0d;
  padding: 9px;
  border-radius: 16px;
}

.vendor-dark label {
  color: white;
}

/* CHOICES DEFAULT LIGHT */
.choices {
  width: 100%;
  margin: 0;
}

.choices__inner {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  border: 1px solid var(--border) !important;
  background: white !important;
  color: #111827 !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
}

.choices__item,
.choices__item--selectable,
.choices__placeholder {
  color: #111827 !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: white !important;
  color: #111827 !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

.choices__list--dropdown .choices__item--choice,
.choices__list[aria-expanded] .choices__item--choice {
  background: white !important;
  color: #111827 !important;
  padding: 10px 12px !important;
}

.choices__list--dropdown .choices__item--choice.is-highlighted,
.choices__list[aria-expanded] .choices__item--choice.is-highlighted {
  background: #eef2ff !important;
  color: #111827 !important;
}

/* ONLY BRAND DARK DROPDOWN */
.vendor-dark .choices__inner {
  background: #021649 !important;
  color: white !important;
  border: 1px solid #243457 !important;
}

.vendor-dark .choices__item,
.vendor-dark .choices__item--selectable,
.vendor-dark .choices__placeholder {
  color: white !important;
}

.vendor-dark .choices__list--dropdown,
.vendor-dark .choices__list[aria-expanded] {
  background: #0d1528 !important;
  color: white !important;
  border: 1px solid #243457 !important;
}

.vendor-dark .choices__list--dropdown .choices__item--choice,
.vendor-dark .choices__list[aria-expanded] .choices__item--choice {
  background: #0d1528 !important;
  color: white !important;
}

.vendor-dark .choices__list--dropdown .choices__item--choice.is-highlighted,
.vendor-dark .choices__list[aria-expanded] .choices__item--choice.is-highlighted {
  background: #2563eb !important;
  color: white !important;
}

.vendor-dark .choices__input,
.vendor-dark .choices__input--cloned {
  background: #16213d !important;
  color: white !important;
}

/* SUMMARY */
.catalog-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.catalog-summary div {
  background: white;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(24,34,47,0.07);
  border: 1px solid var(--border);
  color: var(--muted);
}

.catalog-summary b {
  color: var(--dark);
}

/* PRODUCT GRID */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(275px, 100%), 1fr));
  gap: 26px;
}

.product-card {
  background: var(--card);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.image-wrap {
  background: radial-gradient(circle at top, #ffffff 0%, #f2eee5 65%);
  padding: 18px;
  height: 255px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}

.image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-info {
  padding: 18px;
}

.product-title {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--dark);
}

.price {
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 14px;
  color: var(--dark);
  background: var(--gold-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

.product-meta {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed #eee8dc;
}

.meta-label {
  color: var(--muted);
  font-weight: 800;
}

.meta-row span:last-child {
  text-align: right;
  word-break: break-word;
}

.stock-good {
  color: var(--success);
  font-weight: 900;
}

.stock-low {
  color: var(--danger);
  font-weight: 900;
}

.hidden-row {
  display: none;
}

/* VARIANTS */
.variant-box {
  background: #fbf7ec;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0 14px;
}

.variant-step label {
  display: block;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.step-select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  font-size: 14px;
}

/* Size/WIL pill picker - see .shop-pill-group in shop.css for the customer
   site's version of the same pattern; fillPillGroup() below drives .active. */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pill-btn:hover { border-color: var(--gold); }

.pill-btn.active {
  border: 2px solid var(--gold);
  background: var(--gold-soft);
  font-weight: 800;
  padding: 7px 13px;
}

.variant-message {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 8px;
}

/* CATEGORY */
.category-intro {
  margin: 24px 0 10px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 22px;
  margin-top: 24px;
}

.category-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
  text-decoration: none;
  color: var(--dark);
  box-shadow: var(--shadow);
}

.category-name {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 10px;
}

.category-count {
  color: var(--muted);
  font-weight: 700;
}

/* PAGINATION */
.pagination {
  margin: 36px auto 0;
  background: white;
  padding: 18px;
  border-radius: var(--radius);
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  max-width: 600px;
}

.page-btn {
  background: linear-gradient(135deg, var(--dark), var(--dark-soft));
  color: white;
  padding: 11px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}

.page-center {
  color: var(--muted);
  font-weight: 700;
}

/* LOGIN */
.login-box,
.panel {
  max-width: 460px;
  background: white;
  padding: 30px;
  border-radius: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

input {
  outline: none;
}

.error {
  background: #ffe1e1;
  color: #8a1111;
  padding: 11px 13px;
  margin-bottom: 15px;
  border-radius: 14px;
  font-weight: 700;
}

.login-page-wrap {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 100%;
}

.login-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 6px;
}

.login-box h1 {
  text-align: center;
  margin: 0 0 4px;
  font-size: 28px;
  color: var(--dark);
}

.login-subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14px;
}

.login-box label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 7px;
  color: var(--muted);
}

.login-box input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 15px;
  margin-bottom: 18px;
  box-sizing: border-box;
  background: #fbfaf7;
}

.login-box input:focus {
  border-color: var(--gold);
  background: white;
}

.login-box button[type="submit"] {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  letter-spacing: .03em;
  margin-top: 4px;
}

.login-install-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 12px;
  background: #fbfaf7;
  color: var(--dark);
  border: 1px solid var(--border);
}

.login-install-btn[hidden] { display: none; }

.two-factor-destinations {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.two-factor-destinations form,
.two-factor-resend {
  margin: 0;
}

.two-factor-destinations button {
  width: 100%;
  padding: 14px;
}

.two-factor-resend {
  margin-top: 12px;
}

.two-factor-cancel {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

/* ADMIN PANEL */
.admin-subtitle {
  color: var(--muted);
  margin: -8px 0 6px;
}

.admin-masthead-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.admin-full-install {
  border: 0;
  border-radius: 999px;
  padding: 11px 17px;
  background: #246b91;
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.admin-login-logs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #173b57;
}

.admin-trust-device-form {
  margin: 0;
}

.admin-trust-device-success {
  margin: 0 0 18px;
}

.admin-install-guide {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 19, 31, .72);
}

.admin-install-guide[hidden] {
  display: none;
}

.admin-install-guide-card {
  position: relative;
  width: min(430px, 100%);
  padding: 28px 22px;
  border-radius: 22px;
  background: white;
  color: #18222f;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.admin-install-guide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
}

.admin-install-guide-icon {
  font-size: 42px;
}

.admin-install-picture-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 20px 0;
}

.admin-install-picture-steps span {
  display: grid;
  gap: 7px;
}

.admin-install-picture-steps b {
  font-size: 13px;
}

.admin-install-picture-steps i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid #246b91;
  border-radius: 15px;
  color: #246b91;
  font-style: normal;
  font-size: 30px;
}

.admin-install-picture-steps i strong {
  position: absolute;
  font-size: 18px;
}

@media (max-width: 600px) {
  .admin-masthead-actions { align-items: stretch; width: 100%; }
  .admin-full-install { width: 100%; }
  .admin-trust-device-form { width: 100%; }
  .admin-install-picture-steps i { width: 54px; height: 54px; }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 24px;
}

.admin-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: white;
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: 20px;
  padding: 22px;
  text-decoration: none;
  color: var(--dark);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.admin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(24,34,47,0.16);
}

.admin-card-icon {
  font-size: 30px;
}

.admin-card-title {
  font-size: 17px;
  font-weight: 900;
}

.admin-card-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.admin-card-url {
  margin-top: 6px;
  font-size: 12px;
  font-family: "Courier New", monospace;
  color: #8a94a3;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 8px;
  width: fit-content;
}

.admin-card.danger {
  border-top-color: var(--danger);
}

/* Superadmin quick-links editor (idea #120 follow-up) */
.admin-quicklinks-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.admin-edit-toggle-btn {
  background: var(--dark);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.admin-edit-toggle-btn:hover {
  background: var(--dark-soft);
}

.admin-card-wrap {
  position: relative;
}

.admin-card-wrap.has-app-install {
  display: flex;
  flex-direction: column;
}

.admin-card-wrap.has-app-install .admin-card {
  flex: 1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.admin-app-install {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--dark);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.admin-app-install:hover {
  background: var(--dark-soft);
}

.driver-app-install {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}

.driver-app-install button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: #2f725a;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.driver-app-install span {
  color: var(--muted);
  font-size: 13px;
}

.admin-card-edit-controls {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--dark);
  border-radius: 999px;
  padding: 5px 10px;
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 5;
  box-shadow: var(--shadow);
}

.admin-card-edit-controls button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}

.admin-card-drag-handle {
  color: white;
  cursor: grab;
  font-size: 14px;
  padding: 0 2px;
}

.admin-links-editing .admin-card {
  cursor: default;
}

/* A hidden link is gone for everyone, including the superadmin who hid it -
   staff never get it from the server at all, and it's dropped from the grid
   here too. It only comes back (faded, so it reads as "off") while the
   editor is open, which is the only place it still needs to be reachable to
   be switched back on. */
.admin-card-wrap.admin-card-hidden {
  display: none;
}

.admin-links-editing .admin-card-wrap.admin-card-hidden {
  display: block;
}

.admin-links-editing .admin-card-wrap.admin-card-hidden .admin-card {
  opacity: 0.4;
}

/* Homepage media manager */
.home-media-view-link {
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dark);
  color: white;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.home-media-success {
  margin: 18px 0;
  padding: 12px 15px;
  border: 1px solid #b9dfc7;
  border-radius: 14px;
  background: #effaf3;
  color: #1f6f3e;
  font-weight: 750;
}

.home-media-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.home-media-panel {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow);
}

.home-media-banner-panel { margin-top: 22px; }
.home-media-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.home-media-panel-head h2 { margin: 5px 0 0; font-size: 24px; }
.home-media-panel-head p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.home-media-status { flex: none; padding: 6px 10px; border-radius: 999px; background: #f2f3f5; color: var(--muted); font-size: 12px; font-weight: 800; }
.home-media-status.is-live { background: #eaf7ee; color: #247044; }
.home-media-video-preview { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: 16px; background: #111; }
.home-media-file { margin: 8px 0 18px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.home-media-empty { padding: 28px; border: 1px dashed var(--border); border-radius: 16px; background: #fbfaf7; color: var(--muted); text-align: center; }

.home-media-form { display: grid; gap: 9px; margin-top: 18px; }
.home-media-form label,
.home-media-banner-fields label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.home-media-form input,
.home-media-form textarea,
.home-media-banner-fields input,
.home-media-banner-fields textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fbfaf7;
  color: var(--text);
  font: inherit;
}
.home-media-form input:focus,
.home-media-form textarea:focus,
.home-media-banner-fields input:focus,
.home-media-banner-fields textarea:focus { border-color: var(--gold); background: white; box-shadow: 0 0 0 3px rgba(168,130,63,.14); }
.home-media-form small { color: var(--muted); line-height: 1.45; }
.home-media-form > button,
.home-media-save { justify-self: start; margin-top: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--dark); color: white; font: inherit; font-weight: 800; cursor: pointer; }
.home-media-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-media-field-row > div { display: grid; gap: 7px; }
.home-media-danger,
.home-media-delete { border: 1px solid #e7b8b5; border-radius: 999px; background: #fff5f4; color: #a52d24; padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.home-media-danger { margin-top: 12px; }

.home-media-banner-list { display: grid; gap: 16px; }
.home-media-banner-item { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr) auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 17px; background: #fbfaf7; }
.home-media-banner-item > img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 12px; background: #eee; }
.home-media-banner-fields { display: grid; gap: 7px; }
.home-media-banner-actions { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; }
.home-media-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.home-media-switch input { width: 18px; height: 18px; }
.home-media-order-actions { display: flex; gap: 6px; }
.home-media-order-actions button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: white; font-size: 18px; cursor: pointer; }
.home-media-order-actions button:disabled { opacity: .35; cursor: default; }

.home-content-editor { margin-top: 22px; }
.home-content-form { gap: 12px; }
.home-content-form details { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fbfaf7; }
.home-content-form summary { padding: 16px 18px; color: var(--dark); font-size: 15px; font-weight: 850; cursor: pointer; list-style-position: inside; }
.home-content-form details[open] summary { border-bottom: 1px solid var(--border); background: #f5f1e9; }
.home-content-fields { display: grid; gap: 12px; padding: 18px; }
.home-content-repeat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-content-repeat-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-content-repeat-grid fieldset { min-width: 0; display: grid; gap: 8px; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: white; }
.home-content-repeat-grid legend { padding: 0 7px; color: var(--dark); font-size: 13px; font-weight: 850; }
.home-content-label-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-content-label-grid > div { display: grid; gap: 7px; }
.home-content-note { margin: 2px 0 0; padding: 12px 14px; border-left: 4px solid var(--gold); background: #f7f1e6; color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 900px) {
  .home-media-admin-grid { grid-template-columns: 1fr; }
  .home-media-banner-item { grid-template-columns: 1fr; }
  .home-media-banner-actions { flex-direction: row; }
  .home-content-repeat-grid, .home-content-label-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .home-media-field-row { grid-template-columns: 1fr; }
  .home-media-view-link { align-self: flex-start; }
  .home-content-repeat-grid, .home-content-repeat-grid.is-two, .home-content-label-grid { grid-template-columns: 1fr; }
}

/* RESPONSIVE */
@media (max-width: 1050px) {
  .filter-top-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .big-search-icon {
    width: 100%;
  }
}

@media (max-width: 700px) {
  header {
    padding: 16px 18px;
    flex-direction: column;
    gap: 12px;
  }

  main {
    padding: 18px;
  }

  .filter-top-row {
    grid-template-columns: 1fr;
  }

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

  .pagination {
    flex-wrap: wrap;
  }
}

.general-search-form {
  display: grid;
  grid-template-columns: 1fr 90px 80px;
  gap: 10px;
  align-items: center;
}

.general-search-form input {
  margin: 0;
}

.general-search-form .search-btn,
.general-search-form .clear-btn {
  height: 46px;
}

.filter-chip-wrap {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(24,34,47,0.07);
}

.filter-chip-main {
  padding: 9px 12px 9px 14px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.filter-chip-main b {
  color: var(--dark);
}

.filter-chip-main:hover {
  background: #f8fafc;
}

.filter-chip-x {
  width: 30px;
  height: 100%;
  min-height: 34px;
  background: #fee2e2;
  color: #991b1b;
  text-decoration: none;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #fecaca;
}

.filter-chip-x:hover {
  background: #fecaca;
}

.account-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.info-item {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 12px;
}

.info-label {
  display: block;
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}

.info-value {
  font-weight: 700;
}

.orders-grid {
  display: grid;
  gap: 16px;
}

.order-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.order-row {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #eee;
  padding: 7px 0;
}

.order-row:last-child {
  border-bottom: none;
}

.order-row b {
  min-width: 150px;
  color: #333;
}

.receipt-item {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}



.print-tag-btn {
  margin-top: 12px;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  background: #111827;
  color: white;
  font-weight: 900;
}


.template-controls {
  background: white;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.template-controls label {
  font-weight: 800;
}

.template-controls input {
  width: 90px;
}

.designer-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.label-canvas {
  position: relative;
  background: white;
  border: 2px dashed #111827;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  overflow: hidden;
}

.template-field {
  position: absolute;
  border: 1px dashed #999;
  padding: 2px;
  cursor: move;
  background: rgba(255,255,255,.75);
  overflow: hidden;
}

.template-field.selected {
  border: 2px solid #2563eb;
  background: rgba(219,234,254,.85);
}

/* .barcode-field {
  font-family: monospace;
  letter-spacing: 2px;
  text-align: center;
} */

.field-panel {
  width: 260px;
  background: white;
  padding: 18px;
  border-radius: 16px;
}


.field-panel label {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
}

.field-panel input,
.field-panel select {
  width: 140px;
}

.template-field {
  position: absolute;
  border: 1px dashed #777;
  background: rgba(255,255,255,.82);
  cursor: move;
  overflow: hidden;
  box-sizing: border-box;
}

.template-field.selected {
  border: 2px solid #2563eb;
  background: rgba(219,234,254,.9);
}

.field-name-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: #111827;
  color: white;
  font-size: 8px;
  line-height: 1;
  padding: 2px 4px;
  z-index: 5;
  pointer-events: none;
}

.field-content {
  display: block;
  padding-top: 10px;
  pointer-events: none;
}

.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: #2563eb;
  cursor: nwse-resize;
  z-index: 10;
}

.field-btn {
  border: 0;
  color: white;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.field-list-panel {
  width: 260px;
  min-width: 260px;
  background: #f8fafc;
  border-left: 1px solid #cbd5e1;
  padding: 12px;
  overflow-y: auto;
}

.field-list-row {
  background: white;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.field-list-row:hover {
  background: #eff6ff;
}

.field-list-title {
  font-weight: 800;
  font-size: 14px;
}

.field-list-info {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}

.print-tag-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.print-tag-qty {
  width: 55px;
  height: 42px;
  text-align: center;
  font-size: 16px;
  flex: 0 0 55px;
}

.print-tag-btn {
  height: 42px;
  flex: 1;
  min-width: 0;
}

.catalog-edit-btn {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid #1d4ed8;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
}
.catalog-edit-product-btn {
  border-color: #0f766e;
  background: #ecfdf5;
  color: #0f766e;
}
.catalog-product-editor-panel { width: min(650px, 100%); }

.catalog-editor.hidden { display: none; }
.catalog-editor { position: fixed; z-index: 2500; inset: 0; display: grid; place-items: center; padding: 16px; }
.catalog-editor-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); }
.catalog-editor-panel { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 16px; background: #fff; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.catalog-editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.catalog-editor-head h2 { margin: 3px 0 0; }
.catalog-editor-close { border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.catalog-editor-note { color: #475569; margin: 10px 0 18px; }
.catalog-editor-section { border-top: 1px solid #e2e8f0; padding: 15px 0; }
.catalog-editor-section h3 { margin: 0 0 12px; font-size: 16px; }
.catalog-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-editor-grid label { display: grid; gap: 5px; color: #334155; font-size: 13px; font-weight: 700; }
.catalog-editor-grid input,
.catalog-editor-grid select { box-sizing: border-box; width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 7px 9px; font: inherit; color: #0f172a; background: #fff; }
.catalog-editor-grid input[readonly] { background: #f1f5f9; color: #64748b; }
.catalog-editor-grid .catalog-editor-check { display: flex; align-items: center; gap: 8px; padding-top: 24px; }
.catalog-editor-grid .catalog-editor-check input { width: auto; min-height: auto; }
.catalog-photo-row { display: flex; align-items: center; gap: 16px; }
.catalog-photo-row img { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; background: #f1f5f9; }
.catalog-photo-row p { margin: 7px 0 0; color: #64748b; font-size: 13px; }
.js-photo-zoom { cursor: zoom-in; }
.js-photo-zoom:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.catalog-photo-lightbox.hidden { display: none; }
.catalog-photo-lightbox {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 56px 20px 20px;
  background: rgba(2, 6, 23, .92);
}
.catalog-photo-lightbox-close {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.catalog-photo-lightbox-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
}
.catalog-photo-lightbox-stage img {
  display: block;
  max-width: 90vw;
  max-height: 78vh;
  object-fit: contain;
  transform-origin: center;
  transition: transform .15s ease;
}
.catalog-photo-lightbox-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  color: #fff;
  text-align: center;
}
.catalog-photo-lightbox-controls { display: flex; gap: 6px; }
.catalog-photo-lightbox-controls button {
  min-width: 42px;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
body.catalog-photo-lightbox-open { overflow: hidden; }
.catalog-editor-status { min-height: 1.25em; margin: 0 0 12px; color: #b91c1c; font-weight: 700; }
.catalog-editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.catalog-editor-actions button { min-height: 42px; border: 0; border-radius: 8px; padding: 0 16px; font: inherit; font-weight: 800; cursor: pointer; }
.catalog-editor-cancel { background: #e2e8f0; color: #334155; }
.catalog-editor-save { background: #1d4ed8; color: #fff; }
.catalog-editor-save:disabled { opacity: .65; cursor: wait; }

@media (max-width: 720px) {
  .catalog-editor { padding: 0; }
  .catalog-editor-panel { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 16px; }
  .catalog-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-photo-lightbox { padding: 52px 10px 10px; }
  .catalog-photo-lightbox-footer { flex-direction: column; gap: 8px; padding-top: 8px; }
}

.label-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(320px, 100%),1fr));
  gap:20px;
}

.label-card{
  background:white;
  border-radius:16px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.label-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.label-receipt{
  font-size:24px;
  font-weight:700;
}

/* Make the Android WebView wrapper feel like a native app instead of a
   website in a frame: no pinch-zoom bounce, no gray tap flash, no
   double-tap-detection delay. Scoped to touch devices so desktop browser
   users of the same site are unaffected. */
@media (hover: none) and (pointer: coarse) {
  html, body {
    overscroll-behavior: none;
  }

  * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

.label-customer{
  font-size:34px;
  font-weight:800;
}

.label-description{
  margin-top:15px;
  font-size:20px;
}

.label-tags{
  display:flex;
  gap:10px;
  margin-top:15px;
}

.label-tags span{
  background:#eef2f7;
  padding:6px 10px;
  border-radius:20px;
}

.label-phone{
  margin-top:10px;
}

.picked-up-badge{
  background:red;
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-weight:700;
}

/* ===== CUSTOMER "MY ACCOUNT" PORTAL ===== */

.portal-header {
  background: rgba(24, 34, 47, 0.96);
  color: white;
  padding: 18px 34px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.18);
}

.portal-header .brand {
  font-weight: 800;
  letter-spacing: .02em;
}

.portal-main {
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
}

.portal-page-wrap {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-box {
  width: 100%;
  max-width: 440px;
  background: white;
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.portal-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 6px;
}

.portal-box h1 {
  text-align: center;
  margin: 0 0 4px;
  font-size: 26px;
  color: var(--dark);
}

.portal-subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14px;
}

.portal-box label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 7px;
  color: var(--muted);
}

.portal-box input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 15px;
  margin-bottom: 18px;
  box-sizing: border-box;
  background: #fbfaf7;
}

.portal-box input:focus {
  border-color: var(--gold);
  background: white;
}

.portal-otp-input {
  text-align: center;
  letter-spacing: .5em;
  font-size: 22px;
  font-weight: 800;
}

.portal-box button[type="submit"] {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  letter-spacing: .03em;
  margin-top: 4px;
}

.portal-resend-form {
  margin-top: 14px;
}

.portal-link-btn {
  width: 100%;
  background: none;
  color: var(--dark);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 14px;
  font-weight: 700;
}

.portal-back-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.portal-back-link:hover {
  color: var(--dark);
}

.portal-success {
  background: #e3f6e9;
  color: var(--success);
  padding: 11px 13px;
  margin-bottom: 15px;
  border-radius: 14px;
  font-weight: 700;
}

.portal-method-tabs {
  display: flex;
  gap: 8px;
  background: #f3f2ed;
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 22px;
}

.portal-method-tab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.portal-method-tab.active {
  background: white;
  color: var(--dark);
  box-shadow: 0 4px 12px rgba(24,34,47,0.10);
}

.portal-history-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.portal-history-header h1 {
  margin: 0 0 4px;
  color: var(--dark);
}

.portal-logout-link {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.portal-logout-link:hover {
  color: var(--danger);
}

.portal-header-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.portal-cart-link {
  color: var(--dark);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--gold-soft);
  padding: 7px 14px;
  border-radius: 20px;
}

.portal-cart-link:hover {
  background: var(--gold);
  color: white;
}

.portal-empty,
.portal-empty-items {
  color: var(--muted);
  text-align: center;
  padding: 20px 0;
}

.portal-receipts {
  display: grid;
  gap: 14px;
}

.portal-receipt-card {
  background: white;
  border-radius: 18px;
  padding: 4px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

.portal-receipt-card.has-cart-item {
  border-left: 5px solid var(--danger);
}

.portal-in-cart-badge {
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.portal-in-cart-badge-inline {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.portal-line-item.in-cart {
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

.portal-receipt-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.portal-receipt-summary::-webkit-details-marker {
  display: none;
}

.portal-receipt-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-receipt-no {
  font-weight: 800;
  color: var(--dark);
}

.portal-receipt-date {
  font-size: 12px;
  color: var(--muted);
}

.portal-receipt-summary-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-badge {
  background: var(--gold-soft);
  color: var(--dark);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.portal-receipt-total {
  font-weight: 800;
  font-size: 16px;
  color: var(--dark);
}

.portal-money-negative {
  color: var(--danger) !important;
}

.portal-receipt-body {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.portal-line-items {
  display: grid;
  gap: 10px;
}

.portal-line-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  background: #f7f7f7;
  border-radius: 12px;
  padding: 10px 12px;
}

.portal-add-cart-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.portal-add-cart-qty {
  width: 52px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  background: white;
}

.portal-add-cart-qty:focus {
  outline: none;
  border-color: var(--gold);
}

.portal-add-cart-btn {
  background: var(--dark);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.portal-add-cart-btn:hover {
  background: var(--gold);
}

.portal-cart-item {
  padding: 4px 18px;
}

.portal-cart-line-item {
  grid-template-columns: 1fr auto auto;
  background: transparent;
  padding: 14px 0;
}

.portal-inline-form {
  display: inline;
  margin: 0;
}

.portal-cart-qty-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.portal-update-qty-btn {
  background: white;
  color: var(--dark);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
}

.portal-update-qty-btn:hover {
  border-color: var(--gold);
}

.portal-remove-btn {
  background: none;
  color: var(--danger);
  border: 1px solid #fecaca;
  padding: 7px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
}

.portal-remove-btn:hover {
  background: #fee2e2;
}

.portal-cart-submit-form {
  background: white;
  border-radius: 18px;
  padding: 18px;
  margin-top: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

.portal-cart-submit-form label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 7px;
  color: var(--muted);
}

.portal-cart-submit-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  margin-bottom: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: #fbfaf7;
}

.portal-cart-submit-form button[type="submit"] {
  padding: 13px 24px;
  border-radius: 14px;
  font-size: 14px;
}

.admin-cart-panel {
  margin-bottom: 24px;
  border: 2px solid var(--gold);
}

.portal-cart-success {
  margin-bottom: 0;
}

.portal-line-item-name {
  font-weight: 700;
  color: var(--dark);
}

.portal-line-item-variant {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.portal-line-item-qty {
  font-size: 13px;
  color: var(--muted);
}

/* Idea #154 - "Change Variant" button/label on the My Account purchase
   history "Add to Cart" row, plus the cascade panel it toggles open below
   the row (see .shop-variant-box etc. in shop.css for the panel itself). */
.portal-variant-change-btn {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.portal-variant-change-btn:hover {
  border-color: var(--gold);
}

.portal-variant-selected-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.portal-variant-picker {
  margin: -4px 0 10px;
  padding: 10px 12px;
  background: #f7f7f7;
  border-radius: 12px;
}

.portal-line-item-total {
  font-weight: 800;
  text-align: right;
}

.portal-payments {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.portal-payments h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.portal-payment-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}

/* ===== ADMIN CUSTOMER LOOKUP ===== */

.admin-page-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.admin-search-bar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 22px;
}

.admin-search-bar input[type="text"] {
  flex: 1;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 15px;
  background: #fbfaf7;
}

.admin-search-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
}

.admin-search-bar button[type="submit"] {
  padding: 11px 26px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
}

.admin-results-table-wrap {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  overflow-x: auto;
}

.admin-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-results-table th,
.admin-results-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.admin-results-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-results-table tr:last-child td {
  border-bottom: none;
}

.admin-results-table tr:hover td {
  background: #faf8f3;
}

.admin-results-table a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.admin-results-table a:hover {
  text-decoration: underline;
}

/* ===== ADMIN USERS (card layout) ===== */

.admin-user-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.admin-user-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.admin-user-card-new {
  max-width: 480px;
}

.admin-user-card-new h3 {
  margin: 0 0 12px;
}

.admin-user-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-user-card-username {
  font-size: 16px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px;
  margin-left: -8px;
  min-width: 0;
  flex: 1;
}

.admin-user-card-username:hover,
.admin-user-card-username:focus {
  border-color: var(--border);
  outline: none;
  background: #fbfaf7;
}

.admin-user-card-created {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.admin-user-card-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-user-card-fields input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  width: 100%;
}

.admin-user-card-perms-label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.admin-user-card-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 16px;
}

.admin-user-card-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-user-card-remove-form {
  margin-top: 12px;
  text-align: right;
}

/* ===== ADMIN OTP LOG ===== */

.otp-log-section-title {
  margin: 30px 0 14px;
  font-size: 18px;
  color: var(--dark);
}

.otp-log-table-wrap {
  margin-bottom: 10px;
}

.otp-block-form select,
.otp-block-form input[type="text"] {
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  background: #fbfaf7;
}

.otp-block-form select {
  flex: 0 0 110px;
}

.otp-block-form input[name="destination"],
.otp-block-form input[name="reason"] {
  flex: 1;
}

.danger-btn {
  background: var(--danger) !important;
}

.otp-inline-form {
  display: inline;
}

.otp-unblock-btn {
  background: white;
  color: var(--dark);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
}

.otp-unblock-btn:hover {
  border-color: var(--gold);
}

.otp-block-btn {
  background: #fee2e2;
  color: #991b1b;
  border: none;
  padding: 7px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
}

.log-delete-btn {
  background: #fee2e2;
  color: #991b1b;
  border: none;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.log-delete-btn:hover {
  background: #fecaca;
}

.otp-blocked-badge {
  background: #fee2e2;
  color: #991b1b;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.otp-event-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.otp-event-send,
.otp-event-resend {
  background: var(--gold-soft);
  color: var(--dark);
}

.otp-event-verify_success {
  background: #dcfce7;
  color: var(--success);
}

.otp-event-verify_fail,
.otp-event-verify_locked {
  background: #fef3c7;
  color: #92400e;
}

.otp-event-blocked_attempt {
  background: #fee2e2;
  color: #991b1b;
}

/* ===== ADMIN ACTIVITY LOG ===== */

.activity-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--gold-soft);
  color: var(--dark);
}

.activity-badge-login {
  background: #dcfce7;
  color: var(--success);
}

.activity-badge-login_failed {
  background: #fee2e2;
  color: #991b1b;
}

.activity-badge-logout {
  background: #e5e7eb;
  color: #374151;
}

.activity-badge-user_create,
.activity-badge-user_update,
.activity-badge-user_delete {
  background: #fef3c7;
  color: #92400e;
}

/* ===== ADMIN REORDER REQUESTS ===== */

.reorder-status-tab {
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fbfaf7;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.reorder-status-tab.active {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
}

.reorder-request-card {
  padding: 18px;
}

.reorder-request-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.reorder-items {
  gap: 8px;
}

.reorder-line-item {
  grid-template-columns: 1fr auto;
}

.reorder-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f7f7f7;
  border-radius: 12px;
  font-size: 13px;
}

.reorder-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== IDEAS BOARD (redesign) =====
   Navy/blue hero + card-list + modal-detail layout, matching a reference
   spec (IDEAS-BOARD.md) the user provided. Dark mode needs no special-casing
   here - the site-wide dark theme is a blanket filter: invert(1)
   hue-rotate(180deg) on <html>, with images un-inverted back to normal (see
   "Site-wide dark mode" above), so these navy/blue colors and any photo
   preview automatically look right in both themes without extra rules. */

.ib-page {
  max-width: 1240px;
  margin: 0 auto;
}

.ib-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--ib-navy), #16233b);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}

.ib-hero-text h1 {
  margin: 0 0 6px;
  font-size: 30px;
  color: #fff;
}

.ib-hero-text p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  max-width: 560px;
}

.ib-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Plain buttons default to a visible light style (border + dark text) since
   most of them sit on white dialog/card backgrounds. The glassy "white text
   on dark" look further down is deliberately re-scoped to just the navy
   hero, where a white/near-transparent background actually reads as a
   button instead of disappearing against white. */
.ib-btn {
  border: 1px solid var(--ib-line);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}

.ib-btn:hover {
  background: #f1f5f9;
}

.ib-btn-primary {
  background: var(--ib-blue);
  border-color: var(--ib-blue);
  color: #fff;
}

.ib-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.ib-hero-actions .ib-btn {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ib-hero-actions .ib-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ib-hero-actions .ib-btn-primary {
  background: var(--ib-blue);
}

.ib-hero-actions .ib-btn-primary:hover {
  background: #1d4ed8;
}

.ib-hero-actions .ib-live-indicator {
  font-size: 12px;
  font-weight: 700;
  color: #86efac;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  border: none;
  font-family: inherit;
}

.ib-live-indicator.ib-live-stale {
  color: #0b1220;
  background: #fbbf24;
  cursor: pointer;
}

.ib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.ib-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.ib-stat-num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--ib-navy);
}

.ib-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ib-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.ib-tabs {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.ib-tab {
  border: 1px solid var(--ib-line);
  background: var(--card);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}

.ib-tab.ib-active {
  background: var(--ib-navy);
  border-color: var(--ib-navy);
  color: #fff;
}

.ib-tab-count {
  opacity: 0.65;
  margin-left: 4px;
}

.ib-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ib-toolbar input[type="text"] {
  flex: 1 1 260px;
}

.ib-toolbar input,
.ib-toolbar select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--ib-line);
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}

.ib-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.ib-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ib-card:hover {
  border-color: var(--ib-blue);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
}

.ib-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.ib-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ib-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.ib-tag-num {
  font-weight: 700;
  color: var(--ib-muted);
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
  background: none;
}

.ib-tag-idea { background: #ede9fe; color: #6d28d9; }
.ib-tag-feature { background: #dbeafe; color: #1d4ed8; }
.ib-tag-bug { background: #fee2e2; color: #b91c1c; }

.ib-tag-status-open { background: var(--gold-soft); color: var(--dark); }
.ib-tag-status-wait { background: #fef3c7; color: #92400e; }
.ib-tag-status-in_progress { background: #dbeafe; color: #1d4ed8; }
.ib-tag-status-done { background: #dcfce7; color: var(--success); }

.ib-card-title {
  font-size: 16px;
  font-weight: 800;
  margin: 8px 0 4px;
}

.ib-card-post {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ib-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ib-muted);
}

.ib-card-meta b {
  color: var(--text);
}

.ib-empty {
  margin-top: 24px;
}

.ib-footer-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 24px;
}

/* Native <dialog>-based modals (New Request / Settings / All Updates /
   Detail) - showModal()/close() handle the open/closed state, so no
   overlay div or "open" class toggling is needed like the old custom-div
   modal this replaced. */
dialog.ib-dialog {
  width: min(760px, calc(100% - 24px));
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  background: var(--card);
  color: var(--text);
  max-height: calc(100vh - 60px);
}

dialog.ib-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

dialog.ib-dialog form,
.ib-modal-pad,
#ibDetail {
  padding: 25px;
}

/* Explicit reset, not just additions - <header> is also a bare-tag
   selector site-wide (the top nav bar: position:sticky, z-index:1000,
   padding:18px 34px, box-shadow, dark background), and this dialog title
   bar is a completely different, unrelated element that happens to share
   the tag name. Relying on only overriding display/justify-content left it
   silently inheriting position/z-index/padding/shadow from that other
   rule, which is what needs to never leak in here. */
dialog.ib-dialog header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: -25px -25px 20px;
  padding: 20px 25px;
  background: linear-gradient(135deg, var(--ib-navy), #16233b);
  color: #fff;
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

dialog.ib-dialog header .ib-eyebrow {
  color: #93c5fd;
}

dialog.ib-dialog header h2 {
  margin: 4px 0;
}

dialog.ib-dialog header button {
  border: 0;
  background: #eef0f4;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

dialog.ib-dialog label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0;
}

dialog.ib-dialog input,
dialog.ib-dialog select,
dialog.ib-dialog textarea {
  border: 1px solid var(--ib-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

dialog.ib-dialog textarea {
  resize: vertical;
}

.ib-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

dialog.ib-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.ib-check {
  flex-direction: row !important;
  align-items: center;
  font-weight: 600 !important;
}

.ib-help {
  background: #eff6ff;
  padding: 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}

.ib-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--ib-blue);
  text-transform: uppercase;
}

.ib-status {
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.ib-status-open { background: var(--gold-soft); color: var(--dark); }
.ib-status-wait { background: #fef3c7; color: #92400e; }
.ib-status-in_progress { background: #dbeafe; color: #1d4ed8; }
.ib-status-done { background: #dcfce7; color: var(--success); }

.ib-detail-body {
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 14px;
  background: #f7f8fa;
  padding: 16px;
  border-radius: 12px;
  margin: 10px 0;
}

.ib-request-photo,
.ib-update-photo {
  margin: 12px 0;
}

.ib-request-photo img,
.ib-update-photo img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 12px;
  border: 1px solid var(--border);
  object-fit: contain;
  cursor: zoom-in;
}

.ib-btn-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.ib-request-photo .ib-btn-danger,
.ib-update-photo .ib-btn-danger {
  margin-top: 8px;
  padding: 7px 12px;
  font-size: 12px;
}

.ib-status-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.ib-timeline {
  border-left: 2px solid #dbeafe;
  margin-left: 8px;
  padding-left: 20px;
}

.ib-event {
  margin: 0 0 18px;
  font-size: 13px;
}

.ib-event p {
  margin: 4px 0;
  line-height: 1.5;
}

.ib-event small {
  color: var(--ib-muted);
}

.ib-photo-drop {
  border: 2px dashed var(--ib-line);
  border-radius: 14px;
  padding: 14px;
  display: grid !important;
  gap: 9px;
  cursor: pointer;
  font-weight: 700 !important;
  color: var(--ib-muted);
}

.ib-photo-drop.dragging {
  border-color: var(--ib-blue);
  background: #eff6ff;
}

.ib-photo-drop img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  object-fit: contain;
}

.ib-edit-panel {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  background: #f7f8fa;
  border: 1px solid var(--border);
}

.ib-card-main {
  transition: background 0.15s ease;
}

.ib-card-main:hover {
  background: #f8fafc;
}

@media (max-width: 700px) {
  .ib-hero { flex-direction: column; align-items: stretch; }
  .ib-stats { grid-template-columns: repeat(2, 1fr); }
  .ib-tab-count { display: none; }
  .ib-toolbar { flex-direction: column; }
  .ib-toolbar input,
  .ib-toolbar select {
    width: 100%;
  }
  /* .ib-toolbar input[type="text"] sets flex: 1 1 260px for the desktop row
     layout - in a column flex container that basis applies to height, not
     width, which blew the search box up to ~260px tall. Reset it here so
     the input just takes its natural single-line height. Must match the
     [type="text"] attribute selector's specificity or this silently loses
     to the desktop rule regardless of source order. */
  .ib-toolbar input[type="text"] {
    flex: 0 1 auto;
  }
  .ib-form-grid { grid-template-columns: 1fr; }
  dialog.ib-dialog form,
  #ibDetail { padding: 18px; }
}

.changelog-badge-bugfix {
  background: #fee2e2;
  color: var(--danger);
}

/* LABEL ORDER PREVIEW */

.label-line-small {
  font-size: 12px;
  color: #777;
  margin-top: 3px;
}

.label-qty-badge {
  background: #dc2626;
  color: white;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.label-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
}

.label-type-badge {
  background: #2563eb;
  color: white;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

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

.label-preview-area {
  background: #f4f4f4;
  border-radius: 12px;
  padding: 18px;
  margin: 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-preview {
  background: white;
  border: 2px dashed #444;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.05;
  text-align: center;
  overflow: hidden;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.label-preview-line {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

/* STICK ON
   0.9 x 0.5 */

.label-preview-stick {
  width: 90px;
  height: 50px;
  font-size: 11px;
}

/* IRON ON
   1.75 x 0.5 */

.label-preview-iron {
  width: 175px;
  height: 50px;
  font-size: 13px;
}

/* SAW ON
   2.25 x 0.5 */

.label-preview-saw {
  width: 225px;
  height: 50px;
  font-size: 13px;
}

.label-card-ready {
  background: #ecfdf3 !important;
  border: 2px solid #16a34a !important;
}

.label-card-picked {
  background: #f1f5f9 !important;
  border: 2px solid #64748b !important;
  opacity: 0.85;
}

.label-tags {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.label-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.mark-picked-btn {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.label-page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.label-search-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  margin-bottom:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.search-icon{
  font-size:20px;
}

.label-search-input{
  flex:1;
  border:none;
  outline:none;
  font-size:15px;
  background:transparent;
}

.label-search-btn{
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 18px;
  cursor:pointer;
  font-weight:700;
}

.status-filter{
  display:flex;
  gap:10px;
}

.status-filter a{
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  background:#f1f5f9;
  color:#334155;
  font-weight:700;
}

.status-filter a.active{
  background:#2563eb;
  color:white;
}

/* ===== ADMIN WEBSITE ORDERS ===== */

.weborder-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 16px 18px;
}

.weborder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(24,34,47,0.14);
}

.weborder-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.weborder-total {
  font-weight: 800;
  color: var(--dark);
}

.weborder-note-block {
  margin-bottom: 18px;
}

.weborder-line-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.weborder-line-table th,
.weborder-line-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}

.weborder-line-table th {
  background: var(--dark);
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.weborder-line-table tbody tr:last-child td {
  border-bottom: none;
}

/* The barcode now sits under the item name rather than in a column of its own,
   so it reads as a secondary line. */
.weborder-upc {
  display: block;
  margin-top: 2px;
  font-family: "Courier New", monospace;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
}

.weborder-line-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.weborder-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
}

.weborder-qty-input { width: 56px; }
.weborder-price-input { width: 76px; }
.weborder-dollar { color: var(--muted); font-size: 13px; }

.weborder-save-btn {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  color: var(--dark);
  font-weight: 700;
  cursor: pointer;
}

.weborder-save-btn:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.weborder-remove-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--danger);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.weborder-back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}

.weborder-back-link:hover {
  text-decoration: underline;
}

.weborder-line-total {
  font-weight: 800;
  color: var(--dark);
  white-space: nowrap;
}

.weborder-total-label {
  text-align: right;
  font-weight: 800;
  color: var(--dark);
}

.weborder-remove-cell {
  text-align: center;
}

.weborder-empty-row {
  text-align: center;
  color: var(--muted);
  padding: 30px;
}

.weborder-add-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  margin-bottom: 24px;
}

.weborder-add-box h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.weborder-add-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.weborder-add-form input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 14px;
}

.weborder-add-btn {
  width: auto;
  padding: 11px 24px;
}

.weborder-add-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.weborder-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.weborder-cancel-btn {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.weborder-cancel-btn:hover {
  background: var(--danger);
  color: white;
}

/* ===== CUSTOMER BALANCE / CREDIT (admin) ===== */

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

.admin-stat-grid-compact {
  margin: 0 0 20px;
}

.admin-stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.admin-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 6px;
}

.admin-stat-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--dark);
}

.admin-stat-warning .admin-stat-value { color: var(--danger); }
.admin-stat-positive .admin-stat-value { color: var(--success); }

.admin-money-warning { color: var(--danger); font-weight: 700; }
.admin-money-positive { color: var(--success); font-weight: 700; }

/* ===== INVENTORY MANAGER ===== */

.inv-mgr-wrap {
  max-width: 1400px;
}

.inv-mgr-lists-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.inv-mgr-lists-label {
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.inv-mgr-list-chip {
  background: #f1f5f9;
  color: #334155;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.inv-mgr-add-list-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.inv-mgr-add-list-btn:hover {
  border-color: var(--gold);
  color: var(--dark);
}

.inv-mgr-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-mgr-product {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.inv-mgr-product > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inv-mgr-product-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.inv-mgr-product table {
  margin-top: 14px;
}

.inv-mgr-order-input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.inv-mgr-list-checkbox {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.inv-mgr-hidden-badge {
  color: #b45309;
  cursor: help;
  margin-left: 2px;
}

.chussen-cal-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}

.chussen-cal-month-label {
  margin: 0;
  min-width: 180px;
  text-align: center;
}

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

.chussen-cal-weekday {
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0;
}

.chussen-cal-day {
  min-height: 90px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.chussen-cal-day:hover {
  border-color: var(--gold);
}

.chussen-cal-day-empty {
  background: transparent;
  border: none;
  cursor: default;
}

.chussen-cal-day-link {
  text-decoration: none;
  color: inherit;
}

.chussen-cal-day-selected {
  border: 2px solid var(--gold);
}

.chussen-cal-day-unavailable {
  cursor: default;
  opacity: 0.55;
}

.chussen-hour-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chussen-cal-day-today {
  border: 2px solid var(--success);
}

.chussen-cal-daynum {
  font-weight: 700;
  font-size: 13px;
}

.chussen-cal-hebrew {
  font-size: 10px;
  color: var(--muted);
  direction: rtl;
  unicode-bidi: isolate;
}

.chussen-cal-parsha {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chussen-cal-chip {
  font-size: 11px;
  background: var(--gold-soft);
  color: var(--dark);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chussen-cal-chip-more {
  font-size: 11px;
  color: var(--muted);
}

.chussen-day-panel {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1px solid var(--border);
}

.chussen-day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.chussen-day-panel-header h3 {
  margin: 0;
}

.chussen-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* Editable time on a booked appointment, and the minutes-past-the-hour box
   on the booking form (both added so staff can work off the hour). */
.chussen-slot-time-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chussen-slot-time-input {
  width: 132px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.chussen-slot-minute-input {
  width: 62px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}

/* "Arrived" - starts the customer's Chussen order form from the calendar.
   Green to read as the positive/primary action on the row, distinct from the
   red Cancel next to it. */
.chussen-arrived-btn {
  background: var(--success);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

.chussen-arrived-btn:hover {
  filter: brightness(1.1);
}

.admin-notice {
  background: var(--gold-soft);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 14px;
}

.chussen-slot-contact-input {
  min-width: 190px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}

/* "This customer has no mobile number / address on file" prompt, shown
   inline on the booking form after a phone lookup finds someone. */
.chussen-contact-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--gold-soft);
  border-radius: 10px;
}

.chussen-contact-prompt-note {
  width: 100%;
  font-size: 12px;
  font-weight: 800;
  color: var(--dark);
}

.chussen-contact-input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  min-width: 120px;
}

.chussen-contact-skip {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 12px;
  text-decoration: underline;
}

.chussen-slot-name {
  flex: 1;
  font-weight: 600;
}

.chussen-slot-online-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: #e6f4ea;
  border-radius: 6px;
  padding: 2px 8px;
}

.chussen-slot-closed {
  color: var(--muted);
  font-style: italic;
}

.chussen-slot-form {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chussen-slot-form input[type="text"],
.chussen-slot-form input[type="tel"] {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.chussen-slot-lookup-status {
  font-size: 11px;
  color: var(--muted);
  flex-basis: 100%;
}

/* Name-search results shown when typing a name matches more than one
   customer on file (idea #157) - staff pick the right one so the
   confirmation text goes to that customer's actual phone number. */
.chussen-contact-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.chussen-contact-pick-btn {
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--dark);
}

.chussen-contact-pick-btn:hover {
  background: var(--gold-soft);
}

.chussen-success-card {
  max-width: 420px;
  margin: 40px auto;
  padding: 36px 28px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.chussen-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--success);
  color: white;
  font-size: 34px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chussen-success-detail {
  color: var(--muted);
  margin: 4px 0;
}

.chussen-success-datetime {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin: 10px 0 18px;
  line-height: 1.4;
}

.chussen-success-note {
  color: var(--muted);
  margin-bottom: 22px;
}

.reg-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.reg-roster-btn {
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.reg-roster-btn:hover {
  border-color: var(--gold);
}

.reg-pin-panel {
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1px solid var(--border);
  max-width: 320px;
}

.reg-pos-wrap {
  max-width: 100%;
}

.reg-pos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reg-pos-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .reg-pos-layout { grid-template-columns: 1fr; }
}

.reg-item-search {
  position: relative;
  margin-bottom: 12px;
}

.reg-item-search input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 15px;
}

.reg-search-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}

.reg-search-result-row {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.reg-search-result-row:hover {
  background: var(--gold-soft);
}

.reg-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.reg-cart-table th, .reg-cart-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.reg-qty-input, .reg-disc-input {
  width: 60px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.reg-side-box {
  padding: 14px;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

.reg-side-box input[type="text"], .reg-side-box select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 6px;
}

.reg-cust-selected {
  margin-top: 10px;
  font-size: 13px;
}

.reg-cust-selected > div {
  margin-bottom: 4px;
}

.reg-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}

.reg-total-grand {
  font-weight: 800;
  font-size: 17px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
}

.reg-print-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  font-weight: 600;
  font-size: 13px;
}

.reg-side-box button {
  width: 100%;
  margin-top: 8px;
}

.reg-message {
  font-weight: 700;
  font-size: 13px;
  min-height: 18px;
}

.reg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.reg-modal-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.reg-modal-content h2 { margin-top: 0; }

.reg-modal-content label {
  display: block;
  font-size: 13px;
  color: #555;
  font-weight: 600;
  margin-top: 12px;
}

.reg-modal-content input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 4px;
}

/* ---- Previous Transactions - matches vrp-register's own desktop-app
   Previous Transactions screen (renderer/style.css's .previous-* classes):
   dark header bar, opacity-based source toggle, sticky uppercase table
   headers, dark selected-row highlight. Scoped under .reg-previous-page so
   none of it leaks onto the main checkout page's shared header/table
   styles. */

.reg-previous-page .reg-pos-header {
  background: var(--dark);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.reg-previous-page .reg-pos-header a,
.reg-previous-page .reg-pos-header button {
  color: white;
}

.reg-source-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.reg-source-toggle button {
  opacity: 0.6;
}

.reg-source-toggle button.reg-source-active {
  opacity: 1;
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.reg-previous-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: 12px;
  overflow: hidden;
  align-items: start;
}

.reg-previous-layout > table.grid-table,
.reg-previous-layout > .reg-side-box {
  background: white;
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: 70vh;
  overflow: auto;
}

.reg-previous-filters {
  display: flex;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.reg-previous-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.reg-previous-filters input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.reg-previous-layout table.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reg-previous-layout table.grid-table th {
  position: sticky;
  top: 0;
  background: #eef0f4;
  text-align: left;
  padding: 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
}

.reg-previous-layout table.grid-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.reg-prev-row {
  cursor: pointer;
}

.reg-prev-row:hover {
  background: #f0f2f8;
}

.reg-prev-row.reg-prev-row-selected {
  background: var(--dark);
  color: white;
}

.reg-prev-row-voided {
  text-decoration: line-through;
  color: #999;
}

.reg-prev-row.reg-prev-row-selected.reg-prev-row-voided {
  color: #ccc;
}

.chussen-hours-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 520px;
}

.chussen-hours-table th, .chussen-hours-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.chussen-reminder-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}

.chussen-reminder-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
}

.chussen-reminder-form input[type="text"],
.chussen-reminder-form input[type="email"],
.chussen-reminder-form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-weight: 400;
}

.inv-mgr-crosslist-btn {
  background: #f1f5f9;
  border: none;
  color: var(--dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 800;
  cursor: pointer;
}

.inv-mgr-crosslist-panel {
  margin-top: 10px;
  background: #fbfaf7;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  white-space: normal;
  min-width: 260px;
}

.inv-mgr-crosslist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.inv-mgr-chip {
  background: #eef2ff;
  color: #3730a3;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inv-mgr-chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
  padding: 0;
}

.inv-mgr-crosslist-add {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.inv-mgr-crosslist-add input {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  width: 90px;
}

.inv-mgr-pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.inv-mgr-cat-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.inv-mgr-cat-section h3 {
  margin: 0 0 6px;
}

.inv-mgr-cat-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.inv-mgr-cat-picker select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.inv-mgr-sortable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-mgr-sortable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbfaf7;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}

.inv-mgr-drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 16px;
}

.inv-mgr-sortable-label {
  flex: 1;
  font-weight: 700;
}

.inv-mgr-chussen-add-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.inv-mgr-chussen-add-row select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  min-width: 220px;
}

.inv-mgr-chussen-search-input {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  margin-bottom: 12px;
  background: #fbfaf7;
}

.inv-mgr-chussen-search-input:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
}

.inv-mgr-list-code-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.inv-mgr-mode-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.inv-mgr-mode-default {
  background: var(--gold-soft);
  color: var(--dark);
}

.inv-mgr-mode-optin {
  background: #dcfce7;
  color: var(--success);
}

.inv-mgr-chussen-remove-btn {
  background: #fee2e2;
  color: #991b1b;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.inv-mgr-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ===== INVENTORY MANAGER - search bar ===== */
/* Own layout rather than reusing .new-filter-bar/.filter-top-row - those have
   a hardcoded 8-column grid built for /catalog's specific icon+5-selects+2-
   buttons layout, which doesn't match this page's field set (misaligned/
   squeezed controls). Flex-wrap adapts to any number of fields instead. */

.inv-mgr-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--card, white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.inv-mgr-search-bar .filter-group {
  flex: 1 1 130px;
  min-width: 110px;
}

.inv-mgr-search-bar .filter-group select,
.inv-mgr-search-bar .filter-group input[type="text"] {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  background: #fbfaf7;
  color: var(--text);
}

.inv-mgr-search-bar .filter-group select:focus,
.inv-mgr-search-bar .filter-group input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
}

.inv-mgr-search-group {
  flex: 2 1 220px;
}

.inv-mgr-search-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 720px) {
  .inv-mgr-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .inv-mgr-search-bar .filter-group {
    flex: 1 1 auto;
  }

  .inv-mgr-search-actions .search-btn,
  .inv-mgr-search-actions .clear-btn {
    flex: 1;
  }
}

/* ===== INVENTORY MANAGER - product list (Shopify-style) ===== */

.inv-mgr-product-table th, .inv-mgr-product-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.inv-mgr-clickable-row {
  cursor: pointer;
}

.inv-mgr-clickable-row:hover td {
  background: #faf8f3;
}

.inv-mgr-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fbfaf7;
}

.inv-mgr-product-name {
  font-weight: 700;
  color: var(--dark);
  white-space: normal;
}

.inv-mgr-product-id {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
}

#inv-mgr-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--dark);
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  white-space: nowrap;
}

#inv-mgr-toast.inv-mgr-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.inv-mgr-color-input {
  width: 70px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.inv-mgr-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inv-mgr-pi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.inv-mgr-selectall-label {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.inv-mgr-field-group select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  background: #fbfaf7;
  color: var(--muted);
}

.inv-mgr-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inv-mgr-pill-visible {
  background: #dcfce7;
  color: #166534;
}

.inv-mgr-pill-hidden {
  background: #f1f5f9;
  color: #64748b;
}

.inv-mgr-pill-mixed {
  background: #fef3c7;
  color: #92400e;
}

.inv-mgr-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111827;
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  margin-bottom: 14px;
  position: sticky;
  top: 8px;
  z-index: 50;
}

.inv-mgr-bulk-bar select {
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
}

.inv-mgr-bulk-bar button {
  background: white;
  color: #111827;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.inv-mgr-bulk-bar button:hover {
  background: #e5e7eb;
}

.inv-mgr-auto-position {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  cursor: help;
  margin-top: 2px;
  white-space: nowrap;
}

.inv-mgr-page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-weight: 700;
}

/* ===== PULL TO REFRESH (public/js/pull-to-refresh.js) ===== */

#ptr-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  transform: translateY(-100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card, white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 9999;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}

#ptr-indicator.ptr-ready {
  color: var(--gold);
}

.ptr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
}

#ptr-indicator.ptr-loading .ptr-spinner {
  animation: ptr-spin 0.6s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}
/* Filter order overrides (Inventory Manager > Filters) - "when this field is
   this value, drill in this order instead". */
.inv-mgr-overrides {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.2);
}

.inv-mgr-overrides-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inv-mgr-overrides-hint { margin: 4px 0 10px; }

.inv-mgr-override {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-left: 4px solid #1d4ed8;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.inv-mgr-override-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.inv-mgr-override-key .inv-mgr-btn { margin-left: auto; }
.inv-mgr-override-fields { margin: 0; }

/* "Add order override" dialog (Inventory Manager > Filters). */
.inv-mgr-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 14px;
  overflow-y: auto;
  z-index: 70;
}

.inv-mgr-modal[hidden] { display: none; }

.inv-mgr-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: min(520px, 100%);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}

.dark-mode .inv-mgr-modal-card { background: #1c2230; color: #e5e7eb; }

.inv-mgr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inv-mgr-modal-head h3 { margin: 0; font-size: 1.05rem; }

.inv-mgr-modal-close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.inv-mgr-modal-field { display: block; margin: 12px 0 6px; }

.inv-mgr-modal-field > span {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.inv-mgr-modal-field select,
.inv-mgr-modal-field input,
.inv-mgr-modal-values {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  font: inherit;
  background: inherit;
  color: inherit;
}

.inv-mgr-modal-values { padding: 4px; margin-top: 6px; }
.inv-mgr-modal-values option { padding: 5px 7px; border-radius: 6px; }

.inv-mgr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.inv-mgr-btn-primary { background: #1d4ed8; color: #fff; border-color: transparent; }

/* Collapsible filter cards (Inventory Manager > Filters). A closed card still
   shows its order, so the tab reads at a glance instead of running long. */
.inv-mgr-collapse {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  margin: 12px 0;
  background: var(--surface, #fff);
}

.dark-mode .inv-mgr-collapse { background: #1c2230; border-color: rgba(255, 255, 255, 0.12); }

.inv-mgr-collapse-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

.inv-mgr-collapse-summary::-webkit-details-marker { display: none; }

.inv-mgr-collapse-summary::before {
  content: "▸";
  font-size: 0.85rem;
  opacity: 0.65;
  transition: transform 0.15s ease;
}

.inv-mgr-collapse[open] > .inv-mgr-collapse-summary::before { transform: rotate(90deg); }
.inv-mgr-collapse-summary:hover { background: rgba(29, 78, 216, 0.05); }

.inv-mgr-collapse-title { font-weight: 700; }

.inv-mgr-collapse-sub {
  font-size: 0.82rem;
  opacity: 0.7;
  flex: 1 1 240px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-mgr-collapse-body { padding: 0 14px 14px; }

.inv-mgr-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
}

/* Overrides are the exception to the list above them, so they get their own
   colour rather than reading as more of the same. */
.inv-mgr-badge-override { background: #7c3aed; }

.inv-mgr-overrides {
  border-color: rgba(124, 58, 237, 0.45);
  border-left: 4px solid #7c3aed;
  background: rgba(124, 58, 237, 0.05);
  margin-top: 14px;
}

.dark-mode .inv-mgr-overrides { background: rgba(124, 58, 237, 0.16); }
.inv-mgr-overrides > .inv-mgr-collapse-summary:hover { background: rgba(124, 58, 237, 0.09); }
.inv-mgr-overrides .inv-mgr-collapse-title { color: #6d28d9; }
.dark-mode .inv-mgr-overrides .inv-mgr-collapse-title { color: #c4b5fd; }

.inv-mgr-overrides-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.inv-mgr-overrides-hint { margin: 0 0 8px; flex: 1 1 260px; }

.inv-mgr-override {
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--surface, #fff);
}

.dark-mode .inv-mgr-override { background: #1c2230; }
.inv-mgr-override > .inv-mgr-collapse-summary { padding: 10px 12px; }
.inv-mgr-override .inv-mgr-collapse-body { padding: 0 12px 12px; }
.inv-mgr-override-delete { margin-top: 8px; }

/* Staff "Shop as customer" picker - the 900px page made a five-column result
   table read like a cramped little window. Wider page, bigger rows, and the
   whole row is clickable. */
.admin-page-wide { max-width: 1280px; }

.shop-assist-page .admin-search-bar input[type="text"] { font-size: 17px; padding: 16px 18px; }
.shop-assist-page .admin-search-bar button[type="submit"] { padding: 14px 32px; font-size: 15px; }
.shop-assist-count { margin: 0 0 10px; }

.shop-assist-page .admin-results-table { font-size: 15px; }

.shop-assist-page .admin-results-table th,
.shop-assist-page .admin-results-table td { padding: 14px 16px; }

.shop-assist-row { cursor: pointer; }
.shop-assist-row:hover { background: rgba(29, 78, 216, 0.07); }
.shop-assist-name { font-weight: 700; font-size: 16px; }

.shop-assist-start-btn {
  white-space: nowrap;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 720px) {
  /* Stacked cards on a phone - a five-column table cannot be tapped reliably. */
  .shop-assist-page .admin-results-table thead { display: none; }
  .shop-assist-page .admin-results-table,
  .shop-assist-page .admin-results-table tbody,
  .shop-assist-page .shop-assist-row,
  .shop-assist-page .admin-results-table td { display: block; width: 100%; }

  .shop-assist-row {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 6px 4px;
  }

  .shop-assist-page .admin-results-table td { padding: 4px 12px; border: 0; }
  .shop-assist-start-btn { width: 100%; padding: 14px; font-size: 15px; }
}

/* Print address sticker, on deliveries still going out (pending/scheduled). */
.delivery-sticker-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

.delivery-sticker-btn {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.delivery-sticker-btn:hover:not(:disabled) { border-color: #1d4ed8; color: #1d4ed8; }
.delivery-sticker-btn:disabled { opacity: 0.7; cursor: default; }
.dark-mode .delivery-sticker-btn { background: #1c2230; color: inherit; }

.delivery-sticker-boxes {
  width: 62px;
  padding: 7px 6px;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* "Find missing deliveries" catch-up panel on the delivery board. Amber, so it
   reads as a recovery tool rather than part of the normal workflow. */
.delivery-catchup {
  border: 1px solid rgba(180, 83, 9, 0.4);
  border-left: 4px solid #b45309;
  background: rgba(180, 83, 9, 0.06);
  border-radius: 12px;
  margin: 14px 0;
}

.delivery-catchup > summary {
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.delivery-catchup > summary::-webkit-details-marker { display: none; }
.delivery-catchup > summary::before { content: "\25B8"; opacity: 0.65; }
.delivery-catchup[open] > summary::before { content: "\25BE"; }
.delivery-catchup-title { font-weight: 700; color: #92400e; }
.delivery-catchup-sub { font-size: 0.82rem; opacity: 0.75; }
.delivery-catchup-body { padding: 0 14px 14px; }

.delivery-catchup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.delivery-catchup-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }

.delivery-catchup-row select,
.delivery-catchup-row input {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  font-size: 15px;
}

.delivery-catchup-btn {
  padding: 10px 18px;
  border-radius: 9px;
  border: 0;
  background: #b45309;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.delivery-catchup-btn:disabled { opacity: 0.6; cursor: default; }
.delivery-catchup-status { font-size: 0.85rem; font-weight: 600; }
.delivery-catchup-status.is-ok { color: #15803d; }
.delivery-catchup-status.is-warn { color: #b45309; }
.delivery-catchup-status.is-error { color: #b91c1c; }

.delivery-catchup-list {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  max-height: 320px;
  overflow-y: auto;
}

.delivery-catchup-item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 9px;
  font-size: 0.86rem;
  cursor: pointer;
}

.dark-mode .delivery-catchup-item { background: #1c2230; }
.delivery-catchup-receipt { font-weight: 700; }
.delivery-catchup-who { font-weight: 600; }
.delivery-catchup-where { flex: 1 1 240px; opacity: 0.75; }
.delivery-catchup-age { opacity: 0.6; font-size: 0.78rem; }
.delivery-catchup-manual { border-top: 1px dashed rgba(15, 23, 42, 0.2); padding-top: 12px; }
.delivery-catchup-note { font-size: 0.8rem; opacity: 0.75; margin: 0; }

/* Delivery board rows: the actions column used to stack four full-size
   controls, making every row several times taller than its own data. Two
   tight rows instead - the job on top, secondary tools (sticker, status
   override) underneath in a quieter style. */
.delivery-actions-cell { min-width: 380px; }

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

.delivery-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}

.delivery-actions .da-grow { flex: 1 1 120px; min-width: 110px; }

.delivery-actions select,
.delivery-actions input {
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  font-size: 13px;
  background: #fff;
  color: inherit;
}

.dark-mode .delivery-actions select,
.dark-mode .delivery-actions input { background: #1c2230; border-color: rgba(255, 255, 255, 0.16); }

.delivery-actions select:focus,
.delivery-actions input:focus { outline: 2px solid rgba(29, 78, 216, 0.35); outline-offset: -1px; }

.da-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.da-btn-primary { background: #2f725a; color: #fff; }
.da-btn-primary:hover { background: #276049; }

.da-btn-ghost {
  background: #fff;
  color: #1f2937;
  border-color: rgba(15, 23, 42, 0.2);
}

.da-btn-ghost:hover:not(:disabled) { border-color: #2f725a; color: #2f725a; }
.dark-mode .da-btn-ghost { background: #1c2230; color: #e5e7eb; }

/* The status override is a fallback, not the normal path - kept readable but
   deliberately understated so it does not compete with Assign. */
.da-btn-quiet {
  background: transparent;
  color: #6b7280;
  border-color: rgba(15, 23, 42, 0.18);
  font-weight: 600;
  padding: 0 11px;
}

.da-btn-quiet:hover { color: #1f2937; border-color: rgba(15, 23, 42, 0.35); }
.da-btn:disabled { opacity: 0.6; cursor: default; }

.delivery-actions-secondary { padding-top: 2px; }
.delivery-actions-status { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; }
.delivery-actions-status select { max-width: 132px; }
.delivery-actions .delivery-sticker-boxes { width: 52px; text-align: center; font-weight: 700; }

/* Rows themselves: less air, and the data columns line up with the controls. */
.delivery-hub-panel .admin-results-table td { padding: 10px 12px; vertical-align: middle; }
.delivery-hub-panel .admin-results-table th { padding: 10px 12px; }
.delivery-table-subline { display: block; font-size: 11.5px; opacity: 0.65; margin-top: 2px; }

@media (max-width: 900px) {
  .delivery-actions-cell { min-width: 0; }
  .delivery-actions-status { margin-left: 0; }
}

/* "Fill" column on a web order - how many of each line were picked up. */
.weborder-fill-head { width: 64px; }
.weborder-fill-cell { width: 64px; }
.weborder-fill {
  width: 56px;
  padding: 6px 7px;
  border: 1px solid var(--card-border, #ccc);
  border-radius: 7px;
  font: inherit;
  text-align: center;
}
/* ---------------------------------------------------------------------------
   Web order detail, read like the invoice customers already get.
   The page carries real work - editing lines, filling quantities, finalising -
   so this keeps the controls but gives the document shape underneath them:
   a clear heading block, generous rows, money aligned down the right, and
   secondary detail stepped back so the item name leads.
   --------------------------------------------------------------------------- */
.weborder-line-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #e3e9f2);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.weborder-line-table thead th {
  background: #f6f8fb;
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5a6578;
  border-bottom: 1px solid var(--card-border, #e3e9f2);
  white-space: nowrap;
}
.weborder-line-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.weborder-line-table tbody tr:last-child td { border-bottom: 0; }
.weborder-line-table tbody tr:hover { background: #fafcff; }

/* The item name is what people scan for, so it carries the weight. */
.weborder-line-table tbody td:nth-child(2) {
  font-weight: 600;
  line-height: 1.35;
  min-width: 220px;
}
/* Money and totals line up on the right, as on the printed invoice. */
.weborder-line-table thead th:last-child,
.weborder-line-table tbody td:last-child,
.weborder-total-label,
.weborder-total-value { text-align: right; }

.weborder-total-label {
  padding: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
  color: #5a6578;
  background: #f6f8fb;
}
.weborder-total-value {
  padding: 14px;
  font-weight: 800;
  font-size: 17px;
  background: #f6f8fb;
}

@media (max-width: 720px) {
  .weborder-line-table { font-size: 13px; }
  .weborder-line-table thead th,
  .weborder-line-table tbody td { padding: 9px 10px; }
}

/* The order table keeps its columns on a phone and scrolls sideways, rather
   than clipping the price and total off the edge of the screen. */
.weborder-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.weborder-table-scroll .weborder-line-table { min-width: 720px; }


/* ===== Modern classic foundation (admin + login) ===== */
:root {
  --mc-ink: #14181f;
  --mc-muted: #6c7480;
  --mc-line: #e7e1d6;
  --mc-paper: #faf8f4;
  --mc-gold: #a8823f;
  --mc-gold-soft: #f7efdf;
  --mc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --mc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mc-shadow-sm: 0 1px 2px rgba(17,21,27,.05), 0 2px 8px rgba(17,21,27,.04);
  --mc-shadow: 0 1px 2px rgba(17,21,27,.06), 0 10px 28px rgba(17,21,27,.07);
  --mc-shadow-lift: 0 1px 2px rgba(17,21,27,.07), 0 22px 48px rgba(17,21,27,.12);
}

body {
  font-family: var(--mc-font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .catalog-title, .admin-title {
  font-family: var(--mc-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

/* ---- the login screen ---- */
.login-wrap, .login-page {
  background:
    radial-gradient(800px 420px at 80% -10%, #ffffff 0%, transparent 55%),
    linear-gradient(180deg, var(--mc-paper) 0%, #f2eee6 100%);
}

.login-box, .panel {
  border-radius: 26px;
  border: 1px solid var(--mc-line);
  box-shadow: var(--mc-shadow-lift);
  padding: 34px;
}

.login-box h1, .login-box h2 {
  font-family: var(--mc-font-display);
  letter-spacing: -0.015em;
}

.login-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 17px;
  font-size: 25px;
  background: var(--mc-gold-soft);
  border: 1px solid rgba(168,130,63,.3);
}

.login-box input {
  border-radius: 13px;
  border: 1.5px solid var(--mc-line);
  background: #fdfcfa;
  padding: 13px 15px;
  font-family: var(--mc-font);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-box input:focus {
  background: #fff;
  border-color: var(--mc-gold);
  box-shadow: 0 0 0 3px rgba(168,130,63,.18);
}

.login-box button,
.login-box .btn,
button.primary {
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--mc-font);
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 0;
  color: #fff;
  background: linear-gradient(170deg, #1d242e, #11151b);
  box-shadow: 0 1px 2px rgba(17,21,27,.2), 0 8px 20px rgba(17,21,27,.18);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.login-box button:hover,
.login-box .btn:hover,
button.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 1px 2px rgba(17,21,27,.2), 0 14px 28px rgba(17,21,27,.24);
}

/* ---- shared staff surfaces ---- */
.admin-card, .admin-panel, .admin-stat-card, .reorder-note {
  border-radius: 16px;
  border: 1px solid var(--mc-line);
  box-shadow: var(--mc-shadow-sm);
}

.admin-stat-value { font-family: var(--mc-font-display); font-weight: 600; letter-spacing: -0.02em; }

.admin-search-bar input[type="text"],
.admin-user-card-fields input,
.weborder-input,
.weborder-fill {
  border-radius: 11px;
  border: 1.5px solid var(--mc-line);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.admin-search-bar input[type="text"]:focus,
.admin-user-card-fields input:focus,
.weborder-input:focus,
.weborder-fill:focus {
  outline: 0;
  border-color: var(--mc-gold);
  box-shadow: 0 0 0 3px rgba(168,130,63,.18);
}

.reorder-status-tab {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.003em;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* ---------- Touch screens: never zoom in on a tapped field ---------- */
/* Android and iOS zoom the page whenever you tap a field whose text is smaller
   than 16px. Chrome on Android deliberately ignores "user-scalable=no", so the
   viewport tag cannot prevent it - 16px text is the only reliable fix.

   This is one override rather than ~50 edits across the component styles,
   because it is a platform rule, not a design choice: every text field in the
   app has to clear 16px on a touch screen or the page jumps when staff tap it.
   !important is here for the same reason - component rules like
   ".weborder-input { font-size: 13px }" are more specific and would win
   otherwise. Desktop is untouched: this only applies to coarse pointers.

   Opt out on a genuinely non-editable control with class="allow-small-text". */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.allow-small-text),
  select:not(.allow-small-text),
  textarea:not(.allow-small-text) {
    font-size: 16px !important;
  }

  /* Boxes sized in pixels for 12-14px text clip their contents at 16px, so the
     narrow ones used on order, stock and appointment screens get room back. */
  .weborder-fill { width: 64px; }
  .weborder-qty-input { width: 66px; }
  .weborder-price-input { width: 88px; }
  .inv-mgr-order-input { min-width: 62px; }
  .inv-mgr-color-input { min-width: 90px; }
  .chussen-slot-time-input,
  .chussen-slot-minute-input { min-width: 58px; }
  .shop-qty-input { min-width: 58px; }

  /* The OTHER zoom: a quick second tap anywhere is treated as "double-tap to
     zoom", so tapping two rows in a row - an order, then the next one - magnifies
     the page instead. Naming these elements as single-tap targets stops that and
     removes the ~300ms delay the browser otherwise waits to see if a second tap
     is coming. Pinch-to-zoom is unaffected: this covers controls only, not the
     page, so anyone who wants to magnify something still can. */
  a,
  button,
  summary,
  label,
  [role="button"],
  [role="tab"],
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  /* Stops the grey flash Android paints over a tapped link; the app's own
     hover and active styles already show what was pressed. */
  a, button, [role="button"] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06); }
}
/* Customer history: saved name-label orders */
.customer-label-history { margin:28px 0; padding:22px; border:1px solid #d9e3e7; border-radius:16px; background:linear-gradient(145deg,#fff 0%,#f6faf9 100%); box-shadow:0 10px 28px rgba(24,52,67,.08); }
.customer-label-history-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.customer-label-history-head h2 { margin:3px 0 4px; color:#203746; font-size:1.45rem; }
.customer-label-history-head p { margin:0; color:#687b85; }
.customer-label-history-count { flex:none; padding:7px 11px; border-radius:999px; background:#e5f3ed; color:#246047; font-size:.8rem; }
.customer-label-history-empty { padding:22px; border:1px dashed #c7d5db; border-radius:12px; color:#6c7e87; text-align:center; }
.customer-label-history-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:15px; }
.customer-label-order-card { min-width:0; padding:16px; border:1px solid #d7e2e6; border-radius:13px; background:#fff; box-shadow:0 5px 16px rgba(27,54,68,.06); }
.customer-label-order-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.customer-label-order-top > div { display:grid; gap:3px; min-width:0; }
.customer-label-order-top strong { color:#213946; }
.customer-label-order-top small { color:#71838c; }
.customer-label-status { flex:none; padding:5px 8px; border-radius:999px; font-size:.68rem; font-weight:800; text-transform:uppercase; }
.customer-label-status.is-picked-up { background:#edf1f3; color:#526873; }
.customer-label-status.is-ready { background:#e2f4e9; color:#236246; }
.customer-label-status.is-progress { background:#fff2d5; color:#805c16; }
.customer-label-preview { display:grid; place-items:center; gap:3px; min-height:86px; margin:14px 0; padding:12px; overflow:hidden; border:4px solid #24292d; border-radius:5px; background:#111820; color:#d5d7d8; text-align:center; line-height:1.15; }
.customer-label-preview strong { max-width:100%; overflow-wrap:anywhere; font-size:1.05rem; }
.customer-label-preview span { max-width:100%; overflow-wrap:anywhere; font-size:.9rem; }
.customer-label-preview[data-color="gold"] { color:#d9b56b; }
.customer-label-preview[data-color="white"] { color:#f5f5f1; }
.customer-label-preview[data-color="red"] { color:#f06a61; }
.customer-label-preview[data-color="blue"] { color:#72a8ed; }
.customer-label-preview[data-color="green"] { color:#6bc68b; }
.customer-label-preview[data-color="pink"] { color:#ef8fc8; }
.customer-label-preview[data-color="purple"] { color:#b894e8; }
.customer-label-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.customer-label-details div { min-width:0; padding:8px 9px; border-radius:8px; background:#f3f7f8; }
.customer-label-details dt { color:#788891; font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.customer-label-details dd { margin:3px 0 0; overflow-wrap:anywhere; color:#2b4654; font-size:.82rem; font-weight:750; }
.customer-label-reorder-form { display:grid; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #dfe7ea; }
.customer-label-reorder-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.customer-label-reorder-head strong { color:#284653; font-size:.85rem; }
.customer-label-reorder-head small { color:#74858d; font-size:.72rem; }
.customer-label-reorder-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:8px; }
.customer-label-reorder-controls label { display:grid; gap:5px; min-width:0; }
.customer-label-reorder-controls label > span { color:#72838b; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.customer-label-reorder-controls select { width:100%; min-height:40px; padding:7px 9px; border:1px solid #c8d5da; border-radius:8px; background:#fff; color:#263f4c; font:inherit; }
.customer-label-reorder-controls select:focus { border-color:#2f725a; outline:3px solid rgba(47,114,90,.14); }
.customer-label-reorder-controls button { min-height:40px; padding:8px 12px; border:0; border-radius:8px; background:#2f725a; color:#fff; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.customer-label-reorder-controls button:hover { background:#255f4a; }
.customer-label-reorder-controls button:disabled { opacity:.65; cursor:wait; }
.customer-label-reorder-unavailable { margin:14px 0 0; padding:9px 10px; border-radius:8px; background:#f4f6f7; color:#728189; font-size:.76rem; }
.dark-mode .customer-label-history { border-color:#344750; background:linear-gradient(145deg,#19252c 0%,#162128 100%); }
.dark-mode .customer-label-history-head h2, .dark-mode .customer-label-order-top strong { color:#eef5f7; }
.dark-mode .customer-label-history-head p, .dark-mode .customer-label-order-top small { color:#a8bac2; }
.dark-mode .customer-label-order-card { border-color:#3a4b54; background:#202d34; }
.dark-mode .customer-label-details div { background:#18242b; }
.dark-mode .customer-label-details dd { color:#e3ecef; }
.dark-mode .customer-label-history-empty { border-color:#43545d; color:#adbdc5; }
.dark-mode .customer-label-reorder-form { border-color:#3b4b53; }
.dark-mode .customer-label-reorder-head strong { color:#e3ecef; }
.dark-mode .customer-label-reorder-head small, .dark-mode .customer-label-reorder-controls label > span { color:#a9bac2; }
.dark-mode .customer-label-reorder-controls select { border-color:#4a5b64; background:#18242b; color:#edf4f7; }
.dark-mode .customer-label-reorder-unavailable { background:#18242b; color:#a9bac2; }
@media (max-width:620px) {
  .customer-label-history { padding:16px; }
  .customer-label-history-head { align-items:flex-start; flex-direction:column; }
  .customer-label-history-grid { grid-template-columns:1fr; }
  .customer-label-reorder-head { align-items:flex-start; flex-direction:column; }
  .customer-label-reorder-controls { grid-template-columns:1fr 1fr; }
  .customer-label-reorder-controls button { grid-column:1 / -1; width:100%; }
}