/* Altharaa interface foundations · Apple Design application · 2026-09-10.
   Presentation only. No booking, price, payment or authentication behavior.
   Keep this file after the app stylesheet. The html attribute scopes each app. */
@media screen {
  html[data-tharaa-ui] {
    --ui-radius: 1.25rem;
    --ui-focus: #526b57;
    --ui-surface: #fff;
    --ui-glass: rgba(255, 255, 255, .92);
    --ui-edge: rgba(65, 77, 66, .13);
    --ui-muted: #5d675f;
    --ui-shadow: 0 2px 4px rgba(30, 44, 34, .025), 0 14px 40px -20px rgba(30, 44, 34, .2);
    --ui-float-shadow: 0 8px 32px -8px rgba(30, 44, 34, .18), 0 0 0 1px rgba(255,255,255,.55) inset;
    scroll-padding-top: 6.5rem;
    -webkit-text-size-adjust: 100%;
  }
  html[data-tharaa-ui][data-theme="dark"] {
    --ui-focus: #d8bc87;
    --ui-surface: #151f30;
    --ui-glass: rgba(21, 31, 48, .94);
    --ui-edge: rgba(183, 201, 225, .18);
    --ui-muted: #b1bccd;
    --ui-shadow: 0 12px 32px -14px rgba(0,0,0,.48);
    --ui-float-shadow: 0 12px 36px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
    color-scheme: dark;
  }
  html[data-tharaa-ui] body { line-height: 1.65; text-rendering: optimizeLegibility; }
  html[data-tharaa-ui] :is(h1,h2,h3,h4) { text-wrap: balance; }
  html[data-tharaa-ui][lang="ar"] :is(h1,h2,h3,h4) { letter-spacing: 0; }
  html[data-tharaa-ui] :is(button,a,input,select,textarea,summary,[role="tab"]) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  html[data-tharaa-ui] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 3px;
  }
  html[data-tharaa-ui] :is(button,a.inline-flex,a.block.rounded-full,a.w-full.rounded-full) {
    transition-property: background-color, color, border-color, box-shadow, scale, opacity;
    transition-duration: 140ms;
    transition-timing-function: ease-out;
  }
  /* Feedback on press; commit remains owned by the app's click handlers.
     Individual scale leaves existing translate/rotate positioning intact. */
  html[data-tharaa-ui] :is(button,a.inline-flex,a.w-full.rounded-full):not(:disabled):not([aria-disabled="true"]):active {
    scale: .98;
    transition-duration: 70ms;
  }
  html[data-tharaa-ui] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
    border-radius: .8rem;
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
  }
  html[data-tharaa-ui] input::placeholder,
  html[data-tharaa-ui] textarea::placeholder { opacity: .8; }
  html[data-tharaa-ui] :is([role="dialog"],[role="alertdialog"]):not(aside) {
    border-radius: 1.5rem;
    border-color: var(--ui-edge);
    box-shadow: 0 24px 80px -20px rgba(15, 24, 20, .34);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    animation-duration: 180ms;
  }
  html[data-tharaa-ui] :is([role="menu"],[role="listbox"]) {
    border-radius: 1rem;
    box-shadow: var(--ui-float-shadow);
    transform-origin: var(--radix-dropdown-menu-content-transform-origin, center);
  }
  html[data-tharaa-ui] :is([role="menuitem"],[role="option"]) {
    border-radius: .55rem;
    min-height: 2.4rem;
  }
  html[data-tharaa-ui] [role="tablist"] { border-radius: .9rem; }
  html[data-tharaa-ui] [role="tab"] { border-radius: .65rem; }

  /* Administration: quiet surfaces, clear selected navigation and readable data. */
  html[data-tharaa-ui="admin"] {
    --thara-bg: #f5f6f3;
    --thara-text-muted: #626c64;
    --thara-primary: #647e69;
    --thara-primary-hover: #506854;
    --thara-shadow: var(--ui-shadow);
    --thara-shadow-lg: var(--ui-float-shadow);
  }
  html[data-tharaa-ui="admin"][data-theme="dark"] {
    --thara-bg: #0b1220;
    --thara-text-muted: #b1bccd;
    --thara-primary: #c5a66a;
    --thara-primary-hover: #d4b67c;
  }
  html[data-tharaa-ui="admin"] [data-testid="floating-pill"] {
    background: var(--ui-glass) !important;
    border-color: var(--ui-edge) !important;
    box-shadow: var(--ui-float-shadow);
    padding: .35rem;
  }
  html[data-tharaa-ui="admin"] aside {
    border-color: var(--ui-edge);
    box-shadow: -4px 0 28px -22px rgba(30,44,34,.2);
  }
  html[data-tharaa-ui="admin"] aside a[data-testid^="nav-"] {
    min-height: 2.65rem;
    border-radius: .8rem;
    line-height: 1.45;
  }
  html[data-tharaa-ui="admin"] aside a[data-testid^="nav-"].text-white {
    background: #526b57 !important;
    box-shadow: 0 3px 10px -5px rgba(28, 55, 36, .35);
  }
  html[data-tharaa-ui="admin"][data-theme="dark"] aside a[data-testid^="nav-"].text-white {
    background: #c5a66a !important;
    color: #152031 !important;
  }
  html[data-tharaa-ui="admin"] :is(.kpi-card,.bg-card.rounded-xl,main .bg-white.rounded-2xl) {
    border-radius: var(--ui-radius);
    border-color: var(--ui-edge);
    box-shadow: var(--ui-shadow);
  }
  html[data-tharaa-ui="admin"] .kpi-card:hover { transform: none; }
  html[data-tharaa-ui="admin"] [data-testid="page-content"] h1 {
    line-height: 1.45;
    margin-bottom: .35rem;
  }
  html[data-tharaa-ui="admin"] :is(td,th) { font-variant-numeric: tabular-nums; }
  html[data-tharaa-ui="admin"] th { line-height: 1.5; padding-block: .9rem; }
  html[data-tharaa-ui="admin"] tbody tr { transition: background-color 120ms ease-out; }
  html[data-tharaa-ui="admin"] [data-testid="login-form"] {
    background: var(--ui-surface);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--ui-edge);
    border-radius: 1.75rem;
    box-shadow: var(--ui-shadow);
    max-width: 30rem;
  }
  html[data-tharaa-ui="admin"] [data-testid="login-submit-btn"] {
    background: #526b57;
    border-radius: .9rem;
    box-shadow: 0 6px 16px -10px #304e38;
  }
  html[data-tharaa-ui="admin"] [data-testid="login-submit-btn"]:hover { background: #435a48; }
  html[data-tharaa-ui="admin"] [data-testid="login-form"] input {
    background: var(--ui-surface);
    border-color: var(--ui-edge);
    min-height: 3rem;
  }
  html[data-tharaa-ui="admin"] :is([data-testid="booking-form-modal"],[data-testid="booking-details-modal"]) > div:first-child {
    border-radius: 1.5rem;
    box-shadow: 0 24px 80px -20px rgba(15,24,20,.4);
    border: 1px solid var(--ui-edge);
    overscroll-behavior-y: contain;
    animation: tharaa-dialog-in 160ms ease-out;
  }
  html[data-tharaa-ui="admin"] [data-testid="booking-form-modal"] .sticky {
    background: var(--ui-surface) !important;
    border-color: var(--ui-edge);
  }
  @keyframes tharaa-dialog-in { from { opacity: 0; } to { opacity: 1; } }

  /* Customer: calm photography, legible floating navigation, focused booking. */
  html[data-tharaa-ui="customer"] {
    --gold: #886532;
    --gold-deep: #725329;
    --cream: #f8f6f1;
    --cream-2: #f0ece3;
    --ui-focus: #886532;
  }
  html[data-tharaa-ui="customer"] #root > div > header {
    background: var(--ui-glass);
    color: var(--ink);
    border-bottom: 1px solid var(--ui-edge);
    box-shadow: var(--ui-shadow);
    transition-property: background-color, box-shadow;
    transition-duration: 180ms;
    padding-block: .65rem;
  }
  html[data-tharaa-ui="customer"] header nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  html[data-tharaa-ui="customer"] header nav.md\:hidden a { display: flex; }
  html[data-tharaa-ui="customer"] header nav.md\:hidden {
    background: var(--ui-surface);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-radius: 0 0 1.25rem 1.25rem;
  }
  html[data-tharaa-ui="customer"] .hero-zoom { animation: none; }
  html[data-tharaa-ui="customer"] .section-eyebrow {
    letter-spacing: 0;
    font-size: .82rem;
    line-height: 1.6;
  }
  html[data-tharaa-ui="customer"] .reveal {
    transform: translateY(10px);
    transition-duration: 280ms;
    transition-delay: 0ms !important;
  }
  html[data-tharaa-ui="customer"] .reveal.is-visible { transform: none; }
  html[data-tharaa-ui="customer"] :is(#booking,#chalets,#amenities,#policies,#faq,#location) {
    scroll-margin-top: 6rem;
  }
  html[data-tharaa-ui="customer"] #booking .bg-white {
    border-color: var(--ui-edge);
    box-shadow: var(--ui-shadow);
  }
  html[data-tharaa-ui="customer"] #booking button.border-gold {
    box-shadow: 0 0 0 3px rgba(136,101,50,.13);
  }
  html[data-tharaa-ui="customer"] .cal-day {
    border-radius: .7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    transition-property: background-color,color,scale;
  }
  html[data-tharaa-ui="customer"] .cal-in-range { border-radius: 0; }
  html[data-tharaa-ui="customer"] .cal-selected { box-shadow: 0 2px 8px -3px rgba(86,58,20,.4); }
  html[data-tharaa-ui="customer"] .cal-disabled { opacity: .46; }
  html[data-tharaa-ui="customer"] #amenities .hover\:-translate-y-1:hover { transform: none; }
  html[data-tharaa-ui="customer"] #faq summary { min-height: 3.5rem; }
  html[data-tharaa-ui="customer"] .marquee-track { animation: none; width: 100%; }
  html[data-tharaa-ui="customer"] .marquee-track > div { flex-wrap: wrap; justify-content: center; width: 100%; gap: .8rem 0; }
  html[data-tharaa-ui="customer"] .marquee-track > div + div,
  html[data-tharaa-ui="customer"] .marquee-track > div > span:nth-child(n+9) { display: none; }
  html[data-tharaa-ui="customer"] .marquee-track > div > span { padding-inline: 1rem; font-size: .8rem; }

  @supports (backdrop-filter: blur(12px)) {
    html[data-tharaa-ui="admin"] [data-testid="floating-pill"],
    html[data-tharaa-ui="customer"] #root > div > header {
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
    }
  }
  @media (max-width: 640px) {
    html[data-tharaa-ui] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 1rem; }
    html[data-tharaa-ui] button:not(.cal-day):not([role="checkbox"]):not([role="switch"]):not([role="radio"]) { min-height: 2.75rem; }
    html[data-tharaa-ui="admin"] [data-testid="floating-pill"] { gap: 0; padding: .25rem; }
    html[data-tharaa-ui="admin"] [data-testid="floating-pill"] button { min-height: 2.5rem; }
    html[data-tharaa-ui="admin"] [data-testid="login-form"] { padding: 1.5rem; }
    html[data-tharaa-ui="customer"] #home h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
    html[data-tharaa-ui="customer"] #home h1 span { font-size: clamp(1.7rem, 6.8vw, 2.25rem); }
    html[data-tharaa-ui="customer"] #booking .p-6 { padding: 1.25rem; }
    html[data-tharaa-ui="customer"] :is(#booking,#chalets,#amenities,#policies,#faq,#location) h2 {
      font-size: clamp(1.8rem, 7vw, 2.4rem);
      line-height: 1.5;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-tharaa-ui] { scroll-behavior: auto !important; }
    html[data-tharaa-ui] *, html[data-tharaa-ui] *::before, html[data-tharaa-ui] *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
    html[data-tharaa-ui] .reveal { opacity: 1 !important; transform: none !important; }
    html[data-tharaa-ui] :is(button,a):active { scale: 1 !important; }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-tharaa-ui] { --ui-glass: var(--ui-surface); }
    html[data-tharaa-ui] :is(.glass,[data-testid="floating-pill"]),
    html[data-tharaa-ui="customer"] #root > div > header {
      background: var(--ui-surface) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }
  @media (prefers-contrast: more) {
    html[data-tharaa-ui] { --ui-edge: currentColor; }
    html[data-tharaa-ui] :is(button,input,select,textarea,[role="dialog"]) { border-color: currentColor; }
    html[data-tharaa-ui="customer"] .cal-disabled { opacity: .65; }
  }
}