/* Muse staff dashboard — brand palette copied 1:1 from the Android app's
   ui/theme/Color.kt (sage & sand, OKLCH-derived, WCAG AA verified there) so both
   surfaces read as the same brand. Do not eyeball new colors here — pull them from
   that file if a new one is ever needed. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --color-sage: #607d65;
  --color-sage-dark: #33503a;
  --color-sage-light: #e2e8e3;
  --color-sage-bright: #8caf90;
  --color-sage-bright-dark: #618568;
  --color-sand: #f2f7f2;
  --color-sand-deep: #e5eae5;
  --color-ink: #152318;
  --color-headline-ink: #2b1e1c;
  --color-body-warm-gray: #60514f;
  --color-divider: #dbdfdb;
  --color-error: #b3261e;
  --color-on-primary: #ffffff;
  --color-surface: #ffffff;

  --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

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

  --shadow-sm: 0 1px 2px rgba(21, 35, 24, 0.06), 0 1px 3px rgba(21, 35, 24, 0.08);
  --shadow-md: 0 4px 12px rgba(21, 35, 24, 0.10);

  --focus-ring: 0 0 0 3px rgba(96, 125, 101, 0.45);

  --sidebar-width: 248px;
  --topbar-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-sand);
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-family);
  color: var(--color-headline-ink);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 1em; }

a {
  color: var(--color-sage-dark);
}

/* Every interactive element gets a visible, high-contrast focus ring — never rely on
   color alone, and never remove the outline without replacing it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Brand lockup (icon + wordmark) ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-headline-ink);
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand__wordmark {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-headline-ink);
}

/* ---------- App shell: sidebar + topbar + main ---------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

.topbar__salon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__salon-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.topbar__salon-name {
  font-weight: 600;
  color: var(--color-body-warm-gray);
}

.sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
  color: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;

  /* Without this, the sidebar's grid cell stretches to match whatever height the
     *page's* content needs (a long form like the studio profile easily runs to several
     screen-heights), and — since the sidebar has no independent scroll of its own —
     its own contents, including Sign out at the bottom via margin-top:auto, get pushed
     down to the bottom of that full height instead of staying on-screen. Pinning it to
     the viewport and letting it scroll internally if its own content (nav items) ever
     exceeds the viewport keeps nav + Sign out visible regardless of how long the
     current page is. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand,
.sidebar .brand__wordmark {
  color: #fff;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
}

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

.nav-list a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-sage-dark);
}

.sidebar-footer {
  margin-top: auto;
}

.sidebar-footer form button {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.sidebar-footer form button:hover {
  background: rgba(255, 255, 255, 0.2);
}

main {
  grid-area: main;
  padding: 32px;
  max-width: 980px;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

/* Inline SVG action icons inside a .btn — sized to sit on the button's own text
   baseline and colored via currentColor so they always match the button's text color
   (white on .btn-primary) with no separate color rule needed. */
.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--color-sage);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  background: var(--color-sage-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-divider);
}

.btn-secondary:hover {
  background: var(--color-sand-deep);
}

.btn-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-danger:hover {
  background: rgba(179, 38, 30, 0.08);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* A native <input type="date"> styled to match the .btn-secondary Previous/Next Day
   buttons it sits between — browsers apply their own chrome to date inputs by default
   (extra vertical padding, a different font), which .btn's own rules don't fully
   override on their own. */
.date-input {
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
}

.date-input::-webkit-date-and-time-value {
  text-align: left;
}

/* ---------- Cards & surfaces ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card + .card,
.card + form > .card:first-child {
  margin-top: 20px;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.section-card {
  display: block;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  text-decoration: none;
  color: var(--color-ink);
}

.section-card:hover {
  border-color: var(--color-sage);
  box-shadow: var(--shadow-md);
}

.section-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.section-card__title {
  font-weight: 700;
  margin-bottom: 4px;
}

.section-card__desc {
  color: var(--color-body-warm-gray);
  font-size: 0.88rem;
}

/* ---------- Forms ---------- */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--color-headline-ink);
}

.field .hint {
  display: block;
  font-size: 0.82rem;
  color: var(--color-body-warm-gray);
  margin-top: 4px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="time"],
.field input[type="url"],
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-family);
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}

.password-field {
  position: relative;
}

.field .password-field input {
  padding-right: 48px;
}

/* Edge draws its own reveal eye on password inputs; ours replaces it. */
.password-field input::-ms-reveal {
  display: none;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-body-warm-gray);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--color-ink);
}

.password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.password-toggle__hide,
.password-toggle[aria-pressed="true"] .password-toggle__show {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle__hide {
  display: block;
}

.field input:disabled {
  background: var(--color-sand-deep);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--color-error);
}

.field-error {
  color: var(--color-error);
  font-size: 0.82rem;
  margin-top: 4px;
}

fieldset {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0 0 20px;
}

legend {
  font-weight: 700;
  padding: 0 8px;
}

.color-swatch-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-preview {
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.image-preview--current-logo {
  width: 64px;
  height: 64px;
}

/* Shown the instant a file is chosen (before Save is clicked) — a thumbnail plus explicit
   confirmation text, so it's unambiguous the system saw the file and that Save is the
   next required step, not that the upload already happened. */
.file-selection-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--color-sage-light);
  border-radius: var(--radius-sm);
  color: var(--color-sage-dark);
  font-size: 0.86rem;
  font-weight: 600;
}

.file-selection-status .image-preview {
  width: 40px;
  height: 40px;
}

.color-swatch-input input[type="color"] {
  width: 44px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* ---------- Material Design 3 outlined text field (date pickers) ----------
   Native <input type="date"> always shows content (yyyy/mm/dd segments even when
   empty), so there's no meaningful "resting" placeholder state to float a label out
   of — per M3's own guidance for fields that always contain a value, the label is
   rendered permanently in its floating/docked position, cutting through the outline,
   rather than animating between resting and floating. Deliberately uses a 4px corner
   radius here (M3's own outlined-field spec) rather than the app's --radius-sm/md
   tokens, which are tuned for buttons/cards, not this component. */

.material-field {
  position: relative;
}

.material-field__input {
  width: 100%;
  height: 56px;
  padding: 20px 14px 6px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}

.material-field__input::-webkit-date-and-time-value {
  text-align: left;
}

.material-field__input:hover {
  border-color: var(--color-body-warm-gray);
}

.material-field__input:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: inset 0 0 0 1px var(--color-sage);
}

.material-field__input:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-sage);
}

.material-field__label {
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-50%);
  background: var(--color-surface);
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-body-warm-gray);
  pointer-events: none;
}

.material-field__input:focus ~ .material-field__label {
  color: var(--color-sage-dark);
}

.material-field.has-error .material-field__input {
  border-color: var(--color-error);
}

.material-field.has-error .material-field__label {
  color: var(--color-error);
}

/* ---------- Modal (native <dialog>) ---------- */

.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 520px;
  width: 90vw;
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
  font-family: var(--font-family);

  /* The browser's own dialog centering (default UA position:fixed + inset:0 +
     margin:auto) centers over the WHOLE viewport, including the fixed sidebar — which
     visibly skews the dialog left of where it reads as centered, since the sidebar is
     chrome, not page content. Center over the content column to its right instead.
     Only at the desktop breakpoint where the sidebar is actually shown (see the
     .sidebar breakpoint below) — below it, the sidebar is hidden and the content
     column IS the whole viewport, so true-center is already correct there. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

@media (min-width: 861px) {
  .modal {
    left: calc(50% + var(--sidebar-width) / 2);
  }
}

.modal::backdrop {
  background: rgba(21, 35, 24, 0.5);
}

.modal__body {
  max-height: 50vh;
  overflow-y: auto;
  margin: 16px 0;
  /* Setting overflow-y without overflow-x makes the browser compute overflow-x as auto
     too (per the CSS Overflow spec's "one non-visible axis forces the other" rule), which
     then clips the focus ring's box-shadow (--focus-ring, 3px spread) on any full-width
     input/select right at this element's own left/right edge — the field's border looked
     "cut off" on focus because of this, not because of .modal's own padding. Padding here
     (with matching negative margin, so the visible content still lines up exactly where
     it did before) gives the ring room to render before hitting that clip boundary. */
  padding: 0 4px;
  margin-left: -4px;
  margin-right: -4px;
}

.service-option {
  padding: 6px 0;
  align-items: flex-start;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

/* A quieter, more compact status pill — used for row-level state (Active/Inactive,
   Expired) where the full-size .chip reads as too heavy next to the rest of a list
   row. Defaults to a neutral gray tint; add .chip--positive for an affirmative state
   (e.g. "Active") instead of the negative/neutral default (e.g. "Inactive", "Expired"). */
.chip--sm {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-sand-deep);
  color: var(--color-body-warm-gray);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chip--sm.chip--positive {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

/* ---------- Booking details ---------- */

.detail-list {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 16px;
  margin: 0;
}

.detail-list dt {
  font-weight: 700;
  color: var(--color-body-warm-gray);
}

.detail-list dd {
  margin: 0;
}

/* ---------- Alerts / flash messages ---------- */

.alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.92rem;
}

.alert-success {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.alert-error {
  background: #fbeceb;
  color: var(--color-error);
}

/* ---------- Login page ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 32px;
}

.auth-card .brand {
  justify-content: center;
  margin-bottom: 22px;
}

.auth-card .brand__wordmark {
  font-size: 1.2rem;
}

.auth-card h1 {
  text-align: center;
  font-size: 1.2rem;
}

.auth-subtitle {
  text-align: center;
  color: var(--color-body-warm-gray);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.auth-card .btn {
  width: 100%;
  margin-top: 6px;
}

/* ---------- Utility ---------- */

.text-muted {
  color: var(--color-body-warm-gray);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Space between the last form section and the save/cancel row — without this the
   buttons read as if they belong to the card right above them. */
.form-actions {
  margin-top: 28px;
}

/* ---------- Schedule: slot rows ---------- */

.slot-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}

.slot-row--booked {
  background: var(--color-sand);
}

.slot-row__time {
  flex-shrink: 0;
  width: 84px;
  font-weight: 700;
}

.slot-row__details {
  flex: 1;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* Data tables (Customers list). Wrapped in .table-scroll so a wide table scrolls
   inside its card on a phone instead of pushing the whole page sideways. */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}

.data-table th {
  color: var(--color-body-warm-gray);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
}

.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.stat {
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}

.stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  color: var(--color-body-warm-gray);
  font-size: 0.85rem;
}

/* ---------- Packages, add-ons and the "not activated" modal ---------- */

[hidden] {
  display: none !important;
}

.small {
  font-size: 0.85rem;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.chip--warn {
  background: #fbeceb;
  color: var(--color-error);
}

.stat__value--warn {
  color: var(--color-error);
}

.lock-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-list a .lock-icon {
  margin-left: auto;
}

.btn .lock-icon {
  margin-right: 6px;
}

.nav-list__addons {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.section-card--locked {
  position: relative;
  opacity: 0.72;
}

.section-card--locked::after {
  content: "Add-on";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sage-dark);
  background: var(--color-sage-light);
  padding: 3px 8px;
  border-radius: 999px;
}

.upsell-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.addon-modal {
  text-align: left;
}

.addon-modal__icon,
.locked-card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
  margin-bottom: 10px;
}

.addon-modal__icon .lock-icon,
.locked-card__icon .lock-icon {
  width: 20px;
  height: 20px;
  opacity: 1;
}

.addon-modal h2 {
  margin-top: 0;
}

.addon-modal__summary {
  background: var(--color-sand);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.locked-card {
  max-width: 560px;
}

.included-card .tick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.tick-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
}

.tick-list li {
  position: relative;
  padding-left: 22px;
  margin: 4px 0;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--color-sage);
  border-bottom: 2px solid var(--color-sage);
  transform: rotate(-45deg);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.addon-grid .card + .card,
.checkout-grid .card + .card,
.stock-actions .card + .card,
.customer-grid .card + .card {
  margin-top: 0;
}

.addon-card {
  display: flex;
  flex-direction: column;
}

.addon-card .btn-block,
.addon-card__foot {
  margin-top: auto;
}

.addon-card--active {
  border: 1px solid var(--color-sage-bright);
}

.addon-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.addon-card__head h2 {
  margin: 0;
}

.addon-card__price {
  margin: 6px 0 8px;
  font-size: 1.1rem;
}

.checkout-grid,
.customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  margin: 16px 0;
}

.summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0 0 18px;
}

.summary-list dt {
  color: var(--color-body-warm-gray);
}

.summary-list dd {
  margin: 0;
  text-align: right;
}

.test-mode-banner {
  background: #fff6dd;
  color: #6b4e00;
  border: 1px solid #f0d58a;
}

/* ---------- Stock ---------- */

.stock-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  overflow: hidden;
}

.segmented a {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.segmented a[aria-current="true"] {
  background: var(--color-sage-dark);
  color: var(--color-on-primary);
}

.data-table td.delta-down {
  color: var(--color-error);
}

.data-table td.delta-up {
  color: var(--color-sage-dark);
}

/* ---------- Client history ---------- */

.visit-trail {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visit {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
}

.visit:last-child {
  border-bottom: none;
}

.visit__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.visit__details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--color-sand);
  border-radius: var(--radius-sm);
}

.visit__details dt {
  font-weight: 600;
}

.visit__details dd {
  margin: 0;
}

.visit__notes {
  margin: 8px 0 0;
  white-space: pre-line;
}

.visit__edit {
  margin-top: 10px;
}

.visit__edit summary {
  cursor: pointer;
  color: var(--color-sage-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

.visit__edit form {
  margin-top: 12px;
  max-width: 620px;
}

.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.6fr) auto;
  gap: 8px;
}

.detail-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  font: inherit;
}

@media (max-width: 640px) {
  .visit {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .detail-row {
    grid-template-columns: 1fr auto;
  }

  .detail-row input:first-child {
    grid-column: 1 / -1;
  }
}

.addon-card__head .chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Billing and launching a new studio ---------- */

.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}

.billing-grid .card + .card {
  margin-top: 0;
}

.billing-next {
  font-size: 1.15rem;
  margin: 0 0 14px;
}

.section-title {
  margin: 28px 0 0;
  font-size: 1.15rem;
}

.launch-card {
  border: 1px solid var(--color-sage-bright);
  margin-bottom: 20px;
}

.launch-card__eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.launch-card h2 {
  margin-top: 0;
}

.launch-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.launch-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.launch-list__tick {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-divider);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.launch-list li.is-done .launch-list__tick {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-on-primary);
}

.launch-list li.is-done {
  color: var(--color-body-warm-gray);
}

/* ---------- Changing package and cancelling ---------- */

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.package-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.package-opt input {
  position: absolute;
  opacity: 0;
}

.package-opt:has(input:checked) {
  border-color: var(--color-sage-dark);
  box-shadow: 0 0 0 1px var(--color-sage-dark);
  background: var(--color-sand);
}

.package-opt:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.package-opt__name {
  font-weight: 700;
}

.package-opt__price {
  font-weight: 700;
  font-size: 1.1rem;
}

.package-extra {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.package-extra legend {
  font-weight: 700;
  margin-bottom: 8px;
  width: 100%;
}

.review-card {
  border: 1px solid var(--color-sage-bright);
}

.loss-box {
  background: #fff6f5;
  border: 1px solid #f1c9c5;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 16px 0;
}

.loss-box h2,
.loss-box h3 {
  margin-top: 0;
  color: var(--color-error);
}

.loss-box ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loss-box--strong {
  border-width: 2px;
}

.check-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 600;
}

.check-line input {
  margin-top: 4px;
  flex-shrink: 0;
}

.cancel-when__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-body-warm-gray);
}

.cancel-when__date {
  margin: 4px 0 8px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-error);
}

.cancel-link {
  margin-top: 24px;
  font-size: 0.9rem;
}

.cancel-link a {
  color: var(--color-body-warm-gray);
}