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

/* ── BOOT SCREENS (config-missing + login-gate) ──────────────────────
   Both screens render before any view, so they must rely only on CSS
   custom properties already declared on :root and [data-theme="dark"].
   No inline colors — Theme.apply() can run before/after these screens
   and the dark-mode override is honored automatically (Phase B5). */
.cfg-wrap, .lg-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f5f2ec);
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  padding: 24px;
}
.cfg-card, .lg-card {
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 16px);
  padding: 40px 48px;
  max-width: 680px; width: 100%;
  box-shadow: var(--shadow, 0 4px 32px rgba(0,0,0,0.10));
}
.lg-card { max-width: 420px; padding: 48px 40px; text-align: center; }

.cfg-icon { font-size: 40px; margin-bottom: 16px; }
.cfg-title { font-size: 24px; font-weight: 700; color: var(--text, #1a2332); margin-bottom: 10px; }
.cfg-lead {
  font-size: 15px; color: var(--text-secondary, #4a5568); line-height: 1.6; margin-bottom: 28px;
  background: color-mix(in srgb, var(--warning, #ffc107) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #ffc107) 50%, transparent);
  border-radius: 8px; padding: 12px 16px;
}
.cfg-lead code { background: rgba(0,0,0,0.07); padding: 1px 5px; border-radius: 4px; font-family: monospace; }
[data-theme="dark"] .cfg-lead code { background: rgba(255,255,255,0.08); }
.cfg-steps {
  padding-left: 20px; display: flex; flex-direction: column; gap: 14px;
  font-size: 14px; color: var(--text, #2d3748); line-height: 1.7; margin-bottom: 28px;
}
.cfg-steps li { padding-left: 6px; }
.cfg-cmd {
  display: inline-block; margin-top: 4px;
  /* Fixed dark terminal bg in BOTH themes — the bright #7ee787 was on
     light --surface-elevated in light theme (1.53:1, fails WCAG AA).
     On #1a2332 it's ~10:1. */
  background: #1a2332; color: #7ee787;
  font-family: monospace; font-size: 13px;
  padding: 6px 14px; border-radius: 6px; user-select: all;
}
.cfg-hint { display: block; font-size: 12px; color: var(--text-secondary, #5a6660); margin-top: 3px; }
.cfg-steps a { color: var(--primary, #2563eb); }
kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border-strong, #cbd5e0);
  background: var(--surface, #f7fafc);
  font-size: 12px; font-family: monospace;
}
.cfg-example {
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden;
}
.cfg-example summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface, #f7fafc); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #4a5568); user-select: none;
}
.cfg-copy-btn {
  /* Brand accent text/border. Indigo --primary clears WCAG AA on the
     8%-tinted surface (~5.8:1), so light + dark share the same token. */
  font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer;
  padding: 3px 10px;
  border: 1px solid var(--primary, #2563eb); border-radius: 5px;
  background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent);
  transition: background 0.15s;
}
.cfg-copy-btn:hover { background: color-mix(in srgb, var(--primary, #2563eb) 16%, transparent); }
.cfg-code {
  display: block; max-height: 320px; overflow: auto;
  padding: 16px; margin: 0;
  background: var(--surface-elevated, #1a2332); color: var(--text, #e2e8f0);
  font-family: monospace; font-size: 12px; line-height: 1.6;
  white-space: pre; tab-size: 2;
}
@media (max-width: 640px) {
  .cfg-card { padding: 28px 20px; }
  .cfg-title { font-size: 20px; }
}

/* ── Login gate (PKCE) ─────────────────────────────── */
.lg-brand { font-size: 28px; font-weight: 700; color: var(--text, #2c3e34); margin-bottom: 24px; letter-spacing: -0.02em; }
.lg-lead  { color: var(--text-secondary, #5a6660); margin: 0 0 28px; font-size: 15px; line-height: 1.5; }
.lg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface, #fff); color: var(--text, #3c4043);
  border: 1px solid var(--border-strong, #dadce0); border-radius: 999px;
  padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: box-shadow 0.18s, background 0.18s;
  min-height: 44px;  /* WCAG 2.5.5 — sole CTA on the login gate */
}
.lg-btn:hover  { box-shadow: var(--shadow-sm, 0 1px 6px rgba(0,0,0,0.10));
                 background: color-mix(in srgb, var(--primary, #4F46E5) 6%, var(--surface, #fff)); }

/* ── Skip Link (WCAG 2.4.1 Bypass Blocks) ─────────────────
   First-tab keyboard target. Off-screen by default; on focus
   slides into the top-left corner so screen-reader / kbd users
   can jump past topbar/nav directly to <main id="app">. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  text-decoration: none; font-weight: 600;
  z-index: var(--z-skip); min-height: 44px;
  display: inline-flex; align-items: center;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--surface); outline-offset: 2px;
}
.lg-btn:active { background: color-mix(in srgb, var(--primary, #4F46E5) 12%, var(--surface, #fff)); }
.lg-hint { color: var(--text-secondary, #5a6660); font-size: 12px; margin: 24px 0 0; line-height: 1.5; }
@media (max-width: 640px) {
  .lg-card { padding: 36px 24px; }
  .lg-brand { font-size: 24px; }
}

/* Design tokens (light :root + [data-theme="dark"] + density) live in
   tokens.css — the single token SSOT (ADR-0051). app.css holds component
   styles only. */

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

body {
  /* Per-element typography — admin-configurable in Settings → Typography.
   * Each family/size/weight/style/decoration is emitted by Theme.apply()
   * as a --font-<element>-* custom property; elements below reference the
   * specific ones so font size, weight, italic, underline are all live. */
  font-family: var(--font-body-family, var(--font-body));
  font-size:       var(--font-body-size,       14px);
  font-weight:     var(--font-body-weight,     400);
  font-style:      var(--font-body-style,      normal);
  text-decoration: var(--font-body-decoration, none);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Premium ambient background gradient (sadece light mode) */
body::before {
  content: '';
  position: fixed; top: -25vh; right: -15vw;
  width: 65vw; height: 65vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; bottom: -25vh; left: -15vw;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after { opacity: 0.4; }

h1, h2, h3, h4, h5 {
  font-family:     var(--font-heading-family, var(--font-heading));
  font-weight:     var(--font-heading-weight, 500);
  font-style:      var(--font-heading-style,  normal);
  text-decoration: var(--font-heading-decoration, none);
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.2;
}
h1 { font-size: var(--font-heading-size, 22px); }
h2 { font-size: calc(var(--font-heading-size, 22px) * 0.85); }
h3 { font-size: calc(var(--font-heading-size, 22px) * 0.72); }
h4 { font-size: calc(var(--font-heading-size, 22px) * 0.64); }
h5 { font-size: calc(var(--font-heading-size, 22px) * 0.58); }

p { line-height: 1.6; }

input, button, select, textarea { font-family: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted-light); }
:where(a) { color: var(--primary); text-decoration: none; transition: color var(--t-fast) var(--ease); }
:where(a:hover) { color: var(--primary-dark); }

/* Selection */
::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--text); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15,22,35,0.12);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15,22,35,0.2); background-clip: padding-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); background-clip: padding-box; }

/* Focus ring — keyboard-only */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 11px;
  font-family:     var(--font-button-family, var(--font-body));
  font-size:       var(--font-button-size,   13px);
  font-weight:     var(--font-button-weight, 600);
  font-style:      var(--font-button-style,  normal);
  text-decoration: var(--font-button-decoration, none);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
  white-space: nowrap;
  letter-spacing: -0.01em;
  position: relative;
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  /* Bold weight + subtle text-shadow for label legibility on the brand
     gradient — an aesthetic choice (indigo --primary already clears AA
     against white on its own). */
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent),
              0 1px 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 8px 22px color-mix(in srgb, var(--primary) 36%, transparent),
              0 2px 6px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Dark theme: deepen the gradient so white text reaches the 4.5:1
   threshold even on cool surfaces; brand identity preserved. */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #4A6A60, #2F4A42);
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
              0 4px 14px rgba(0,0,0,0.45),
              0 1px 3px rgba(0,0,0,0.30);
}

.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--text);
  background: rgba(15,22,35,0.04);
}
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.06); }

.btn-danger {
  background: rgba(220,74,45,0.08);
  color: var(--danger);
  border-color: rgba(220,74,45,0.22);
}
.btn-danger:hover {
  background: rgba(220,74,45,0.14);
  border-color: rgba(220,74,45,0.35);
}

.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 9px; min-height: 32px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled {
  opacity: 0.5; cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-sm);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── BADGES & CHIPS ───────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: var(--border); color: var(--text-secondary);
}
.badge.is-success { background: rgba(46,175,125,0.12); color: var(--success); }
.badge.is-warn    { background: rgba(224,160,64,0.12); color: var(--warning); }
.badge.is-danger  { background: rgba(217,90,62,0.12); color: var(--danger); }
.badge.is-info    { background: rgba(111,155,196,0.12); color: var(--info); }
.badge.is-primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 9px;
  font-size: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
}
.chip.is-active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.chip-x { cursor: pointer; opacity: 0.5; font-size: 14px; line-height: 1; }
.chip-x:hover { opacity: 1; }

/* ── TOPBAR ───────────────────────────────────────────── */
.topbar {
  /* --z-topbar sits above --z-tour so the Operasyon/Yönetim dropdown menus
     render above any active onboarding tour tip (the tour anchors itself to
     topbar nav-items and can otherwise cover its own click target), and
     below --z-overlay so modals/sheets cover the header. See tokens.css. */
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar);
  background: rgba(245,242,236,0.78);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--border);
  transition: right var(--t-slow) var(--ease);
}
[data-theme="dark"] .topbar { background: rgba(14,19,28,0.82); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; max-width: 1680px; margin: 0 auto;
  gap: 16px;
}
.topbar-brand {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600; color: var(--primary-dark);
  letter-spacing: -0.01em;
  /* Wrap long brand names onto multiple lines instead of clipping with an
   * ellipsis — the full name must always be readable. Cap width so the
   * brand never eats the center nav; grow vertically instead. */
  max-width: 200px;
  min-height: 36px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.2;
  flex-shrink: 0;
  padding: 4px 12px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 9px;
  /* Center brand text both vertically and horizontally inside the frame
   * (Bölüm 3.3) — previously relied on parent flex behaviour; explicit
   * is more robust against long multi-line brand names. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
[data-theme="dark"] .topbar-brand { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
/* Nav is the only shrinkable element in the header. Hide the scrollbar
 * visually but keep it functional: edge fade mask + thin webkit thumb
 * hints at overflow without taking real estate. Links are flex-shrink:0
 * + nowrap so they never word-wrap or collapse into an ellipsis — missing
 * links were unreachable before because the nav silently clipped them. */
.topbar-nav {
  /* overflow MUST stay visible — Faz 5.2 (grouped <details> dropdowns)
     anchors `.nav-group-menu` as an absolutely-positioned child below
     the trigger. Setting any overflow value here creates a clipping
     box that cuts off the dropdown menu vertically and makes the
     Operasyon/Yönetim buttons look unresponsive even though the
     details element toggled open correctly. Horizontal scroll +
     fade-mask styling were inherited from the pre-Faz-5.2 flat link
     list (10+ links) and are no longer needed with two dropdown
     triggers. */
  display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; justify-content: center;
  background: rgba(15,22,35,0.025);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
[data-theme="dark"] .topbar-nav { background: rgba(255,255,255,0.025); }
.topbar-link {
  padding: 7px 14px; border-radius: 9px;
  font-family:     var(--font-nav-family, var(--font-body));
  font-size:       var(--font-nav-size,   12.5px);
  font-weight:     var(--font-nav-weight, 600);
  font-style:      var(--font-nav-style,  normal);
  text-decoration: var(--font-nav-decoration, none);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease),
              background var(--t-base) var(--ease);
}
.topbar-link:hover { color: var(--primary); }
.topbar-link.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15,22,35,0.06), 0 1px 2px rgba(15,22,35,0.03);
}
/* Admin pill — same shape as nav links but with a tinted background so
 * it reads as "elevated" entry into the admin panel. Visible only to
 * admins (gated in topbar.js _NAV_LINKS roles). */
.topbar-link.is-admin {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}
.topbar-link.is-admin:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
[data-theme="dark"] .topbar-link.is-admin {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}

/* CSS-only instant tooltips. Any element with a non-empty `data-tooltip`
 * attribute shows a 100ms-fade tooltip below itself on hover/focus.
 * Replaces native `title` (which has a 700-1000ms OS-controlled delay).
 * i18n.refresh() bridges `data-i18n-title` → `data-tooltip` automatically,
 * so existing icon-only markup gets instant feedback without any change.
 * Opt-out: set `data-tooltip=""` (empty) to suppress on a specific element. */
[data-tooltip]:not([data-tooltip=""]) {
  position: relative;
}
/* Absolutely-positioned overlay chips (pano room×time + calendar day/week
   event blocks) must KEEP their own `position: absolute` when they gain a
   tooltip on hover. The rule above (`title`→`data-tooltip` bridge sets it)
   would otherwise drop them back into normal flow and the slot grid paints
   over them — the "randevu hover'da kayboluyor" bug. Absolute positioning is
   already a valid anchor for the ::after tooltip, so nothing is lost. */
.bd-event[data-tooltip]:not([data-tooltip=""]),
.cal-event[data-tooltip]:not([data-tooltip=""]) {
  position: absolute;
}
[data-tooltip]:not([data-tooltip=""]):hover::after,
[data-tooltip]:not([data-tooltip=""]):focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 5px 10px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border: 1px solid var(--tooltip-border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Wrap rather than truncate. Cap at viewport-minus-margin so tooltip
     never extends past the screen, regardless of host element width. */
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
  max-width: min(320px, calc(100vw - 32px));
  width: max-content;
  border-radius: 6px;
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: var(--tooltip-shadow);
  animation: topbar-tip-in 100ms ease both;
  /* Honour a JS-supplied horizontal nudge: when the tooltip would clip
     the viewport edge, _clampTooltip in src/infra/i18n.js writes
     `--tt-shift` (in px) onto the host element to push it back inside. */
  margin-left: var(--tt-shift, 0px);
}

/* Modern browsers with CSS Anchor Positioning (Chrome 125+, Safari 18.4+
   as of 2025) get a fully resolved viewport-clamped position via the
   spec — no JS measurement needed. The fallback above continues to work
   on engines without `position-try-fallbacks`. */
@supports (position-try-fallbacks: --x) {
  [data-tooltip]:not([data-tooltip=""]) {
    anchor-name: --akis-tt;
  }
  [data-tooltip]:not([data-tooltip=""]):hover::after,
  [data-tooltip]:not([data-tooltip=""]):focus-visible::after {
    position: absolute;
    position-anchor: --akis-tt;
    inset: auto;
    top: anchor(end);
    justify-self: anchor-center;
    transform: translateY(6px);
    margin-left: 0;
    position-try-fallbacks: --tt-shift-left, --tt-shift-right;
  }
}
@position-try --tt-shift-left  { justify-self: end;   }
@position-try --tt-shift-right { justify-self: start; }
@keyframes topbar-tip-in {
  from { opacity: 0; transform: translate(-50%, 0); }
  to   { opacity: 1; transform: translate(-50%, 6px); }
}
/* Singleton suppressor: JS sets this attribute on the previously-active
 * host when a new tooltip takes focus, preventing two tooltips at once. */
[data-tooltip-suppress]::after { display: none !important; }

/* Segmented TR | EN language toggle (Bölüm 3.2) — shows BOTH locales
 * with the active one highlighted. Tapping anywhere on the button flips
 * to the other locale via I18N.toggle(). */
.topbar-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.topbar-lang-toggle:hover { border-color: var(--border-strong); }
.topbar-lang-toggle .lang-tr,
.topbar-lang-toggle .lang-en {
  /* Inactive locale: full opacity + the neutral --muted token
     (zinc-600, ~7:1 on white, AA). Dark theme overrides below. */
  opacity: 1;
  color: var(--muted);
  transition: opacity 150ms ease, color 150ms ease;
}
.topbar-lang-toggle .lang-tr.is-active,
.topbar-lang-toggle .lang-en.is-active {
  /* Active locale = the brand accent (--primary). Indigo-600 clears AA
     on white for this 11px bold label; dark theme matches below. */
  color: var(--primary);
}
[data-theme='dark'] .topbar-lang-toggle .lang-tr,
[data-theme='dark'] .topbar-lang-toggle .lang-en {
  color: var(--text-secondary);
}
/* Active locale inherits the base `color: var(--primary)` rule in both
   themes (--primary is not redefined for dark), so no dark override needed. */
.topbar-lang-toggle .lang-sep {
  opacity: 0.35;
  font-weight: 400;
}

.topbar-right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

.topbar-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9px;
  font-size: 11px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  /* Width change is animated via :root interpolate-size + transition:all,
     so the chip glides between "Senkronize ediliyor" → "Güncel" instead
     of snapping. Neighbours follow the same easing → no perceived flicker. */
}
.topbar-sync:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.topbar-sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  transition: background var(--t-base) var(--ease);
}
.topbar-sync.is-syncing .topbar-sync-dot {
  background: var(--info); animation: pulse 1.2s ease-in-out infinite;
}
.topbar-sync.is-synced .topbar-sync-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(43,168,117,0.15);
}
.topbar-sync.is-offline { color: var(--warning); border-color: rgba(229,164,53,0.3); }
.topbar-sync.is-offline .topbar-sync-dot { background: var(--warning); }
.topbar-sync.is-conflict { color: var(--danger); border-color: rgba(220,74,45,0.3); }
.topbar-sync.is-conflict .topbar-sync-dot { background: var(--danger); }
.topbar-sync.is-error    { color: var(--danger); border-color: rgba(220,74,45,0.3); }
.topbar-sync.is-error .topbar-sync-dot    { background: var(--danger); animation: sync-error-pulse 2s ease-in-out infinite; }
@keyframes sync-error-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.topbar-sync.is-disabled {
  opacity: 0.5; cursor: pointer;
  border-style: dashed;
  background: transparent;
}
.topbar-sync.is-disabled .topbar-sync-dot { background: var(--muted-light); }
.topbar-sync.is-disabled:hover { opacity: 0.75; transform: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.topbar-contact-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 9px; font-size: 12px; font-weight: 600;
  color: var(--primary); max-width: 200px;
}
.topbar-contact-chip .chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-role {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--primary);
  white-space: nowrap; flex-shrink: 0;
}
.topbar-role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.topbar-role.is-admin        { background: rgba(46,175,125,0.14); color: #0F5138; border-color: rgba(46,175,125,0.36); }
.topbar-role.is-admin        .topbar-role-dot { background: var(--success); }
.topbar-role.is-manager      { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.topbar-role.is-expert       { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 36%, transparent); }
.topbar-role.is-expert       .topbar-role-dot { background: var(--accent); }
.topbar-role.is-receptionist { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.topbar-role.is-viewer       { background: rgba(120,130,140,0.14); color: #4a5560; border-color: rgba(120,130,140,0.32); }
.topbar-role.is-viewer       .topbar-role-dot { background: #7a8591; }
[data-theme="dark"] .topbar-role        { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #F1EEE6; }
[data-theme="dark"] .topbar-role.is-admin   { background: rgba(46,175,125,0.20); color: #8FEFC4; }
[data-theme="dark"] .topbar-role.is-expert  { background: rgba(224,160,64,0.20); color: #FFD06B; }
[data-theme="dark"] .topbar-role.is-viewer  { color: #B0BAC6; }

.topbar-settings-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all var(--t-base) var(--ease); flex-shrink: 0;
  color: var(--text-secondary);
  text-decoration: none;
}
.topbar-settings-btn:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px) rotate(35deg);
}
.topbar-settings-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.topbar-settings-btn svg { display: block; }

/* Topbar — "My Preferences" button. Same chrome as the settings gear
   so the two icons read as a coherent pair (workspace settings vs.
   personal prefs); subtle scale-on-hover instead of the gear's spin
   so the user can tell them apart at a glance. */

.topbar-kp-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  cursor: pointer; font-size: 16px; display: flex;
  align-items: center; justify-content: center;
  transition: all var(--t-base) var(--ease); flex-shrink: 0;
  color: var(--text-secondary);
}
.topbar-kp-btn:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* ── Topbar Language Switcher ────────────────────────── */
.topbar-lang { display: flex; align-items: center; }

/* Segment toggle (used for ≤3 languages) */
.topbar-lang-seg {
  display: inline-flex;
  background: rgba(15,22,35,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 1px;
}
[data-theme="dark"] .topbar-lang-seg { background: rgba(255,255,255,0.04); }
.topbar-lang-btn {
  border: none; background: transparent;
  padding: 5px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--t-fast) var(--ease),
              background var(--t-base) var(--ease);
  min-width: 30px;
}
.topbar-lang-btn:hover { color: var(--text); }
.topbar-lang-btn.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15,22,35,0.06), 0 1px 2px rgba(15,22,35,0.03);
}

/* Single-button toggle (used when exactly 2 languages — the common case) */
.topbar-lang-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: var(--font-body);
  min-width: 38px;
  min-height: 32px;
  transition: color var(--t-fast) var(--ease),
              background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
  box-shadow: 0 1px 3px rgba(15,22,35,0.06), 0 1px 2px rgba(15,22,35,0.03);
}
.topbar-lang-toggle:hover { border-color: var(--primary); transform: translateY(-1px); }
[data-theme="dark"] .topbar-lang-toggle { background: rgba(255,255,255,0.04); }

/* Dropdown (used when more than 3 languages) */
.topbar-lang-select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-base) var(--ease);
}
.topbar-lang-select:hover { border-color: var(--primary); transform: translateY(-1px); }

@media (max-width: 768px) {
  .topbar-lang-btn { padding: 4px 8px; min-width: 26px; font-size: 10px; }
}

/* Theme preset cards (Settings → Appearance) */
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}
.theme-preset-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.theme-preset-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.theme-preset-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}
.tpc-swatches { display: flex; gap: 6px; }
.tpc-sw { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.tpc-label { font-size: 12.5px; font-weight: 600; color: var(--text); }

.theme-preview-sandbox {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.tps-head { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.tps-body { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.tps-row  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tps-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 11px; font-weight: 600; }
.tps-link { color: var(--primary); font-size: 12px; font-weight: 600; text-decoration: underline; }

/* Plugin rows (Settings → Plugins) */
.plugin-list { display: flex; flex-direction: column; gap: 8px; }
.plugin-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.plugin-settings-link {
  font-size: 11px;
}

/* Plugin per-module settings page (Bölüm 7) */
.plugin-page-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.plugin-page-icon { font-size: 36px; line-height: 1; }
.plugin-page-meta { flex: 1 1 auto; }
/* .st-title base — declared before .plugin-page-meta override so specificity
 * gradient ascends. Used by both Settings (#/settings) and Plugin pages. */
.st-title { font-size: var(--page-title-size); font-weight: var(--page-title-weight); letter-spacing: var(--page-title-tracking); font-family: var(--font-heading); margin-bottom: 24px; }
.plugin-page-meta .st-title { margin: 0 0 4px; }
.plugin-page-toggle {
  display: flex; align-items: center; gap: 10px;
}
.plugin-page-body { display: flex; flex-direction: column; gap: 16px; }
.plugin-icon { font-size: 22px; line-height: 1; }
.plugin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plugin-label { font-size: 13px; font-weight: 700; color: var(--text); }
.plugin-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  font-weight: 700;
}
.plugin-badge-core        { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.plugin-badge-integration { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
.plugin-badge-tier-essential    { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
.plugin-badge-tier-standard     { background: rgba(46,175,125,0.16); color: #0F5138; }
.plugin-badge-tier-optional     { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
.plugin-badge-tier-experimental { background: rgba(217, 90, 62, 0.16); color: #9A3B1F; }
[data-theme="dark"] .plugin-badge-tier-standard     { color: #5ADBA4; }
[data-theme="dark"] .plugin-badge-tier-optional     { color: #E5BC8A; }
[data-theme="dark"] .plugin-badge-tier-experimental { color: #F09080; }
.plugin-status {
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}
.plugin-status.is-on  { background: rgba(46,175,125,0.18); color: #0F5138; }
.plugin-status.is-off { background: rgba(15,22,35,0.08);   color: var(--muted); }
.plugin-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
[data-theme="dark"] .plugin-status.is-off { background: rgba(255,255,255,0.06); }

/* Typography rows (Settings → Typography) — compact */
.typography-rows { display: flex; flex-direction: column; gap: 6px; }
.typography-row {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.typography-row-head {
  font-size: 11px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.typography-row-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.8fr auto auto auto;
  gap: 6px; align-items: end;
}
.typography-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.typography-field-lbl {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
.typography-field-check {
  flex-direction: row; align-items: center; gap: 4px;
  font-size: 11px; padding-bottom: 4px;
}
.typography-field-check input { margin: 0; }
.typography-family, .typography-weight, .typography-size {
  padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-size: 11px; min-width: 0;
}
.typography-sample {
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px dashed var(--border);
  color: var(--text);
  min-height: 20px; line-height: 1.3;
}
@media (max-width: 768px) {
  .typography-row-grid { grid-template-columns: 1fr 1fr 1fr auto auto auto; }
}
@media (max-width: 640px) {
  .typography-row-grid { grid-template-columns: 1fr 1fr; }
}

/* Copy-fields checkbox grid (Settings → Identity) */
.st-copy-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 10px;
  margin-top: 6px;
}
.st-copy-field {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}

/* ── Topbar Brand button ─────────────────────────────── */
.topbar-brand-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  cursor: pointer; font-size: 16px; display: flex;
  align-items: center; justify-content: center;
  transition: all var(--t-base) var(--ease); flex-shrink: 0;
}
.topbar-brand-btn:hover {
  background: var(--accent-50);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ── Randevu Bildirim Modal ──────────────────────────── */
.rb-modal { max-width: 520px; }
.rb-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rb-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #218359);
  color: #fff; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(46,175,125,0.3);
}
.rb-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rb-question { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }

.rb-channels { display: flex; flex-direction: column; gap: 12px; }
.rb-channel {
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px 14px;
  background: var(--bg);
  transition: border-color var(--t-base) var(--ease);
}
.rb-channel:hover { border-color: var(--primary); }
.rb-channel.rb-disabled { opacity: 0.45; pointer-events: none; }
.rb-channel-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.rb-channel-icon { font-size: 16px; }
.rb-channel-name { font-size: 13px; font-weight: 700; color: var(--text); }
.rb-channel-target {
  font-size: 11px; color: var(--muted); margin-left: auto;
  font-family: ui-monospace, monospace;
}
.rb-preview {
  font-size: 11px; line-height: 1.5;
  background: var(--surface);
  padding: 8px 11px;
  border-radius: 8px;
  margin-bottom: 10px;
  max-height: 110px; overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--font-body);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.rb-preview-subj {
  font-size: 11px; padding: 6px 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 6px;
}

/* ── Brand Contact Modal ─────────────────────────────── */
.bc-modal { max-width: 480px; padding: 0; overflow: hidden; }
.bc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 24px 12px;
  background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
  border-bottom: 1px solid var(--border);
}
.bc-brand { flex: 1; }
.bc-brand-name {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 600;
  color: var(--primary); letter-spacing: -0.02em;
}
.bc-brand-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.bc-close {
  background: none; border: none; cursor: pointer;
  font-size: 24px; color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast) var(--ease);
}
.bc-close:hover { background: rgba(15,22,35,0.06); color: var(--text); }
.bc-sub { font-size: 12px; color: var(--muted); padding: 12px 24px 6px; }
.bc-empty { font-size: 13px; color: var(--muted); padding: 32px 24px; text-align: center; }
.bc-list {
  display: flex; flex-direction: column;
  padding: 6px 16px;
}
.bc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}
.bc-row:last-child { border-bottom: none; }
.bc-row:hover { background: color-mix(in srgb, var(--primary) 3%, transparent); border-radius: 8px; }
.bc-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.bc-info { flex: 1; min-width: 0; }
.bc-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.bc-value {
  font-size: 13px; font-weight: 500; color: var(--text);
  word-break: break-word; display: block;
  text-decoration: none;
}
.bc-value:hover { color: var(--primary); }
.bc-social-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
}
.bc-social-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.bc-social-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.bc-actions {
  display: flex; gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
}
.bc-actions .btn { flex: 1; }

/* Share menu — toggled below the "Aktar" button. Lives inside the modal
   so the overlay handles dismissal; flex column on desktop, full-width
   wrap on small screens. */
.bc-share-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 24px 16px;
  margin-top: -8px;
}
.bc-share-menu[hidden] { display: none; }
.bc-share-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-align: left;
}
.bc-share-item:hover {
  border-color: var(--primary-light);
  background: var(--primary-50);
}
.bc-share-ico { font-size: 16px; line-height: 1; }
.bc-share-lbl { flex: 1; }
@media (max-width: 480px) {
  .bc-share-menu { grid-template-columns: 1fr; }
}

/* ── Admin: Contact Cleanup ──────────────────────────── */
.cu-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 20px;
  color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.cu-cluster {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}
.cu-cluster-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.cu-cluster-title {
  margin: 0; font-size: 15px; font-weight: 600;
}
.cu-contact {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.cu-contact:last-child { border-bottom: 0; }
.cu-contact.is-canonical {
  background: linear-gradient(90deg, rgba(46,175,125,0.07), transparent);
}
.cu-contact-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.cu-tag {
  display: inline-block; padding: 2px 8px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
}
.cu-tag-canonical {
  background: rgba(46,175,125,0.15);
  color: #0F5138;
}
.cu-tag-dup {
  background: rgba(220,74,45,0.12);
  color: #762518;
}
.cu-contact-name {
  font-size: 14px; font-weight: 500; color: var(--text);
}
.cu-contact-rn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted);
  margin-left: auto;
}
.cu-contact-meta {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 4px; padding-left: 0;
}

/* ── Modal: MergeContacts — field-by-field conflict picker ─ */
.mc-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.mc-row--conflict { border-color: var(--warning, #d97706); background: rgba(217,119,6,0.04); }
.mc-row--auto     { border-style: dashed; }
.mc-row--same     { opacity: 0.7; }
.mc-row-head {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.mc-label { font-size: 13px; font-weight: 600; color: var(--text); }
.mc-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-hover); color: var(--muted);
  white-space: nowrap;
}
.mc-badge--ok       { background: rgba(42,125,79,0.12); color: #2a7d4f; }
.mc-badge--auto     { background: rgba(15,99,180,0.10); color: #0f63b4; }
.mc-badge--conflict { background: rgba(217,119,6,0.15); color: #d97706; }
.mc-value {
  font-size: 13px; color: var(--text); line-height: 1.4;
  word-break: break-word;
}
.mc-choice {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.mc-choice:hover { background: var(--bg-hover); }
.mc-choice input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.mc-choice-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 8px;
  background: var(--bg-hover); color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
.mc-choice-tag--canonical { background: rgba(42,125,79,0.12); color: #2a7d4f; }
.mc-choice-tag--dup       { background: rgba(192,57,43,0.12); color: #c0392b; }
.mc-choice-val { font-size: 13px; color: var(--text); line-height: 1.4; flex: 1; min-width: 0; word-break: break-word; }

/* ── Admin: Notification Templates ───────────────────── */
.nt-list { display: flex; flex-direction: column; gap: 8px; }
.nt-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease);
}
.nt-row:hover { border-color: var(--border-strong); }
.nt-row.is-inactive { opacity: 0.55; }
.nt-ch {
  font-size: 22px; line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.nt-body { flex: 1; min-width: 0; }
.nt-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.nt-tag {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; font-weight: 500;
  background: var(--border); color: var(--muted);
  border-radius: 6px;
  margin-left: 4px;
}
.nt-meta {
  font-size: 11px; color: var(--muted);
  margin-bottom: 4px;
}
.nt-preview {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.nt-editor { display: flex; flex-direction: column; gap: 14px; }
.nt-tokens {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.nt-token {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.nt-token:hover {
  background: var(--primary-50);
  border-color: var(--primary-light);
}
.nt-token-hint {
  font-size: 11px; color: var(--muted);
  margin: 4px 0 6px;
}

/* ── Contact Communication Modal ─────────────────────── */
.cc-modal {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
}
.cc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.cc-sub {
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
}
.cc-section { padding: 14px 20px; }
.cc-section + .cc-section { border-top: 1px solid var(--border); }
.cc-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
  margin-bottom: 8px;
}
.cc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cc-action {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-base) var(--ease);
}
.cc-action:hover:not(.is-disabled) {
  border-color: var(--primary-light);
  background: var(--primary-50);
}
.cc-action.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cc-action-ico { font-size: 18px; line-height: 1; }
.cc-action-lbl { font-weight: 600; }
.cc-action-hint { font-size: 11px; color: var(--muted); }
.cc-tpl-list {
  display: flex; flex-direction: column; gap: 4px;
}
.cc-tpl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.cc-tpl-row:hover {
  border-color: var(--primary-light);
  background: var(--primary-50);
}
.cc-tpl-ico { font-size: 16px; line-height: 1; }
.cc-tpl-body { flex: 1; min-width: 0; }
.cc-tpl-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cc-tpl-preview {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-tpl-go {
  font-size: 18px; color: var(--muted);
  flex-shrink: 0;
}
.cc-empty {
  font-size: 12px; color: var(--muted);
  margin: 0;
}
.cc-empty a { color: var(--primary); font-weight: 500; }
@media (max-width: 480px) {
  .cc-actions { grid-template-columns: 1fr; }
}

/* ── Topbar Health chip ─────────────────────────────── */
.topbar-health {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9px;
  min-width: 32px; min-height: 32px;
  justify-content: center;
  font-size: 11px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  transition: all var(--t-base) var(--ease);
  font-family: var(--font-body);
}
.topbar-health:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.topbar-health-icon { font-size: 9px; }
.topbar-health.is-ok    { color: #1A7850; border-color: rgba(43,168,117,0.25); }
.topbar-health.is-ok    .topbar-health-icon { color: var(--success); }
.topbar-health.is-warn  { color: var(--warning); border-color: rgba(229,164,53,0.4); background: rgba(229,164,53,0.06); }
.topbar-health.is-warn  .topbar-health-icon { color: var(--warning); }
/* var(--danger) #DC4A2D on the light error-chip bg (#f3e7e1) is 3.42:1 —
   fails WCAG AA. Darker red #B5331F (5.0:1) for light; dark theme keeps
   --danger (its chip bg is dark, contrast holds). */
.topbar-health.is-error { color: #b5331f;  border-color: rgba(220,74,45,0.4);  background: rgba(220,74,45,0.06);
                          animation: bd-pulse 2.4s ease-in-out infinite; }
.topbar-health.is-error .topbar-health-icon { color: #b5331f; }
[data-theme='dark'] .topbar-health.is-error,
[data-theme='dark'] .topbar-health.is-error .topbar-health-icon { color: var(--danger); }

/* ── System Health Modal ────────────────────────────── */
.sh-modal { max-width: 640px; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sh-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sh-loading { text-align: center; color: var(--muted); padding: 30px; font-size: 13px; }
.sh-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
  margin-bottom: 16px; padding-right: 4px;
}
.sh-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
  border-left: 3px solid var(--muted);
  transition: all var(--t-base) var(--ease);
}
.sh-row:hover { box-shadow: var(--shadow-sm); }
.sh-row.is-ok    { border-left-color: var(--success); }
.sh-row.is-warn  { border-left-color: var(--warning); background: rgba(229,164,53,0.03); }
.sh-row.is-error { border-left-color: var(--danger);  background: rgba(220,74,45,0.04); }
.sh-row.is-off   { border-left-color: var(--muted-light); opacity: 0.7; }
.sh-row-icon { font-size: 22px; flex-shrink: 0; }
.sh-row-info { flex: 1; min-width: 0; }
.sh-row-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.sh-row-status { font-size: 9px; }
.sh-row-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Google Setup Wizard ─────────────────────────────── */
.gs-modal { max-width: 640px; }
.gs-intro {
  font-size: 13px; color: var(--text-secondary);
  background: var(--primary-50); padding: 12px 14px;
  border-radius: 10px; margin-bottom: 18px;
  border-left: 3px solid var(--primary);
}
.gs-step {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.gs-step:last-of-type { border-bottom: none; }
.gs-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 30%, transparent);
}
.gs-step-body { flex: 1; }
.gs-step-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.gs-step-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.gs-api-list {
  font-size: 12px; padding-left: 18px; margin-bottom: 8px;
  color: var(--text-secondary);
}
.gs-api-list li { padding: 2px 0; }
.gs-opt { color: var(--muted); font-size: 11px; }
.gs-copy {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); padding: 8px 12px; border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.gs-copy code { font-size: 12px; flex: 1; word-break: break-all; color: var(--text); font-family: ui-monospace, monospace; }
.gs-input-row { display: flex; gap: 8px; }
.gs-input-row input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid var(--border-strong); border-radius: 9px;
  font-size: 13px; font-family: ui-monospace, monospace;
  background: var(--surface); color: var(--text);
}
.gs-input-row input:focus { outline: none; border-color: var(--primary); }
.gs-current { font-size: 11px; color: var(--muted); margin-top: 6px; }
.gs-current code { background: rgba(15,22,35,0.04); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; }

.st-warn {
  padding: 10px 14px; background: rgba(229,164,53,0.1);
  border-left: 3px solid var(--warning); border-radius: 8px;
  font-size: 12px; color: var(--warning); margin-bottom: 12px;
}

/* ── APP CONTAINER ────────────────────────────────────── */
.app {
  position: relative;
  min-height: 100vh;
  padding-top: 64px;
}

/* connect-banner CSS Faz 10/1'de kaldırıldı (StatusBar emer). */

/* ── CONTACT PANEL (retired) ──────────────────────────────
   The 320px right-docked ContactPanel was retired — contacts are now the
   full-page #/contacts route (IA v3 / ADR-0036). Its host element, the
   `.app` right-gutter, and all `.kp-*` styles were removed, so every page
   uses the full width (no empty space on the right). */

/* ── DASHBOARD ───────────────────────────────────────── */
/* ── DASHBOARD — Today × Rooms Timeline ──────────────── */
.bd-container {
  max-width: var(--page-max-wide); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}

/* Empty alias — legacy .dash-empty class still used */
.dash-empty { font-size: 13px; color: var(--muted); padding: 14px 0; }

/* Pano action bar (row 1) — range lens + quick actions + stats / new appt
   on one compact wrapping row. The date nav lives in .bd-datebar directly
   above the grid, not at the page top (owner: minimal categorised top,
   tarih takvimin hemen üstünde, 2026-05-31). */
.bd-actionbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; margin-bottom: 10px;
}
.bd-actionbar .bd-range,
.bd-actionbar .bd-quick { margin-bottom: 0; }
.bd-actionbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bd-datebar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 0 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.bd-datebar-title {
  font-size: 16px; font-weight: 600; font-family: var(--font-heading);
  letter-spacing: -0.01em; text-transform: capitalize;
}
.bd-nav-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-secondary);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.bd-nav-btn:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.05); }
.bd-today-btn {
  height: 36px; padding: 0 18px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); font-family: var(--font-body);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.bd-today-btn:hover { border-color: var(--primary); color: var(--primary); }
.bd-today-btn.is-active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.bd-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(46,175,125,0.18);
  animation: bd-pulse 2s ease-in-out infinite;
}
@keyframes bd-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(46,175,125,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(46,175,125,0.05); }
}

/* Quick actions */
/* Quick actions — compact inline pills (icon + label side by side), left
   aligned and auto-width so 2-3 buttons don't stretch across the whole
   pano (owner: "tek satıra yayılmış, daha efektif olsun", 2026-05-31). */
.bd-quick {
  display: flex; flex-wrap: wrap;
  gap: 8px; margin-bottom: 16px;
}
.bd-quick-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none; color: var(--text);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.bd-quick-card:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.bd-quick-icon { font-size: 16px; line-height: 1; }
.bd-quick-label { font-size: 13px; font-weight: 600; color: var(--text); }
.bd-quick-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 10px;
  min-width: 18px; text-align: center;
}

/* Stat bar */
.bd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 18px;
}
.bd-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  position: relative; overflow: hidden;
}
.bd-stat::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--muted); opacity: 0.5;
}
.bd-stat.is-total::before  { background: var(--primary); opacity: 1; }
.bd-stat.is-done::before   { background: var(--success); opacity: 1; }
.bd-stat.is-up::before     { background: var(--info); opacity: 1; }
.bd-stat.is-cancel::before { background: var(--danger); opacity: 1; }
.bd-stat.is-rev::before    { background: var(--accent); opacity: 1; }
.bd-stat.is-reservation::before { background: var(--warning); opacity: 1; }
.bd-stat.is-followup::before { background: var(--warning); opacity: 1; }
.bd-stats.is-kpi { margin-bottom: 10px; }
.bd-stat-value {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 600; color: var(--text);
  letter-spacing: -0.02em; line-height: 1.1;
}
.bd-stat-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Stats / report drawer (left slide-in) — pano body stays appointment-first;
   KPI cards + day stat-bar live here, toggled from the header (2026-05-31). */
.bd-stats-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.bd-stats-overlay.is-open { opacity: 1; pointer-events: auto; }
.bd-stats-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: calc(var(--z-overlay) + 1);
  width: min(320px, 86vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.14);
  transform: translateX(-100%); transition: transform 0.22s ease;
}
.bd-stats-drawer.is-open { transform: translateX(0); }
.bd-stats-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.bd-stats-drawer-title { font-size: 16px; font-weight: 600; margin: 0; font-family: var(--font-heading); }
.bd-stats-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted); padding: 2px 6px;
}
.bd-stats-close:hover { color: var(--text); }
.bd-stats-drawer-body { padding: 16px 18px; overflow-y: auto; }
.bd-stats-drawer-body .bd-stats {
  grid-template-columns: 1fr 1fr; margin-bottom: 14px;
}

/* Range toggle (Gün / Hafta / Tümü) */
.bd-range { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

/* Section title above the day grid (e.g. "Oda × Saat") */

/* Agenda (week / all modes) */
.bd-agenda { display: flex; flex-direction: column; gap: 18px; }
.bd-agenda-empty {
  text-align: center; padding: 48px 20px; color: var(--muted);
  font-size: 14px; background: var(--surface);
  border: 1px dashed var(--border-strong); border-radius: 16px;
}
.bd-agenda-date {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.bd-agenda-date.is-today { color: var(--primary); }
.bd-agenda-rows { display: flex; flex-direction: column; gap: 6px; }
.bd-agenda-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 10px;
  padding: 10px 14px; font: inherit; color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.bd-agenda-row:hover { background: var(--surface-hover, var(--bg)); border-color: var(--border-strong); }
.bd-agenda-row.is-done { border-left-color: var(--success); opacity: 0.85; }
.bd-agenda-row.is-cancel { border-left-color: var(--danger); opacity: 0.6; text-decoration: line-through; }
.bd-agenda-time {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--text); min-width: 48px; flex-shrink: 0;
}
.bd-agenda-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-agenda-name { font-size: 14px; font-weight: 600; color: var(--text); }
.bd-agenda-meta { font-size: 12px; color: var(--muted); }

/* Empty state */
.bd-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
}
.bd-empty-icon { font-size: 56px; margin-bottom: 12px; }
.bd-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.bd-empty-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

/* ── Room × Time Timeline Grid ────────────────────────── */
.bd-grid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  max-height: calc(100vh - 320px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}
/* Non-grid positioning context for the absolutely-positioned events +
   now-line (see _renderRoomGrid) — keeps their calc(100%) width stable. */
.bd-grid-inner {
  position: relative;
  min-width: 720px;
}
.bd-grid {
  display: grid;
  grid-template-columns: 72px repeat(var(--bd-cols, 1), 1fr);
  width: 100%;
}
.bd-grid-corner {
  position: sticky; top: 64px; left: 0; z-index: 12; /* z-local: calendar grid */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 56px;
}
.bd-col-head {
  position: sticky; top: 64px; z-index: 10; /* z-local: calendar grid */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 12px 10px;
  min-height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  text-align: center;
}
.bd-col-head:last-child { border-right: none; }
.bd-col-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
  width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-col-meta {
  font-size: 10px; color: var(--muted);
  line-height: 1.2;
  width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bd-time-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 4px 8px 0 0;
  text-align: right;
  font-size: 10px; color: var(--muted); font-weight: 500;
  height: var(--slot-px, 44px);
  line-height: var(--slot-px, 44px);
  position: sticky; left: 0; z-index: 5;
  background: var(--surface);
}
/* Hour boundary = a solid line at the TOP of the hour's first slot, aligned
   with the hour label (which sits at the cell top). Was border-bottom, which
   drew the line one slot (15m) BELOW the label and made every appt look
   shifted earlier (owner: "12:45 görselde 12:30 gibi", 2026-05-31). */
.bd-time-cell.is-hour { border-top: 1px solid var(--border); }

.bd-slot {
  height: var(--slot-px, 44px);
  border-right: 1px solid var(--border);
  border-bottom: 1px dashed var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.bd-slot.is-hour { border-top: 1px solid var(--border); }
.bd-slot:last-child { border-right: none; }
.bd-slot:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
/* Lunch-break dimming — Settings → Schedule → Lunch is the SSOT.
   Same accent (var(--accent) wash) the calendar uses, kept subtle
   enough to read appointments overlaid on top. */
.bd-slot.is-lunch, .bd-time-cell.is-lunch {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
[data-theme="dark"] .bd-slot.is-lunch,
[data-theme="dark"] .bd-time-cell.is-lunch {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.bd-event {
  position: absolute;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  /* Only animate box-shadow — never `all` (would transition the inline
     top/left/width/height) and no transform (collapses the abspos-grid-item
     containing block in Chromium). Owner: "hover'da kayboluyor", 2026-05-31. */
  transition: box-shadow 0.15s ease;
}
.bd-event:hover {
  z-index: 8;
  /* No transform here — a transform on an absolutely-positioned CSS-grid
     child re-resolves its containing block to a single cell in Chromium,
     collapsing the event's calc(100%) width to a sliver (the "hover'da
     kayboluyor" bug). z-index + box-shadow give the lift affordance instead. */
  box-shadow: 0 6px 18px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05);
}
.bd-event.is-done {
  opacity: 0.65;
}
.bd-event.is-cancel {
  opacity: 0.5;
  background: rgba(217,90,62,0.06);
}
/* ADR-0056 — unconfirmed reservation: dashed border + muted hatch so a held
   slot reads as tentative vs a confirmed appointment. */
.bd-event.is-reservation {
  border-left-style: dashed;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0,0,0,0.04) 5px, rgba(0,0,0,0.04) 10px);
}
.bd-event-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1px;
}
.bd-event-time { font-weight: 700; font-size: 10px; color: var(--text); }
.bd-event-dur { font-size: 9px; color: var(--muted); font-weight: 600; }
.bd-event-name {
  font-weight: 600; font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-event-meta {
  font-size: 10px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
/* State modifiers — declared after base so specificity gradient is ascending. */
.bd-event.is-done .bd-event-name { text-decoration: line-through; }

/* Drag-to-reschedule (views/_grid-dnd.js). Grab affordance on the chips;
   the dragged source dims; the hovered slot lights up as the drop target.
   Shared across the pano (.bd-) and calendar (.cal-) grids. */
.bd-event[draggable="true"], .cal-event[draggable="true"] { cursor: grab; }
.bd-event.is-dragging, .cal-event.is-dragging { opacity: 0.4; cursor: grabbing; }
.bd-slot.is-drop-target, .cal-slot.is-drop-target {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.bd-now-line {
  position: absolute;
  left: 72px; right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 7;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(217,90,62,0.4);
}
.bd-now-dot {
  position: absolute; left: -6px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 3px rgba(217,90,62,0.2);
}

@media (max-width: 768px) {
  .bd-actionbar-end { margin-left: 0; }
  .bd-grid-inner { min-width: 600px; }
  .bd-event-name { font-size: 11px; }
  .bd-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── CALENDAR ────────────────────────────────────────── */
.cal-container {
  max-width: var(--page-max-wide); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}

/* ── Faz 4 — calendar left rail (two stacked person panels) ───── */
.cal-layout {
  display: flex; gap: 16px; align-items: flex-start;
  max-width: var(--page-max-wide); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.cal-main { flex: 1 1 auto; min-width: 0; }
.cal-rail {
  flex: 0 0 220px; width: 220px;
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: var(--page-pad-top);
}
.cal-rail-panel {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  background: var(--surface, var(--bg)); padding: 10px;
  max-height: 44vh; overflow: hidden;
}
.cal-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cal-rail-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.cal-rail-all {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer;
}
.cal-rail-all.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-rail-search {
  width: 100%; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  background: var(--bg); color: var(--text);
}
.cal-rail-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cal-rail-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm, 8px);
  background: transparent; color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
}
.cal-rail-item:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cal-rail-item.is-on { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary-muted, color-mix(in srgb, var(--primary) 40%, transparent)); font-weight: 600; }
.cal-rail-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-rail-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-rail-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px; }
@media (max-width: 860px) {
  .cal-layout { flex-direction: column; }
  .cal-rail { flex-basis: auto; width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .cal-rail-panel { flex: 1 1 240px; max-height: 30vh; }
}
.cal-toolbar {
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 16px;
}
.cal-toolbar-controls {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.cal-title {
  font-size: var(--page-title-size); font-weight: var(--page-title-weight);
  font-family: var(--font-heading);
  text-transform: capitalize;
  margin: 0; color: var(--text);
  letter-spacing: var(--page-title-tracking);
}
/* Navigation pill — prev / today / next bound visually as one group */
.cal-nav-group {
  display: inline-flex; align-items: stretch;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  padding: 2px; gap: 2px;
}
.cal-nav-btn {
  width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--muted);
  transition: background var(--t-base), color var(--t-base);
}
.cal-nav-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.cal-today-btn {
  background: transparent; border: none;
  padding: 4px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text);
  transition: background var(--t-base), color var(--t-base);
}
.cal-today-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

.cal-view-toggle {
  display: flex; background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: 9px;
  padding: 2px;
}
.cal-view-toggle button {
  padding: 5px 13px; border: none; background: transparent;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 7px; color: var(--muted);
}
.cal-view-toggle button.active {
  background: var(--primary); color: white;
}

/* Primary action pushed right; wraps below on narrow screens */
.cal-new-btn { margin-left: auto; }

/* DateRangeToolbar (Bölüm 3.1) — shared layout for calendar + contact panel.
 * Order: [mode segment] [title] [today + arrows] [+ action]. The title
 * stretches to fill remaining space so the controls remain at the edges
 * regardless of date-range length. */
.dr-toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.dr-toolbar-modes {
  display: inline-flex;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  padding: 2px;
}
.dr-toolbar-modes button {
  padding: 5px 13px; border: none; background: transparent;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 7px; color: var(--muted);
}
.dr-toolbar-modes button.active {
  background: var(--primary); color: white;
}
.dr-toolbar-title {
  font-size: var(--page-title-size); font-weight: var(--page-title-weight);
  font-family: var(--font-heading);
  text-transform: capitalize;
  margin: 0; color: var(--text);
  letter-spacing: var(--page-title-tracking);
  flex: 1 1 auto; text-align: left;
}
.dr-toolbar.is-cal .dr-toolbar-title {
  font-size: var(--page-title-size);
}
.dr-toolbar.is-panel .dr-toolbar-title {
  font-size: 15px;
  font-weight: 600;
}
.dr-toolbar-nav {
  display: inline-flex; align-items: stretch;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  padding: 2px; gap: 2px;
}
.dr-nav-btn {
  width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--muted);
  transition: background var(--t-base), color var(--t-base);
}
.dr-nav-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.dr-today-btn {
  background: transparent; border: none;
  padding: 4px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text);
  transition: background var(--t-base), color var(--t-base);
}
.dr-today-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.dr-action { margin-left: 0; }

.cal-grid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: calc(100vh - 200px);
}
/* Non-grid positioning context for the abspos cal-events (mirrors
   .bd-grid-inner) — keeps their calc(100%) width stable on reflow/hover. */
.cal-grid-inner { position: relative; min-width: 700px; }
.cal-grid-inner.d3  { min-width: 500px; }
.cal-grid-inner.day { min-width: 360px; }
.cal-grid {
  display: grid;
  width: 100%;
}
.cal-grid.week { grid-template-columns: 60px repeat(7, 1fr); }
.cal-grid.d3   { grid-template-columns: 60px repeat(3, 1fr); }
.cal-grid.day  { grid-template-columns: 60px 1fr; }

/* Toolbar filter dropdowns */
.cal-filter {
  padding: 6px 10px; border: 1.5px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: var(--font-body); max-width: 180px;
}
.cal-filter:hover { border-color: var(--primary); }
.cal-filter:focus { outline: none; border-color: var(--primary); }

/* Legend dim — when a staff filter is active, others fade out */
.cal-legend-item.is-dim { opacity: 0.35; }

/* Zero-refresh filter helper — any event block or row hidden by the
   client-side filter toggle gets this class (see Views.*._applyFilter) */
.is-hidden { display: none; }

/* ── MONTH VIEW ───────────────────────────────────────── */
.cal-month {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cal-m-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-bottom: 1px solid var(--border);
}
.cal-m-head {
  padding: 10px 8px; text-align: center;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.cal-m-head:last-child { border-right: none; }
.cal-m-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
}
.cal-m-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 6px 4px;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
  transition: background 0.1s;
}
.cal-m-cell:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.cal-m-cell.is-out { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .cal-m-cell.is-out { background: rgba(255,255,255,0.02); }
.cal-m-cell.is-today { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cal-m-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.cal-m-cell-num {
  font-size: 12px; font-weight: 600; color: var(--text);
}
/* State modifiers — base first, modifiers second for ascending specificity. */
.cal-m-cell.is-out .cal-m-cell-num { color: var(--muted); opacity: 0.5; }
.cal-m-cell.is-today .cal-m-cell-num {
  background: var(--primary); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.cal-m-cell-count {
  font-size: 9px; font-weight: 700; color: var(--muted);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 1px 6px; border-radius: 8px;
}
.cal-m-event {
  font-size: 10px; padding: 2px 5px;
  border-radius: 3px; border-left: 2px solid var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  display: flex; gap: 4px; align-items: baseline;
}
.cal-m-event:hover { filter: brightness(1.1); }
.cal-m-event-time { font-weight: 700; opacity: 0.85; flex-shrink: 0; }
.cal-m-event-title { overflow: hidden; text-overflow: ellipsis; }
.cal-m-more {
  font-size: 10px; color: var(--primary); font-weight: 600;
  padding: 1px 5px; cursor: pointer; margin-top: 1px;
}
.cal-m-more:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .cal-m-body { grid-auto-rows: minmax(80px, 1fr); }
  .cal-m-event { font-size: 9px; }
  .cal-m-head { font-size: 10px; padding: 6px 2px; }
  .cal-filter { max-width: 130px; font-size: 11px; }
}

.cal-header-cell {
  position: sticky; top: 64px; z-index: 10; /* z-local: calendar grid */
  background: var(--surface);
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  padding: 10px 8px;
  text-align: center;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 8%, transparent);
}
.cal-header-cell:last-child { border-right: none; }
.cal-header-cell.is-today {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--primary), 0 1px 0 color-mix(in srgb, var(--primary) 8%, transparent);
}
.cal-day-name {
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 10px; color: var(--muted);
  margin-bottom: 2px;
}
.cal-day-num { font-size: 18px; font-weight: 700; }

.cal-time-cell {
  border-right: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 18%, transparent);
  padding: 4px 6px 0 0;
  text-align: right;
  font-size: 10px; color: var(--muted);
  height: var(--slot-px, 48px);
  line-height: var(--slot-px, 48px);
  background: color-mix(in srgb, var(--primary) 2%, transparent);
}

.cal-day-col {
  position: relative;
  border-right: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.cal-slot {
  height: var(--slot-px, 48px);
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 14%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.cal-slot:last-child { border-right: none; }
.cal-slot.is-hour { border-top: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); }
.cal-slot:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  cursor: pointer;
}

[data-theme="dark"] .cal-header-cell { border-bottom-color: rgba(255,255,255,0.22); border-right-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .cal-time-cell   { border-right-color: rgba(255,255,255,0.18); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cal-slot        { border-bottom-color: rgba(255,255,255,0.07); border-right-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cal-slot.is-hour{ border-top-color: rgba(255,255,255,0.18); }

/* Off-day / lunch dimming — Settings → Schedule SSOT (workdays + lunch).
   Strong visual band so the user reads the working window at a glance:
   diagonal stripe pattern + reduced contrast. is-off-day cuts the click
   target visually but stays clickable (admin / staff may still log a
   weekend slot deliberately). */
.cal-header-cell.is-off-day { color: var(--muted); opacity: 0.5; }
.cal-header-cell.is-off-day .cal-day-num { font-weight: 500; }
.cal-slot.is-off-day {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(15,22,35,0.045) 0,
    rgba(15,22,35,0.045) 6px,
    transparent 6px,
    transparent 12px
  );
}
.cal-slot.is-off-day:hover { background: rgba(15,22,35,0.07); }
[data-theme="dark"] .cal-slot.is-off-day {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 6px,
    transparent 6px,
    transparent 12px
  );
}
.cal-slot.is-lunch, .cal-time-cell.is-lunch {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
[data-theme="dark"] .cal-slot.is-lunch,
[data-theme="dark"] .cal-time-cell.is-lunch {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.cal-event {
  position: absolute;
  left: 4px; right: 4px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  z-index: 5;
  transition: box-shadow 0.15s ease;
}
/* ADR-0056 — unconfirmed reservation rendered tentative (dashed + hatch). */
.cal-event-reservation {
  border-left-style: dashed;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0,0,0,0.04) 5px, rgba(0,0,0,0.04) 10px);
}
.cal-event:hover {
  z-index: 6;
  box-shadow: var(--shadow);
}
.cal-event-time { font-weight: 700; font-size: 10px; opacity: 0.85; }
.cal-event-title { font-weight: 600; margin-top: 1px; }
.cal-event-meta { font-size: 10px; opacity: 0.75; margin-top: 1px; }

.cal-current-time {
  position: absolute;
  left: 0; right: 0;
  height: 2px; background: var(--danger);
  z-index: 8;
  pointer-events: none;
}
.cal-current-time::before {
  content: '';
  position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger);
}

.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cal-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.cal-legend-dot {
  width: 12px; height: 12px; border-radius: 3px;
}

/* ── CONTACTS LIST ────────────────────────────────────── */
.cl-container {
  max-width: var(--page-max-narrow); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.cl-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--page-header-mb); gap: var(--page-header-gap); flex-wrap: wrap;
}
.cl-title { font-size: var(--page-title-size); font-weight: var(--page-title-weight); letter-spacing: var(--page-title-tracking); font-family: var(--font-heading); }
.cl-header-actions {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; flex: 1; justify-content: flex-end;
}
.cl-search-wrap { margin-bottom: 14px; }
.cl-search {
  min-width: 220px; flex: 1 1 260px; max-width: 420px;
  padding: 9px 14px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; outline: none;
  background: var(--surface); color: var(--text);
}
.cl-search:focus { border-color: var(--primary); }
.cl-empty { font-size: 13px; color: var(--muted); padding: 32px 0; text-align: center; }
.cl-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.cl-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-fast) var(--ease);
}
.cl-pill:hover { color: var(--text); border-color: var(--primary); }
.cl-pill.is-on { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.cl-role-sel {
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  padding: 2px 4px;
  cursor: pointer;
}
.cl-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer; transition: all 0.2s ease;
}
.cl-row:hover { box-shadow: var(--shadow); transform: translateX(3px); }
/* Bulk-share multi-select — checkbox column + selected-row tint + action bar. */
.cl-check { display: inline-flex; align-items: center; flex-shrink: 0; }
.cl-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.cl-row.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.cl-bulkbar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-sm);
  position: sticky; top: 0; z-index: 5;
}
.cl-bulkbar.is-on { display: flex; }
.cl-bulk-count { font-size: 13px; font-weight: 600; margin-right: auto; }
/* Optimistic-UI: Faz 10 — pending = queued in outbox, awaiting push;
   failed = push gave up after retries (user can manually retry from
   SystemHealth chip). Both states keep the row interactive so the
   user can still open detail / edit; the visual delta is intentionally
   subtle so a slow connection doesn't look broken. */
.cl-row.is-pending { opacity: 0.62; }
.cl-row.is-pending::after {
  content: '⏳'; margin-left: auto; font-size: 12px; opacity: 0.7;
}
.cl-row.is-failed { border-color: var(--danger, #c43a3a); }
.cl-row.is-failed::after {
  content: '⚠'; color: var(--danger, #c43a3a); margin-left: auto; font-size: 14px;
}
.cl-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.cl-info { flex: 1; min-width: 0; }
.cl-name { font-size: 14px; font-weight: 600; }
.cl-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-ext {
  flex-shrink: 0; padding: 4px 8px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none; font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cl-ext:hover { background: var(--border); color: var(--primary); }
.cl-comm-btn {
  flex-shrink: 0; padding: 4px 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cl-comm-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-light);
}

/* ── CONTACT DETAIL ──────────────────────────────────── */
.cd-container {
  max-width: var(--page-max-narrow); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.cd-back { margin-bottom: 14px; }
.cd-header {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: var(--page-header-mb);
}
.cd-avatar-lg {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent);
}
.cd-header-info { flex: 1; }
.cd-name { font-size: clamp(20px, 4vw, 28px); font-weight: 600; margin-bottom: 4px; }
.cd-meta { font-size: 12px; color: var(--muted); }

.cd-quick-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.cd-section { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cd-section:last-child { border-bottom: none; }

/* Header role chips (U4) */
.cd-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-role-chip {
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-secondary, var(--muted));
  border: 1px dashed var(--border);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cd-role-chip:hover { border-color: var(--accent-400, var(--primary)); color: var(--text, var(--ink)); }
.cd-role-chip:focus-visible { outline: 2px solid var(--accent-400, var(--primary)); outline-offset: 2px; }
.cd-role-chip.is-active {
  background: var(--accent-50, var(--bg)); color: var(--accent-700, var(--text-secondary));
  border-style: solid; border-color: var(--accent-200, var(--border));
}
.cd-editable {
  cursor: text; border-radius: 6px;
  padding: 1px 4px; margin: -1px -4px;
  transition: background 0.12s ease;
}
.cd-editable:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.cd-editable:focus-visible { outline: 2px solid var(--accent-400, var(--primary)); outline-offset: 1px; }
.cd-inline-input {
  font: inherit; width: 100%; max-width: 220px;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--accent-400, var(--primary));
  background: var(--surface, var(--bg)); color: inherit;
}

/* Timeline tabs (U4 — Randevular / Etkileşim / Ödeme) */
.cd-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.cd-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-base, 0.15s) var(--ease, ease), border-color var(--t-base, 0.15s) var(--ease, ease);
}
.cd-tab:hover { color: var(--text); }
.cd-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.cd-tab-panel { margin-bottom: 24px; }
.cd-tab-panel.is-hidden { display: none; }
.cd-tab-panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.cd-empty { font-size: var(--text-xs); color: var(--muted); padding: var(--space-3) 0; }
.cd-section-title {
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
  font-family: var(--font-body);
  display: flex; align-items: center; justify-content: space-between;
}

.cd-info-grid { display: grid; gap: 4px; }
.cd-info-row {
  display: flex; gap: 14px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.cd-info-row:last-child { border-bottom: none; }
.cd-info-label {
  font-size: 11px; color: var(--muted); font-weight: 600;
  min-width: 100px; text-transform: uppercase; letter-spacing: 0.04em;
}
.cd-info-value { font-size: 13px; flex: 1; }

.cd-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 5px; font-size: 13px;
}
.cd-list-row .cd-list-date { font-weight: 600; min-width: 110px; font-size: 12px; }
.cd-list-row .cd-list-text { flex: 1; color: var(--text-secondary); font-size: 12px; }
.cd-list-row .cd-list-amount { font-weight: 700; color: var(--primary); }
.cd-list-action {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s ease;
}
.cd-list-action:hover {
  opacity: 1;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cd-list-row.is-clickable { cursor: pointer; transition: all 0.15s ease; }
.cd-list-row.is-clickable:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* Edit-mode modal footer: auto-save hint sits between destructive + close */
.modal-actions-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  flex-wrap: wrap;
}
.modal-actions-edit .btn-danger {
  background: rgba(217,90,62,0.08);
  color: var(--danger);
  border: 1px solid rgba(217,90,62,0.25);
}
.modal-actions-edit .btn-danger:hover {
  background: rgba(217,90,62,0.18);
  border-color: var(--danger);
}
.modal-autosave-hint {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* Singleton guard block screen */
.akis-singleton-block {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-block);
  padding: 24px;
}
.akis-singleton-block-card {
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.akis-singleton-block-icon { font-size: 40px; margin-bottom: 12px; }
.akis-singleton-block-title {
  font-size: 18px; font-weight: 700; margin: 0 0 8px;
  color: var(--text);
}
.akis-singleton-block-desc {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  margin: 0 0 20px;
}
.akis-singleton-block-btn {
  display: inline-block; margin: 0 0 16px;
  padding: 9px 20px; border-radius: 6px;
  background: var(--primary); color: #fff;
  border: none; cursor: pointer; font-size: 14px; font-weight: 500;
}
.akis-singleton-block-btn:hover { opacity: 0.88; }
.akis-singleton-block-hint {
  font-size: 11px; color: var(--muted); opacity: 0.7;
}

/* ── Bakiye Paneli ────────────────────────────────────── */
.cd-balance {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px; margin-bottom: 22px;
}
.cd-balance.is-debt { background: linear-gradient(135deg, rgba(217,90,62,0.06), rgba(224,160,64,0.06)); border-color: rgba(217,90,62,0.2); }
.cd-balance.is-credit { background: linear-gradient(135deg, rgba(46,175,125,0.06), rgba(111,155,196,0.06)); border-color: rgba(46,175,125,0.2); }
.cd-balance.is-paid { background: linear-gradient(135deg, rgba(46,175,125,0.04), rgba(111,155,196,0.04)); }
.cd-balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cd-balance-cell { text-align: center; padding: 6px 4px; }
.cd-balance-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 4px; }
.cd-balance-value { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--font-heading); }
.cd-balance-main .cd-balance-value { color: var(--primary); font-size: 26px; }
.cd-balance.is-debt .cd-balance-main .cd-balance-value { color: var(--danger); }
.cd-balance.is-credit .cd-balance-main .cd-balance-value { color: var(--success); }
.cd-balance-warn { font-size: 12px; color: var(--warning); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }

.cd-adapter-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}

.modal-field-sep {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700;
  margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .cd-balance-grid { grid-template-columns: 1fr; }
}

/* ── COMMUNICATION LOG ───────────────────────────────── */
.msg-container {
  max-width: var(--page-max-narrow); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.msg-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--page-header-mb); gap: var(--page-header-gap);
  flex-wrap: wrap;
}
.msg-title { font-size: var(--page-title-size); font-weight: var(--page-title-weight); letter-spacing: var(--page-title-tracking); font-family: var(--font-heading); }
.msg-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.msg-filter-chip {
  padding: 6px 14px; border-radius: 9px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.msg-filter-chip:hover { border-color: var(--primary); }
.msg-filter-chip.active {
  background: var(--primary); color: white; border-color: var(--primary);
}

.msg-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.msg-row:hover { box-shadow: var(--shadow); }
.msg-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.msg-info { flex: 1; min-width: 0; }
.msg-info-line1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.msg-name { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.msg-name:hover { color: var(--primary); }
.msg-detail { font-size: 12px; color: var(--text-secondary); }
.msg-meta { font-size: 11px; color: var(--muted); }
.msg-followup-select {
  padding: 4px 8px; border: 1px solid var(--border-strong);
  border-radius: 6px; font-size: 11px;
  background: var(--surface); color: var(--text);
}

/* ── AYARLAR ──────────────────────────────────────────── */
.st-container {
  max-width: var(--page-max-narrow); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.st-tabbar {
  position: sticky; top: 0; z-index: var(--z-raised);
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 8px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.st-tab {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; text-decoration: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.st-tab:hover { color: var(--text); background: var(--surface); }
.st-tab.is-active { color: var(--primary); border-color: var(--primary); background: var(--surface); }

/* ── MANAGE SHELL — IA hub layout (Faz C.1+) ──────────────
   Two-layer navigation chrome shared by every #/me/* and
   #/workspace/* sub-view: top layer tabs + left column
   sidebar. Body region carries each view's existing content
   (.pref-container, .st-section, table, etc.) so legacy
   styling still applies inside .manage-body.
*/
.manage-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  max-width: var(--page-max-wide, 1200px);
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.manage-nav {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 0;
  align-self: start;
  padding-top: 8px;
}
/* Hub content sits inside the manage shell's .manage-body (which already
   provides page padding + top spacing, so the tab-bar is no longer clipped).
   Keep min-width:0 so the grid column can shrink. */
.hub-container { min-width: 0; }
.manage-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.manage-tab {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); background: transparent;
  border: 1px solid transparent; text-decoration: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.manage-tab:hover { color: var(--text); background: var(--surface); }
.manage-tab.is-active {
  color: var(--primary); border-color: var(--primary); background: var(--surface);
}
.manage-nav-list {
  display: flex; flex-direction: column; gap: 16px;
}
/* ADR-0057 — global settings/manage jump bar. */
.set-search { position: relative; margin: 8px 0 4px; }
.set-search-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.set-search-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.set-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: var(--z-raised);
  margin: 0; padding: 4px; list-style: none;
  max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-lg);
}
.set-search-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.set-search-opt:hover, .set-search-opt.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.set-search-opt-label { font-size: 13px; color: var(--text); }
.set-search-opt-cat { font-size: 11px; color: var(--muted); white-space: nowrap; }
.set-search-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
/* ADR-0055 — in-app firm-site generator form. */
.fs-wrap { max-width: 860px; }
.fs-lead { color: var(--muted); margin: 0 0 18px; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.fs-legal { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 6px 0 18px; }
.fs-legal legend { font-weight: 700; padding: 0 6px; }
.fs-hint, .fs-note { color: var(--muted); font-size: 13px; }
.fs-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.fs-check input { width: auto; }
.fs-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.fs-ssot-note { background: color-mix(in srgb, var(--primary) 8%, transparent); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 13px; color: var(--text); margin-bottom: 16px; }
.fs-sec { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.fs-auto { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.fs-auto span { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.fs-sections { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; }
.fs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.fs-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fs-item input, .fs-item textarea { width: 100%; }
.fs-team-socials { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.fs-team-socials .fs-hint { width: 100%; }
.fs-preview-frame { width: 100%; height: 80vh; border: 0; }
.fs-preview-modal .modal-body { padding: 0; }
.manage-nav-group { display: flex; flex-direction: column; gap: 2px; }
.manage-nav-group-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px;
}
.manage-nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text); background: transparent;
  border: 1px solid transparent; text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.manage-nav-link:hover { background: var(--surface); }
.manage-nav-link.is-active {
  background: var(--surface); color: var(--primary);
  border-color: var(--border);
  font-weight: 600;
}
.manage-nav-icon { font-size: 14px; line-height: 1; }
.manage-nav-label { flex: 1; }
.manage-body {
  min-width: 0;
}
/* Embedded inside a manage hub: the hub's tab-bar already provides the page
   chrome + title, so a sub-view rendered here drops its own left-nav (handled
   in _renderWorkspaceShell via opts.embedded) and we suppress its now-redundant
   page heading. Keeps action buttons (e.g. "Add staff") that share the header
   row. Padding is zeroed because the hub body already pads the content. */
.hub-body .manage-body--embedded { padding: 0; }
.hub-body .manage-title,
.hub-body .mu-title,
.hub-body > .manage-body--embedded > .am-subtitle,
.hub-body .acr-header .am-subtitle { display: none; }
.hub-body .acr-header { margin-top: 0; }
.manage-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.manage-intro { color: var(--text-secondary); margin: 0 0 20px; font-size: 13px; line-height: 1.6; }

/* Service catalog tags (U7) */
.svc-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 8px; margin: 1px 2px; border-radius: 999px;
  background: var(--accent-50, var(--bg)); color: var(--accent-700, var(--text-secondary));
  border: 1px solid var(--accent-200, var(--border));
}
.svc-tag-empty { color: var(--muted); }

/* ── SAVE BAR — Faz D sticky workspace save indicator ───
   Renders inside the page body when a workspace form is dirty;
   anchored to the bottom of its container so users on long
   scrolling forms always have the action within reach.
*/
.save-bar {
  position: sticky;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin: 24px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.25);
}
.save-bar-status { color: var(--muted); font-size: 13px; }
.save-bar-actions { display: flex; gap: 8px; }

/* ── ONBOARDING CHECKLIST — dashboard kurulum kartı (Faz E) ── */
.onboarding-checklist {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-sm);
}
.oc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.oc-title { margin: 0; font-size: 14px; font-weight: 700; }
.oc-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
/* Steps flow into responsive columns so 5 items take ~2-3 rows, not 5. */
.oc-steps { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.oc-step { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.oc-step.is-done { color: var(--muted); }
.oc-step.is-done .oc-step-link { text-decoration: line-through; }
.oc-step-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px solid var(--border); font-size: 11px; }
.oc-step.is-done .oc-step-icon { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.oc-step-link { color: inherit; text-decoration: none; flex: 1; font-size: 13px; }
.oc-step-link:hover { color: var(--primary); }
.oc-step-optional { font-size: 11px; color: var(--muted); padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 999px; }
.oc-actions { margin-top: 8px; display: flex; justify-content: flex-end; }

/* ── SECTOR PICKER — workspace/firma sector template applier ── */
.sector-section .st-section-summary {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; padding: 10px 0;
  font-weight: 600;
}
.sector-section .st-section-summary-meta {
  color: var(--muted); font-size: 12px; font-weight: 500;
}
.sector-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-top: 10px;
}
.sector-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.sector-card:hover { border-color: var(--primary); background: var(--bg); }
.sector-card.is-active { border-color: var(--primary); color: var(--primary); }
.sector-icon { font-size: 22px; line-height: 1; }
.sector-label { font-weight: 600; font-size: 13px; }
.sector-types { font-size: 11px; color: var(--muted); }
@media (max-width: 768px) {
  .manage-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .manage-nav { position: static; }
  .manage-nav-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .manage-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .manage-nav-group-head { width: 100%; padding: 0; }
}

.st-section {
  margin-bottom: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.st-section-title {
  font-size: 15px; font-weight: 600; margin-bottom: 6px;
  font-family: var(--font-body);
}
.st-desc { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
/* Reports overview (manage/reports hub) */
.ro-title { margin-bottom: 16px; }
.ro-stats { gap: 16px; }
.ro-empty { color: var(--muted); margin-top: 32px; }
.st-hint { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; line-height: 1.5; }
.st-danger-zone {
  margin-top: 24px; padding: 16px;
  background: rgba(217, 90, 62, 0.06);
  border: 1px solid rgba(217, 90, 62, 0.35);
  border-radius: var(--radius-sm);
}
.st-danger-title { font-size: 14px; font-weight: 600; color: var(--danger); margin-bottom: 6px; }
.st-danger-desc  { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

/* Backup page — 4-card grouped layout */
.bk-group {
  margin-top: 18px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.bk-group:first-of-type { margin-top: 8px; }
.bk-group-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.bk-group-desc  { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.bk-group-meta  { font-size: 11px; color: var(--muted); margin-top: 10px; font-style: italic; }
.bk-group-danger {
  background: rgba(217, 90, 62, 0.06);
  border-color: rgba(217, 90, 62, 0.35);
}
.bk-group-danger .bk-group-title { color: var(--danger); }

/* Contact role chips (ADR-0038 multi-role tags) */
.role-chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.role-chip:hover {
  color: var(--text);
  background: var(--surface);
}
.role-chip.is-active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.st-scope-list { display: grid; gap: 10px; }
.st-scope-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.st-scope-icon { font-size: 22px; }
.st-scope-info { flex: 1; }
.st-scope-name { font-size: 13px; font-weight: 600; }
.st-scope-desc { font-size: 11px; color: var(--muted); }
.st-scope-action { display: flex; align-items: center; gap: 8px; }
.st-connected { font-size: 11px; color: var(--success); font-weight: 600; }

.st-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.st-form-row { display: flex; flex-direction: column; gap: 6px; }
.st-form-row label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.st-form-row input, .st-form-row select, .st-form-row textarea {
  padding: 9px 12px; border: 1.5px solid var(--border-strong);
  border-radius: 9px; font-size: 13px; outline: none;
  background: var(--surface); color: var(--text);
  font-family: var(--font-body);
}
.st-form-row input:focus, .st-form-row select:focus, .st-form-row textarea:focus { border-color: var(--primary); }
.st-form-row textarea { min-height: 70px; resize: vertical; }

.st-form-sep {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); margin: 18px 0 10px;
  padding-top: 12px; border-top: 1px solid var(--border);
}

.st-color-row { display: flex; align-items: center; gap: 10px; }
.st-color-row input[type="color"] {
  width: 40px; height: 36px; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 2px; cursor: pointer;
}
.st-color-row input[type="text"] { flex: 1; }

.st-toggle { display: flex; align-items: center; gap: 10px; }
.st-toggle-label { font-size: 13px; }
.st-toggle-switch {
  position: relative; width: 40px; height: 22px;
  background: var(--border-strong); border-radius: 11px;
  cursor: pointer; transition: background 0.2s ease;
}
.st-toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; transition: transform 0.2s ease;
}
.st-toggle-switch.active { background: var(--primary); }
.st-toggle-switch.active::after { transform: translateX(18px); }

/* ── ADMIN SUBNAV — two-tier tabs (category pills + item pills) ────
   Sticky stays just under the topbar so deep tables (members / audit /
   bundle history) keep navigation in view (Phase C4). The background
   layer is opaque so scrolled content under it doesn't bleed through.
   `top` accounts for the safe-area inset on notched devices so the bar
   never hides under the camera cutout in landscape. */
.am-subnav {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top, 0px));
  z-index: var(--z-raised);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px; padding: 10px 0 14px;
  border-bottom: 1.5px solid var(--border);
}
@media (min-width: 901px) {
  .am-subnav { top: calc(64px + env(safe-area-inset-top, 0px)); }
}
/* Admin empty-state card — used when a view has nothing to render yet
 * (e.g. Members before the workspace is provisioned). */
.admin-empty-state {
  margin-top: 24px; padding: 22px 24px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.admin-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.admin-empty-desc  { font-size: 13px; color: var(--muted);  margin: 0; line-height: 1.55; }
/* manage/settings — utilities replacing per-view inline styles (UI overhaul Faz 3) */
.manage-prose { max-width: 680px; }
.manage-muted { color: var(--muted); }
.manage-stack { margin-top: 16px; }

/* KVKK & Uyum paneli (settings/workspace/kvkk-compliance) */
.kvkk-disclaimer { max-width: 680px; font-size: 13px; margin: 8px 0 16px; }
.kvkk-subhead { font-size: 16px; margin: 24px 0 8px; }
.kvkk-card {
  max-width: 680px;
  margin: 12px 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.kvkk-card h2 { font-size: 15px; font-weight: 700; margin: 0; }
.kvkk-card p { margin: 0 0 8px; }
.kvkk-card.is-acked { opacity: 0.62; }
.kvkk-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kvkk-action { font-weight: 600; }
.kvkk-meta { font-size: 12px; margin: 8px 0 10px; }
.kvkk-card-actions { display: flex; gap: 8px; }
.kvkk-fields { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.kvkk-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.kvkk-fields input { width: 200px; }
/* Severity → left border + badge color */
.kvkk-sev-critical { border-left-color: var(--danger); }
.kvkk-sev-high { border-left-color: var(--warning); }
.kvkk-sev-medium { border-left-color: #eab308; }
.kvkk-sev-info { border-left-color: var(--accent); }
.kvkk-sevbadge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-pill); color: #fff; white-space: nowrap;
}
.kvkk-sevbadge.kvkk-sev-critical { background: var(--danger); }
.kvkk-sevbadge.kvkk-sev-high { background: var(--warning); }
.kvkk-sevbadge.kvkk-sev-medium { background: #eab308; }
.kvkk-sevbadge.kvkk-sev-info { background: var(--accent); }
.kvkk-navbadge { background: var(--danger); color: #fff; margin-left: auto; }
.admin-empty-state.is-doc { margin-top: 16px; text-align: left; max-width: 680px; }
.ws-autosync-row { flex-direction: row; align-items: center; gap: 10px; }
.ws-autosync-hint { color: var(--muted); font-size: 12px; }
.am-due-input { max-width: 160px; }
.aa-intro { font-size: 13px; margin: 8px 0 12px; }
.span-all { grid-column: 1 / -1; }
/* Scroll-shell for tall modal-box dialogs (import wizard, AI). max-width stays
   per-modal inline; this is the shared height + flex column layout. */
.modal-box--scroll { max-height: 80vh; display: flex; flex-direction: column; }

/* capability toggle button */
.am-cap-toggle {
  min-width: 52px; font-size: 12px; font-weight: 600;
  color: var(--muted); border: 1.5px solid var(--border);
}
.am-cap-toggle.is-active { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ── SETTINGS ADMIN HUB ────────────────────────────────── */
.st-admin-hub { display: flex; flex-direction: column; gap: 20px; }
.st-admin-cat-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.st-admin-cat-items { display: flex; flex-wrap: wrap; gap: 8px; }
.st-admin-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
  color: var(--text); text-decoration: none;
  border: 1.5px solid var(--border); background: var(--bg-card, var(--surface));
  transition: border-color 0.15s, background 0.15s;
}
.st-admin-item:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── ADMIN MEMBERS PAGE ──────────────────────────────── */
.am-add-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.am-email-input {
  flex: 1; min-width: 200px; padding: 9px 12px;
  border: 1.5px solid var(--border-strong); border-radius: 9px;
  font-size: 13px; outline: none; background: var(--surface); color: var(--text);
}
.am-email-input:focus { border-color: var(--primary); }
.am-role-select {
  padding: 9px 10px; border: 1.5px solid var(--border-strong);
  border-radius: 9px; font-size: 13px; outline: none;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.am-role-select:focus { border-color: var(--primary); }
.am-role-select.am-inline { padding: 6px 8px; font-size: 12px; border-radius: 7px; }

.am-invite-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); margin-bottom: 16px; cursor: pointer;
}

.am-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  margin-bottom: 8px;
}
.am-table thead th {
  text-align: left; padding: 8px 12px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--border);
}
.am-table tbody tr { border-bottom: 1px solid var(--border); }
.am-table tbody tr:last-child { border-bottom: none; }
.am-table tbody td { padding: 10px 12px; vertical-align: middle; }

.am-email-cell { font-weight: 600; word-break: break-all; }
.am-feats-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.am-feat-check {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted); cursor: pointer;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.am-feat-check:has(input:checked) { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.am-feat-check input { width: 12px; height: 12px; accent-color: var(--primary); }
.am-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 32px 0; }
.am-remove-btn { color: var(--danger); }
.am-remove-btn:hover { background: rgba(217,90,62,0.08); }

/* Admin page header (Phase C2) — paired with crudHeader() helper. */
.am-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.am-header-title { flex: 1 1 auto; min-width: 0; }
.am-title {
  font-size: var(--page-title-size, 24px);
  font-weight: var(--page-title-weight, 700);
  letter-spacing: var(--page-title-tracking, -0.01em);
  font-family: var(--font-heading);
  color: var(--text); margin: 0;
}
.am-subtitle {
  font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.5;
}
.am-header-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ── ADMIN PERMISSIONS (Phase 1.7) ────────────────────── */
.ap-sections { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ap-section {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  background: var(--bg);
}
.ap-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ap-sub-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted); margin-left: 8px;
}
.ap-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
.ap-table tr.ap-expired { opacity: 0.5; text-decoration: line-through; }
.ap-badge-grant, .ap-badge-deny {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
}
.ap-badge-grant { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.ap-badge-deny  { background: rgba(217,90,62,0.10); color: var(--danger); }
.ap-orphans { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border); }
.po-radio-row { display: flex; gap: 12px; }
.po-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.po-radio-grant { color: var(--primary); font-weight: 600; }
.po-radio-deny  { color: var(--danger); font-weight: 600; }

/* ── KEYRING RECOVERY + ENCRYPTION (Phase 6) ───────────── */
.kr-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 14px;
}
.kr-word {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.kr-num { color: var(--muted); font-size: 11px; margin-right: 4px; }
.enc-status {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 14px;
  border-radius: 10px; border: 1px solid var(--border);
}
.enc-status-off { background: rgba(217,90,62,0.06); }
.enc-status-locked   { background: rgba(217,90,62,0.04); }
.enc-status-unlocked { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.enc-status-mode { color: var(--muted); font-size: 12px; }

/* ── CATALOG ADMIN DESIGN SYSTEM ────────────────────────
 * Shared components for all workspace/catalog screens.
 * Prefix legend:
 *   acr-   admin contact-roles card/list
 *   ar-    admin row inline editor
 *   am-*   (extensions) header-row, badge, actions, subnav-links, container
 *   badge  status pills (success / muted)
 */

/* am-header-row — title + primary action on one flex row */
.am-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}

/* am-badge — small inline label (e.g. "inactive" tag) */
.am-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill, 999px);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border);
  vertical-align: middle; margin-left: 6px;
}

/* am-actions — table cell that holds icon-only action buttons */
.am-actions {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

/* am-subnav-links — horizontal pill group inside an am-subnav */
.am-subnav-links {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.am-subnav-links a,
.am-subnav-links button,
.am-subnav-link {
  padding: 4px 12px; border-radius: var(--radius-pill, 999px);
  font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: color var(--dur-fast, 120ms), background var(--dur-fast, 120ms);
  display: inline-flex; align-items: center;
}
.am-subnav-links a:hover,
.am-subnav-links button:hover,
.am-subnav-link:hover {
  color: var(--text); background: var(--surface);
}
.am-subnav-links a.is-active,
.am-subnav-links button.is-active,
.am-subnav-link.is-active {
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* badge — status pill base + variants */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-pill, 999px);
  font-size: 11px; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.02em;
}
.badge-success { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.badge-muted   { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.badge-green   { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.badge-gray    { background: var(--surface); color: var(--muted); }

/* is-muted — dim a whole row (e.g. inactive discounts) */
tr.is-muted td { opacity: 0.55; }

/* ── ACR — Admin Contact-Roles card list ──────────────── */
.acr-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.acr-list {
  display: flex; flex-direction: column; gap: 6px;
}
.acr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border); background: var(--bg);
  transition: border-color var(--dur-fast, 120ms), box-shadow var(--dur-fast, 120ms);
}
.acr-row:hover {
  border-color: var(--primary-muted, color-mix(in srgb, var(--primary) 35%, transparent));
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.acr-icon {
  font-size: 20px; line-height: 1; flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.acr-meta { flex: 1 1 0; min-width: 0; }
.acr-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acr-id {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: 1px;
}
.acr-system {
  color: var(--muted); font-style: italic; font-family: inherit;
}
.acr-tags {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap;
  justify-content: flex-end;
}
.acr-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--muted); white-space: nowrap;
}
.acr-badge.is-eligible {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.acr-badge.is-excluded {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}
.acr-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

/* ── AR — Admin Row inline editor (form embedded below table) */
.ar-editor {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ar-editor-title {
  font-size: 15px; font-weight: 600; margin: 0 0 16px;
  color: var(--text);
}
.ar-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text);
}
.ar-field span { font-weight: 500; color: var(--muted); font-size: 12px; }
.ar-field input[type="checkbox"] { width: auto; margin-right: 6px; }
.ar-editor-actions {
  display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap;
}

/* ── DENSITY MODE (Phase 5) ─────────────────────────────
 * `data-density` lives on <body>. Defaults to comfortable;
 * compact + dense reduce vertical rhythm + table padding.
 */
body[data-density="compact"] .am-table tbody td,
body[data-density="compact"] .as-table tbody td {
  padding: 6px 8px;
}
body[data-density="compact"] .am-add-form {
  gap: 6px;
}
body[data-density="compact"] .acr-row { padding: 7px 12px; }
body[data-density="compact"] .ar-editor { padding: 14px 18px; }
body[data-density="dense"] .am-table tbody td,
body[data-density="dense"] .as-table tbody td {
  padding: 4px 6px;
  font-size: 12px;
}
body[data-density="dense"] .modal-field {
  margin-bottom: 8px;
}
body[data-density="dense"] .acr-row { padding: 5px 10px; gap: 8px; }
body[data-density="dense"] .acr-icon { width: 28px; height: 28px; font-size: 15px; }
body[data-density="dense"] .ar-editor { padding: 10px 14px; }

/* ── WORKSPACE SETUP WIZARD (Phase 1.11) ───────────────── */
.ws-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  background: var(--bg); margin-top: 18px;
}
.ws-card-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.ws-card-desc  { color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }
.ws-create-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-create-form > input.as-input { flex: 1 1 260px; }
.ws-detect-status { color: var(--text-secondary); font-style: italic; padding: 4px 0; }
.ws-detect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-detect-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
.ws-detect-name { flex: 1 1 auto; font-weight: 600; font-size: 13px; }
.ws-detect-meta { color: var(--muted); font-size: 12px; }

/* ── ADMIN SERVICES / ROOMS TABLE ────────────────────── */
.as-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px;
}
.as-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--border);
}
.as-table tbody tr { border-bottom: 1px solid var(--border); }
.as-table tbody tr:last-child { border-bottom: none; }
.as-table tbody td { padding: 8px 10px; vertical-align: middle; }
.as-input {
  width: 100%; padding: 7px 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; outline: none; background: var(--surface); color: var(--text);
  transition: border-color 0.15s;
}
.as-input:focus { border-color: var(--primary); }
.as-input-sm { max-width: 100px; text-align: right; }

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(20,30,40,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg);
  /* Phase F2 — subtract notch + bottom-bar so the modal isn't clipped on
     iOS PWA standalone or Android edge-to-edge. */
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: modalIn 0.25s ease;
}
.modal-panel.is-wide { max-width: 700px; }

/* ── Faz 4 — appointment drawer (right-docked panel) ───── */
.modal-overlay.is-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal-panel.is-drawer {
  width: 440px; max-width: 92vw; max-height: 100dvh;
  border-radius: 0; box-shadow: -8px 0 28px rgba(0,0,0,0.18);
  animation: drawerIn 0.22s ease;
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  /* Pinned-header / scrolling-body: the panel is a flex column whose only
     scroll region is .modal-drawer-body, so the title (head) + footer stay
     visible. `overflow:hidden` overrides the base .modal-panel scroll. */
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-drawer-head { flex-shrink: 0; padding-right: 48px; }
.modal-drawer-head .modal-title { margin-bottom: 16px; }
.modal-drawer-body { flex: 1 1 auto; overflow-y: auto; }
.modal-panel.is-drawer .modal-actions { flex-shrink: 0; }
/* Dashboard customer SELECTION (parity with the calendar receiver rail) —
   search-first typeahead: type a name → results drop UNDER the input as an
   absolute overlay (no layout shift), click a row to add it as a filter chip. */
.bd-customer-search-wrap { position: relative; display: inline-flex; }
.bd-customer-search {
  min-width: 220px; padding: 7px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: 13px; background: var(--surface); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bd-customer-search:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.bd-customer-results {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; /* z-local: dropdown within field */
  display: flex; flex-direction: column; gap: 2px;
  min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto;
  padding: 4px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.bd-customer-results:empty { display: none; }
.bd-customer-result {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
  font-size: 13px;
}
.bd-customer-result:hover, .bd-customer-result:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent); outline: none;
}
.bd-customer-result.is-on { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.bd-customer-result-name { font-weight: 600; flex: 1 1 auto; }
.bd-customer-sub { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.bd-customer-result-tick { color: var(--primary); font-weight: 700; flex-shrink: 0; }
.bd-customer-empty {
  display: block; padding: 8px 10px; font-size: 12px; color: var(--muted); font-style: italic;
}
@keyframes drawerIn {
  from { opacity: 0.4; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 640px) {
  .modal-panel.is-drawer { width: 100vw; max-width: 100vw; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title {
  font-size: 18px; font-weight: 600;
  margin-bottom: 16px;
  font-family: var(--font-heading);
}
.modal-field { margin-bottom: 14px; }
/* Rule #37 — two-up field row that stacks on phones. Replaces inline
   `grid-template-columns:1fr 1fr` so two selects/inputs don't squish
   side-by-side on narrow viewports. */
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) {
  .field-row-2 { grid-template-columns: 1fr; }
}
/* Rule #37 — static info / shortcut tables keep a readable min-width but
   live inside a horizontal-scroll wrapper so they never overflow the page
   below ~360px. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.tbl { width: auto; min-width: 320px; border-collapse: collapse; }
/* Inline warning variant — used when a form-modal opens without a
   required active contact (Modals._noContactWarning). Class replaces
   the inline style block formerly hardcoded in modals/index.js. */
.modal-field-danger {
  background: rgba(217,90,62,0.08);
  padding: var(--space-3, 12px);
  border-radius: 9px;
  color: var(--danger);
  font-size: 12px;
}
/* Compact inline hint — formerly `style="font-size:11px;color:var(--muted);
   margin-top:4px"` repeated across modals (staffEdit etc.). Use the
   --danger variant for warning hints. */
.modal-hint-sm        { font-size: 11px; color: var(--muted);   margin-top: 4px; }
.modal-hint-sm.danger { color: var(--danger); }
.modal-hint-sm.tight  { margin-top: -6px; }
/* Linked-contact callout — formerly inline `background:color-mix(in srgb, var(--primary) 8%, transparent);
   padding:8px 10px;border-radius:8px` in staffEdit. */
.modal-field-info {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  padding: 8px 10px;
  border-radius: 8px;
}
.modal-field-info-label { font-size: 12px; color: var(--muted); }
/* Inline checkbox-label combo (newPayment/newInteraction "advance"/
   "follow-up" toggles). Replaces inline `margin:0;cursor:pointer`. */
.label-inline { margin: 0; cursor: pointer; }
/* Confirm dialog body — preserves whitespace for multi-line messages. */
.modal-body-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-line;
}
.modal-body-text + .modal-field { margin-top: 12px; }
.modal-title-danger { color: var(--danger); }
/* Universal modal close button (Faz 8). Auto-injected by Modals._open()
   into every panel as the first child; positioned top-right outside the
   normal flow so it doesn't disrupt existing layouts. */
.modal-close {
  position: absolute;
  top: 8px; right: 12px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 24px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 1;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.modal-close:hover,
.modal-close:focus-visible {
  background: rgba(15,22,35,0.06);
  color: var(--text);
}
.modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .modal-close:focus-visible {
  background: rgba(255,255,255,0.06);
}
/* Modal panels need positioning context for the close button. Existing
   `.modal-panel` already has padding; we just ensure relative position. */
.modal-panel { position: relative; }
/* Mobile: bigger tap target (WCAG 2.5.5) */
@media (max-width: 640px) {
  .modal-close { width: 44px; height: 44px; top: 6px; right: 8px; }
}
.modal-field label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.modal-field input, .modal-field select, .modal-field textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border-strong); border-radius: 9px;
  font-size: 13px; outline: none;
  background: var(--surface); color: var(--text);
  transition: border-color 0.2s ease;
  font-family: var(--font-body);
}
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color: var(--primary); }
.nt-editor .modal-field { margin-bottom: 0; }
.modal-field textarea { min-height: 80px; resize: vertical; }
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Info strip shown under a field (e.g. computed end time). */
.modal-field-info {
  margin: -8px 0 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
}
.modal-field-info .modal-info-label { font-weight: 600; color: var(--text); }

/* Settings: split hour+minute compound field */
.st-time-split { display: flex; align-items: center; gap: 6px; }
.st-time-split select { flex: 1; min-width: 0; }
.st-time-colon { font-weight: 700; color: var(--muted); }

/* Settings: per-field hint text */
.st-form-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Settings: segment toggle (e.g. 24 saat / 12 saat).
   `align-self: flex-start` keeps the inline-flex from being
   stretched to the full row width when the parent .st-form-row
   uses default `align-items: stretch` (column-flex). Without
   this, two buttons split a 220px+ column 50/50 and visually
   look like full-width toggles instead of a compact pill pair.
*/
.st-seg {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.st-seg-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.st-seg-btn:hover { color: var(--text); background: var(--surface); }
.st-seg-btn + .st-seg-btn { border-left: 1px solid var(--border); }
.st-seg-btn.is-on {
  background: var(--primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--primary);
}
.st-seg-btn.is-on:hover { background: var(--primary); color: #fff; }

/* Settings: live preview card (Görüntü Biçimi section) */
.st-preview-card {
  margin-top: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-preview-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.st-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.st-preview-icon { font-size: 14px; opacity: 0.8; }
.st-preview-val  { font-variant-numeric: tabular-nums; }
.modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
/* Phase G1 — single + four-column variants for symmetry. The 1-col
   variant is useful for forms that want explicit grid spacing instead
   of inheriting block flow. */
.modal-grid-1 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.modal-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) {
  .modal-grid-3, .modal-grid-4 { grid-template-columns: 1fr 1fr; }
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.modal-contact-pick {
  padding: 10px 13px; background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--primary); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── RAP — appointment extra participants (ADR-0043) ───── */
.rap-section { display: flex; flex-direction: column; gap: 6px; }
.rap-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg);
}
.rap-role {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); flex-shrink: 0;
}
.rap-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1 1 auto; }
.rap-share { display: flex; align-items: center; gap: 4px; }
.rap-share-val { width: 80px; }
.rap-empty { font-size: 12px; color: var(--muted); font-style: italic; }
.rap-add { display: flex; gap: 6px; }
.rap-add select { flex: 0 0 auto; }
.rap-add input { flex: 1 1 auto; }
.rap-results { max-height: 140px; overflow-y: auto; }

/* ── TOAST ───────────────────────────────────────────── */
.toast-wrap {
  position: fixed; top: 80px; right: 24px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

/* Feature tour (Phase E1) — spotlight tooltip + target highlight. */
.feature-tour-tip {
  position: fixed; z-index: var(--z-tour);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  width: 280px; max-width: calc(100vw - 24px);
  animation: tipIn 0.18s ease;
}
@keyframes tipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.feature-tour-arrow {
  position: absolute; width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
.feature-tour-arrow-bottom { top: -7px; left: 50%; margin-left: -6px; border-right: none; border-bottom: none; }
.feature-tour-arrow-top    { bottom: -7px; left: 50%; margin-left: -6px; border-left: none; border-top: none; }
.feature-tour-arrow-left   { right: -7px; top: 50%; margin-top: -6px; border-left: none; border-bottom: none; }
.feature-tour-arrow-right  { left: -7px; top: 50%; margin-top: -6px; border-right: none; border-top: none; }
.feature-tour-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.feature-tour-desc  { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; }
.feature-tour-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.feature-tour-progress { font-size: 11px; color: var(--muted); }
.feature-tour-actions  { display: flex; gap: 8px; }
.feature-tour-highlight {
  position: relative;
  box-shadow: 0 0 0 3px var(--primary), 0 0 0 7px color-mix(in srgb, var(--primary) 25%, transparent) !important;
  border-radius: 8px;
  z-index: calc(var(--z-tour) - 1);
}

/* Form field + inline validation (Phase B2). Renders consistent
   label + input + error span across modals and settings sub-pages. */
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.form-required { color: var(--danger); margin-left: 2px; }
.form-hint  { font-size: 11px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
.form-error {
  display: block; min-height: 16px;
  font-size: 11px; font-weight: 600; color: var(--danger);
  margin-top: 2px;
}
.form-error:empty { display: none; }
.as-input.is-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(217,90,62,0.15);
}

/* Inline SVG icon — picks up parent text color via stroke=currentColor.
   Phase B1 — paired with src/components/icons.js. */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon + span, .icon + .empty-state-title, .btn .icon + span { margin-left: 6px; }

/* Paywall lock visual cue (Phase E3). When the workspace has no active
   subscription, every nav link gets `.is-locked` so users see why
   clicks land them on /subscribe — instead of cycling silently. */
.topbar-link.is-locked {
  opacity: 0.5; cursor: not-allowed;
  position: relative;
}
.topbar-link.is-locked::after {
  content: "🔒"; font-size: 9px;
  position: absolute; top: -2px; right: -2px;
  opacity: 0.7;
}

/* ── EmptyState component (Phase C1) ──────────────────────────────
   Single primitive for "no data yet" / "loading" placeholders across
   list views + admin sub-pages. Title is required, everything else is
   optional. Compact variant is for in-table empty rows. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  padding: 48px 24px; color: var(--muted);
  background: transparent;
}
.empty-state.is-compact { padding: 18px 12px; gap: 6px; }
.empty-state-icon  { font-size: 36px; opacity: 0.45; line-height: 1; }
.empty-state.is-compact .empty-state-icon { font-size: 24px; }
.empty-state-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0;
}
.empty-state.is-compact .empty-state-title { font-size: 13px; }
.empty-state-desc {
  font-size: 13px; color: var(--muted); margin: 0; max-width: 380px; line-height: 1.5;
}
.empty-state-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
.empty-state-btn-icon { display: inline-flex; align-items: center; }
.empty-state.is-loading .empty-state-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .empty-state.is-loading .empty-state-spinner { animation: none; }
}

/* Global loading overlay — shown by ViewManager when a render takes
   longer than 500 ms. Keeps the layout stable so the user doesn't
   stare at a blank shell. Pure CSS spinner; respects reduced-motion. */
.app-loading-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  z-index: 100; /* z-local: within app shell */
  backdrop-filter: blur(2px);
  animation: fadeIn 200ms ease forwards;
}
.app-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-loading-spinner { animation: none; border-top-color: var(--primary); }
}
.toast {
  padding: 13px 18px; border-radius: 11px;
  font-size: 13px; font-weight: 600;
  background: var(--surface); color: var(--ink, var(--text));
  box-shadow: 0 10px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  transform: translateX(120%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto; opacity: 0;
  border-left: 5px solid var(--primary);
  max-width: 360px;
  display: flex; align-items: center; gap: 12px;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast-body { flex: 1 1 auto; }
.toast-action {
  flex: 0 0 auto;
  background: transparent; border: 1px solid currentColor;
  color: inherit; font: inherit; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  cursor: pointer; min-height: 28px;
  transition: background 0.15s ease;
}
.toast-action:hover { background: rgba(0,0,0,0.06); }
.toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-theme="dark"] .toast-action:hover { background: rgba(255,255,255,0.1); }
.toast-close {
  flex: 0 0 auto;
  background: transparent; border: none; color: inherit;
  font: inherit; font-size: 18px; line-height: 1;
  padding: 0 4px; cursor: pointer; opacity: 0.7;
}
.toast-close:hover { opacity: 1; }
.toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.toast-info    { border-left-color: var(--primary); color: var(--ink, var(--text)); background: var(--surface); }
.toast-success { border-left-color: var(--success); color: #0F5138; background: #E6F7EE; }
.toast-error   { border-left-color: var(--danger);  color: #6B1D0D; background: #FBE3DB; }
.toast-warning { border-left-color: var(--warning); color: #5D4110; background: #FCEFD4; }

[data-theme="dark"] .toast-info    { color: #F1EEE6; background: #2A3A34; }
[data-theme="dark"] .toast-success { color: #8FEFC4; background: rgba(46,175,125,0.22); }
[data-theme="dark"] .toast-error   { color: #FFA78C; background: rgba(217,90,62,0.22); }
[data-theme="dark"] .toast-warning { color: #FFDB82; background: rgba(224,160,64,0.22); }

/* ── RESPONSIVE ──────────────────────────────────────── */
/* Progressive compression for the topbar right-side. We shrink /
 * collapse secondary items first (brand text, health label, role label,
 * sync chip, brand contact btn) so the nav has room to stay fully
 * reachable without scroll for as long as possible. Below ~720px the
 * nav falls back to horizontal scroll (fade mask + thin scrollbar). */
@media (max-width: 1280px) {
  .topbar-brand  { max-width: 140px; }
}
@media (max-width: 1100px) {
  .topbar-inner  { gap: 12px; padding: 10px 18px; }
  .topbar-brand  { display: none; }
}
@media (max-width: 900px) {
  .topbar-nav  { gap: 0; }
  .topbar-link { padding: 6px 10px; font-size: 12px; }
  .topbar-health-label { display: none; }
  .topbar-health { padding: 5px 9px; }
  .topbar-sync   { padding: 5px 9px; font-size: 10.5px; }
}
@media (max-width: 768px) {
  .topbar-inner         { gap: 8px; padding: 10px 14px; }
  .topbar-contact-chip  { display: none; }
  .topbar-brand-btn     { display: none; }
  .topbar-role span:last-child { display: none; } /* keep dot + stays tiny */
  .topbar-role          { padding: 5px 8px; }
}

/* Hamburger button — desktop hides it, ≤640px shows it and collapses
   .topbar-nav into a left-side drawer. The body.topbar-menu-open
   class is toggled from topbar/nav.js _bindMobileMenu so the page
   can dim its body content via CSS rules below. */
.topbar-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0; margin: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.topbar-menu-btn:hover { background: var(--bg); }
.topbar-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Mobile bottom tab bar (≤640px) ─────────────────────
   Primary touch nav. Replaces the hamburger drawer on phones; the
   ⚙ settings + ⟳ sync stay in the top bar. Honours the iOS home-
   indicator safe area for the Capacitor shell. */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-nav);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.06);
  }
  .bottom-nav-item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px 6px;
    min-height: 52px;
    color: var(--muted); text-decoration: none;
    font-size: 11px; font-weight: 600;
    transition: color var(--t-base, 0.15s) var(--ease, ease);
  }
  .bottom-nav-item.is-active { color: var(--primary); }
  .bottom-nav-icon { font-size: 20px; line-height: 1; }
  .bottom-nav-label { letter-spacing: 0.01em; }
  /* Bottom nav = primary 4; the hamburger drawer stays available for the
     overflow nav items (notifications / announcements / approvals). */
  .topbar-menu-btn { display: inline-flex; }
  .app { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .topbar-nav {
    position: fixed;
    top: var(--topbar-h, 56px); left: 0;
    width: min(80vw, 320px); max-width: 320px;
    height: calc(100vh - var(--topbar-h, 56px));
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px 24px;
    gap: 6px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: var(--z-nav);
  }
  .topbar-nav.is-open { transform: translateX(0); }
  .topbar-nav .nav-item {
    display: block;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
  }
  .topbar-nav .nav-group { width: 100%; }
  .topbar-nav .nav-group-trigger {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
  }
  body.topbar-menu-open { overflow: hidden; }
  body.topbar-menu-open::after {
    content: '';
    position: fixed;
    inset: var(--topbar-h, 56px) 0 0 0;
    background: rgba(0,0,0,0.32);
    z-index: calc(var(--z-nav) - 1);
    opacity: 1;
    transition: opacity .22s ease;
  }
}
@media (max-width: 640px) {
  .topbar-sync          { display: none; }
  .topbar-health        { display: none; }
  .dash-container, .cl-container, .cd-container, .st-container, .msg-container { padding: 18px 16px 40px; }
  .cal-container { padding: 18px 12px 40px; }
  .modal-panel { padding: 20px; }
  body::before { display: none; }

  /* WCAG 2.5.5 Target Size — every interactive element ≥ 44×44 CSS px
     on mobile. Topbar nav + chips currently drop to ~24-30px under
     compact paddings; this restores the minimum without changing
     desktop layout. */
  .topbar-link,
  .topbar-role,
  .topbar-settings-btn, .topbar-brand-contact-btn,
  .topbar-active-contact-clear,
  .topbar-langs button,
  .topbar-userswitch,
  .topbar-lang-btn, .topbar-lang-toggle, .topbar-lang-select,
  .topbar-kp-btn,
  .btn { min-height: 44px; }
  /* Squash the legacy mobile shrink that lowered .topbar-lang-btn to
     22px height (lines 861-863) — overridden here so WCAG 2.5.5 wins. */
  .topbar-lang-btn { padding: 11px 12px; min-width: 44px; font-size: 12px; }

  /* iOS notch / Android camera-cutout safe area — viewport-fit=cover is
     set in <meta>; this consumes the inset so nothing hides under the
     status bar on edge-to-edge displays. */
  .topbar-inner { padding-top: max(8px, env(safe-area-inset-top)); }
  .toast-wrap   { top: max(80px, calc(env(safe-area-inset-top) + 64px));
                  right: max(24px, env(safe-area-inset-right)); }
  .modal-overlay { padding-top: env(safe-area-inset-top);
                   padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.05ms; }
}

/* ──────────────────────────────────────────────────────
   MÜSAİTLİK EDİTÖRÜ
   ────────────────────────────────────────────────────── */
.mu-container {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.mu-migrate-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 0 0 14px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 10px;
}
.mu-migrate-icon  { font-size: 20px; }
.mu-migrate-body  { flex: 1; min-width: 0; }
.mu-migrate-title { font-size: 13px; font-weight: 700; color: var(--text); }
.mu-migrate-desc  { font-size: 12px; color: var(--muted); }
.mu-header {
  margin-bottom: var(--page-header-mb);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--page-header-gap); flex-wrap: wrap;
}
.mu-header-title { flex: 1; min-width: 0; }
.mu-title { font-size: var(--page-title-size); font-weight: var(--page-title-weight); letter-spacing: var(--page-title-tracking); font-family: var(--font-heading); }
.mu-subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mu-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mu-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }

.mu-layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.mu-sidebar {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 14px; box-shadow: var(--shadow-sm); height: fit-content;
  position: sticky; top: 76px;
}
.mu-side-title { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 10px; }
.mu-side-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background 0.15s;
}
.mu-side-item:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.mu-side-item.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; }
.mu-side-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mu-side-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.mu-dot.is-on { background: var(--success); box-shadow: 0 0 0 3px rgba(46,175,125,0.18); }

.mu-main { display: flex; flex-direction: column; gap: 18px; }
.mu-card {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.mu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mu-card-title { font-size: 16px; font-weight: 600; font-family: var(--font-heading); margin-bottom: 2px; }
.mu-card-sub   { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.mu-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.mu-form-row-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.mu-form-row-inline input { padding: 8px 10px; border: 1.5px solid var(--border-strong); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); }
.mu-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mu-list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: rgba(0,0,0,0.02); border-radius: 8px; font-size: 13px;
}
[data-theme="dark"] .mu-list-row { background: rgba(255,255,255,0.04); }

.mu-grid { overflow-x: auto; margin-top: 10px; }
.mu-grid-header {
  display: grid; grid-template-columns: 60px repeat(7, minmax(60px, 1fr));
  gap: 1px; background: var(--border-strong); margin-bottom: 1px;
  position: sticky; top: 0; z-index: 1;
}
.mu-grid-h { background: var(--surface); padding: 8px 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.mu-grid-body { display: flex; flex-direction: column; }
.mu-grid-row { display: grid; grid-template-columns: 60px repeat(7, minmax(60px, 1fr)); gap: 1px; background: var(--border-strong); }
.mu-grid-time { background: var(--surface); padding: 4px; text-align: right; font-size: 10px; color: var(--muted); padding-right: 8px; }
.mu-cell {
  background: var(--surface); height: 18px; cursor: pointer;
  transition: background 0.1s;
}
.mu-cell.is-half { border-top: 1px dashed rgba(0,0,0,0.04); }
.mu-cell:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.mu-cell.is-on { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.mu-cell.is-on:hover { filter: brightness(1.1); }
/* Per-step slot mode colours (ADR-0054). Later than .is-on so they win. */
.mu-cell.is-mode-office { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.mu-cell.is-mode-online_in_person { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.mu-cell.is-mode-online_meet { background: linear-gradient(135deg, var(--accent, #6366F1), color-mix(in srgb, var(--accent, #6366F1) 65%, #000)); }

/* Weekly-grid paint brush selector */
.mu-paint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mu-paint-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.mu-paint-btn {
  font: inherit; font-size: 12px; padding: 5px 10px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer;
  min-height: 32px; display: inline-flex; align-items: center; gap: 6px;
}
.mu-paint-btn::before { content: ''; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mu-paint-btn.is-mode-closed::before { background: transparent; border: 1.5px solid var(--muted); }
.mu-paint-btn.is-mode-office::before { background: #6B7280; }
.mu-paint-btn.is-mode-online_in_person::before { background: var(--primary); }
.mu-paint-btn.is-mode-online_meet::before { background: var(--accent, #6366F1); }
.mu-paint-btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 600; }
.mu-paint-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Manual-slot mode badge */
.mu-mode-badge { font-size: 10px; padding: 1px 7px; border-radius: 999px; color: #fff; margin-left: 6px; }
.mu-mode-badge.is-mode-office { background: #6B7280; }
.mu-mode-badge.is-mode-online_in_person { background: var(--primary); }
.mu-mode-badge.is-mode-online_meet { background: var(--accent, #6366F1); }

.mu-publish { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, transparent), color-mix(in srgb, var(--primary) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent); }
.mu-preview { margin-top: 12px; max-height: 280px; overflow-y: auto; }
.mu-preview-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mu-preview-row { font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.mu-preview-times { color: var(--muted); }

@media (max-width: 900px) {
  .mu-layout { grid-template-columns: 1fr; }
  .mu-sidebar { position: static; }
}

/* ──────────────────────────────────────────────────────
   ANNOUNCEMENTS (BULK MESSAGING)
   ────────────────────────────────────────────────────── */
.ann-container {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.ann-header { margin-bottom: var(--page-header-mb); }
.ann-title { font-size: var(--page-title-size); font-weight: var(--page-title-weight); letter-spacing: var(--page-title-tracking); font-family: var(--font-heading); }
.ann-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ann-warn {
  background: rgba(224,160,64,0.12); color: var(--warning);
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
  margin-bottom: 14px; border: 1px solid rgba(224,160,64,0.3);
}
.ann-card {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 18px 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.ann-step { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); font-weight: 700; margin-bottom: 12px; }
.ann-form-row { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.ann-form-row label { font-size: 12px; color: var(--muted); font-weight: 500; }
.ann-form-row select, .ann-form-row input, .ann-form-row textarea {
  padding: 9px 12px; border: 1.5px solid var(--border-strong); border-radius: 8px;
  font-size: 13px; background: var(--surface); color: var(--text);
}
.ann-form-row textarea { font-family: var(--font-body); resize: vertical; }
.ann-tpl-edit { margin-top: 8px; }
.ann-tpl-edit summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }

.ann-filter-block { margin-bottom: 12px; }
.ann-filter-label { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.04em; }
.ann-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: 16px; font-size: 12px;
  background: rgba(0,0,0,0.04); border: 1.5px solid transparent;
  color: var(--text); cursor: pointer; transition: all 0.15s;
  font-family: var(--font-body); font-weight: 500;
}
[data-theme="dark"] .chip { background: rgba(255,255,255,0.06); }
.chip:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.chip.is-on { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); border-color: var(--primary); font-weight: 600; }
/* Per-field role filter chips (WS3b) — reuses .chip / .chip.is-on. */
.role-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Admin default-scope checkbox grid (search settings, WS3a). */
.search-scope-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.ann-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ann-match { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 8px; }

.ann-actions { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ann-selcount { font-size: 12px; color: var(--muted); margin-left: auto; }
.ann-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.ann-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s;
}
.ann-row:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.ann-row:last-child { border-bottom: none; }
.ann-row-info { flex: 1; }
.ann-row-name { font-size: 13px; font-weight: 500; }
.ann-row-meta { font-size: 11px; color: var(--muted); }
.ann-empty { font-size: 12px; color: var(--muted); padding: 14px; text-align: center; }
.ann-overflow { font-size: 12px; color: var(--muted); padding: 8px 0 0; text-align: center; }

.ann-prev { background: rgba(0,0,0,0.03); padding: 14px; border-radius: 10px; }
[data-theme="dark"] .ann-prev { background: rgba(255,255,255,0.04); }
.ann-prev-subj { font-size: 13px; margin-bottom: 8px; }
.ann-prev-body { font-size: 13px; white-space: pre-wrap; font-family: var(--font-body); color: var(--text); }
.ann-send { text-align: center; }
.ann-send .btn-primary { padding: 12px 28px; font-size: 14px; }
.ann-result { margin-top: 12px; font-size: 13px; }
.ann-running { color: var(--info); }
.ann-ok      { color: var(--success); font-weight: 600; }
.ann-fail    { color: var(--danger); font-weight: 600; }
.ann-fail-list { margin-top: 8px; padding: 8px 12px; background: rgba(217,90,62,0.08); border-radius: 8px; font-size: 12px; }
.ann-merge-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: rgba(0,0,0,0.03); border-radius: 8px;
  margin-bottom: 10px;
}
[data-theme="dark"] .ann-merge-bar { background: rgba(255,255,255,0.04); }
.ann-merge-hint { font-size: 11px; color: var(--muted); margin-right: 4px; }
.ann-schedule-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ann-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ann-runs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ann-runs-title { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.ann-run {
  display: flex; justify-content: space-between; font-size: 12px;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 4px;
  background: rgba(0,0,0,0.03);
}
[data-theme="dark"] .ann-run { background: rgba(255,255,255,0.04); }
.ann-run.is-done   { color: var(--success); }
.ann-run.is-failed { color: var(--danger); }
.ann-run.is-pending{ color: var(--info); }

/* ──────────────────────────────────────────────────────
   DATETIME PICKER (Rule #7 — compound date+time)
   ────────────────────────────────────────────────────── */
.dt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1.5px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 13px; cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.15s;
}
.dt-btn:hover { border-color: var(--primary); }
.dt-btn-icon { font-size: 14px; }
.dt-btn-label { font-weight: 500; }

.dt-pop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 14px; min-width: 480px; max-width: 520px;
  font-family: var(--font-body);
}
[data-theme="dark"] .dt-pop { border-color: var(--border-strong); }

.dt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dt-title { flex: 1; text-align: center; font-weight: 600; font-size: 14px; }
.dt-nav {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 16px; color: var(--text);
}
.dt-nav:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }

.dt-body { display: grid; grid-template-columns: 1fr 120px; gap: 14px; }
.dt-cal { min-width: 280px; }
.dt-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dt-dow {
  text-align: center; font-size: 11px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 4px 0;
}
.dt-dow.is-closed { opacity: 0.4; }
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 12px; cursor: pointer; font-family: var(--font-body);
  transition: background 0.15s;
}
.dt-cell:hover:not(.is-closed):not(.dt-blank) { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.dt-cell.is-today { font-weight: 700; color: var(--primary); }
.dt-cell.is-sel { background: var(--primary); color: white; border-color: var(--primary); }
.dt-cell.is-closed { opacity: 0.3; cursor: not-allowed; }
.dt-blank { cursor: default; }
.dt-foot { display: flex; justify-content: center; margin-top: 8px; }
.dt-today {
  font-size: 12px; padding: 6px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; color: var(--text); cursor: pointer;
}
.dt-today:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }

.dt-times {
  max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  padding-right: 4px;
}
.dt-time {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text); font-size: 12px; cursor: pointer;
  font-family: var(--font-mono); text-align: center;
}
.dt-time:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.dt-time.is-sel { background: var(--primary); color: white; border-color: var(--primary); }

@media (max-width: 640px) {
  .dt-pop { min-width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .dt-body { grid-template-columns: 1fr; }
  .dt-times { max-height: 160px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .dt-time { flex: 0 0 auto; }
}

/* Settings 6-section redesign */
.st-section-head {
  /* Sticky inside its parent .st-section so the section title stays
     visible while the user scrolls long forms (Identity, Integrations,
     Schedule…). Z-index sits below .st-tabbar (20) so the tabbar always
     wins. `top` matches the tabbar's sticky height + its bottom padding;
     adjust if the tabbar geometry changes. */
  position: sticky;
  top: 56px;
  z-index: 10; /* z-local: settings section head */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  /* Negative margin + matching padding extends the head to the section
     card edges so its background fully covers content scrolling under it. */
  margin: -20px -20px 14px;
  padding: 16px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.st-section-head .st-section-title { margin-bottom: 4px; }
.st-section-head .st-desc { margin-bottom: 0; }
.st-card {
  background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 10px;
  margin-top: 10px; padding: 0; overflow: hidden;
}
[data-theme="dark"] .st-card { background: rgba(255,255,255,0.03); }
.st-card > summary {
  padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px;
  list-style: none; user-select: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.st-card > summary::-webkit-details-marker { display: none; }
.st-card-summary-main { flex: 1; min-width: 0; }
.st-card > summary::before { content: '▸'; transition: transform 0.2s; display: inline-block; flex-shrink: 0; }
.st-card[open] > summary::before { transform: rotate(90deg); }
.st-card > summary:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.st-card-body { padding: 0 16px 16px; }
.st-summary-status {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.st-summary-status.is-on      { background: rgba(46,175,125,0.18); color: #0F5138; }
.st-summary-status.is-partial { background: rgba(224,160,64,0.22); color: #7B4C0C; }
.st-summary-status.is-off     { background: rgba(15,22,35,0.08);   color: var(--muted); }
[data-theme="dark"] .st-summary-status.is-off { background: rgba(255,255,255,0.06); }
.st-summary-action {
  padding: 4px 10px; font-size: 11px; flex-shrink: 0;
}

/* Workday chips (Settings → Hours section) + availability grid workday hide */
.workdays-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.workday-chip {
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 18px;
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; transition: all 0.15s;
}
.workday-chip:hover { border-color: var(--primary); }
.workday-chip.is-on {
  background: var(--primary); color: white; border-color: var(--primary); font-weight: 600;
}
/* Availability weekly grid — closed workdays appear muted */
.mu-grid-h.is-closed { opacity: 0.35; }
.mu-cell.is-closed { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.04) 3px 6px); cursor: not-allowed; }
[data-theme="dark"] .mu-cell.is-closed { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,0.03) 3px 6px); }

/* Dashboard multi-day stack */
.bd-day-block { margin-top: 18px; }
.bd-day-block:first-child { margin-top: 8px; }
.bd-day-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 0 4px 8px; margin: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

/* Calendar + Dashboard multi-select chip bar */
.cal-filter-bar, .bd-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.bd-filter-bar { padding: 0; background: transparent; border-bottom: none; margin-bottom: 0; min-height: 32px; }

/* Dashboard top controls — range toggle + expert + customer filters flow on
   ONE compact horizontal row (wrap when narrow) instead of stacking, each on
   its own line. Tighter chips/label keep the filter area low-profile so the
   pano stays appointment-first (owner: compact dikey+yatay filtreler, 2026-05-31). */
.bd-controls {
  display: flex; flex-flow: row wrap; align-items: center;
  gap: 6px var(--space-3);
  margin-bottom: var(--space-3);
}

/* FX converter — compact inline widget at the action-bar edge (TL ↔ USD/EUR,
   TCMB rates). Rate reference + source/date live in the container title tooltip. */
.bd-fx {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
}
.bd-fx-icon { font-size: 14px; opacity: 0.75; }
.bd-fx-amount {
  width: 4.5rem; max-width: 22vw; height: 32px;
  padding: 0 6px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font-size: 12px;
}
.bd-fx-cur {
  height: 32px; padding: 0 4px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: 12px;
}
.bd-fx-swap {
  height: 32px; min-width: 32px; padding: 0 4px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); cursor: pointer; font-size: 12px;
}
.bd-fx-swap:hover { background: var(--bg-hover); }
.bd-fx-result {
  font-size: 12px; font-weight: var(--weight-bold);
  color: var(--primary); min-width: 4.5rem; text-align: right; white-space: nowrap;
}
.bd-controls .bd-range { margin-bottom: 0; }
.bd-controls .bd-filter-bar { min-height: 0; gap: 6px; }
/* Compact chips/inputs scoped to the filter context — global .chip untouched. */
.bd-filter-bar .chip, .cal-filter-bar .chip { padding: 3px 9px; font-size: 11px; }
.bd-filter-bar .cal-filter-label { margin-right: 0; }
.bd-customer-filter .bd-customer-search { min-width: 150px; padding: 4px 10px; font-size: 12px; }
.cal-filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-filter-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; margin-right: 2px;
}

/* SystemHealth — severity groups */
.sh-group { margin-top: 14px; }
.sh-group:first-child { margin-top: 0; }
.sh-group-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700; padding: 6px 8px; margin-bottom: 4px;
}
.sh-group.is-critical .sh-group-head { color: var(--danger); }
.sh-group.is-warn .sh-group-head { color: var(--warning); }
.sh-group.is-info .sh-group-head { color: var(--primary); }

/* ── Preferences view (#/preferences) ──
   Per-user layered prefs (theme mode, language, density, …). Visually
   echoes Settings cards but reads from C.prefs not C.workspace, and
   shows a 🔒 badge when workspace policy enforces a key. */
.pref-container {
  max-width: var(--page-max-narrow); margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
}
.pref-header { margin-bottom: 18px; }
.pref-title  { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.pref-desc   { font-size: 13px; color: var(--muted); line-height: 1.5; }
.pref-section {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.pref-section-title {
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
  color: var(--text);
}
.pref-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.pref-row:last-child { margin-bottom: 0; }
.pref-row-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pref-label  { font-size: 13px; font-weight: 500; color: var(--text); }
.pref-hint   { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.pref-row select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
  font-size: 13px;
}
.pref-row select:disabled { opacity: 0.6; cursor: not-allowed; }
.pref-row.is-locked .pref-label { color: var(--muted); }
.pref-lock {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  font-weight: 600;
}
.pref-row-check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
}
.pref-row-check input[type="checkbox"] { margin: 0; }
.pref-row-check .pref-hint { flex-basis: 100%; margin-left: 24px; }

/* ── Preference policies (Settings → Tercih Politikaları) ──
   Admin-side enforce panel. Each row: label + key id + workspace
   default <select> + Enforce lock checkbox. Compact table layout
   so 5+ rows stack readably without dominating the section. */
.pp-table {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.pp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
}
[data-theme="dark"] .pp-row { background: rgba(255,255,255,0.03); }
.pp-row-info { display: flex; flex-direction: column; gap: 2px; }
.pp-key      { font-size: 13px; font-weight: 600; color: var(--text); }
.pp-key-id   {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.pp-row select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
  font-size: 13px; min-width: 160px;
}
.pp-lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: 6px;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.pp-lock:hover { color: var(--text); }
.pp-lock input { cursor: pointer; }
.pp-lock input:checked + span {
  color: var(--primary);
}
@media (max-width: 640px) {
  .pp-row { grid-template-columns: 1fr; }
  .pp-row select { min-width: 0; width: 100%; }
}

/* ── Setup banner (Aşama 5) ──
   Admin-only "missing essentials" nudge surfaced at the top of the
   dashboard. Sized to read at a glance, dismissible per-user via
   Prefs.update so the dismissal survives reload + crosses devices. */
/* setup-banner + .sb-* class'ları Faz 10/1'de kaldırıldı (onboarding
   wizard sistem-seviyesi missing-essentials nudge'unu emer). */

/* ── Command palette (Faz A.1) ─────────────────────────────
   Spotlight-style overlay invoked via Cmd+K / Ctrl+K. Sits above
   modals (--z-overlay) since it can launch them. */
.cmd-palette-root { position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 1); pointer-events: none; }
.cmd-palette-root.is-open { pointer-events: auto; }
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(20,30,40,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px;
  animation: cmdFadeIn 0.12s ease;
}
@keyframes cmdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cmd-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 160px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.cmd-input {
  appearance: none;
  border: none; outline: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 16px; line-height: 1.4;
  padding: 16px 20px;
  width: 100%;
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-list {
  list-style: none;
  margin: 0; padding: 8px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.cmd-item {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px; color: var(--text);
  transition: background var(--t-base) var(--ease);
}
.cmd-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .cmd-item:hover { background: rgba(255,255,255,0.04); }
.cmd-item.is-active {
  background: var(--primary);
  color: var(--on-primary, #fff);
}
.cmd-item.is-active .cmd-hint,
.cmd-item.is-active .cmd-kind { color: var(--on-primary, #fff); opacity: 0.85; }
.cmd-icon  { font-size: 16px; line-height: 1; }
.cmd-label { font-weight: 500; }
.cmd-hint  { font-size: 12px; color: var(--muted); }
.cmd-kind  { font-size: 12px; color: var(--muted); margin-left: 4px; }
.cmd-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.cmd-footer {
  display: flex; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 12px; color: var(--muted);
  background: rgba(0,0,0,0.015);
}
[data-theme="dark"] .cmd-footer { background: rgba(255,255,255,0.02); }
.cmd-footer kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
@media (max-width: 640px) {
  .cmd-overlay { padding: 24px 8px; }
  .cmd-panel { max-height: calc(100vh - 48px); }
  .cmd-footer { display: none; }
}

/* ── Saved views chip bar (Faz B.1) ─────────────────────────
   Sits under the page toolbar on list views (contacts, billing, …).
   Pinned chips float left via the .is-pinned modifier; the active
   chip uses primary fill so the user can see at a glance which
   filter snapshot is in effect. */
.sv-bar {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 12px;
  align-items: center;
}
.sv-chip {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.sv-chip:hover { border-color: var(--primary); }
.sv-chip.is-active {
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-color: var(--primary);
}
.sv-chip.is-active .sv-chip-x { color: var(--on-primary, #fff); }
.sv-chip-btn {
  appearance: none;
  background: transparent; border: none; color: inherit;
  padding: 4px 10px;
  font: inherit; cursor: pointer;
}
.sv-chip-x {
  appearance: none;
  background: transparent; border: none; color: var(--muted);
  padding: 0 8px 0 0; cursor: pointer;
  font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.sv-chip:hover .sv-chip-x,
.sv-chip:focus-within .sv-chip-x { opacity: 1; }
.sv-save-btn {
  appearance: none;
  background: transparent; border: 1px dashed var(--border);
  color: var(--muted);
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; cursor: pointer;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sv-save-btn:hover { color: var(--text); border-color: var(--primary); }

/* ── Scheduling assistant grid (Faz B.2) ────────────────────
   Staff × hour gantt rendered inside the new-appointment modal.
   Single horizontal scroll on narrow viewports; the suggested slot
   uses the primary accent so the user spots it instantly. */
.sa-wrap { font-size: 12px; color: var(--text); }
.sa-grid-head, .sa-grid {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.sa-grid-head { border-bottom: none; border-radius: 8px 8px 0 0; grid-template-columns: 160px repeat(var(--sa-head-cols, 1), 1fr); }
.sa-grid { border-radius: 0 0 8px 8px; }
.sa-corner { background: var(--bg); border-right: 1px solid var(--border); }
.sa-hour {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.sa-hour:last-child { border-right: none; }
.sa-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  border-top: 1px solid var(--border);
  min-height: 30px;
}
.sa-row:first-child { border-top: none; }
.sa-row-label {
  padding: 0 8px;
  font-weight: 500;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  background: var(--bg);
  height: 100%;
}
.sa-row-error { color: #b45309; }
.sa-row-cells {
  display: grid;
  grid-template-columns: repeat(var(--sa-cols, 1), 1fr);
  height: 100%;
}
.sa-cell {
  border-right: 1px solid rgba(0,0,0,0.04);
  background: transparent;
}
[data-theme="dark"] .sa-cell { border-right-color: rgba(255,255,255,0.04); }
.sa-cell.sa-busy   { background: var(--muted); opacity: 0.55; }
.sa-cell.sa-suggest {
  background: var(--primary);
  opacity: 0.85;
}
.sa-hint {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px dashed var(--border);
  font-size: 13px;
}
.sa-hint-warn { color: #b45309; border-color: #b45309; }
.sa-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* ── Conflict badge + dialog (Faz B.3) ───────────────────────
   Topbar pill that surfaces unresolved sync conflicts; modal
   side-by-side diff highlights local vs remote field values. */
.topbar-conflict {
  appearance: none;
  border: 1px solid #b45309;
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.topbar-conflict:hover { background: rgba(180, 83, 9, 0.22); }

/* Rule #30 / Faz D — phone chip with flag + intl number + country tooltip. */
.phone-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.phone-country-chip-num { font-feature-settings: 'tnum'; }

/* Rule #34 / Faz H — prefab interaction chips on contact detail. */
.cd-prefab { margin-bottom: 12px; }
.cd-prefab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cd-prefab-chip {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.cd-prefab-chip:hover { background: var(--surface-2, var(--border)); }
.cd-prefab-note { width: 100%; min-height: 38px; font-size: 12px; }

/* Rule #33 / Faz F — multi-stakeholder event-brief rows. */
.eb-participants { display: flex; flex-direction: column; gap: 10px; }
.eb-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
}
.eb-row-head { margin-bottom: 6px; }
.eb-role {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* Rule #24 / Faz C — secondary-role badge on contact picker rows. */
.contact-role-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
.cf-conflict-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}
.cf-conflict-table th, .cf-conflict-table td {
  text-align: left;
  border: 1px solid var(--border);
  padding: 6px 10px;
  vertical-align: top;
}
.cf-conflict-table th {
  background: var(--bg);
  font-weight: 600;
}
.cf-conflict-key { font-weight: 500; color: var(--muted); width: 28%; }
.cf-conflict-local  { background: rgba(192, 57, 43, 0.06); }
.cf-conflict-remote { background: rgba(42, 125, 79, 0.06); }
.cf-conflict-table code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  word-break: break-word;
}
.cda-related { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cda-section { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.cda-section-title { font-size: 12px; font-weight: 600; padding: 6px 10px; background: var(--surface); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cda-list { margin: 0; padding: 0; list-style: none; }
.cda-list li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; border-top: 1px solid var(--border); }
.cda-list li:first-child { border-top: none; }
.cda-date { color: var(--muted); font-size: 12px; min-width: 76px; }
.cda-status { font-size: 11px; color: var(--muted); }
.cda-more { color: var(--muted); font-style: italic; font-size: 12px; }

/* ──────────────────────────────────────────────────────────────────────
   Adaptive container queries — Faz B
   ──────────────────────────────────────────────────────────────────────
   These rules react to the *actual* width an element receives, not the
   viewport width. They complement the @media rules above so that when
   the right-side ContactPanel is open and steals 320px from the page
   the central layout still adapts correctly (a 1280px viewport with
   the panel open exposes only 960px of usable shell width, which
   without container queries would still render as "desktop").

   Container names:
     shell  — the page-level admin shell (.manage-shell)
     card   — the workspace setup wizard cards (.ws-card)
     page   — global page containers (.dash-container, .cl-container,
              .st-container, .msg-container)
     section — settings sections (.st-section)
     header  — page-header rows (.am-header)
   ────────────────────────────────────────────────────────────────────── */

.manage-shell { container-type: inline-size; container-name: shell; }
.ws-card      { container-type: inline-size; container-name: card; }
.st-section   { container-type: inline-size; container-name: section; }
.am-header    { container-type: inline-size; container-name: header; }
.dash-container,
.cl-container,
.st-container,
.msg-container,
.cal-container { container-type: inline-size; container-name: page; }

/* Shell: stack the manage nav above the body whenever the usable
   shell width drops below the readable two-column threshold. This
   fires earlier than the @media (max-width: 768px) rule above when
   the ContactPanel is dragging the central area narrower. */
@container shell (max-width: 720px) {
  .manage-shell { grid-template-columns: 1fr; gap: 12px; }
  .manage-shell > .manage-nav { position: static; }
  .manage-shell .manage-nav-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .manage-shell .manage-nav-link { flex: 1 1 calc(50% - 8px); }
}

/* Workspace-setup card: the inline form (input + button) becomes a
   vertical stack when the card is too narrow to keep them side-by-side
   without truncating the input. */
@container card (max-width: 420px) {
  .ws-card .ws-create-form { flex-direction: column; align-items: stretch; }
  .ws-card .ws-create-form > input.as-input { flex: 1 1 auto; }
  .ws-card .ws-create-form > button { width: 100%; }
}

/* Page header: title + actions wrap onto two rows automatically once
   the container is narrow enough that both can't fit on one line. The
   .am-title font-size also shrinks proportionally to avoid clipping. */
@container header (max-width: 540px) {
  .am-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .am-header .am-title { font-size: clamp(18px, 5cqi, 22px); }
  .am-header .am-header-actions { justify-content: flex-end; }
}

/* Settings sections: dense option grids switch from 2-col → 1-col when
   the section column is narrower than ~360px (e.g. when ContactPanel
   reduces the shell to ~600px on a 1024px viewport). */
@container section (max-width: 360px) {
  .st-section .st-form-grid { grid-template-columns: 1fr; }
  .st-section .st-copy-fields { grid-template-columns: 1fr; }
}

/* Generic page container: page-level padding shrinks linearly with the
   container width so dense viewports breathe and narrow ones don't
   bleed off-screen. Uses `cqi` (container inline-size unit). */
@container page (max-width: 520px) {
  .dash-container,
  .cl-container,
  .st-container,
  .msg-container,
  .cal-container { padding-left: clamp(12px, 4cqi, 18px); padding-right: clamp(12px, 4cqi, 18px); }
}