/* ===== RESET & BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {

  /* ============================================================
     WS APP v2 — OCEAN DESIGN TOKENS
     Wonderful Selayar · Coastal · Premium · Dark UI
     ============================================================ */

  /* ---- BACKGROUNDS: Deep Ocean scale ---- */
  --ws-bg-base:      #04243A;   /* page background */
  --ws-bg-surface:   #062E4A;   /* sidebar, panels */
  --ws-bg-card:      #083A5C;   /* cards */
  --ws-bg-elevated:  #1E3A4A;   /* modals, dropdowns */
  --ws-bg-hover:     #0D4870;   /* hover state overlay */

  /* ---- ACCENT: Lagoon primary (Deep Ocean Glass) ---- */
  --ws-accent:       #2FC6DD;   /* PRIMARY · buttons, links, active states, key glow */
  --ws-accent-dark:  #1593AD;   /* lagoon-deep · pressed / gradient base */
  --ws-accent-muted: #0E5C8A;   /* subtle highlights, active bg */
  --ws-accent-light: #C2EDF2;   /* badges, chips on dark bg */
  --ws-accent-mid:   #4FC3D4;   /* shimmer, progress bars */
  --ws-accent-bright:#62E2F2;   /* highlights, gradient tops, eyebrows */

  /* ---- ACCENT: Sunset Gold (money & moments) ---- */
  --ws-gold:         #F5B955;   /* SECONDARY · prices, revenue, warm CTAs */
  --ws-gold-dark:    #D99425;   /* gold-deep · hover on gold, tagline text */
  --ws-gold-bright:  #FFD790;   /* highlights, gradient tops */

  /* ---- DEEP OCEAN background scale (dark-mode reference, surface → abyss) ---- */
  --ocean-950:       #03101A;   /* page base — deepest water */
  --ocean-900:       #061F2F;   /* raised sections */
  --ocean-800:       #0A2C42;   /* inset wells, input backs */
  --ocean-700:       #0E3B56;   /* hover fills */
  --ocean-600:       #134F6C;   /* borders, dividers (lit) */
  --ocean-500:       #1B6788;   /* subtle highlights */

  /* ---- TEXT ---- */
  --ws-text-primary:   #F0F4F8;   /* headings, primary body (dark mode) */
  --ws-text-secondary: #8DDBE6;   /* labels, secondary content */
  --ws-text-muted:     #64748B;   /* slate-600 — passes AA on light bg; dark theme restores #94A3B8 */

  /* ---- BORDERS ---- */
  --ws-border:        rgba(42, 171, 219, 0.15);   /* default dividers */
  --ws-border-strong: rgba(42, 171, 219, 0.35);   /* active, focus rings */

  /* ---- STATUS ---- */
  --ws-success: #2DBD85;   /* confirmed booking, paid */
  --ws-warning: #F5A623;   /* pending, deposit due */
  --ws-danger:  #E8483A;   /* cancelled, overdue, error */
  --ws-danger-bg:     #4a1010;   /* danger background tint */
  --ws-danger-border: #7a2020;   /* danger border */
  --ws-danger-text:   #f5a5a5;   /* danger text */
  --ws-info:    #A78BFA;   /* notes, informational states */

  /* ---- STATUS: light text + tint variants (for text/icons/bg on dark) ---- */
  --ws-success-light:  #4ADE80;                  /* light green text/icons on dark */
  --ws-success-bg:     rgba(34, 197, 94, .12);   /* success tint background */
  --ws-success-border: rgba(34, 197, 94, .20);   /* success tint border */
  --ws-warning-light:  #FB923C;                  /* light orange text/icons on dark */
  --ws-warning-bg:     rgba(249, 115, 22, .12);
  --ws-warning-border: rgba(249, 115, 22, .20);
  --ws-danger-light:   #F87171;                  /* light red text/icons on dark */
  --ws-danger-tint:    rgba(239, 68, 68, .20);   /* red tint bg/border */
  --ws-info-light:     #C4B5FD;                  /* light purple text/icons on dark */
  --ws-info-bg:        rgba(167, 139, 250, .18);

  /* ---- EXTRA HUES (decorative accents, non-semantic) ---- */
  --ws-cyan:           #38BDF8;
  --ws-cyan-dark:      #0891B2;   /* deeper cyan-blue, gradient ends */
  --ws-cyan-light:     #67E8F9;
  --ws-cyan-bg:        rgba(56, 189, 248, .12);
  --ws-cyan-border:    rgba(56, 189, 248, .25);
  --ws-cyan-deep:      #0E7490;         /* deeper cyan, gradient ends */
  --ws-cyan-deep-rgb:  14, 116, 144;   /* #0E7490 channels, for alpha overlays */
  --ws-indigo:         #6366F1;        /* corporate accent, distinct from --ws-info */
  --ws-indigo-rgb:     99, 102, 241;   /* #6366F1 channels */
  --ws-teal:           #14B8A6;
  --ws-teal-rgb:       20, 184, 166;   /* #14B8A6 channels, for alpha overlays */
  --ws-blue:           #3B82F6;
  --ws-blue-light:     #60A5FA;        /* lighter blue for gradient ends */
  --ws-danger-light-bright: #FB7185;   /* lighter red for gradient ends */
  --ws-danger-dark:    #DC2626;        /* darker red variant */
  --ws-warning-light-warm: #FBB024;    /* warm orange tone */
  --ws-warn-color-400: #FED7AA;        /* warm orange tint (400) */
  --ws-danger-tint-600: #C2410C;       /* dark orange tint (600) */
  --ws-danger-tint-900: #7C2D12;       /* very dark orange tint (900) */
  --ws-danger-tint-900-rgb: 124, 45, 18; /* for opacity overlays */
  --ws-danger-dark-rgb:    220, 38, 38;  /* #DC2626 channels */
  --ws-warn-bg-light:      #FFF7ED;      /* very light orange background */
  --ws-muted-rgb:          148, 163, 184; /* #94A3B8 channels */
  --ws-warn-tint-dark:     #9A3412;      /* dark rust orange */

  /* ---- PASTELS (light-mode tints for icon bg / badge bg) ---- */
  --ws-success-pastel: #D1FAE5;
  --ws-warning-pastel: #FEF3C7;
  --ws-danger-pastel:        #FEE2E2;
  --ws-danger-pastel-border: #FECACA;
  --ws-info-pastel:    #E0E7FF;

  /* ---- NOTICE BOXES (theme-aware: light values here, flipped in theme.css dark block).
         Used by JS-rendered inline info/success panels e.g. the data-conflict overlay. ---- */
  --ws-notice-info-bg:     #f0f9ff;
  --ws-notice-info-border: #bae6fd;
  --ws-notice-info-text:   #0369a1;
  --ws-notice-ok-bg:       #f0fdf4;
  --ws-notice-ok-border:   #bbf7d0;
  --ws-notice-ok-text:     #15803d;

  /* ---- NEUTRAL CHANNELS (use as rgba(var(--x-rgb), .NN) for alpha overlays) ---- */
  --ws-white:          #FFFFFF;
  --ws-white-rgb:      255, 255, 255;
  --ws-black-rgb:      0, 0, 0;
  --ws-accent-rgb:     47, 198, 221;   /* #2FC6DD channels */
  --ws-bg-base-rgb:    4, 36, 58;      /* #04243A channels */
  --ws-success-rgb:    34, 197, 94;    /* #22C55E or #2DBD85 channels */
  --ws-gold-rgb:       245, 185, 85;   /* #F5B955 channels */
  --ws-slate-rgb:      51, 65, 85;     /* slate neutral, for light-mode borders/overlays */
  --ws-dark-rgb:       13, 31, 45;     /* #0D1F2D channels, for light-mode text opacity */
  --ws-warning-rgb:    245, 166, 35;   /* #F5A623 channels */
  --ws-danger-rgb:     232, 72, 58;    /* #E8483A channels */
  --ws-info-rgb:       167, 139, 250;  /* #A78BFA channels */
  --ws-blue-rgb:       59, 130, 246;   /* #3B82F6 channels */

  /* ============================================================
     LEGACY ALIASES — existing CSS still works unchanged.
     All var(--teal), var(--red) etc. resolve through these.
     ============================================================ */
  --teal:       var(--ws-accent);        /* #2AABDB */
  --teal-d:     var(--ws-accent-dark);   /* #1A8FA8 */
  --teal-mid:   var(--ws-accent-mid);    /* #4FC3D4 */
  --teal-light: rgba(42, 171, 219, 0.1); /* tinted bg for hover states */
  --navy:       #0a4f6e;                 /* keep: light-mode heading text */
  --ocean:      var(--ws-bg-base);       /* #04243A */
  --red:        var(--ws-danger);        /* #E8483A */
  --green:      var(--ws-success);       /* #2DBD85 */
  --yellow:     var(--ws-warning);       /* #F5A623 */
  --blue:       var(--ws-info);          /* #A78BFA */
  --sand:       var(--ws-gold-dark);     /* #C9976A */
  --coral:      #f97316;                 /* keep: orange, rare use */
  --g2:         #e2e8f0;                 /* keep: light border gray */
  --g3:         var(--ws-text-muted);    /* #94A3B8 */
  --dark:       #0d1f2d;                 /* keep: light-mode text (flips in dark theme.css) */
  --muted:      var(--ws-text-muted);    /* #94A3B8 */
  --surface:    #f1f5f9;                 /* keep: light-mode page bg */
  --card:       rgba(255, 255, 255, 0.85); /* keep: light-mode card (flips in dark) */

  --border:     var(--ws-border);        /* rgba(42,171,219,.15) */
  --bg:         var(--surface);
  --brd:        var(--border);
  --txt:        var(--dark);

  /* ============================================================
     STRUCTURAL TOKENS — spacing, type, radius, shadow, motion
     ============================================================ */

  /* Native control theming (selects, date pickers, scrollbars) — light default */
  color-scheme: light;

  /* Sidebar width */
  --sidebar-w: 220px;

  /* Spacing (8px grid) */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* Font families */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Poppins', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* prices, resi, KPIs, eyebrows */

  /* Font scale — no half-pixels */
  --font-xs:   10px;
  --font-sm:   12px;
  --font-base: 13px;
  --font-md:   14px;
  --font-lg:   16px;
  --font-xl:   20px;
  --font-2xl:  26px;
  --font-3xl:  30px;

  /* Border radius */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* Z-index stack */
  --z-sticky:  2;
  --z-nav:     98;
  --z-overlay: 99;
  --z-modal:   999;
  --z-dialog:  9990;
  --z-toast:   9999;

  /* Transitions */
  --tr:      all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 4px 12px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.08);
  --shadow-xl:   0 12px 32px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.08);
  --shadow-glow: 0 0 20px rgba(42, 171, 219, 0.15);

  /* Glass / ambient (derive from new accent) */
  --glass-bg:     rgba(42, 171, 219, 0.06);
  --glass-border: var(--ws-border);
  --glass-glow:   0 0 20px rgba(42, 171, 219, 0.08);

  /* ---- DEEP OCEAN GLASS recipe (the signature) ----
     Light-mode defaults here; dark-mode values flipped in theme.css.
     The inset top hairline (--glass-edge) is what makes it *ocean* glass. */
  --glass-fill:        linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.72));
  --glass-fill-strong: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  --glass-edge:        rgba(255,255,255,.85);   /* bright top hairline */
  --glass-blur:        18px;
  --glass-blur-strong: 22px;
  --row-hover:    rgba(42, 171, 219, 0.07);
  --btn-glow:     0 4px 12px rgba(42, 171, 219, 0.28);
  --input-focus-border: rgba(42, 171, 219, 0.5);
  --page-transition: opacity 0.12s ease, transform 0.12s ease;

  /* Semantic status tints */
  --red-bg:     rgba(232, 72, 58, .1);
  --red-border: rgba(232, 72, 58, .25);
  --green-bg:   rgba(45, 189, 133, .1);
  --yellow-bg:  rgba(245, 166, 35, .1);
  --blue-bg:    rgba(167, 139, 250, .1);
  --orange-bg:  rgba(249, 115, 22, .1);
}

/* ── Inline icon wrapper ── */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}
.ic svg { width: 1em; height: 1em; }
.ic-pending { opacity: 0; }

/* ── Deep Ocean Glass utilities ── */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-edge);
}
.glass-strong {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}

/* ── Mono data + eyebrow (JetBrains Mono) ── */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ws-accent-muted);   /* #0E5C8A — passes AA on light; dark mode flips to bright */
}

/* iOS standalone PWA paints the status-bar / safe-area strip with the <html>
   background. body is transparent (real bg is body::before), so without this the
   top strip renders solid black. Ocean base keeps it seamless with the app. */
html {
  background-color: var(--ws-bg-base);
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--dark);
  display: flex;
  min-height: 100vh;
  font-size: var(--font-base);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(42, 171, 219, .06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(232, 184, 122, .04) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255, 255, 255, .9) 0%, #f1f5f9 100%);
  z-index: -1;
  pointer-events: none;
}


@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .4
  }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== PAGE TRANSITIONS ===== */
.page {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: var(--page-transition);
}
.page.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== SKIP LINK (a11y landmark target) ===== */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--ws-accent);
  color: var(--ws-white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
/* Only reveal on devices that actually navigate by keyboard (mouse+keyboard).
   iOS standalone PWA focuses the skip link on launch/tap and matches :focus
   (and even :focus-visible), so gate the reveal behind a fine-pointer/hover
   query — touch devices never show it, desktop keyboard users still do. */
@media (hover: hover) and (pointer: fine) {
  .skip-link:focus-visible,
  .skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--ws-white);
    outline-offset: 2px;
  }
}

/* ===== LOADING SKELETON ===== */
#main.loading .page.active > * {
  opacity: .4;
  pointer-events: none;
  transition: opacity .2s;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .7; }
}
#main.loading .page.active > * {
  animation: skeletonPulse .9s ease-in-out infinite;
}

/* ===== REDUCED MOTION (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}