/* All Nice Data brand theme - generated by Juno Vesta */

/* Layout and one-off utilities come from the locally compiled Tailwind file.
   This file owns two things Tailwind must not decide for us:
     1. the component recipes (.btn, .form-control, .alert, .badge, .table,
        .pagination, .card ...) - same class NAMES Bootstrap used, so the
        hardcoded widget attrs in orders/forms.py and
        NetworkStatus.alert_class() keep working untouched;
     2. the accessibility floor - focus rings, minimum contrast, hit sizes.
   Everything here works with the CDN blocked; keep it that way. */

:root {
  --brand-primary: #ffcb05;
  --brand-dark: #111111;
  --brand-ink: #14140f;
  --brand-paper: #f6f5f1;
  /* Chosen font pairing. Stacks are quote-free on purpose - see
     builder/font_pairs.py. */
  --font-heading: Space Grotesk, system-ui, sans-serif;
  --font-body: IBM Plex Sans, system-ui, sans-serif;
  /* Contrast-checked greys. Do not lighten these: --ink-muted is the
     lightest grey that still clears 4.5:1 on --brand-paper. */
  --ink-muted: #595959;
  --line: #d8d6cf;
  --field-border: #767676;
}

body {
  background: var(--brand-paper);
  font-family: var(--font-body);
  color: var(--brand-ink);
  margin: 0;
}

h1, h2, h3, h4, .sidebar .brand, .hero h1 { font-family: var(--font-heading); }

/* Tailwind preflight strips heading sizes and list markers. Headings stay
   semantic elements, so restore a sane scale here (this is also what renders
   if the CDN is blocked). The `body ` prefix is load-bearing: Play CDN
   appends its stylesheet after this file, so an element selector alone would
   lose to preflight. */
body h1, .h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
body h2, .h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
body h3, .h3 { font-size: 1.25rem; font-weight: 700; }
body h4, .h4 { font-size: 1.15rem; font-weight: 700; }
body h5, .h5 { font-size: 1rem; font-weight: 700; }
body h6, .h6 { font-size: .85rem; font-weight: 700; }
body p { margin: 0 0 1rem; }
main ul:not(.pagination):not(.nav):not(.nav-pills):not(.list-none) {
  list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem;
}
.list-none { list-style: none; }

/* ---------- focus (accessibility floor) ----------
   Two layers so the ring holds >=3:1 on ANY brand colour: a dark outline
   plus a white halo. Applied to everything focusable, including <summary>
   and anything given tabindex (scrollable table regions). Nothing in this
   file may set outline:none. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible, .btn-close:focus-visible,
.page-link:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .form-check-input:focus-visible,
.nav-item:focus-visible, .nav-link:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff;
}
/* The sidebar is dark: swap the halo so the ring stays visible there. */
.sidebar a:focus-visible, .sidebar button:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px #121212;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #121212; color: #ffffff; padding: .7rem 1.1rem;
  border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--brand-dark); color: #fff;
  display: flex; flex-direction: column; padding: 1.1rem .9rem; gap: .15rem;
}
.sidebar-header { display: block; }
.sidebar .brand {
  color: var(--brand-primary); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .5px; text-decoration: none; margin-bottom: 1rem; display: block;
}
.mobile-nav-toggle { display: none; }
.sidebar a.nav-item {
  color: #fff; text-decoration: none; padding: .55rem .8rem; border-radius: 9px;
  font-size: .92rem; display: block;
}
.sidebar a.nav-item:hover { background: rgba(255,255,255,.14); }
.sidebar a.nav-item[aria-current="page"],
.sidebar a.nav-item.active {
  background: var(--brand-primary); color: var(--brand-ink); font-weight: 700;
}
.sidebar .nav-section {
  text-transform: uppercase; letter-spacing: 1.2px; font-size: .7rem;
  color: rgba(255,255,255,.82); margin: .9rem .8rem .25rem;
}
.main-panel { flex-grow: 1; padding: 1.4rem 1.6rem; max-width: 100%; overflow-x: hidden; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; display: block; padding: .75rem 1rem; }
  .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .sidebar .brand { margin: 0; }
  .mobile-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--brand-primary);
    border-radius: 9px; background: var(--brand-primary); color: var(--brand-ink);
    font: inherit; font-weight: 700; cursor: pointer;
  }
  .sidebar-nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem .5rem; margin-top: .75rem;
  }
  .sidebar .nav-section { display: block; grid-column: 1 / -1; margin: .75rem .5rem .15rem; }
  .sidebar a.nav-item { padding: .55rem .65rem; }
  .sidebar-account { padding-top: .75rem; }
  .sidebar.mobile-nav-ready:not(.mobile-nav-open) .sidebar-nav,
  .sidebar.mobile-nav-ready:not(.mobile-nav-open) .sidebar-account { display: none; }
  .main-panel { padding: 1.1rem 1rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 10px;
  border: 1px solid transparent; background: #ffffff; color: var(--brand-ink);
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.3;
  text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(.95); }
.btn:disabled, .btn.disabled { opacity: .6; cursor: not-allowed; filter: none; }
/* Small buttons keep a 32px+ box; the hit area still clears 24x24 CSS px. */
.btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; }
.btn-lg { min-height: 52px; padding: .75rem 1.5rem; font-size: 1.1rem; }

.btn-brand { background: var(--brand-primary); color: var(--brand-ink); font-weight: 700; }
.btn-dark-brand { background: var(--brand-dark); color: #ffffff; }
.btn-success { background: #146c43; color: #ffffff; }
.btn-outline-dark { background: transparent; border-color: #121212; color: #121212; }
.btn-outline-dark:hover { background: #121212; color: #ffffff; filter: none; }
.btn-outline-danger { background: transparent; border-color: #b02a37; color: #b02a37; }
.btn-outline-danger:hover { background: #b02a37; color: #ffffff; filter: none; }
.btn-outline-info { background: transparent; border-color: #0a58ca; color: #0a58ca; }
.btn-outline-info:hover { background: #0a58ca; color: #ffffff; filter: none; }
.btn-outline-light { background: transparent; border-color: #ffffff; color: #ffffff; }
.btn-outline-light:hover { background: #ffffff; color: #121212; filter: none; }
.btn-link {
  background: none; border: none; color: #0a58ca; text-decoration: underline;
  min-height: 0; padding: 0;
}

/* ---------- forms ---------- */
.form-label { display: block; margin-bottom: .3rem; font-weight: 600; }
.form-control, .form-select {
  display: block; width: 100%; min-height: 44px;
  padding: .5rem .75rem; border: 1px solid var(--field-border); border-radius: 10px;
  background: #ffffff; color: var(--brand-ink);
  /* 16px minimum stops iOS zooming the page on focus. */
  font: inherit; font-size: 1rem; line-height: 1.4;
}
.form-select { padding-right: 2rem; }
.form-control::placeholder { color: var(--ink-muted); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: #eeece6; }
.form-control-sm, .form-select-sm { min-height: 38px; padding: .35rem .6rem; }
.form-text { display: block; margin-top: .3rem; font-size: .82rem; color: var(--ink-muted); }
.form-check { position: relative; padding-left: 1.9rem; margin-bottom: .5rem; }
/* Only absolutely positioned inside a .form-check row - elsewhere (e.g. the
   storefront package cards) the radio sits inline in its label. */
.form-check-input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand-dark); }
.form-check > .form-check-input { position: absolute; left: 0; top: .15rem; }
.form-check-label { font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend.form-label { float: none; width: auto; padding: 0; }
.input-group { display: flex; }
.input-group > .form-control { border-radius: 10px 0 0 10px; }
.input-group > .btn { border-radius: 0 10px 10px 0; }
textarea.form-control { min-height: 6rem; }

/* ---------- cards, tables ---------- */
.card {
  background: #ffffff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: .6rem .55rem; border-bottom: 1px solid var(--line); text-align: left;
}
.table th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .6px;
  /* #777 only reached 4.48:1 on white - darkened to clear 4.5:1. */
  color: #6a6a6a;
}
.table-sm th, .table-sm td { padding: .4rem .45rem; }
.align-middle th, .align-middle td { vertical-align: middle; }
.table-responsive { overflow-x: auto; }
/* The wrapper is keyboard-scrollable (tabindex="0" role="region" in the
   templates); it must therefore show a focus ring like any other control. */
.table-responsive:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: .3em .6em; border-radius: 8px;
  font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
/* Contrast-checked pairs. Never lighten success/danger. */
.text-bg-success { background: #146c43; color: #ffffff; }
.text-bg-danger  { background: #b02a37; color: #ffffff; }
.text-bg-warning { background: #ffc107; color: #14140f; }
.text-bg-info    { background: #0dcaf0; color: #14140f; }
.text-bg-secondary { background: #565e64; color: #ffffff; }
/* Sidebar wallet chip: fixed dark-on-white pair plus a border so the chip
   itself stays visible whether the client's secondary colour is dark or light. */
.text-bg-light { background: #ffffff; color: #14140f; border: 1px solid rgba(0,0,0,.4); }
.badge-network { font-size: .75rem; padding: .35em .7em; border-radius: 8px; }

/* ---------- alerts ---------- */
.alert {
  position: relative; padding: .85rem 3rem .85rem 1rem; margin-bottom: 1rem;
  border: 1px solid transparent; border-left-width: 5px; border-radius: 10px;
}
.alert-success { background: #e8f3ec; border-color: #146c43; color: #0d4429; }
.alert-danger  { background: #fbeaec; border-color: #b02a37; color: #6f1620; }
.alert-warning { background: #fdf4e0; border-color: #b3860b; color: #5c4708; }
.alert-info    { background: #e4f5fa; border-color: #087990; color: #05505f; }
.alert-secondary { background: #eeeeec; border-color: #565e64; color: #2f3437; }
.btn-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.btn-close:hover { background: rgba(0,0,0,.08); }

/* ---------- pagination ---------- */
.pagination { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: .3rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: #ffffff; color: var(--brand-ink); text-decoration: none;
}
.page-item.disabled .page-link { color: var(--ink-muted); background: #f1efe9; }
.page-link[aria-current="page"] {
  background: var(--brand-dark); color: #ffffff; border-color: var(--brand-dark);
}
/* Still >=34px so the target stays comfortably over 24x24 CSS px. */
.pagination-sm .page-link { min-width: 34px; min-height: 34px; font-size: .85rem; }

/* ---------- text utilities kept as recipes (contrast-controlled) ---------- */
/* Bootstrap's #6c757d only reached ~4.3:1 on --brand-paper. */
.text-muted { color: var(--ink-muted); }
.text-danger { color: #b02a37; }
.text-success { color: #146c43; }
.text-white { color: #ffffff; }
.text-white-50 { color: rgba(255,255,255,.85); }
.text-light { color: #f4f4f2; }
.text-reset { color: inherit; }
.bg-dark { background: #121212; }
.border-warning { border-color: #b3860b; }
.small, .form-text { font-size: .85rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar + pill nav (public home / storefront pages) ---------- */
.navbar { padding: .8rem 0; }
.navbar > .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap;
}
.navbar-brand { font-weight: 800; letter-spacing: .5px; text-decoration: none; }
.nav, .nav-pills { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.nav-link {
  display: inline-block; padding: .45rem .9rem; border-radius: 9px;
  border: 1px solid var(--line); background: #ffffff;
  color: var(--brand-ink); text-decoration: none;
}
/* The current pill also carries an inline brand background. */
.nav-link[aria-current="page"] { color: #ffffff; border-color: transparent; }

pre { overflow-x: auto; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.spinner-border {
  display: inline-block; width: 2rem; height: 2rem;
  border: .25em solid currentColor; border-right-color: transparent;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner-border { animation: jv-spin .75s linear infinite; }
}
@keyframes jv-spin { to { transform: rotate(360deg); } }

/* ---------- page furniture ---------- */
.stat-card { border-left: 5px solid var(--brand-primary); }
.stat-card .value { font-size: 1.6rem; font-weight: 800; }

.package-card {
  border: 2px solid var(--line); border-radius: 14px; background: #fff;
}
.package-card:hover { border-color: var(--brand-primary); }
.package-card .size { font-size: 1.5rem; font-weight: 800; }
.package-card .price { color: var(--brand-dark); font-weight: 700; }

.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand-primary) 28%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 40%),
    var(--brand-dark);
  padding: 1.5rem;
}
.auth-card { width: 100%; max-width: 430px; border-radius: 18px; }

.hero {
  background: var(--brand-dark); color: #fff; border-radius: 20px;
  padding: 3.2rem 2.4rem; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px;
  border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
.hero h1 { font-weight: 800; }
.hero .accent { color: var(--brand-primary); }

/* ---------- bulk-order panel (Orders Desk) ---------- */
.bulk-panel { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; }
.bulk-panel > summary {
  padding: .6rem .8rem; cursor: pointer; font-weight: 600;
  /* No interactive children inside <summary>; native disclosure only. */
}
.bulk-panel > summary:hover { background: #f1efe9; }
.bulk-panel .bulk-body { padding: 0 .8rem .7rem; }

/* ---------- motion ---------- */
/* Decorative movement only runs when the visitor has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .package-card, .sidebar a.nav-item {
    transition: background-color .15s, border-color .15s, filter .15s, transform .15s;
  }
  .package-card:hover { transform: translateY(-2px); }
}