/* ==========================================================================
   Luxe Spa & Salon Management System - Design Tokens & Core Styles
   Extracted pixel-faithfully from DESIGN.md and screens _1 to _7
   RTL-first (dir="rtl") | Material Symbols | Cairo & Tajawal
   ========================================================================== */

:root {
  /* Surface & Canvas Palette */
  --color-surface: #fff8f8;
  --color-surface-dim: #e7d6db;
  --color-surface-bright: #fff8f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fff0f4;
  --color-surface-container: #fce9ef;
  --color-surface-container-high: #f6e4e9;
  --color-surface-container-highest: #f0dee3;
  --color-surface-variant: #f0dee3;
  --color-background: #fff8f8;

  /* Typography & Foreground */
  --color-on-surface: #22191d;
  --color-on-surface-variant: #544245;
  --color-on-background: #22191d;
  --color-outline: #877275;
  --color-outline-variant: #dac0c4;

  /* Primary Brand Rose Palette */
  --color-primary: #983c57;
  --color-primary-action: #be5a75;
  --color-primary-hover: #d4738c;
  --color-primary-container: #b7546f;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #fffbff;
  --color-primary-fixed: #ffd9e0;
  --color-primary-fixed-dim: #ffb1c2;
  --color-on-primary-fixed: #3f0018;
  --color-on-primary-fixed-variant: #7d2742;
  --color-surface-tint: #9b3f59;

  /* Secondary Champagne Gold Palette */
  --color-secondary: #775a19;
  --color-secondary-gold: #c5a059;
  --color-gold-accent: #d4af37;
  --color-gold-container: #f3e5ab;
  --color-secondary-container: #fed488;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #785a1a;
  --color-secondary-fixed: #ffdea5;
  --color-secondary-fixed-dim: #e9c176;
  --color-on-secondary-fixed: #261900;
  --color-on-secondary-fixed-variant: #5d4201;

  /* Tertiary Palette */
  --color-tertiary: #944058;
  --color-tertiary-container: #b25870;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #fffbff;

  /* Neutrals & Dividers */
  --color-charcoal-plum: #2d2327;
  --color-warm-slate: #7e6c75;
  --color-border-subtle: #f2e9e4;
  --color-border-card: #ead7d1;
  --color-inverse-surface: #382e32;
  --color-inverse-on-surface: #ffecf2;

  /* Error & Alerts */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Status Colors (Two-tier pairing) */
  --status-confirmed-color: #2a9d8f;
  --status-confirmed-bg: #e8f5e9;
  --status-arrived-color: #8e44ad;
  --status-arrived-bg: #f3e5f5;
  --status-completed-color: #c5a059;
  --status-completed-bg: #fff8e7;
  --status-cancelled-color: #e76f51;
  --status-cancelled-bg: #fdecea;
  --status-inservice-color: #3b82f6;
  --status-inservice-bg: #eff6ff;
  --status-noshow-color: #877275;
  --status-noshow-bg: #f0dee3;

  /* Typography Fonts */
  --font-family-display: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --gutter: 1rem;
  --gutter-desktop: 1.5rem;
  --margin: 1rem;
  --margin-desktop: 2rem;

  /* Border Radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 1.75rem;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(45, 35, 39, 0.05);
  --shadow-card: 0 4px 20px -2px rgba(45, 35, 39, 0.04);
  --shadow-elevated: 0 12px 32px -4px rgba(45, 35, 39, 0.08), 0 4px 12px -2px rgba(190, 90, 117, 0.04);
  --shadow-glow-primary: 0 8px 20px -2px rgba(152, 60, 87, 0.4);
  --shadow-bottom-nav: 0 -4px 24px rgba(45, 35, 39, 0.06);
}

/* Base Body & Reset */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

/* Safe areas */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Headings with Tajawal */
h1, h2, h3, h4, .font-tajawal, .font-headline-lg, .font-headline-md, .font-headline-sm, .font-display-lg, .font-display-lg-mobile {
  font-family: var(--font-family-display);
}

/* Numeric alignment & JOD Currency */
.currency-amount, .tabular-nums {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Hide scrollbars gracefully */
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Common App Buttons */
.btn-primary-action {
  background-color: var(--color-primary-action);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-glow-primary);
  transition: all 0.2s ease;
}
.btn-primary-action:hover, .btn-primary-action:focus {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}
.btn-primary-action:active {
  transform: scale(0.98);
}

.btn-secondary-action {
  background-color: var(--color-surface-container-low);
  color: var(--color-primary-action);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-full);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary-action:hover {
  background-color: var(--color-surface-container);
}

.btn-gold {
  background: linear-gradient(135deg, #c5a059 0%, #d4af37 100%);
  color: #2d2327;
  border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
}

/* Status Pill Badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 28px;
  padding: 0 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.badge-status.confirmed {
  background-color: var(--status-confirmed-bg);
  color: var(--status-confirmed-color);
}
.badge-status.confirmed::before {
  background-color: var(--status-confirmed-color);
}

.badge-status.arrived {
  background-color: var(--status-arrived-bg);
  color: var(--status-arrived-color);
}
.badge-status.arrived::before {
  background-color: var(--status-arrived-color);
}

.badge-status.completed {
  background-color: var(--status-completed-bg);
  color: var(--status-completed-color);
}
.badge-status.completed::before {
  background-color: var(--status-completed-color);
}

.badge-status.cancelled {
  background-color: var(--status-cancelled-bg);
  color: var(--status-cancelled-color);
}
.badge-status.cancelled::before {
  background-color: var(--status-cancelled-color);
}

.badge-status.inservice {
  background-color: var(--status-inservice-bg);
  color: var(--status-inservice-color);
}
.badge-status.inservice::before {
  background-color: var(--status-inservice-color);
}

.badge-status.noshow {
  background-color: var(--status-noshow-bg);
  color: var(--status-noshow-color);
}
.badge-status.noshow::before {
  background-color: var(--status-noshow-color);
}

/* Inputs & Form Fields */
.form-input-luxe {
  background-color: #faf6f0;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1rem;
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  color: var(--color-on-surface);
  transition: all 0.2s ease;
  width: 100%;
}
.form-input-luxe:focus {
  background-color: #ffffff;
  border-color: var(--color-primary-action);
  box-shadow: 0 0 0 3px rgba(190, 90, 117, 0.12);
  outline: none;
}

/* Cards & Surfaces */
.card-luxe {
  background-color: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Frosted Bottom Navigation Bar */
.bottom-nav-luxe {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 72px;
  background: rgba(253, 251, 249, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(234, 215, 209, 0.6);
  box-shadow: var(--shadow-bottom-nav);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 500;
  gap: 2px;
  min-width: 56px;
  transition: color 0.15s ease;
}
.bottom-nav-item.active {
  color: var(--color-primary-action);
  font-weight: 700;
}
.bottom-nav-item .material-symbols-outlined {
  font-size: 24px;
}

/* Center Elevated POS Button */
.bottom-nav-center-fab {
  position: relative;
  top: -14px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-primary);
  transition: transform 0.15s ease;
  text-decoration: none;
}
.bottom-nav-center-fab:active {
  transform: scale(0.95);
}

/* Floating Action Button (FAB) */
.fab-floating {
  position: fixed;
  bottom: 88px;
  left: 1rem; /* In RTL, left is trailing edge */
  z-index: 45;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-action);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-primary);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.fab-floating:hover {
  transform: scale(1.05);
}
.fab-floating:active {
  transform: scale(0.95);
}

/* Responsive Desktop / Tablet Adjustments */
@media (min-width: 1024px) {
  body {
    padding-right: 260px; /* Space for desktop sidebar in RTL */
  }
  .bottom-nav-luxe {
    display: none; /* Hide bottom nav on desktop, show desktop sidebar */
  }
  .desktop-sidebar-luxe {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    background: #ffffff;
    border-left: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    z-index: 50;
  }
}
@media (max-width: 1023px) {
  .desktop-sidebar-luxe {
    display: none;
  }
}