/* ───────────────────────────────────────────────────────────────────────────
 * BeautyNetwork · monogram-luxe · MOBILE-FIRST iOS DIALECT
 *
 * Source of truth: salonMANAGER/design.md
 * Design canvas: 390 × 844 (iPhone 14). Min support: 360 × 640.
 * Desktop ≥ 768: SAME mobile layout centered in a faux device frame.
 * Desktop ≥ 1024: optional iPhone bezel chrome (decorative only).
 *
 * iOS conventions honored: safe-area-inset, 44pt top bar, 49pt tab bar,
 * 5-tab destination max, line-style icons, segmented control, bottom
 * sheets, full-bleed list rows w/ 0.5px hairlines, 56pt min row height,
 * underlined floating-label inputs, bottom-anchored 50pt primary CTA,
 * push transitions (translateX), scale(0.97) :active feedback.
 *
 * Colour & type tokens unchanged. Single-accent gold rule INTACT.
 * Sharp corners preserved (exceptions: segmented-control 2px, bottom
 * sheet top 16px iOS standard, faux device frame on desktop only).
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  --c-primary: #2D1C0F;
  --c-secondary: #8C7563;
  --c-tertiary: #B99256;
  --c-tertiary-deep: #9C7841;
  --c-neutral: #F1E9DA;
  --c-surface: #FBF4E5;
  --c-on-primary: #FBF4E5;
  --c-tertiary-tint: rgba(185, 146, 86, 0.10);
  --c-tertiary-edge: rgba(185, 146, 86, 0.30);
  --c-secondary-tint: rgba(140, 117, 99, 0.18);
  --c-secondary-tint-strong: rgba(140, 117, 99, 0.32);
  --c-primary-tint: rgba(45, 28, 15, 0.05);
  --c-hairline: rgba(140, 117, 99, 0.30);

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 2px;
  --r-sheet: 16px;

  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;

  --vp-w: 390px;          /* iPhone 14 logical width */
  --vp-frame: 430px;      /* desktop centered max-width */
  --topbar-h: 44px;
  --tabbar-h: 49px;

  --sai-top: env(safe-area-inset-top, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
}

[data-theme="dark"] {
  --c-primary: #FBF4E5;
  --c-secondary: #A89685;
  --c-tertiary: #B99256;
  --c-tertiary-deep: #D4AC73;
  --c-neutral: #1A100A;
  --c-surface: #281A0F;
  --c-on-primary: #1A100A;
  --c-tertiary-tint: rgba(185, 146, 86, 0.14);
  --c-tertiary-edge: rgba(185, 146, 86, 0.38);
  --c-secondary-tint: rgba(168, 150, 133, 0.18);
  --c-secondary-tint-strong: rgba(168, 150, 133, 0.32);
  --c-primary-tint: rgba(251, 244, 229, 0.04);
  --c-hairline: rgba(168, 150, 133, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary: #FBF4E5;
    --c-secondary: #A89685;
    --c-tertiary: #B99256;
    --c-tertiary-deep: #D4AC73;
    --c-neutral: #1A100A;
    --c-surface: #281A0F;
    --c-on-primary: #1A100A;
    --c-tertiary-tint: rgba(185, 146, 86, 0.14);
    --c-tertiary-edge: rgba(185, 146, 86, 0.38);
    --c-secondary-tint: rgba(168, 150, 133, 0.18);
    --c-secondary-tint-strong: rgba(168, 150, 133, 0.32);
    --c-primary-tint: rgba(251, 244, 229, 0.04);
    --c-hairline: rgba(168, 150, 133, 0.28);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--c-neutral);
  color: var(--c-primary);
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Side-scroll containment: stop horizontal carousels rubber-banding the page,
     while keeping native vertical rubber-band on body (iOS expects it). */
  overscroll-behavior-x: none;
}

body {
  /* On phone the device IS the canvas. On desktop we pin the canvas centered. */
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* iOS native: prevent the system blue ring on focus (we own focus state) */
:focus { outline: none; }
:focus-visible {
  /* keep keyboard a11y on desktop without the iOS blue glow */
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

/* iOS Safari quirks suppression
 * - 16px floor on form controls prevents auto-zoom on focus.
 * - appearance:none + radius:0 strips iOS rounded chrome on inputs/buttons.
 * - tap-highlight-color removed (handled per-component with :active).
 * - touch-callout off on imagery (no long-press menu). */
input, textarea, select, button {
  font-size: 16px;
}
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
img {
  max-width: 100%; display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ─── Type scale (mobile-tuned) ──────────────────────────────────────── */
.t-large {
  /* iOS large title — 28px Cormorant. Used in root top bar. */
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: 0.01em;
}
.t-h1 {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: 0.01em;
}
.t-h2 {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em;
}
.t-h3 {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: 19px; font-weight: 500; line-height: 1.3;
}
.t-body { font-size: 15px; font-weight: 400; line-height: 1.5; }
.t-body-lead { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--c-secondary); font-style: italic; }
.t-bar-title {
  /* iOS center-title (17pt) */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--c-primary);
}
.t-eyebrow,
.t-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-secondary);
}
.t-tab {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.t-mono { font-family: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.t-num { font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: -0.005em; }
.t-muted { color: var(--c-secondary); }
.t-italic { font-style: italic; }

/* Currency suffix · baseline-aligned with the digits next to it */
.cur-suffix,
.aed-prefix {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62em; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-secondary);
  margin-left: 0.34em;
  vertical-align: baseline;
}

/* ─── Device viewport · the page canvas ───────────────────────────────
 * On phones the .vp fills the screen. On desktop the .vp is pinned to
 * 430px wide, centered, with the optional faux-bezel at >=1024.
 * Every page wraps its content in <div class="vp"> so the layout stays
 * phone-shaped on every screen.
 *
 * SCROLL POLICY: scrolling happens on <body>, NOT on .vp.
 * .vp is just a layout wrapper — DO NOT set overflow-y, overflow,
 * or -webkit-overflow-scrolling on .vp (would steal momentum + trap
 * the user inside a non-scrollable viewport).
 *
 * .vp.has-tabbar / .vp.has-cta-dock add bottom padding so fixed-bottom
 * elements never cover the last row of content. */
.vp {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-neutral);
  margin: 0 auto;
  padding-left: var(--sai-left);
  padding-right: var(--sai-right);
  isolation: isolate;
  /* horizontal jitter prevention only — never overflow-y on .vp */
}

/* Bottom-fixed clearance modifiers — pages MUST add these when a tab bar
   or CTA dock is present, so the last item isn't hidden under the bar. */
.vp.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + var(--sai-bottom) + 16px);
}
.vp.has-cta-dock {
  padding-bottom: calc(64px + var(--sai-bottom) + 16px);
}
.vp.has-tabbar.has-cta-dock {
  padding-bottom: calc(var(--tabbar-h) + 64px + var(--sai-bottom) + 16px);
}

/* Desktop ≥ 768: present as centered phone canvas */
@media (min-width: 768px) {
  body {
    background: var(--c-neutral);
    padding: 32px 0;
  }
  .vp {
    width: var(--vp-frame);
    max-width: var(--vp-frame);
    min-height: 844px;
    border: 1px solid var(--c-secondary-tint);
    /* no shadow — keeps the no-gradient/no-glow rule */
  }
}

/* Desktop ≥ 1024: faux iPhone bezel chrome (decorative only) */
@media (min-width: 1024px) {
  body {
    padding: 48px 0;
  }
  .vp {
    border-radius: 44px;
    border: 1px solid var(--c-primary);
    /* No overflow:hidden here — would re-trap scroll. The bezel is decorative;
       inner content can clip via mask if ever needed. */
    box-shadow:
      0 0 0 8px var(--c-surface),
      0 0 0 9px var(--c-primary);
  }
}

/* ─── Top bar (44pt) ──────────────────────────────────────────────────
 * Three layouts: root (large title), pushed (back chevron + center),
 * modal (Cancel / Done). Always pinned, accounts for notch. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-neutral);
  padding-top: var(--sai-top);
  border-bottom: 0.5px solid var(--c-hairline);
  transition: background 200ms ease;
}
.topbar-row {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-md);
  gap: 8px;
}
.topbar-leading,
.topbar-trailing {
  display: inline-flex; align-items: center;
  min-width: 44px; min-height: 44px;
  color: var(--c-primary);
}
.topbar-trailing { justify-content: flex-end; }
.topbar-title {
  flex: 1; min-width: 0; text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--c-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-large {
  /* sits BELOW the 44pt row on root pages */
  padding: 4px var(--s-md) 14px;
  background: var(--c-neutral);
}
.topbar-large h1 {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: 32px; font-weight: 400; letter-spacing: 0.01em;
  margin: 0;
  color: var(--c-primary);
}
.topbar-large .eyebrow {
  display: block; margin-top: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--c-secondary);
}
.topbar-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--c-primary);
  transition: transform 80ms ease-out, opacity 200ms ease;
}
.topbar-icon-btn:active { transform: scale(0.92); opacity: 0.7; }
.topbar-icon-btn svg { width: 22px; height: 22px; stroke-width: 1.5; }
.topbar-text-btn {
  background: transparent; border: 0; padding: 0 4px;
  height: 44px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; font-weight: 500;
  color: var(--c-primary);
  transition: opacity 200ms ease;
}
.topbar-text-btn:active { opacity: 0.5; }
/* Single-accent gold may appear on a SINGLE topbar text-btn (Save / Export) */
.topbar-text-btn.is-accent { color: var(--c-tertiary-deep); font-weight: 600; }

/* Back chevron + label combo */
.topbar-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 0 4px 0 0;
  height: 44px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; font-weight: 400;
  color: var(--c-primary);
  max-width: 50%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-back:active { opacity: 0.5; }
.topbar-back svg { width: 22px; height: 22px; stroke-width: 1.5; flex-shrink: 0; }
.topbar-back .lbl { font-weight: 400; }

/* ─── Pull-to-refresh decoration ─────────────────────────────────────── */
.ptr {
  display: flex; justify-content: center; align-items: center;
  height: 32px; margin-top: -16px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-secondary); opacity: 0.6;
}

/* ─── Page content wrapper ───────────────────────────────────────────── */
.content {
  /* flexible scroll body — sits between topbar and tabbar */
  padding-bottom: calc(var(--tabbar-h) + var(--sai-bottom) + 24px);
}
.content--no-tab {
  padding-bottom: calc(var(--sai-bottom) + 24px);
}
.content--with-cta {
  /* CTA pinned bottom needs extra room */
  padding-bottom: calc(var(--sai-bottom) + 90px);
}
.content--with-cta-and-tab {
  padding-bottom: calc(var(--tabbar-h) + var(--sai-bottom) + 90px);
}
.section {
  padding: 16px var(--s-md) 8px;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 28px var(--s-md) 12px;
  gap: 12px;
}
.section-head h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400; letter-spacing: 0.005em;
  color: var(--c-primary);
}
.section-head .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--c-secondary);
}
.section-head .link {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-secondary);
  letter-spacing: 0.04em;
}

/* ─── Bottom tab bar (49pt + safe-area) ──────────────────────────────────
 * Solid surface (so content underneath never bleeds through), 0.5px taupe
 * top hairline, 49pt internal height ABOVE the home-indicator inset, gold
 * 28×2 pill above the active item — the ONLY gold on the bar. Each cell
 * is `flex: 1`, so 4-tab (guest) and 5-tab (owner) layouts both stay
 * symmetrical with equal cell widths. Min tap target 49pt; on a real
 * iPhone the safe-area inset adds ~34pt below for the home indicator. */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-secondary-tint);
  padding-bottom: var(--sai-bottom);
  display: flex;
  /* Prevent any momentum / touch-action quirks on the bar itself */
  touch-action: manipulation;
}
/* Pin tabbar inside the device viewport on desktop */
@media (min-width: 768px) {
  .tabbar {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
  }
}
.tabbar-item {
  flex: 1 1 0;            /* equal cells regardless of label width */
  min-width: 0;
  height: var(--tabbar-h);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  position: relative;
  background: transparent; border: 0;
  color: var(--c-secondary);
  text-decoration: none;
  transition: color 160ms ease, transform 80ms ease-out;
  padding: 6px 4px 4px;
  /* iOS: no system tap highlight, we own :active feedback */
  -webkit-tap-highlight-color: transparent;
}
.tabbar-item svg {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
}
.tabbar-item .lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
/* Tighter letter-spacing for long Turkish destinations on narrow phones
   AND in 5-tab owner layout where Müşteriler / Takvim share 78px cells */
@media (max-width: 414px) {
  .tabbar-item .lbl { letter-spacing: 0.04em; font-size: 9px; }
}
.tabbar-item.is-active {
  color: var(--c-primary);
}
.tabbar-item.is-active .lbl {
  font-weight: 600;
}
.tabbar-item.is-active svg {
  stroke-width: 1.85;
}
/* Single-accent: the active-tab gold pill (the ONLY gold on the tab bar).
   Centered horizontally above the icon row — pinned to the top edge. */
.tabbar-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--c-tertiary);
  border-radius: 0 0 2px 2px;
}
.tabbar-item:active {
  opacity: 0.7;
  transform: scale(0.96);
}

/* ─── List rows · iOS plain table ────────────────────────────────────── */
.list {
  list-style: none; margin: 0; padding: 0;
  background: var(--c-neutral);
}
.list--grouped {
  /* iOS grouped sections — ivory surface with hairline group */
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
  margin-bottom: 12px;
}
.list-section-head {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-secondary);
  padding: 22px var(--s-md) 8px;
}
.list-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 10px var(--s-md);
  position: relative;
  background: transparent;
  color: var(--c-primary);
  text-decoration: none;
  transition: background 120ms ease;
}
.list-row + .list-row::before,
.list .list-row + .list-row::before {
  content: '';
  position: absolute; top: 0; left: var(--s-md); right: 0;
  height: 0.5px;
  background: var(--c-hairline);
}
/* Inset the divider only past avatar block when a leading element is present */
.list-row.has-leading + .list-row::before { left: calc(var(--s-md) + 56px); }
.list-row:active { background: var(--c-primary-tint); }

.list-row .leading {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-primary); color: var(--c-on-primary);
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
}
.list-row .leading--icon {
  background: transparent; color: var(--c-secondary);
  border-radius: 0;
}
.list-row .leading--icon svg { width: 22px; height: 22px; stroke-width: 1.5; fill: none; stroke: currentColor; }
.list-row .body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.list-row .title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 500; color: var(--c-primary);
  letter-spacing: 0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row .sub {
  font-family: 'Libre Caslon Text', serif;
  font-size: 13px; color: var(--c-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row .trailing {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-secondary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  flex-shrink: 0;
}
.list-row .trailing .v {
  color: var(--c-primary); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.list-row .disclosure {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--c-secondary);
}
.list-row .disclosure svg { width: 14px; height: 14px; stroke-width: 1.5; fill: none; stroke: currentColor; }
/* Belt-and-suspenders: any .disclosure svg, anywhere — caps inline SVGs that
   lose their .list-row ancestor due to HTML5 nested-<a> parser repair (parser
   auto-closes outer <a> when it sees a nested <a>, orphaning .trailing
   children outside .list-row and breaking selector specificity). */
.disclosure { display: inline-flex; flex: 0 0 14px; width: 14px; height: 14px; }
.disclosure > svg, span.disclosure svg, .trailing svg { width: 14px !important; height: 14px !important; max-width: 14px; max-height: 14px; stroke-width: 1.5; fill: none; stroke: currentColor; }

/* ─── Cards (used sparingly, root pages only) ────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card--flush { padding: 0; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 18px; color: var(--c-primary);
}
.card-meta { color: var(--c-secondary); font-size: 12px; font-style: italic; }

/* ─── KPI mini-tile (horizontal scroll strip on Today) ───────────────── */
.kpi-strip {
  display: flex; gap: 12px;
  padding: 16px var(--s-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--s-md);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.kpi-strip::-webkit-scrollbar { display: none; }
.kpi-tile {
  flex: 0 0 auto;
  min-width: 156px;
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  scroll-snap-align: start;
}
.kpi-tile .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--c-secondary);
}
.kpi-tile .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 400; line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.kpi-tile .foot {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  letter-spacing: 0.02em;
}

/* KPI tile grid (Reports) — 2-col phone, 1-col under 360 */
.kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px var(--s-md);
}
@media (max-width: 359px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
.kpi-grid .kpi-tile {
  min-width: 0; width: 100%;
}

/* ─── Avatars · staff strip ──────────────────────────────────────────── */
.avatar-strip {
  display: flex; gap: 14px;
  padding: 12px var(--s-md) 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--s-md);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.avatar-strip::-webkit-scrollbar { display: none; }
.avatar-chip {
  flex: 0 0 auto;
  width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  scroll-snap-align: start;
}
.avatar-chip .av {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em;
}
.avatar-chip .nm {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: var(--c-secondary);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Hero avatar (client-360) */
.hero-av {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 500; letter-spacing: 0.16em;
}

/* ─── Status indicators (no red/green — tobacco/taupe + iconography) ── */
.status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--c-secondary);
}
.status--confirmed::before {
  content: ''; width: 10px; height: 10px;
  background: var(--c-primary); border-radius: 50%;
}
.status--pending::before {
  content: ''; width: 10px; height: 10px;
  background: transparent;
  border: 1px solid var(--c-secondary); border-radius: 50%;
}
.status--noshow {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--c-secondary);
}
.status--noshow::before { content: '×'; }

/* ─── Chips · filter pills (Clients page) ────────────────────────────── */
.chip-row {
  display: flex; gap: 8px;
  padding: 12px var(--s-md);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--s-md);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 16px; /* iOS rounded chip — exception confined to filter chips */
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--c-secondary-tint-strong);
  color: var(--c-secondary);
  cursor: pointer;
  transition: all 140ms ease;
}
.chip.is-on {
  background: var(--c-primary); color: var(--c-on-primary);
  border-color: var(--c-primary);
}
.chip:active { transform: scale(0.97); }
.chip--vip::before { content: ''; width: 5px; height: 5px; background: var(--c-primary); border-radius: 50%; }
.chip--regular::before { content: ''; width: 5px; height: 5px; background: var(--c-secondary); border-radius: 50%; }
.chip--new::before { content: ''; width: 5px; height: 5px; border: 1px solid var(--c-secondary); border-radius: 50%; }
.chip--lapsed::before { content: ''; width: 5px; height: 5px; border: 1px dashed var(--c-secondary); border-radius: 50%; }
.chip.is-on::before { background: var(--c-on-primary); border-color: var(--c-on-primary); }

/* ─── Segmented control (iOS pill segmenter) ─────────────────────────── */
.seg {
  display: inline-flex;
  width: 100%;
  margin: 12px var(--s-md);
  width: calc(100% - var(--s-md) * 2);
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.seg-item {
  flex: 1;
  height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--c-secondary);
  border-radius: 6px;
  transition: background 160ms ease, color 160ms ease;
  text-decoration: none;
}
.seg-item.is-on {
  background: var(--c-primary); color: var(--c-on-primary);
}

/* Sticky-under-topbar variant (Calendar) */
.seg-sticky {
  position: sticky; top: calc(var(--topbar-h) + var(--sai-top));
  z-index: 20;
  background: var(--c-neutral);
  margin: 0;
  padding: 8px var(--s-md);
}
.seg-sticky .seg { margin: 0; width: 100%; }

/* ─── Search field (sticky under topbar) ─────────────────────────────── */
.search-bar {
  position: sticky; top: calc(var(--topbar-h) + var(--sai-top));
  z-index: 20;
  background: var(--c-neutral);
  padding: 8px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
}
.search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  background: var(--c-surface);
  border: 0.5px solid var(--c-hairline);
  border-radius: 10px;
  font-family: 'Libre Caslon Text', serif;
  font-size: 16px; /* iOS no-zoom floor */
  color: var(--c-primary);
  position: relative;
}
.search-wrap { position: relative; }
.search-wrap .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--c-secondary);
  pointer-events: none;
}
.search-input:focus { outline: none; border-color: var(--c-primary); }
.search-input::placeholder { color: var(--c-secondary); font-style: italic; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: transparent; color: var(--c-primary);
  transition: transform 80ms ease-out, background 200ms ease, opacity 200ms ease;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--c-tertiary); color: var(--c-on-primary);
  border-color: var(--c-tertiary);
}
.btn--primary:active { background: var(--c-tertiary-deep); border-color: var(--c-tertiary-deep); }
.btn--ghost {
  border-color: var(--c-secondary-tint-strong); color: var(--c-primary);
  background: transparent;
}
.btn--text {
  border-color: transparent; color: var(--c-secondary); padding: 12px 4px;
}

/* Sticky bottom CTA · gold, 50pt, full-width, anchored above tabbar */
.cta-dock {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 12px var(--s-md);
  padding-bottom: calc(var(--sai-bottom) + 12px);
  background: var(--c-neutral);
  border-top: 0.5px solid var(--c-hairline);
  z-index: 35;
}
.cta-dock--above-tab {
  bottom: var(--tabbar-h);
  padding-bottom: 12px;
}
@media (min-width: 768px) {
  .cta-dock { position: absolute; }
  .cta-dock--above-tab { position: absolute; bottom: var(--tabbar-h); }
}
.cta {
  display: inline-flex; width: 100%;
  align-items: center; justify-content: center; gap: 10px;
  height: 50px;
  background: var(--c-tertiary); color: var(--c-on-primary);
  border: 0;
  border-radius: var(--r-lg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  transition: transform 80ms ease-out, background 200ms ease;
  cursor: pointer;
}
.cta:active { transform: scale(0.97); background: var(--c-tertiary-deep); }
.cta .price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Floating action button (Today) */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--sai-bottom) + 14px);
  width: 56px; height: 56px;
  background: var(--c-tertiary); color: var(--c-on-primary);
  border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400; line-height: 1;
  z-index: 38;
  transition: transform 80ms ease-out, background 200ms ease;
}
.fab:active { transform: scale(0.94); background: var(--c-tertiary-deep); }
@media (min-width: 768px) {
  .fab { position: absolute; }
}

/* ─── Inputs · iOS underlined floating-label ─────────────────────────── */
.field {
  position: relative;
  margin-bottom: 8px;
  padding: 10px 0 0;
  border-bottom: 0.5px solid var(--c-hairline);
}
.field-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 4px;
  transition: color 160ms ease;
}
.field-input {
  width: 100%;
  height: 32px;
  padding: 4px 0 8px;
  background: transparent;
  border: 0;
  font-family: 'Libre Caslon Text', serif;
  font-size: 17px;
  color: var(--c-primary);
}
.field-input:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--c-primary); }
.field:focus-within .field-label { color: var(--c-primary); }
.field-input::placeholder { color: var(--c-secondary); font-style: italic; }
.field-help {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  margin-top: 6px;
}

/* Inline language pill (Settings) — tobacco/taupe only, NOT gold */
.lang-pill {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px;
  background: transparent;
  border: 1px solid var(--c-secondary-tint-strong);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-secondary); cursor: pointer;
}
.lang-pill.on {
  background: var(--c-primary); color: var(--c-on-primary);
  border-color: var(--c-primary);
}

/* Language toggle (login + more) · TR · EN */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  background: transparent;
  border: 1px solid var(--c-secondary-tint-strong);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-secondary); cursor: pointer;
}
.lang-toggle .lang-sep { color: var(--c-secondary-tint-strong); }
.lang-toggle[data-lang="tr"] .lang-tr { color: var(--c-primary); font-weight: 600; }
.lang-toggle[data-lang="en"] .lang-en { color: var(--c-primary); font-weight: 600; }

/* Theme toggle (used inside More row) */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid var(--c-secondary-tint);
  color: var(--c-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .theme-sun { display: none; }
.theme-toggle .theme-moon { display: block; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

/* ─── Bottom sheet (modal) — top-rounded only, drag handle ────────────
 * Static markup demo: append .is-open to .sheet-backdrop to reveal. */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(45, 28, 15, 0.40);
  display: none;
  /* native iOS — fade backdrop with the sheet */
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet-backdrop.is-open {
  display: block;
  opacity: 1;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--c-surface);
  border-top-left-radius: var(--r-sheet);
  border-top-right-radius: var(--r-sheet);
  padding: 8px var(--s-md) calc(var(--sai-bottom) + 16px);
  max-height: 80vh; overflow-y: auto;
  /* iOS: keep momentum but prevent rubber-band leaking to body underneath */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* native iOS sheet entry — slide-up + cubic-bezier easing */
  animation: sheetIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sheet-handle {
  width: 40px; height: 4px;
  background: var(--c-secondary-tint-strong);
  border-radius: 2px;
  margin: 8px auto 16px;
}
.sheet-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--c-primary); margin: 0 0 8px;
}

/* ─── Calendar (mobile week view) ────────────────────────────────────── */
.cal-day-strip {
  display: flex; gap: 4px;
  padding: 8px var(--s-md);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 0.5px solid var(--c-hairline);
  background: var(--c-neutral);
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--s-md);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.cal-day-strip::-webkit-scrollbar { display: none; }
.cal-day {
  flex: 0 0 auto;
  width: 50px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  color: var(--c-secondary);
  scroll-snap-align: start;
}
.cal-day .dow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.cal-day .dom {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--c-primary); margin-top: 2px;
}
.cal-day.is-today {
  background: var(--c-primary); color: var(--c-on-primary);
}
.cal-day.is-today .dom { color: var(--c-on-primary); }

.cal-timeline {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr;
  font-family: 'Inter', sans-serif;
}
.cal-hour {
  border-top: 0.5px solid var(--c-hairline);
  font-size: 10px; color: var(--c-secondary);
  letter-spacing: 0.04em; padding: 4px 6px;
  min-height: 56px;
  text-align: right;
}
.cal-slot {
  border-top: 0.5px solid var(--c-hairline);
  position: relative;
  min-height: 56px;
  padding: 2px 4px;
}
.cal-block {
  background: var(--c-secondary-tint-strong);
  color: var(--c-primary);
  padding: 6px 8px;
  border-radius: var(--r-lg);
  font-family: 'Libre Caslon Text', serif;
  font-size: 13px;
  margin-bottom: 2px;
}
.cal-block.is-premium {
  background: var(--c-primary); color: var(--c-on-primary);
}
.cal-block .who {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
}
.cal-block .what {
  display: block;
  font-size: 11px; opacity: 0.8;
}

/* ─── POS payment tiles (4-wide grid) ────────────────────────────────── */
.pay-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 12px var(--s-md);
}
.pay-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  border-radius: var(--r-lg);
  height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-secondary);
  cursor: pointer;
  transition: transform 80ms ease-out, border-color 160ms ease, color 160ms ease;
}
.pay-tile svg { width: 22px; height: 22px; stroke-width: 1.5; fill: none; stroke: currentColor; }
.pay-tile.is-on {
  border-color: var(--c-primary); color: var(--c-primary);
}
.pay-tile:active { transform: scale(0.97); }

/* ─── Hairline divider helpers ───────────────────────────────────────── */
.divider { height: 0.5px; background: var(--c-hairline); margin: 12px 0; border: 0; }
.divider-strong { height: 0.5px; background: var(--c-secondary-tint-strong); margin: 16px 0; border: 0; }

/* ─── Eyebrow rule (gold hairline lockup) ────────────────────────────── */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow-rule::before {
  content: ''; width: 24px; height: 1px; background: var(--c-tertiary);
}

/* ─── Mini utilization bar (Staff) ───────────────────────────────────── */
.util {
  position: relative;
  width: 60px; height: 4px;
  background: var(--c-secondary-tint);
  border-radius: 2px;
  overflow: hidden;
}
.util span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--c-secondary);
  border-radius: 2px;
}

/* ─── Slide-in push transition (page enter) ──────────────────────────── */
@keyframes pushIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.push-enter { animation: pushIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade { animation: fadeUp 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.d1 { animation-delay: 60ms; }
.d2 { animation-delay: 140ms; }
.d3 { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .fade, .push-enter, .topbar-icon-btn, .topbar-text-btn, .btn, .cta, .fab, .chip, .pay-tile, .tabbar-item {
    animation: none !important; transition: none !important;
  }
}

/* ─── Utility ────────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.center { align-items: center; justify-content: center; }
.gap-sm { gap: 6px; } .gap-md { gap: 12px; } .gap-lg { gap: 20px; }
.right { text-align: right; }
.muted { color: var(--c-secondary); }
.mono { font-family: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.hidden { display: none; }
.inline { display: inline; }
.full { width: 100%; }

/* ─── Money — number+suffix wrap that never breaks ─────────────────────
 * Use <span class="money"><span class="t-num">1.250,00</span><span class="cur-suffix">₺</span></span>
 * or any equivalent where cur-suffix is the trailing currency tag. */
.money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* iOS-feel :active feedback for plain rows */
.row:active { background: var(--c-secondary-tint); }
.list-row:active { background: var(--c-primary-tint); }

/* ──── Photography ─────────────────────────────────────────────────────
   Photos are content, not chrome. They may carry their own gradients
   (it's photography). The frame around them stays flat, sharp-cornered.
   ──────────────────────────────────────────────────────────────────── */
.photo {
  display: block;
  background: var(--c-secondary-tint); /* taupe shimmer-feel while loading */
  object-fit: cover;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border-radius: 0;
  color: transparent; /* hide alt text flash on slow load */
}
.photo--hero { aspect-ratio: 16 / 9; }
.photo--card { aspect-ratio: 4 / 3; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--tall { aspect-ratio: 3 / 4; }

/* Avatar — circular, used for people only */
.av-photo {
  display: inline-block;
  border-radius: 50%;
  background: var(--c-secondary-tint);
  object-fit: cover;
  width: 40px; height: 40px;
  border: 1px solid var(--c-secondary-tint, rgba(140, 117, 99, 0.18));
  color: transparent;
}
.av-photo--lg { width: 64px; height: 64px; }
.av-photo--xl { width: 96px; height: 96px; }
.av-photo--xxl { width: 120px; height: 120px; }

/* Photo with thin gold rule below — editorial caption pattern */
.photo-frame {
  position: relative;
  display: block;
}
.photo-frame::after {
  content: ''; display: block; height: 1px;
  background: var(--c-tertiary); width: 32px; margin-top: 12px;
}

/* Before/after pair — side-by-side */
.ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 16px 0;
}
.ba-pair .photo { aspect-ratio: 1 / 1; }
.ba-pair figure { margin: 0; position: relative; }
.ba-pair figcaption {
  position: absolute; top: 8px; left: 8px;
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px;
}

/* Photo gallery grid (for client-360, salon-detail) */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.gallery .photo { aspect-ratio: 1 / 1; }

/* Skeleton shimmer for loading photos (decorative; static for mockup) */
.photo-skeleton {
  background: var(--c-neutral);
  position: relative; overflow: hidden;
}

/* Avatar size overrides where img replaces a sized span */
.avatar-chip .av-photo { width: 56px; height: 56px; }
.list-row .av-photo { width: 44px; height: 44px; }
.list-row .av-photo.av-photo--lg { width: 64px; height: 64px; }

/* ─────────────────────────────────────────────────────────────────────────
 * oi-* · owner-ios shared components for the 4-step booking flow + the
 * picker-sheet refactor of booking-detail. Mirrors guest-ios g3-* patterns
 * but isolated to owner-ios.
 *
 * - oi-acc        · category accordion (booking-create svc list)
 * - oi-svc-row    · checkbox + name + price (multi-select)
 * - oi-staff-row  · large staff card (radio-style selection)
 * - oi-cb         · custom checkbox / radio
 * ───────────────────────────────────────────────────────────────────── */
.oi-acc {
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
  background: var(--c-surface);
  margin-bottom: 12px;
}
.oi-acc summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--s-md);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 500; color: var(--c-primary);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.oi-acc summary::-webkit-details-marker { display: none; }
.oi-acc summary::after {
  content: '+';
  margin-left: auto;
  color: var(--c-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 400;
  transition: transform 200ms ease;
}
.oi-acc[open] summary::after { transform: rotate(45deg); }
.oi-acc[open] summary { border-bottom: 0.5px solid var(--c-hairline); }

.oi-svc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--s-md);
  min-height: 56px;
  border-bottom: 0.5px solid var(--c-hairline);
  background: transparent;
  cursor: pointer;
}
.oi-cb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 1px solid var(--c-secondary-tint-strong);
  background: var(--c-surface);
  flex-shrink: 0;
  position: relative; cursor: pointer;
  border-radius: 0;
}
.oi-cb:checked {
  background: var(--c-primary); border-color: var(--c-primary);
}
.oi-cb:checked::after {
  content: '✓';
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-on-primary); font-size: 14px; font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.oi-svc-row .oi-svc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oi-svc-row .oi-svc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 500; color: var(--c-primary);
}
.oi-svc-row .oi-svc-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.oi-svc-row .oi-svc-price {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

.oi-staff-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--s-md);
  min-height: 72px;
  border-bottom: 0.5px solid var(--c-hairline);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.oi-staff-row.is-on { background: var(--c-primary-tint); }
.oi-staff-row.is-on::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--c-tertiary);
}
.oi-staff-row .av-photo { width: 48px; height: 48px; flex-shrink: 0; }
.oi-staff-row .oi-staff-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oi-staff-row .oi-staff-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500; color: var(--c-primary);
  letter-spacing: 0.005em;
}
.oi-staff-row .oi-staff-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  letter-spacing: 0.04em;
}
.oi-staff-row .oi-staff-avail {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-tertiary-deep);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.oi-staff-row .oi-staff-rating {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* oi-msg-call-row · 2-button row at top of booking-detail */
.oi-msg-call-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 var(--s-md) 14px;
}
.oi-msg-call-row .btn { padding: 12px 8px; font-size: 13px; }

/* ─── oi2-* · OWNER DEPTH WAVE (calendar D/W/M, notifications, time-off,
 *           waitlist, report detail). All scoped under oi2- to avoid
 *           collision with existing oi- classes. ─────────────────────── */

/* oi2-cal-toolbar · calendar date selector + filter row, sticky under topbar */
.oi2-cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px var(--s-md) 8px;
  background: var(--c-neutral);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi2-cal-date {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--c-primary);
  background: transparent; border: 0; padding: 0;
}
.oi2-cal-date svg { width: 18px; height: 18px; stroke: var(--c-secondary); stroke-width: 1.5; fill: none; }
.oi2-cal-date:active { opacity: 0.6; }
.oi2-cal-filter {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--c-secondary);
  padding: 6px 10px;
  border: 1px solid var(--c-secondary-tint-strong);
  border-radius: var(--r-lg);
  background: transparent;
}
.oi2-cal-filter:active { opacity: 0.6; }

/* oi2-day-view · single-day vertical timeline */
.oi2-day-view { display: none; }
.oi2-day-view.is-on { display: block; }
.oi2-day-view .cal-timeline { /* reuse base timeline grid but spans 30-min */
}
.oi2-day-row {
  display: grid; grid-template-columns: 48px 1fr;
  border-top: 0.5px solid var(--c-hairline);
  min-height: 60px;
  position: relative;
}
.oi2-day-row .oi2-hour {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: var(--c-secondary);
  letter-spacing: 0.04em; padding: 4px 6px; text-align: right;
}
.oi2-day-row .oi2-half {
  position: absolute; left: 48px; right: 0; top: 30px; height: 0;
  border-top: 0.5px dashed var(--c-secondary-tint);
}
.oi2-day-row .oi2-slot {
  position: relative; padding: 3px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.oi2-block {
  background: var(--c-secondary-tint-strong);
  color: var(--c-primary);
  padding: 8px 10px;
  border-radius: var(--r-lg);
  font-family: 'Libre Caslon Text', serif;
  font-size: 13px;
  text-decoration: none;
  display: block;
}
.oi2-block.is-premium { background: var(--c-primary); color: var(--c-on-primary); }
.oi2-block .who {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
}
.oi2-block .meta {
  display: block;
  font-size: 11px; opacity: 0.78;
  margin-top: 2px;
}
.oi2-block .room {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-left: 6px; opacity: 0.7;
}
.oi2-day-open {
  margin: 18px var(--s-md) 8px;
  padding: 12px 14px;
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi2-day-open .h {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 8px;
}
.oi2-day-open .slots {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.oi2-day-open .slot {
  font-family: 'Inter', sans-serif;
  font-size: 12px; padding: 6px 12px;
  border: 1px solid var(--c-secondary-tint-strong);
  color: var(--c-primary);
  background: transparent;
  border-radius: var(--r-lg);
}
.oi2-day-open .slot:active { opacity: 0.6; }

/* oi2-month-view · 7×6 calendar grid */
.oi2-month-view { display: none; padding: 4px var(--s-md) 16px; }
.oi2-month-view.is-on { display: block; }
.oi2-mh-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-secondary);
  padding: 8px 0 6px;
}
.oi2-mh-row span { text-align: center; }
.oi2-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 0.5px solid var(--c-hairline);
  border-left: 0.5px solid var(--c-hairline);
}
.oi2-mday {
  border-right: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
  min-height: 56px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 4px;
  background: transparent; color: var(--c-primary);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  position: relative;
}
.oi2-mday:active { background: var(--c-primary-tint); }
.oi2-mday.is-other { color: var(--c-secondary); opacity: 0.45; }
.oi2-mday.is-today::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 1.5px; background: var(--c-tertiary);
}
.oi2-mday.is-booked-now {
  background: var(--c-primary); color: var(--c-on-primary);
  border-radius: 999px;
}
.oi2-mdots { display: flex; gap: 3px; }
.oi2-mdot { width: 4px; height: 4px; background: var(--c-secondary); }
.oi2-mday.is-busy .oi2-mdot { background: var(--c-primary); }
.oi2-mday.is-full {
  background: var(--c-secondary-tint-strong);
}
.oi2-mday.is-full::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c-primary);
}

/* oi2-bell · topbar bell with badge */
.oi2-bell {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--c-primary);
}
.oi2-bell svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.oi2-bell .badge {
  position: absolute; top: 1px; right: 0;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--c-tertiary);
  color: var(--c-on-primary);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.oi2-bell:active { opacity: 0.6; }

/* oi2-notif-row · single notification list row */
.oi2-notif-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  background: transparent; color: var(--c-primary);
  text-decoration: none;
}
.oi2-notif-row:active { background: var(--c-primary-tint); }
.oi2-notif-row.is-unread { background: var(--c-tertiary-tint); }
.oi2-notif-row .ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--c-secondary-tint-strong);
}
.oi2-notif-row .ico svg { width: 14px; height: 14px; stroke: var(--c-secondary); stroke-width: 1.5; fill: none; }
.oi2-notif-row.is-unread .ico { border-color: var(--c-tertiary); }
.oi2-notif-row.is-unread .ico svg { stroke: var(--c-tertiary-deep); }
.oi2-notif-row .body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi2-notif-row .body .t {
  font-family: 'Libre Caslon Text', serif;
  font-size: 14px; line-height: 1.35; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis;
}
.oi2-notif-row .body .meta {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-secondary);
}
.oi2-notif-row .ago {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  align-self: flex-start;
  white-space: nowrap;
}
.oi2-notif-row.is-unread .body .t { font-weight: 600; }
.oi2-notif-row.is-unread::after {
  content: ''; position: absolute;
}

/* oi2-mini-stats · 3-up KPI strip */
.oi2-mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
  background: var(--c-surface);
}
.oi2-mini-stats > div {
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 0.5px solid var(--c-hairline);
  text-align: left;
}
.oi2-mini-stats > div:last-child { border-right: 0; }
.oi2-mini-stats .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-secondary);
}
.oi2-mini-stats .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; line-height: 1; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* oi2-req-row · time-off / waitlist request row */
.oi2-req-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  align-items: center;
}
.oi2-req-row .av-photo { width: 44px; height: 44px; }
.oi2-req-row .body { min-width: 0; }
.oi2-req-row .nm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; color: var(--c-primary);
  display: block;
}
.oi2-req-row .range {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-secondary);
  margin-top: 2px;
}
.oi2-req-row .reason {
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  font-size: 12px; color: var(--c-secondary);
  margin-top: 2px;
}
.oi2-req-status {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--c-secondary-tint-strong);
  color: var(--c-secondary);
  white-space: nowrap;
}
.oi2-req-status.is-pending { color: var(--c-tertiary-deep); border-color: var(--c-tertiary-edge); }
.oi2-req-status.is-approved { color: var(--c-primary); border-color: var(--c-primary); }
.oi2-req-status.is-rejected { color: var(--c-secondary); text-decoration: line-through; }

/* oi2-req-actions · approve/reject buttons (one accent active per visible state) */
.oi2-req-actions {
  display: flex; gap: 8px;
  padding: 8px var(--s-md) 14px;
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi2-req-actions .btn { padding: 9px 14px; font-size: 12px; min-height: 38px; }
.oi2-req-actions .btn--accept {
  background: var(--c-tertiary); color: var(--c-on-primary); border-color: var(--c-tertiary);
}
.oi2-req-actions .btn--reject {
  border-color: var(--c-secondary-tint-strong); color: var(--c-secondary);
}

/* oi2-affected · time-off affected booking row */
.oi2-affected {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 12px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  align-items: center;
}
.oi2-affected .av-photo { width: 36px; height: 36px; }
.oi2-affected .body { min-width: 0; }
.oi2-affected .body .t {
  font-family: 'Libre Caslon Text', serif;
  font-size: 14px; color: var(--c-primary);
}
.oi2-affected .body .sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  margin-top: 2px;
}
.oi2-affected .reassign {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-tertiary-deep);
}

/* oi2-prio chips */
.oi2-prio {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--c-secondary-tint-strong);
  color: var(--c-secondary);
}
.oi2-prio.is-high { color: var(--c-tertiary-deep); border-color: var(--c-tertiary-edge); }
.oi2-prio.is-low { color: var(--c-secondary); opacity: 0.7; }

/* oi2-spark · KPI tile inline sparkline */
.oi2-spark {
  display: block;
  width: 100%; height: 22px;
  margin-top: 6px;
  overflow: visible;
}
.oi2-spark path { fill: none; stroke: var(--c-tertiary-deep); stroke-width: 1.4; }
.oi2-spark .axis { stroke: var(--c-hairline); stroke-width: 0.5; }

/* oi2-bigchart · large trend chart on report detail */
.oi2-bigchart {
  width: 100%; height: 160px;
  display: block;
  margin: 8px 0 4px;
}
.oi2-bigchart path.line { fill: none; stroke: var(--c-tertiary-deep); stroke-width: 1.6; }
.oi2-bigchart path.zero { stroke: var(--c-hairline); stroke-width: 0.5; stroke-dasharray: 2 4; fill: none; }
.oi2-bigchart text {
  font-family: 'Inter', sans-serif;
  font-size: 9px; fill: var(--c-secondary);
  letter-spacing: 0.12em;
}

/* oi2-breakdown · table of percentages */
.oi2-breakdown {
  padding: 0 var(--s-md);
}
.oi2-breakdown .h {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-secondary);
  padding: 14px 0 8px;
}
.oi2-breakdown .row {
  display: grid; grid-template-columns: 1fr 60px 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--c-hairline);
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--c-primary);
}
.oi2-breakdown .row .bar {
  height: 4px; background: var(--c-secondary-tint);
  position: relative;
}
.oi2-breakdown .row .bar span {
  display: block; height: 100%;
  background: var(--c-primary);
}
.oi2-breakdown .row .pct {
  font-variant-numeric: tabular-nums;
  text-align: right; color: var(--c-secondary);
  font-size: 12px;
}

/* oi2-comp · comparison row (e.g. "geçen ay %12 artış") */
.oi2-comp {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px var(--s-md) 16px;
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi2-comp .delta {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--c-primary);
}
.oi2-comp .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
  letter-spacing: 0.04em;
}

/* oi2-hero · big number block */
.oi2-hero {
  padding: 16px var(--s-md) 4px;
  text-align: left;
}
.oi2-hero .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 6px;
}
.oi2-hero .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px; line-height: 1.05; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* oi2-vat · KDV breakdown */
.oi2-vat {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--c-primary);
}
.oi2-vat .lbl { color: var(--c-secondary); }
.oi2-vat .v { font-variant-numeric: tabular-nums; text-align: right; }
.oi2-vat .v.tot { font-weight: 600; }

/* oi2-note · sticky bottom CTA dock with two buttons (reject + approve) */
.oi2-bottom-dock {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--s-md) calc(10px + var(--sai-bottom));
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-secondary-tint);
}
@media (min-width: 768px) {
  .oi2-bottom-dock { position: absolute; }
}
.oi2-bottom-dock .btn { padding: 14px; font-size: 13px; min-height: 50px; }
.oi2-bottom-dock .btn--accept { background: var(--c-tertiary); color: var(--c-on-primary); border-color: var(--c-tertiary); }
.oi2-bottom-dock .btn--reject { border: 1px solid var(--c-secondary-tint-strong); color: var(--c-secondary); }

/* oi2-textarea · plain textarea matching field aesthetic */
.oi2-textarea {
  width: 100%;
  min-height: 90px;
  margin: 6px 0 0;
  padding: 10px 0;
  background: transparent;
  border: 0; border-bottom: 0.5px solid var(--c-secondary-tint-strong);
  font-family: 'Libre Caslon Text', serif;
  font-size: 16px; /* iOS no-zoom floor */
  color: var(--c-primary);
  resize: vertical;
}
.oi2-textarea:focus { outline: none; border-bottom-color: var(--c-primary); }
.oi2-textarea::placeholder { color: var(--c-secondary); font-style: italic; }

/* oi2-card · informational card on detail pages */
.oi2-card {
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  padding: 14px;
  margin: 12px var(--s-md);
}
.oi2-card .h {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 10px;
}
.oi2-card .kv {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0;
  border-top: 0.5px solid var(--c-hairline);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.oi2-card .kv:first-of-type { border-top: 0; padding-top: 0; }
.oi2-card .kv .lbl { color: var(--c-secondary); }
.oi2-card .kv .v { color: var(--c-primary); font-variant-numeric: tabular-nums; }
.oi2-card .reasonblock {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-secondary-tint);
  border-left: 2px solid var(--c-secondary);
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  font-size: 13px; color: var(--c-primary);
}

/* oi2-hero-staff · staff avatar block on time-off detail */
.oi2-hero-staff {
  display: flex; align-items: center; gap: 14px;
  padding: 16px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi2-hero-staff .av-photo { width: 64px; height: 64px; }
.oi2-hero-staff .nm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--c-primary);
  display: block;
}
.oi2-hero-staff .role {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-secondary);
  margin-top: 2px;
}
.oi2-hero-staff .sched {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-secondary);
  margin-top: 4px;
}

/* oi2-tile-tap · tappable kpi tile in reports grid (becomes link) */
a.kpi-tile, button.kpi-tile { text-decoration: none; }
a.kpi-tile:active, button.kpi-tile:active { background: var(--c-primary-tint); }

/* oi2-staff-trailing-link · staff.html topbar trailing time-off link */
.oi2-staff-trailing-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--c-tertiary-deep); font-weight: 600;
  background: transparent; border: 0; padding: 4px 0;
}
.oi2-staff-trailing-link:active { opacity: 0.6; }

/* oi2-staff-timeoff-link · per-row mini link on staff.html */
.oi2-staff-timeoff-link {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-tertiary-deep);
  margin-left: 8px;
}

/* oi2-suggest-row · waitlist match suggestion in sheet */
.oi2-suggest-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  background: transparent;
  text-decoration: none;
}
.oi2-suggest-row:active { background: var(--c-primary-tint); }
.oi2-suggest-row .body { display: flex; flex-direction: column; gap: 2px; }
.oi2-suggest-row .body .t {
  font-family: 'Libre Caslon Text', serif;
  font-size: 14px; color: var(--c-primary);
}
.oi2-suggest-row .body .sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
}
.oi2-suggest-row .when {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-tertiary-deep); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
 * oi3-*  Owner-iOS · Admin / Multi-tenant management dialect
 *
 * Adds: 4-pip step indicator, 3-state verification rows, plan picker
 * cards (vertical stack), permissions matrix toggle row, role picker
 * tile. Sharp corners, no gradients. Single-accent gold rule preserved
 * — gold only on selected plan border, selected role tile chevron, and
 * the sticky CTA dock (already gold via .cta).
 * ────────────────────────────────────────────────────────────────────── */

/* 4-pip step indicator (mirrors .oi-step but tagged for the admin flow) */
.oi3-step {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px var(--s-md) 4px;
}
.oi3-step .pip {
  width: 24px; height: 2px;
  background: var(--c-secondary-tint-strong);
  border-radius: 0;
}
.oi3-step .pip.is-on { background: var(--c-primary); }
.oi3-step .pip.is-done { background: var(--c-secondary); }
.oi3-step .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-secondary);
  margin-left: 8px;
}

/* Verification row · GİB / MERSİS / KEP */
.oi3-verify {
  margin: 0 var(--s-md);
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
}
.oi3-verify-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-verify-row:last-child { border-bottom: 0; }
.oi3-verify-row .ic {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--c-secondary);
}
.oi3-verify-row .ic svg { width: 22px; height: 22px; stroke-width: 1.5; fill: none; stroke: currentColor; }
.oi3-verify-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi3-verify-row .body .t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; color: var(--c-primary); font-weight: 500;
  letter-spacing: 0.005em;
}
.oi3-verify-row .body .sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary); letter-spacing: 0.04em;
}
.oi3-verify-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--c-secondary-tint-strong);
  color: var(--c-secondary);
  flex-shrink: 0;
}
.oi3-verify-chip.is-pending {
  color: var(--c-secondary);
  border-color: var(--c-secondary-tint-strong);
}
.oi3-verify-chip.is-pending .dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px dashed var(--c-secondary);
  background: transparent;
  animation: oi3VerifyPulse 1200ms ease-in-out infinite;
}
.oi3-verify-chip.is-ok {
  color: var(--c-primary); border-color: var(--c-primary);
}
.oi3-verify-chip.is-ok .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary);
  animation: none;
}
.oi3-verify-chip.is-fail {
  color: var(--c-secondary); border-color: var(--c-secondary);
  text-decoration: line-through;
}
.oi3-verify-chip.is-fail .dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--c-secondary);
  background: transparent;
}
@keyframes oi3VerifyPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Plan card · vertical stack (mobile) */
.oi3-plan-list {
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px var(--s-md);
}
.oi3-plan-card {
  display: block;
  position: relative;
  padding: 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.oi3-plan-card:active { transform: scale(0.99); }
.oi3-plan-card .head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.oi3-plan-card .nm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--c-primary); font-weight: 500;
  letter-spacing: 0.01em;
}
.oi3-plan-card .price {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oi3-plan-card .price .per {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-secondary); margin-left: 4px;
}
.oi3-plan-card .feat {
  font-family: 'Libre Caslon Text', serif;
  font-size: 13px; color: var(--c-secondary); line-height: 1.5;
}
.oi3-plan-card .check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px;
  display: none;
  align-items: center; justify-content: center;
  color: var(--c-tertiary-deep);
}
.oi3-plan-card .check svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.oi3-plan-card.is-on {
  border-color: var(--c-tertiary);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--c-tertiary);
}
.oi3-plan-card.is-on .check { display: inline-flex; }

/* Permissions matrix row */
.oi3-perm-list {
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-perm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-perm-row:last-child { border-bottom: 0; }
.oi3-perm-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi3-perm-row .body .t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; color: var(--c-primary); font-weight: 500;
}
.oi3-perm-row .body .sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary); letter-spacing: 0.02em;
  line-height: 1.4;
}
.oi3-perm-row .body .diff {
  display: inline-flex; align-self: flex-start;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-tertiary-deep);
  border: 1px solid var(--c-tertiary-edge);
  background: var(--c-tertiary-tint);
}
.oi3-perm-toggle {
  width: 44px; height: 24px;
  background: var(--c-secondary-tint);
  border-radius: 12px; position: relative;
  border: 0; cursor: pointer; flex-shrink: 0;
}
.oi3-perm-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: var(--c-on-primary); border-radius: 50%;
  transition: transform 160ms ease;
}
.oi3-perm-toggle.is-on { background: var(--c-primary); }
.oi3-perm-toggle.is-on::after { transform: translateX(20px); }

/* Role picker tile */
.oi3-role-list {
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-role-pick {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
  cursor: pointer;
  background: transparent;
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
}
.oi3-role-pick:last-child { border-bottom: 0; }
.oi3-role-pick:active { background: var(--c-primary-tint); }
.oi3-role-pick .dot {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--c-secondary-tint-strong);
  border-radius: 50%;
  margin-top: 2px;
  background: transparent;
  position: relative;
}
.oi3-role-pick.is-on .dot { border-color: var(--c-primary); }
.oi3-role-pick.is-on .dot::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--c-primary); border-radius: 50%;
}
.oi3-role-pick .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi3-role-pick .body .t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; color: var(--c-primary); font-weight: 500;
  letter-spacing: 0.005em;
}
.oi3-role-pick .body .sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary); line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Section sub-head used inside multi-section single-page forms */
.oi3-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-secondary);
  padding: 22px var(--s-md) 8px;
}

/* Hero card · admin (company / branch / manager) */
.oi3-hero {
  margin: 16px var(--s-md);
  padding: 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint);
  display: flex; flex-direction: column; gap: 10px;
}
.oi3-hero .row {
  display: flex; align-items: center; gap: 12px;
}
.oi3-hero .nm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; color: var(--c-primary); font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.2;
}
.oi3-hero .meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-secondary);
}
.oi3-hero .meta-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-secondary);
  letter-spacing: 0.02em;
  padding-top: 6px;
  border-top: 0.5px solid var(--c-hairline);
}
.oi3-hero .meta-row span strong {
  color: var(--c-primary); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Compact in-row chip (used as plan/scope/parent-company tag in lists) */
.oi3-tag {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-secondary);
  border: 1px solid var(--c-secondary-tint-strong);
  background: transparent;
}
.oi3-tag.is-active {
  color: var(--c-primary); border-color: var(--c-primary);
}
.oi3-tag.is-warn {
  color: var(--c-tertiary-deep); border-color: var(--c-tertiary-edge);
  background: var(--c-tertiary-tint);
}

/* Avatar leading w/ Dicebear initials override (square-cornered, sharp) */
.oi3-logo-av {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  border-radius: 0;
}
.oi3-logo-av img { width: 100%; height: 100%; display: block; }

/* Scope chip — shown beside the trailing "+" CTA on list pages */
.oi3-scope-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-secondary);
  background: var(--c-surface);
  border: 1px solid var(--c-secondary-tint-strong);
  margin-right: 6px;
}

/* Toast (used after company create) */
.oi3-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sai-bottom) + 90px);
  transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: 0.04em;
  z-index: 60;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.oi3-toast.is-on { opacity: 1; }

/* Day grid — opening hours (7 rows) */
.oi3-hours {
  background: var(--c-surface);
  border-top: 0.5px solid var(--c-hairline);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-hours .row {
  display: grid; grid-template-columns: 90px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px var(--s-md);
  border-bottom: 0.5px solid var(--c-hairline);
}
.oi3-hours .row:last-child { border-bottom: 0; }
.oi3-hours .day {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; color: var(--c-primary); font-weight: 500;
}
.oi3-hours .hrs {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--c-secondary); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.oi3-hours .row.is-closed .hrs { color: var(--c-secondary); font-style: italic; }

/* Stats 2×2 grid · admin pages */
.oi3-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-secondary-tint);
  margin: 0 var(--s-md) 16px;
  border: 1px solid var(--c-secondary-tint);
}
.oi3-stats .cell {
  background: var(--c-surface);
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.oi3-stats .cell .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-secondary);
}
.oi3-stats .cell .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; color: var(--c-primary); line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.oi3-stats .cell .foot {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--c-secondary);
}

/* Ghost link · "+ yeni ..." inside tab panes */
.oi3-add-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px var(--s-md) 16px;
  padding: 10px 0;
  background: transparent; border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-tertiary-deep);
  cursor: pointer;
}
.oi3-add-link:active { opacity: 0.5; }

/* Destructive ghost in cta-dock (paired with .cta) — tobacco, not gold */
.oi3-destruct {
  display: inline-flex; width: 100%;
  align-items: center; justify-content: center;
  height: 44px;
  margin-top: 8px;
  background: transparent; color: var(--c-secondary);
  border: 1px solid var(--c-secondary-tint-strong);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.oi3-destruct:active { opacity: 0.5; }