/* Owner screens redesign, part 1 of 3 — docs/design/owner-canvas.json,
   owner-main.dc.html (read alongside owner-stylists.dc.html and
   owner-salon-details.dc.html for shared patterns, per that dispatch's own
   scope note). This file is the shared shell EVERY page under Pages/
   Dashboard/ now renders inside (see _DashboardLayout.cshtml): the warm
   page background, the editorial type tokens, and the top bar.

   Deliberately scoped to .owner-* classes and a .owner-body class on
   <body> — never a bare `body`, `.btn`, `.form-control`, or other
   selector site.css/dashboard.css/stylists.css already own. Stylists.cshtml
   and SalonDetails.cshtml (parts 2 and 3) and CreateSalon.cshtml keep their
   existing Bootstrap markup completely untouched in this dispatch; they
   inherit the new background/fonts by living inside .owner-body (the shell
   itself), but nothing in this file reaches into or overrides their own
   .btn/.form-control/.panel styling. That's the "shared shell change
   unavoidably affects them, their own markup doesn't" boundary the
   dispatch asked for. */

:root {
  --owner-bg: #FAF6F0;
  --owner-surface: #FFFFFF;
  --owner-text: #211C17;
  --owner-text-muted: #857A6E;
  /* Story 82: the concept's muted text (docs/design/concept-2-october),
     at least 4.5:1 on --owner-bg and --owner-surface. --owner-text-muted
     stays for the owner pages that use it. */
  --owner-text-secondary: #6B6055;
  --owner-text-faint: #A79B8D;
  --owner-border: #E5DDD2;
  --owner-border-input: #DED5C8;
  --owner-accent: #9A5B3D;
  --owner-accent-hover: #7C4730;
  --owner-on-accent: #FCF9F5;
  --owner-avatar-bg: #EDE4D8;
  --owner-avatar-text: #7C6C5C;
  --owner-font-serif: 'Cormorant Garamond', Georgia, serif;
  --owner-font-sans: 'Jost', system-ui, sans-serif;

  /* A phone-first max content width, not the design's literal 390px
     artboard — 375px is CLAUDE.md's baseline, not a hard pixel target, and
     this needs to keep reading well at 768px+ too (real widths this app
     must support; see that file's "The customer has no computer"). Centers
     with side padding below rather than stretching full-width on a tablet. */
  --owner-content-max-width: 30rem;
}

.owner-body {
  margin: 0;
  min-height: 100vh;
  background: var(--owner-bg);
  color: var(--owner-text);
  font-family: var(--owner-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

.owner-body a {
  color: var(--owner-accent);
  text-decoration: none;
}

.owner-body a:hover {
  color: var(--owner-accent-hover);
}

/* ---- Top bar ------------------------------------------------------------ */

.owner-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--owner-border);
}

.owner-wordmark {
  font-family: var(--owner-font-serif);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--owner-text) !important;
}

.owner-wordmark:hover {
  color: var(--owner-text) !important;
}

/* ---- Account menu (Pages/Shared/_OwnerAccountMenu.cshtml, Story 199) ------
   The top bar's right side on every owner and Admin page, replacing the old
   bare Sign out. The same shape as the team member menu (stylist-home.css's
   .stylist-account, Story 75): a native <details> whose summary is a 44px
   round avatar button, and a white card under it, right-aligned, at most
   90vw wide. Its own block here rather than shared with stylist-home.css,
   so the team member menu stays exactly as it was. z-index 40 sits above
   the sticky save bar (.owner-action-bar, 10) and the team member tab
   bar's 30, which the owner tab bar (Story 200) is to mirror. */

.owner-account {
  position: relative;
  flex: none;
}

.owner-account__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--owner-avatar-bg);
  color: var(--owner-avatar-text);
  line-height: 1;
  list-style: none;
  cursor: pointer;
  box-sizing: border-box;
}

.owner-account__button::-webkit-details-marker {
  display: none;
}

.owner-account__button::marker {
  content: "";
}

.owner-account__button:focus {
  outline: none;
}

.owner-account__button:focus-visible {
  outline: 2px solid var(--owner-accent);
  outline-offset: 2px;
}

.owner-account__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.owner-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  min-width: 12rem;
  max-width: min(18rem, 90vw);
  padding: 0.75rem;
  background: var(--owner-surface);
  border: 1px solid var(--owner-border);
  border-radius: 0.625rem;
  box-shadow: 0 6px 20px rgba(33, 28, 23, 0.08);
  box-sizing: border-box;
}

/* A long or markup-bearing name wraps inside the card; it never widens the
   card past its max-width, so it never widens the page. */
.owner-account__name {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-weight: 500;
  color: var(--owner-text);
  overflow-wrap: anywhere;
}

.owner-account__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 -0.25rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--owner-text) !important;
  text-decoration: none;
  box-sizing: border-box;
}

.owner-account__link:hover {
  background: var(--owner-bg);
}

.owner-account__link:focus-visible {
  outline: 2px solid var(--owner-accent);
  outline-offset: -2px;
}

/* The divider: Sign out always sits last, after a rule. */
.owner-account__signout-form {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--owner-border);
}

/* Still a real <button type="submit"> in a plain POST form with no
   data-loading-text: the page navigates away either way, so site.js's
   shared submit handler has no stuck-button state to leave behind. */
.owner-account__signout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding-inline: 1rem;
  background: var(--owner-surface);
  border: 1px solid var(--owner-accent);
  color: var(--owner-accent);
  font-family: var(--owner-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
}

.owner-account__signout:hover {
  border-color: var(--owner-accent-hover);
  color: var(--owner-accent-hover);
}

.owner-account__signout:focus-visible {
  outline: 2px solid var(--owner-accent);
  outline-offset: 2px;
}

@media print {
  .owner-account {
    display: none !important;
  }
}

/* ---- Secondary nav (Pages/Shared/_Layout.cshtml only) ---------------------- */
/* _DashboardLayout.cshtml's own header has no plain nav links, just the
   account menu, so this is new vocabulary for the shell -- added here
   rather than duplicated in a page-specific stylesheet because a plain
   top-level nav link is exactly the kind of "small tracked uppercase
   secondary control" any layout consuming this shell might need. Composes
   existing tokens only (the same small tracked uppercase label the old
   top-bar Sign out used) -- no new custom property invented. */
.owner-nav {
  display: flex;
  gap: 1.25rem;
}

.owner-nav-link {
  font-family: var(--owner-font-sans);
  font-size: 0.65625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--owner-text-muted) !important;
}

.owner-nav-link:hover {
  color: var(--owner-accent) !important;
}

/* ---- Page frame ----------------------------------------------------------- */

.owner-main {
  flex: 1;
  width: 100%;
  max-width: var(--owner-content-max-width);
  margin-inline: auto;
  padding: 1.875rem 1.5rem 2.5rem;
  box-sizing: border-box;
}

.owner-footer {
  padding: 0 1.5rem 1.875rem;
  max-width: var(--owner-content-max-width);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.71875rem;
  font-weight: 300;
  color: var(--owner-text-faint);
  text-align: center;
}

/* ---- Shared type tokens ---------------------------------------------------- */
/* Used by owner-main.css (part 1's My page) and owner-stylists.css (part
   2's Stylists) alike, rather than each redefining its own copy. */

.owner-h1 {
  margin: 0;
  font-family: var(--owner-font-serif);
  font-size: 2.375rem;
  font-weight: 400;
  line-height: 1.05;
  /* Story 39: a long unbroken stylist name ("{name}'s hours") must wrap
     instead of widening the page past a phone viewport. `anywhere` (not
     `break-word`) also lowers min-content width, so a flex or
     shrink-to-fit parent cannot grow past the viewport either. */
  overflow-wrap: anywhere;
}

.owner-label {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--owner-text-muted);
}

/* "< My page" — identical in docs/design/owner-stylists.dc.html and
   owner-salon-details.dc.html (verbatim same markup/values in both source
   files), so it belongs here rather than duplicated into
   owner-stylists.css now and owner-salon-details.css again in part 3. The
   one genuine shared-file change this dispatch makes to owner-shell.css —
   see the commit message. */
.owner-back-link {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--owner-text-muted) !important;
}

.owner-back-link:hover {
  color: var(--owner-accent) !important;
}

.owner-back-link svg {
  flex: none;
}

/* ---- Owner section menu (Pages/Shared/_OwnerNav.cshtml, Story 200) --------
   The menu itself is side-menu.css (Story 186), unedited; its colour tokens
   are this file's own. Only what the owner screens add is here:
   - a back link on a screen with the menu is at least 44px tall to tap
     (as the team app's back link to Today, Story 74);
   - Team's and Bookings' back link (drawn only with online booking off) is
     not shown from 900px, where the left column holds the same link (as
     Story 191 does for the team app);
   - the menu never prints (the QR code card prints alone). */
.owner-main:has(> [data-side-menu]) > .owner-back-link {
  min-height: 44px;
}

@media (min-width: 900px) {
  .owner-main > a.owner-tab-back-link {
    display: none;
  }
}

@media print {
  .owner-main > [data-side-menu] {
    display: none !important;
  }

  .owner-body {
    padding-bottom: 0 !important;
  }
}

/* The muted one-line explainer under an <h1> — "Tap anyone to edit..."
   (Stylists), "Everything here is optional..." (Salon details, part 3).
   Same font-size/weight/color in both source files (Salon details adds
   its own line-height for a two-line sentence; this only sets what's
   actually identical between them). */
.owner-subtext {
  font-size: 0.78125rem;
  font-weight: 300;
  color: var(--owner-text-muted);
}

/* ---- Buttons --------------------------------------------------------------- */
/* Deliberately NOT named .btn-* — these must never collide with or be
   overridden by Bootstrap's own .btn classes, which Stylists/SalonDetails/
   CreateSalon still use unchanged. */

.owner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding-inline: 1rem;
  border: none;
  font-family: var(--owner-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
}

/* Same footgun, same fix, as owner-main.css's .owner-main-stack[hidden]
   (see that comment for the full explanation) — pre-emptive here since
   none of this dispatch's own buttons are currently toggled via `hidden`,
   but parts 2/3 will very likely reuse .owner-btn on one that is. */
.owner-btn[hidden] {
  display: none;
}

.owner-btn--primary {
  background: var(--owner-accent);
  color: var(--owner-on-accent) !important;
}

.owner-btn--primary:hover {
  background: var(--owner-accent-hover);
  color: var(--owner-on-accent) !important;
}

.owner-btn--secondary {
  background: var(--owner-surface);
  border: 1px solid var(--owner-border-input);
  color: var(--owner-text) !important;
}

.owner-btn--secondary:hover {
  border-color: var(--owner-accent);
  color: var(--owner-accent) !important;
}

.owner-btn--block {
  width: 100%;
}

.owner-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- Card, pinned action bar, large button (Story 82) ---------------------
   From docs/design/concept-2-october (Stylist2-Services, Stylist3-Hours):
   a white card, a footer pinned to the bottom of the screen with a top
   border, and the board's 52px full-width primary button in sentence case
   (use with .owner-btn--primary .owner-btn--block inside the bar).
   Consumed by Stories 83 and 84 (Services, Hours editors), 85 (Join) and
   86 and 87 (owner Team members); nothing uses .owner-action-bar yet.
   Each has its own [hidden] rule, so a later display rule on any of them
   cannot win over the hidden attribute. */

.owner-card {
  background: var(--owner-surface);
  border: 1px solid var(--owner-border);
  border-radius: 0.875rem;
  padding: 0.75rem 0.875rem;
}

.owner-card[hidden] {
  display: none;
}

/* The negative side margin matches .owner-main's 1.5rem side padding, so
   the bar spans the content column. */
.owner-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--owner-bg);
  border-top: 1px solid var(--owner-border);
  margin: 1.5rem -1.5rem 0;
  padding: 0.875rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));
}

.owner-action-bar[hidden] {
  display: none;
}

/* Story 203: a bar holding two large buttons, Cancel then the primary
   (Salon details' Cancel and Save changes). Side by side, the primary wider,
   so the bar stays one row tall (the height side-menu.css's scroll padding
   allows for). Too narrow for two (under 20rem, which a 320px phone at 200
   percent zoom is), they stack, each still the full 3.25rem tall; the page
   that uses this widens its own scroll padding to match. Labels may wrap,
   never overflow. */
.owner-action-bar--pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0.5rem;
}

.owner-action-bar--pair[hidden] {
  display: none;
}

.owner-action-bar--pair > .owner-btn {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 3.25rem;
  padding-block: 0.375rem;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 19.99rem) {
  .owner-action-bar--pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.owner-btn--large {
  height: 3.25rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

.owner-btn--large[hidden] {
  display: none;
}

/* ---- Loading / retry (cold-start pattern, unchanged behavior) ------------- */

.owner-skeleton {
  height: 4.5rem;
  background: var(--owner-surface);
  border: 1px solid var(--owner-border);
  position: relative;
  overflow: hidden;
}

.owner-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(33, 28, 23, 0.05), transparent);
  animation: owner-shimmer 1.4s infinite;
}

@keyframes owner-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.owner-alert {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  background: #FBEFE7;
  border: 1px solid var(--owner-border-input);
  color: var(--owner-text);
  font-size: 0.875rem;
  /* Story 39: notices quote stylist names ("{name} moved to No longer
     here."); an unbroken name must wrap, not widen the page. */
  overflow-wrap: anywhere;
}