/* ==========================================================================
   Forty Rent — Application skin (app.css)  ·  D41, decisions_v5.md
   ==========================================================================
   Self-contained replacement for `styles.css` + `kortex-theme.css` on the
   24 application screens (courts-admin, owner/*, booking, venues, ...).
   Ground rule: "בהירות תחילה, יוקרה בשקט" — this is a working tool for a
   venue manager, not a landing page. Same brand tokens as the marketing
   site ("Midnight & Gold": midnight / panel / gold, Frank Ruhl Libre +
   Heebo) but a calmer, denser, quieter temperament: smaller radii,
   shorter motion, less drama.

   CONTRACT
   - Does NOT @import or depend on styles.css / kortex-theme.css / marketing.css.
   - Re-implements every class currently defined by styles.css + the
     component additions introduced by kortex-theme.css (kx-modal-*,
     kx-bento/kx-tile, kx-reveal, kx-mesh, kx-countup) because pages use
     them directly and this file is a drop-in replacement, not an overlay.
   - Section 2 also re-declares every legacy custom-property NAME that any
     page's own inline <style> block references (--color-*, --space-*,
     --radius-*, --shadow-*, --font-size-*, --kx-*, --status-*) as an alias
     onto the new --app-* tokens. Wiring pages to this stylesheet (AP2) is
     a DOM-free swap of two <link> tags for one — nothing else changes, so
     any page-local CSS must keep resolving exactly as before.
   - Namespace for new/primary tokens and utility classes: --app-*.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;900&family=Heebo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* --------------------------------------------------------------------------
   1. Design tokens — --app-*
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* --- Surfaces (warm-light, redesign 2026-08: warm grey canvas, cream
     elevation, near-white cards — same trio as marketing-v2) --- */
  --app-bg: #d7d7d0;
  --app-bg-elev: #f4f4e7;
  --app-panel: #fdfcfa;
  --app-panel-alt: #f4f4e7;
  --app-border: rgba(26, 22, 20, 0.1);
  --app-border-strong: rgba(26, 22, 20, 0.2);

  /* --- Ink (primary action, contrast surfaces, headings) --- */
  --app-ink: #1a1614;
  --app-ink-900: #1a1614;
  --app-ink-800: #2e2722;
  --app-ink-contrast: #f4f4e7;

  /* --- Primary accent: warm ink (buttons/links), lime for soft tints.
     Token NAMES keep the historical "gold" spelling — the alias layer
     (--color-primary, --kx-gold, page-local styles) depends on them. --- */
  --app-gold: #1a1614;
  --app-gold-soft: rgba(226, 230, 125, 0.4);
  --app-gold-hover: #2e2722;
  --app-gold-deep: #6f6f2e;
  --app-gold-contrast: #f4f4e7;

  /* --- Text --- */
  --app-text: #1a1614;
  --app-text-body: #2e2a26;
  --app-text-dim: rgba(26, 22, 20, 0.7);
  --app-text-faint: rgba(26, 22, 20, 0.45);

  /* --- Focus ring: teal, distinct from ink and AA on the light canvas --- */
  --app-focus: #1f5a68;

  /* --- Status: green (free) / orange (booked) / hatched (blocked) —
     the same scale as the marketing vignette and the hero's order phase --- */
  --app-mint-bg: rgba(106, 168, 120, 0.2);
  --app-mint-border: rgba(106, 168, 120, 0.55);
  --app-mint-fg: #3f6b49;

  --app-amber-bg: #ff7733;
  --app-amber-border: #e2661f;
  --app-amber-fg: #1a1614;

  --app-blocked-bg: repeating-linear-gradient(
    45deg,
    var(--app-panel-alt),
    var(--app-panel-alt) 6px,
    var(--app-bg) 6px,
    var(--app-bg) 12px
  );
  --app-blocked-border: var(--app-border);
  --app-blocked-fg: var(--app-text-dim);

  --app-danger-bg: rgba(164, 50, 28, 0.12);
  --app-danger-border: rgba(164, 50, 28, 0.4);
  --app-danger-fg: #a4321c;

  /* --- Bento accents (kx-tile variants) — deepened fg for AA on light --- */
  --app-purple-bg: rgba(104, 78, 190, 0.12);
  --app-purple-border: rgba(104, 78, 190, 0.35);
  --app-purple-fg: #4c3a94;
  --app-cyan-bg: rgba(28, 122, 138, 0.12);
  --app-cyan-border: rgba(28, 122, 138, 0.35);
  --app-cyan-fg: #175f6d;

  /* --- Spacing scale (mirrors styles.css 1-8, same physical values) --- */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;
  --app-space-8: 64px;

  /* --- Radii: smaller than the marketing site — denser, quieter --- */
  --app-radius-sm: 6px;
  --app-radius-md: 11px;
  --app-radius-lg: 16px;
  --app-radius-pill: 999px;

  /* --- Shadows: restrained warm-ink, soft depth on the light canvas --- */
  --app-shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.05), 0 4px 12px rgba(26, 22, 20, 0.06);
  --app-shadow-md: 0 12px 30px rgba(26, 22, 20, 0.12);
  --app-shadow-gold: 0 6px 18px rgba(26, 22, 20, 0.14);

  /* --- Motion: short, quiet (D41 — no reveal-on-scroll drama here) --- */
  --app-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --app-duration: 160ms;
  --app-duration-slow: 200ms;

  /* --- Typography (Forty Rent): Frank Ruhl Libre for display/headings, Heebo
     for body/Hebrew, IBM Plex Mono for numerals --- */
  --app-font-display: "Frank Ruhl Libre", "Heebo", Georgia, serif;
  --app-font-body: "Heebo", system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --app-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --app-font-size-sm: 0.875rem;
  --app-font-size-base: 1rem;
  --app-font-size-lg: 1.125rem;
  --app-font-size-xl: 1.3rem;
  --app-font-size-2xl: 1.6rem;
  --app-font-size-3xl: 2rem;

  --app-max-width: 1080px;
}

/* --------------------------------------------------------------------------
   2. Compatibility aliases — legacy token names used by page-local
      <style> blocks that this task does not touch. Every name below
      resolves onto the --app-* values above so no page silently breaks
      once its <link> tags are repointed at this file (AP2).
   -------------------------------------------------------------------------- */
:root {
  /* styles.css names */
  --color-bg: var(--app-bg);
  --color-bg-alt: var(--app-bg-elev);
  --color-surface: var(--app-panel);
  --color-surface-alt: var(--app-panel-alt);
  --color-primary: var(--app-gold);
  --color-primary-dark: var(--app-gold-hover);
  --color-primary-contrast: var(--app-gold-contrast);
  --color-on-primary: var(--app-gold-contrast);
  --color-secondary: var(--app-cyan-fg);
  --color-secondary-dark: #6fb9c8;
  --color-text: var(--app-text);
  --color-text-muted: var(--app-text-dim);
  --color-border: var(--app-border);
  --color-border-strong: var(--app-border-strong);
  --color-danger: var(--app-danger-fg);
  --color-danger-bg: var(--app-danger-bg);
  --color-success: var(--app-mint-fg);
  --color-success-bg: var(--app-mint-bg);
  --color-info-bg: rgba(26, 22, 20, 0.05);

  --space-1: var(--app-space-1);
  --space-2: var(--app-space-2);
  --space-3: var(--app-space-3);
  --space-4: var(--app-space-4);
  --space-5: var(--app-space-5);
  --space-6: var(--app-space-6);
  --space-7: var(--app-space-7);
  --space-8: var(--app-space-8);

  --radius-sm: var(--app-radius-sm);
  --radius-md: var(--app-radius-md);
  --radius-lg: var(--app-radius-lg);
  --radius-pill: var(--app-radius-pill);

  --shadow-sm: var(--app-shadow-sm);
  --shadow-md: var(--app-shadow-md);

  --font-family: var(--app-font-body);
  --font-size-sm: var(--app-font-size-sm);
  --font-size-base: var(--app-font-size-base);
  --font-size-lg: var(--app-font-size-lg);
  --font-size-xl: var(--app-font-size-xl);
  --font-size-2xl: var(--app-font-size-2xl);
  --font-size-3xl: var(--app-font-size-3xl);

  --max-width: var(--app-max-width);

  /* kortex-theme.css names (--kx-*) */
  --kx-bg: var(--app-bg);
  --kx-bg-alt: var(--app-bg-elev);
  --kx-panel: var(--app-panel);
  --kx-panel-alt: var(--app-panel-alt);
  --kx-panel-border: var(--app-border-strong);
  --kx-panel-border-soft: var(--app-border);
  --kx-gold: var(--app-gold);
  --kx-gold-hover: var(--app-gold-hover);
  --kx-gold-deep: var(--app-gold-deep);
  --kx-gold-contrast: var(--app-gold-contrast);
  --kx-text: var(--app-text);
  --kx-text-dim: var(--app-text-dim);
  --kx-text-faint: var(--app-text-faint);
  --kx-heading: var(--app-text);
  --kx-purple-bg: var(--app-purple-bg);
  --kx-purple-border: var(--app-purple-border);
  --kx-purple-glow: var(--app-purple-bg);
  --kx-purple-text: var(--app-purple-fg);
  --kx-cyan-bg: var(--app-cyan-bg);
  --kx-cyan-border: var(--app-cyan-border);
  --kx-cyan-glow: var(--app-cyan-bg);
  --kx-cyan-text: var(--app-cyan-fg);
  --kx-amber-bg: var(--app-amber-bg);
  --kx-amber-border: var(--app-amber-border);
  --kx-amber-glow: var(--app-amber-bg);
  --kx-amber-text: var(--app-amber-fg);
  --kx-mint-bg: var(--app-mint-bg);
  --kx-mint-border: var(--app-mint-border);
  --kx-mint-glow: var(--app-mint-bg);
  --kx-mint-text: var(--app-mint-fg);
  --kx-focus: var(--app-focus);
  --kx-font-head: var(--app-font-display);
  --kx-font-body: var(--app-font-body);
  --kx-radius-sm: var(--app-radius-sm);
  --kx-radius-md: var(--app-radius-md);
  --kx-radius-lg: var(--app-radius-lg);
  --kx-transition-fast: var(--app-duration) var(--app-ease);
  --kx-transition-med: var(--app-duration-slow) var(--app-ease);
  --kx-shadow-sm: var(--app-shadow-sm);
  --kx-shadow-md: var(--app-shadow-md);

  /* status tokens referenced by page-local schedule legends */
  --status-free-bg: var(--app-mint-bg);
  --status-free-fg: var(--app-mint-fg);
  --status-booked-bg: var(--app-amber-bg);
  --status-booked-fg: var(--app-amber-fg);
  --status-blocked-bg: var(--app-blocked-bg);
  --status-blocked-fg: var(--app-blocked-fg);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--app-font-body);
  font-size: var(--app-font-size-base);
  line-height: 1.55;
  color: var(--app-text-body);
  background: var(--app-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Only page-level h1 speaks the display face (D41). Sub-headings inside a
   work screen stay in Heebo for information density and readability. */
h1 {
  font-family: var(--app-font-display);
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.18;
  margin: 0 0 var(--app-space-3);
}

h2, h3, h4 {
  font-family: var(--app-font-body);
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.3;
  margin: 0 0 var(--app-space-3);
}

h1 { font-size: var(--app-font-size-3xl); }
h2 { font-size: var(--app-font-size-2xl); }
h3 { font-size: var(--app-font-size-xl); }

p { margin: 0 0 var(--app-space-3); }

a {
  color: var(--app-gold-deep);
  text-decoration-thickness: 1.5px;
  transition: color var(--app-duration) var(--app-ease);
}

a:hover { color: var(--app-ink); }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

img, svg { max-width: 100%; display: block; }

/* Shared, high-contrast focus ring — distinct from gold so it stays
   visible against gold buttons too. */
input:focus, select:focus, textarea:focus, button:focus, a:focus,
:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Layout shell — header / nav / footer / main
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(232, 232, 232, 0.8);
  border-bottom: 1px solid var(--app-border);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: var(--app-space-3) var(--app-space-5);
  display: flex;
  align-items: center;
  gap: var(--app-space-5);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--app-space-2);
  font-weight: 700;
  font-size: var(--app-font-size-lg);
  font-family: var(--app-font-display);
  color: var(--app-text);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  color: var(--app-text);
  font-size: 1.3em;
}

.brand-name {
  letter-spacing: 0.06em;
}

.brand-name .rent {
  color: var(--app-gold);
}

.brand-logo {
  height: 34px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 640px) {
  .brand-logo {
    height: 28px;
  }
}

.site-nav {
  flex: 1;
  min-width: 200px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
}

.site-nav a {
  display: inline-block;
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-pill);
  color: var(--app-text-dim);
  text-decoration: none;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  transition: background var(--app-duration) var(--app-ease),
    color var(--app-duration) var(--app-ease);
}

.site-nav a:hover {
  background: var(--app-gold-soft);
  color: var(--app-text);
}

.site-nav a[aria-current="page"] {
  background: var(--app-gold);
  color: var(--app-gold-contrast);
}

.header-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--app-text);
  text-decoration: none;
  border: 1px solid transparent;
  flex: 0 0 auto;
  transition: background var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}
.header-gear:hover {
  background: var(--app-panel-alt);
  border-color: var(--app-border-strong);
  color: var(--app-gold-deep);
}
.header-gear[aria-current="page"] {
  background: var(--app-ink);
  color: var(--app-ink-contrast);
}

/* Header dropdown menus — the nav "דוחות" toggle and the gear settings menu.
   Click-to-open (owner-menu.js); accessible with aria-expanded + keyboard. */
.site-nav .has-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-pill);
  color: var(--app-text-dim);
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}
.nav-dropdown-toggle:hover { background: var(--app-gold-soft); color: var(--app-text); }
.nav-dropdown-toggle[aria-current="page"] { background: var(--app-gold); color: var(--app-gold-contrast); }
.nav-dropdown-toggle .caret { font-size: 0.7em; transition: transform var(--app-duration) var(--app-ease); }
.has-dropdown.open .nav-dropdown-toggle .caret,
.header-menu.open .header-gear .caret { transform: rotate(180deg); }

.header-menu { position: relative; display: inline-flex; flex: 0 0 auto; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 190px;
  background: var(--app-panel);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown[hidden] { display: none; }
.nav-dropdown-end { inset-inline-start: auto; inset-inline-end: 0; }
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block;
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
  text-decoration: none;
  font-size: var(--app-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--app-gold-soft); color: var(--app-text); }
.nav-dropdown a[aria-current="page"] { background: var(--app-gold); color: var(--app-gold-contrast); }
.header-gear[aria-current="page"] { background: var(--app-ink); color: var(--app-ink-contrast); }
.header-gear .caret { font-size: 0.6rem; margin-inline-start: 2px; }

/* Header printer button — mirrors .header-gear so the two icons read as a
   pair. It is a <button>, so reset the native chrome. */
.header-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--app-text);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--app-duration) var(--app-ease), border-color var(--app-duration) var(--app-ease), color var(--app-duration) var(--app-ease);
}
.header-print:hover {
  background: var(--app-panel-alt);
  border-color: var(--app-border-strong);
  color: var(--app-gold-deep);
}

.header-account {
  display: flex;
  align-items: center;
  gap: var(--app-space-3);
}

.account-greeting {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
}

main {
  flex: 1;
  max-width: var(--app-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--app-space-5) var(--app-space-5) var(--app-space-7);
}

.site-footer {
  background: var(--app-bg-elev);
  border-top: 1px solid var(--app-border);
  margin-top: var(--app-space-6);
}

.footer-inner {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: var(--app-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--app-space-4);
  color: var(--app-text-dim);
  font-size: var(--app-font-size-sm);
}

.footer-inner nav ul {
  display: flex;
  gap: var(--app-space-4);
  flex-wrap: wrap;
}

.footer-inner nav a {
  color: var(--app-text-dim);
}

.footer-inner nav a:hover {
  color: var(--app-gold-deep);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-space-2);
  padding: var(--app-space-3) var(--app-space-5);
  border-radius: var(--app-radius-pill);
  border: 1px solid transparent;
  font-size: var(--app-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--app-duration) var(--app-ease),
    border-color var(--app-duration) var(--app-ease),
    color var(--app-duration) var(--app-ease),
    box-shadow var(--app-duration) var(--app-ease),
    transform var(--app-duration) var(--app-ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--app-ink);
  color: var(--app-ink-contrast);
  box-shadow: var(--app-shadow-sm);
}

.btn-primary:hover {
  background: var(--app-ink-800);
  box-shadow: 0 10px 24px rgba(26, 22, 20, 0.22);
  transform: translateY(-1px);
}

.btn-primary:active { background: var(--app-ink-900); transform: translateY(0); }

.btn-secondary {
  background: var(--app-gold);
  color: var(--app-gold-contrast);
  border-color: var(--app-gold);
}

.btn-secondary:hover {
  background: var(--app-gold-hover);
  color: var(--app-gold-contrast);
}

.btn-outline {
  background: transparent;
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.btn-outline:hover {
  border-color: var(--app-gold);
  color: var(--app-gold-deep);
  background: var(--app-gold-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--app-text-dim);
  padding: var(--app-space-2) var(--app-space-4);
}

.btn-ghost:hover {
  background: rgba(26, 22, 20, 0.05);
  color: var(--app-text);
}

.btn-danger {
  background: var(--app-danger-bg);
  color: var(--app-danger-fg);
}

.btn-danger:hover { background: rgba(164, 50, 28, 0.2); }

.btn-sm { padding: var(--app-space-2) var(--app-space-4); font-size: var(--app-font-size-sm); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(150deg, var(--app-panel) 0%, var(--app-bg-elev) 100%);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-6) var(--app-space-6);
  margin-bottom: var(--app-space-6);
  box-shadow: var(--app-shadow-sm);
}

.hero p.lead,
.lead {
  font-size: var(--app-font-size-lg);
  color: var(--app-text-dim);
  max-width: 640px;
}

.hero-actions {
  display: flex;
  gap: var(--app-space-3);
  flex-wrap: wrap;
  margin-top: var(--app-space-5);
}

.hero-address {
  color: var(--app-text-dim);
  font-size: var(--app-font-size-sm);
}

/* --------------------------------------------------------------------------
   7. Sections & cards
   -------------------------------------------------------------------------- */
section {
  margin-bottom: var(--app-space-6);
}

section > h2 {
  margin-bottom: var(--app-space-2);
}

.section-intro {
  color: var(--app-text-dim);
  margin-bottom: var(--app-space-5);
  max-width: 680px;
}

.card {
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-5);
  box-shadow: var(--app-shadow-sm);
}

/* Static container — no hover highlight (a .card is never a button). */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--app-space-5);
}

.room-card h3 {
  margin-bottom: var(--app-space-1);
}

.room-card .room-price {
  font-size: var(--app-font-size-lg);
  font-weight: 700;
  color: var(--app-gold-deep);
  margin: var(--app-space-2) 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  margin-top: var(--app-space-3);
}

.tag {
  background: var(--app-panel-alt);
  color: var(--app-cyan-fg);
  border-radius: var(--app-radius-pill);
  padding: var(--app-space-1) var(--app-space-3);
  font-size: var(--app-font-size-sm);
  font-weight: 600;
}

.room-meta {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
  margin-top: var(--app-space-3);
}

/* --------------------------------------------------------------------------
   8. Tables — pricing table, packages
   -------------------------------------------------------------------------- */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-sm);
}

.pricing-table th,
.pricing-table td {
  padding: var(--app-space-3) var(--app-space-4);
  text-align: start;
  border-bottom: 1px solid var(--app-border);
}

.pricing-table th {
  background: var(--app-bg-elev);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
  text-transform: none;
}

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

/* Pricing-table rows are data, not clickable — no hover affordance (D: no
   hover on non-interactive text/cells). */
.pricing-table tbody tr {
  transition: none;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--app-space-4);
  margin-top: var(--app-space-4);
}

.package-card {
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-4);
  text-align: center;
}

/* Static container — no hover highlight (a .package-card is never a button). */

.package-card .hours {
  font-size: var(--app-font-size-2xl);
  font-weight: 700;
  color: var(--app-cyan-fg);
}

.package-card .price {
  font-size: var(--app-font-size-lg);
  color: var(--app-text-dim);
  margin: var(--app-space-2) 0 var(--app-space-4);
}

/* --------------------------------------------------------------------------
   9. Policy box
   -------------------------------------------------------------------------- */
.policy-box {
  background: var(--app-panel-alt);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-5);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.form-card {
  max-width: 520px;
  margin: 0 auto;
  /* solid card — the login world motif sits behind this panel */
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  padding: var(--app-space-6);
}

.form-field {
  margin-bottom: var(--app-space-4);
}

.form-field label {
  display: block;
  font-weight: 600;
  color: var(--app-text);
  margin-bottom: var(--app-space-2);
}

.form-field .hint,
.hint {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
  margin-top: var(--app-space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: var(--app-space-3);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  font-size: var(--app-font-size-base);
  font-family: inherit;
  background: var(--app-panel);
  color: var(--app-text);
  min-height: 52px;
  transition: border-color var(--app-duration) var(--app-ease),
    box-shadow var(--app-duration) var(--app-ease);
}

textarea {
  min-height: 96px;
}

/* Portfolio price cell: compact, centered rate box that doesn't crowd the row. */
.price-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.price-cell input.price-input {
  width: 84px;
  min-height: 40px;
  padding: 6px 10px;
  text-align: center;
}

/* Date-like values (20/07/2026, 09:00, July 2026) always read
   left-to-right, even inside the RTL layout, and keep the native picker
   (the easiest input method) with the app's field look. */
input[type="date"],
input[type="month"],
input[type="time"] {
  direction: ltr;
}

/* Sliders inherit the brand accent and stretch like every other field. */
input[type="range"] {
  width: 100%;
  accent-color: var(--app-gold-deep);
  min-height: 24px;
}

input::placeholder,
textarea::placeholder {
  color: var(--app-text-faint);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--app-space-3);
}

.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  gap: var(--app-space-3);
  margin-top: var(--app-space-5);
  align-items: center;
  flex-wrap: wrap;
}

.form-switch-row {
  display: flex;
  gap: var(--app-space-4);
  margin-top: var(--app-space-2);
}

/* --------------------------------------------------------------------------
   11. Alerts / badges
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--app-radius-md);
  padding: var(--app-space-4);
  margin-bottom: var(--app-space-4);
  font-size: var(--app-font-size-sm);
  border: 1px solid transparent;
}

.alert-error {
  background: var(--app-danger-bg);
  color: var(--app-danger-fg);
  border-color: var(--app-danger-border);
}

.alert-success {
  background: var(--app-mint-bg);
  color: var(--app-mint-fg);
  border-color: var(--app-mint-border);
}

.alert-info {
  background: var(--app-panel-alt);
  color: var(--app-text);
  border-color: var(--app-border);
}

.badge {
  display: inline-block;
  border-radius: var(--app-radius-pill);
  padding: var(--app-space-1) var(--app-space-3);
  font-size: var(--app-font-size-sm);
  font-weight: 600;
}

.badge-confirmed { background: var(--app-mint-bg); color: var(--app-mint-fg); }
.badge-cancelled { background: var(--app-danger-bg); color: var(--app-danger-fg); }
.badge-active { background: var(--app-mint-bg); color: var(--app-mint-fg); }
.badge-completed { background: rgba(255, 255, 255, 0.06); color: var(--app-text-dim); }

/* --------------------------------------------------------------------------
   12. Slot / schedule grids (booking availability)
   -------------------------------------------------------------------------- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--app-space-3);
  margin-top: var(--app-space-4);
}

.slot-btn {
  padding: var(--app-space-3);
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-strong);
  background: var(--app-panel);
  color: var(--app-text);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--app-duration) var(--app-ease),
    color var(--app-duration) var(--app-ease),
    border-color var(--app-duration) var(--app-ease);
}

.slot-btn.slot-free {
  border-color: var(--app-mint-border);
  color: var(--app-mint-fg);
}

.slot-btn.slot-free:hover {
  background: var(--app-mint-bg);
}

.slot-btn.slot-taken {
  background: var(--app-panel-alt);
  color: var(--app-text-faint);
  cursor: not-allowed;
  text-decoration: line-through;
}

.filters-row {
  display: flex;
  gap: var(--app-space-4);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--app-space-4);
}

.filters-row .form-field {
  margin-bottom: 0;
  min-width: 200px;
}

/* --------------------------------------------------------------------------
   13. List items (bookings, packages)
   -------------------------------------------------------------------------- */
.list-item {
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-5);
  margin-bottom: var(--app-space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--app-space-4);
  align-items: center;
}

.list-item-main h3 {
  margin-bottom: var(--app-space-1);
}

.list-item-meta {
  color: var(--app-text-dim);
  font-size: var(--app-font-size-sm);
}

.list-item-actions {
  display: flex;
  gap: var(--app-space-2);
  flex-wrap: wrap;
  align-items: center;
}

.empty-state {
  color: var(--app-text-dim);
  padding: var(--app-space-5);
  text-align: center;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-lg);
}

/* --------------------------------------------------------------------------
   14. Payment options / summary
   -------------------------------------------------------------------------- */
.payment-options {
  display: grid;
  gap: var(--app-space-3);
}

.payment-option {
  display: flex;
  align-items: flex-start;
  gap: var(--app-space-3);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-3) var(--app-space-4);
  cursor: pointer;
  transition: border-color var(--app-duration) var(--app-ease),
    background var(--app-duration) var(--app-ease);
}

.payment-option:hover {
  border-color: var(--app-gold);
  background: var(--app-gold-soft);
}

.payment-option input {
  margin-top: 4px;
}

.summary-box {
  background: var(--app-panel-alt);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-5);
  margin-bottom: var(--app-space-5);
}

.summary-box dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--app-space-2) var(--app-space-4);
  margin: 0;
}

.summary-box dt {
  color: var(--app-text-dim);
}

.summary-box dd {
  margin: 0;
  font-weight: 600;
  color: var(--app-text);
}

.price-highlight {
  font-size: var(--app-font-size-xl);
  font-weight: 700;
  color: var(--app-gold-deep);
}

/* --------------------------------------------------------------------------
   15. v3: dual-audience hero & vertical marketing panels
   -------------------------------------------------------------------------- */
.audience-grid,
.vertical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--app-space-5);
  margin-top: var(--app-space-6);
}

.audience-card,
.vertical-card {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
}

.audience-card .btn,
.vertical-card .btn {
  align-self: flex-start;
  margin-top: var(--app-space-2);
}

.live-widget {
  margin-top: var(--app-space-6);
  padding: var(--app-space-4) var(--app-space-5);
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
}

.feature-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--app-space-6);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-2);
}

.feature-list li {
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-3) var(--app-space-4);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-body);
}

/* --------------------------------------------------------------------------
   16. v3: platform admin screens (onboarding/venues/units/staff)
   -------------------------------------------------------------------------- */
.override-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--app-space-4);
  margin-top: var(--app-space-4);
}

.override-grid-full {
  grid-column: 1 / -1;
}

.identity-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-3);
  background: var(--app-panel-alt);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-4) var(--app-space-5);
  margin-bottom: var(--app-space-6);
}

.venue-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--app-space-4);
  margin-bottom: var(--app-space-5);
}

.venue-picker .form-field {
  margin-bottom: 0;
  min-width: 240px;
}

.role-hint-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  margin-top: var(--app-space-2);
}

/* --------------------------------------------------------------------------
   17. v3.1: sports court booking — tabs, court/date pickers, schedule
   -------------------------------------------------------------------------- */
.sport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  margin-bottom: var(--app-space-4);
}

.sport-tab-btn[aria-pressed="true"] {
  background: var(--app-gold);
  color: var(--app-gold-contrast);
  border-color: var(--app-gold);
}

.court-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--app-space-3);
  margin-bottom: var(--app-space-5);
}

.court-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-space-1);
  padding: var(--app-space-3) var(--app-space-4);
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-strong);
  background: var(--app-panel);
  color: var(--app-text);
  cursor: pointer;
  text-align: start;
  width: 100%;
  transition: border-color var(--app-duration) var(--app-ease),
    background var(--app-duration) var(--app-ease);
}

.court-picker-btn:hover {
  border-color: var(--app-gold);
}

.court-picker-btn[aria-pressed="true"] {
  border-color: var(--app-gold);
  background: var(--app-gold-soft);
}

.court-picker-btn .court-price {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
}

.date-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  margin: var(--app-space-3) 0 var(--app-space-4);
}

.date-strip-btn {
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-strong);
  background: var(--app-panel);
  color: var(--app-text);
  font-size: var(--app-font-size-sm);
  cursor: pointer;
  transition: background var(--app-duration) var(--app-ease),
    border-color var(--app-duration) var(--app-ease);
}

.date-strip-btn:hover {
  border-color: var(--app-gold);
}

.date-strip-btn[aria-pressed="true"] {
  background: var(--app-cyan-bg);
  color: var(--app-cyan-fg);
  border-color: var(--app-cyan-border);
}

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-4);
  margin-bottom: var(--app-space-3);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
}

.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--app-space-2);
}

.status-legend-swatch {
  display: inline-block;
  min-width: 2.4em;
  text-align: center;
  padding: 1px var(--app-space-2);
  border-radius: var(--app-radius-sm);
  font-weight: 700;
  border: 1px solid var(--app-border-strong);
}

.status-legend-swatch.status-free {
  background: var(--app-mint-bg);
  color: var(--app-mint-fg);
  border-color: var(--app-mint-border);
}

.status-legend-swatch.status-booked {
  background: var(--app-amber-bg);
  color: var(--app-amber-fg);
  border-color: var(--app-amber-border);
}

.status-legend-swatch.status-blocked {
  background: var(--app-blocked-bg);
  color: var(--app-blocked-fg);
  border-color: var(--app-blocked-border);
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--app-space-3);
}

.schedule-cell {
  padding: var(--app-space-3);
  border-radius: var(--app-radius-md);
  border: 2px solid transparent;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--app-font-size-sm);
  transition: background-color var(--app-duration) var(--app-ease),
    border-color var(--app-duration) var(--app-ease),
    transform var(--app-duration) var(--app-ease);
}

.schedule-cell[data-status="free"] {
  background: var(--app-mint-bg);
  color: var(--app-mint-fg);
  border-color: var(--app-mint-border);
}

.schedule-cell[data-status="free"]:hover {
  background: var(--app-mint-border);
  color: var(--app-gold-contrast);
  transform: translateY(-1px);
}

.schedule-cell[data-status="booked"] {
  background: var(--app-amber-bg);
  color: var(--app-amber-fg);
  border-color: var(--app-amber-border);
  cursor: not-allowed;
}

.schedule-cell[data-status="blocked"] {
  background: var(--app-blocked-bg);
  color: var(--app-blocked-fg);
  border-color: var(--app-blocked-border);
  cursor: not-allowed;
}

.schedule-cell.slot-past {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   18. Access code / feedback photos
   -------------------------------------------------------------------------- */
.access-code-box .access-code-value {
  display: block;
  font-family: var(--app-font-display);
  font-size: var(--app-font-size-2xl);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--app-gold-deep);
  margin: var(--app-space-2) 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.feedback-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--app-space-3);
  margin: var(--app-space-3) 0;
}

.feedback-photo-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-2);
  background: var(--app-panel);
}

.feedback-photo-card img {
  width: 100%;
  border-radius: var(--app-radius-sm);
  margin-bottom: var(--app-space-2);
  max-height: 120px;
  object-fit: cover;
}

.feedback-photo-card .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   19. Generic modal (kx-modal-*) — no equivalent in the base styles.css,
       carried over from kortex-theme.css because it is part of the shared
       component contract.
   -------------------------------------------------------------------------- */
.kx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-space-5);
  background: rgba(26, 22, 20, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.kx-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--app-panel);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-md);
  padding: var(--app-space-5);
  color: var(--app-text);
}

.kx-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--app-space-3);
  margin-bottom: var(--app-space-4);
  border-bottom: 1px solid var(--app-border);
  padding-bottom: var(--app-space-3);
}

.kx-modal-header h2,
.kx-modal-header h3 {
  margin: 0;
}

.kx-modal-close {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text-dim);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--app-duration) var(--app-ease),
    border-color var(--app-duration) var(--app-ease);
}

.kx-modal-close:hover {
  color: var(--app-gold-deep);
  border-color: var(--app-gold);
}

.kx-modal-body {
  color: var(--app-text);
}

.kx-modal-footer {
  display: flex;
  gap: var(--app-space-3);
  justify-content: flex-end;
  margin-top: var(--app-space-5);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   20. Bento grid + tiles (kx-bento/kx-tile) — used on index.html and the
       vertical marketing panels reachable from inside the app shell.
       Kept quieter than the marketing site: no backdrop blur glassmorphism,
       lower tint opacity, calmer hover lift.
   -------------------------------------------------------------------------- */
.kx-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, auto);
  grid-auto-flow: row dense;
  gap: var(--app-space-5);
}

.kx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--app-space-5);
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border);
  background: var(--app-panel);
}

/* Static container — no hover highlight (a .kx-tile is never a button). */

.kx-tile-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--app-text-dim);
}

.kx-tile h3 {
  margin: 0;
  font-size: 1.1rem;
}

.kx-tile p {
  margin: 0;
  color: var(--app-text-dim);
  font-size: 0.94rem;
}

.kx-tile--purple { background: var(--app-purple-bg); border-color: var(--app-purple-border); }
.kx-tile--cyan   { background: var(--app-cyan-bg);   border-color: var(--app-cyan-border); }
.kx-tile--amber  { background: var(--app-amber-bg);  border-color: var(--app-amber-border); }
.kx-tile--mint   { background: var(--app-mint-bg);   border-color: var(--app-mint-border); }

.kx-tile--span-2 { grid-column: span 2; }
.kx-tile--span-3 { grid-column: span 3; }
.kx-tile--span-4 { grid-column: span 4; }
.kx-tile--span-6 { grid-column: span 6; }
.kx-tile--row-2  { grid-row: span 2; }

@media (max-width: 860px) {
  .kx-bento { grid-template-columns: repeat(2, 1fr); }
  .kx-tile--span-2, .kx-tile--span-3, .kx-tile--span-4, .kx-tile--span-6 {
    grid-column: span 2;
  }
  .kx-tile--row-2 { grid-row: auto; }
}

/* --------------------------------------------------------------------------
   21. Motion utilities (kx-reveal / kx-mesh / kx-countup)
       D41 is explicit: "בלי reveal-on-scroll במסכי עבודה" — this is a work
       tool, content must be visible immediately. `.kx-reveal` therefore
       renders fully visible from the start; theme-motion.js still runs
       (it only ever *adds* the .is-visible class, never removes it) so
       nothing needs to change in markup or scripts.
   -------------------------------------------------------------------------- */
.kx-reveal,
.kx-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Ambient brand texture, dialled down for "quiet luxury": static, low
   opacity, no floating animation — a hint of color, not a light show. */
.kx-mesh {
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.kx-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
}

.kx-mesh-blob--1 {
  width: 480px;
  height: 480px;
  top: -10%;
  inset-inline-start: 5%;
  background: radial-gradient(circle, var(--app-gold) 0%, transparent 70%);
}

.kx-mesh-blob--2 {
  width: 420px;
  height: 420px;
  top: 20%;
  inset-inline-end: 0%;
  background: radial-gradient(circle, var(--app-cyan-fg) 0%, transparent 70%);
}

.kx-mesh-blob--3 {
  width: 360px;
  height: 360px;
  bottom: -15%;
  inset-inline-start: 30%;
  background: radial-gradient(circle, var(--app-amber-fg) 0%, transparent 70%);
}

.kx-countup {
  font-family: var(--app-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--app-gold-deep);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

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

.demo-hint {
  margin-top: var(--app-space-5);
  font-size: var(--app-font-size-sm);
  color: var(--app-text-dim);
}

.demo-hint code {
  background: var(--app-panel-alt);
  padding: 1px 6px;
  border-radius: var(--app-radius-sm);
  font-size: 0.9em;
  color: var(--app-text);
}

/* --------------------------------------------------------------------------
   22b. Info tooltip (styled "?" bubble) — reusable, RTL-first.
        Replaces unstyleable native title= tooltips where we want a readable,
        right-aligned, larger-font explanation. Shows on hover AND focus
        (keyboard-accessible). Build with: a .info-tip wrapper containing a
        .info-tip__icon button and a .info-tip__bubble span.
   -------------------------------------------------------------------------- */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: var(--app-space-2);
}

.info-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: var(--app-radius-pill);
  border: 1px solid var(--app-border-strong);
  background: var(--app-panel-alt);
  color: var(--app-gold-deep);
  font-family: var(--app-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: border-color var(--app-duration) var(--app-ease),
    color var(--app-duration) var(--app-ease);
}

.info-tip__icon:hover,
.info-tip__icon:focus-visible {
  border-color: var(--app-gold);
  color: var(--app-gold);
}

.info-tip__bubble {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: max-content;
  max-width: 320px;
  padding: var(--app-space-3) var(--app-space-4);
  background: var(--app-panel);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md);
  color: var(--app-text-body);
  /* Bigger, readable, right-aligned RTL text (was: tiny native tooltip). */
  direction: rtl;
  text-align: right;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--app-duration) var(--app-ease),
    transform var(--app-duration) var(--app-ease),
    visibility var(--app-duration) var(--app-ease);
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   22c. Calendar "now" marker — a thin red divider inserted into the
        horizontal day-view cell strip at the current time (owner calendar).
        Rendered as a flex child, so it needs no pixel math to position.
   -------------------------------------------------------------------------- */
.ucal-now-line {
  position: relative;
  flex: 0 0 3px;
  align-self: stretch;
  min-height: 38px;
  margin: 0 2px;
  background: #c73e30;
  border-radius: var(--app-radius-pill);
  pointer-events: none;
}

.ucal-now-line::before {
  content: attr(data-now-label);
  position: absolute;
  top: -14px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #c73e30;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--app-radius-pill);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  main { padding: var(--app-space-4) var(--app-space-4) var(--app-space-6); }
  .hero { padding: var(--app-space-4); }
  h1 { font-size: var(--app-font-size-2xl); }
  .list-item { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   24. Reduced motion — full kill switch, AA-safe (no motion-only state
       changes; color/border already convey every state above)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .btn:active,
  .card:hover,
  .kx-tile:hover,
  .kx-tile:focus-within,
  .schedule-cell[data-status="free"]:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Accessibility: skip link — visually hidden until keyboard-focused.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--app-space-3);
  top: calc(-1 * var(--app-space-8));
  z-index: 100;
  background: var(--app-ink);
  color: var(--app-ink-contrast);
  padding: var(--app-space-2) var(--app-space-4);
  border-radius: var(--app-radius-sm);
  text-decoration: none;
  transition: top var(--app-duration) var(--app-ease);
}
.skip-link:focus {
  top: var(--app-space-3);
}

/* --------------------------------------------------------------------------
   NN. Tenant landing (/{slug} → tenant.html) — the customer-facing gate.
   Closes the long-standing gap: tenant-page.js populates [data-tenant-*]
   into these classes, which until the 2026-08 reskin had no styles at all.
   -------------------------------------------------------------------------- */
.tenant-landing {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: var(--app-space-8) var(--app-space-5);
  display: grid;
  justify-items: center;
  gap: var(--app-space-5);
}

.tenant-hero {
  width: 100%;
  max-width: 560px;
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  padding: var(--app-space-7) var(--app-space-6);
  text-align: center;
}

.tenant-logo {
  display: block;
  max-height: 72px;
  max-width: 240px;
  margin: 0 auto var(--app-space-5);
  object-fit: contain;
}
.tenant-logo:not([src]),
.tenant-logo[src=""] { display: none; }

.tenant-hero h1 {
  font-family: var(--app-font-display);
  font-weight: 500;
  font-size: var(--app-font-size-3xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--app-space-3);
  color: var(--app-text);
}

.tenant-hero p {
  color: var(--app-text-dim);
  font-size: var(--app-font-size-lg);
  margin: 0 0 var(--app-space-6);
}

.tenant-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--app-space-3);
}