@font-face{font-family:"IBM Plex Sans Arabic";src:url("/static/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/static/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root {
  color-scheme: dark;
  /* هوية Hotel OS الرسمية (Brand Manual 2025): Skyline Shadow #0d1a3c قاعدة 60%،
     Silver Spires #d0d0ce ثانوية 30%، Golden Sunrise #CA9E57 لمسة 10%.
     الحالات من اللوحة الثانوية: Reflective Visions/Sky High Blue/Urban Living. */
  --bg-0: #0f1d42;
  --bg-1: #142551;
  --bg-2: #1a2e62;
  --surface: rgba(26, 44, 88, .92);
  --surface-strong: rgba(30, 50, 98, .97);
  --surface-soft: rgba(208, 208, 206, .04);
  --border: rgba(208, 208, 206, .17);
  --border-strong: rgba(202, 158, 87, .45);
  --ink: #f4f6fb;
  --muted: #b7bfd0;
  --faint: #7d8699;
  --violet: #4db3ea;
  --violet-deep: #1c5d80;
  --gold: #ca9e57;
  --gold-hi: #e8c98c;
  --ok: #2ec4b2;
  --warn: #e3b565;
  --danger: #e0537a;
  --info: #4db3ea;
  --neutral: #8b93a5;
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .34);
  --ease-snap: cubic-bezier(.22, 1, .36, 1);
  --font: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  color: var(--ink);
  background: var(--bg-0);
  font: 400 16px/1.6 var(--font);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(145deg, rgba(19, 35, 76, .92), rgba(11, 21, 49, .86)),
    url("/static/brand/splash-bg.webp") center/cover no-repeat;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 82% -12%, rgba(202, 158, 87, .1), transparent 30%),
    radial-gradient(circle at 8% 100%, rgba(0, 143, 206, .07), transparent 32%),
    repeating-linear-gradient(45deg, transparent 0 13px, rgba(208, 208, 206, .03) 14px);
  pointer-events: none;
}

button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
button { color: inherit; }
a { color: var(--gold-hi); }
img { max-inline-size: 100%; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { line-height: 1.4; }

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--gold-hi);
  color: #0d1a3c;
  border-radius: 8px;
}
.skip-link:focus { transform: none; }

.card {
  background: linear-gradient(150deg, rgba(28, 47, 94, .95), rgba(16, 28, 60, .93));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 52px rgba(0, 0, 0, .16);
  backdrop-filter: blur(22px) saturate(112%);
  -webkit-backdrop-filter: blur(22px) saturate(112%);
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold-hi); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.tabular { font-variant-numeric: tabular-nums; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-inline-size: 0; }
.brand__mark { inline-size: 34px; block-size: 34px; object-fit: contain; flex: 0 0 auto; }
/* اللوكب inline بـline-height:1 لضبط خط قاعدة Hotel OS/sense؛ فإن لم يُعوَّض على مستوى
   الكتلة صعد السطر العربي تحته فوقه وتراكبا (ظهر على ٣٩٠ بأسماء الأشرطة الطويلة). */
.brand__name { font-size: 18px; font-weight: 700; color: var(--gold-hi); line-height: 1.35; }
.brand__sub { color: var(--muted); font-size: 12px; line-height: 1.45; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding-inline: 9px;
  margin-block-start: 5px;
  border: 1px solid rgba(234, 190, 96, .48);
  border-radius: 999px;
  color: var(--gold-hi);
  background: rgba(234, 190, 96, .08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}
.powered {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--faint);
  font-size: 11.5px;
  text-align: center;
}

.icon {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.icon--sm { inline-size: 16px; block-size: 16px; }
.icon--lg { inline-size: 28px; block-size: 28px; }

.btn, button {
  min-block-size: 44px;
  border: 1px solid rgba(208, 208, 206, .13);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--ease-snap), background-color .25s var(--ease-snap), transform .18s var(--ease-snap), box-shadow .25s var(--ease-snap);
}
.btn:hover, button:hover { border-color: rgba(202, 158, 87, .55); background: rgba(202, 158, 87, .07); }
.btn:active, button:active { transform: scale(.97); }
.btn--gold {
  color: #17160f;
  background: linear-gradient(135deg, #ecca8b, #b98a3e);
  border-color: rgba(236, 202, 139, .72);
  box-shadow: 0 8px 24px rgba(202, 158, 87, .16), inset 0 1px 0 rgba(255, 255, 255, .42);
}
.btn--gold:hover { background: linear-gradient(135deg, #f2d8a0, #ca9e57); border-color: rgba(242, 216, 160, .85); }
.btn--ghost { background: transparent; }
.btn--compact { min-block-size: 40px; padding: 7px 12px; font-size: 13px; }
button:disabled { opacity: .48; cursor: not-allowed; transform: none; }

input, textarea, select {
  inline-size: 100%;
  min-block-size: 44px;
  border: 1px solid rgba(208, 208, 206, .12);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  background: rgba(6, 10, 22, .72);
  color: var(--ink);
  transition: border-color .25s var(--ease-snap);
}
input:hover, textarea:hover, select:hover { border-color: rgba(232, 201, 140, .24); }
textarea { min-block-size: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(232, 201, 140, .75);
  outline-offset: 2px;
}
::placeholder { color: var(--faint); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-block-size: 26px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pill.done { color: var(--ok); background: rgba(46, 196, 178, .12); border-color: rgba(46, 196, 178, .36); }
.pill.late { color: var(--warn); background: rgba(227, 181, 101, .11); border-color: rgba(227, 181, 101, .35); }
.pill.missed { color: var(--danger); background: rgba(224, 83, 122, .12); border-color: rgba(224, 83, 122, .4); }
.pill.in_progress { color: var(--info); background: rgba(77, 179, 234, .11); border-color: rgba(77, 179, 234, .36); }
.pill.open { color: var(--muted); background: rgba(208, 208, 206, .08); border-color: rgba(208, 208, 206, .26); }
.pill.upcoming { color: #9db1d8; background: rgba(125, 152, 205, .09); border-color: rgba(125, 152, 205, .26); }

.toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: max(24px, env(safe-area-inset-bottom));
  z-index: 500;
  max-inline-size: min(90vw, 520px);
  transform: translateX(50%);
  padding: 12px 18px;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.toast.err { color: #ffd9e3; border-color: rgba(224, 83, 122, .55); }
.toast.ok { color: #d2f7f2; border-color: rgba(46, 196, 178, .52); }
html[dir="ltr"] .toast { transform: translateX(-50%); }

.language-switch {
  position: fixed;
  inset-block-start: max(10px, env(safe-area-inset-top));
  inset-inline-end: max(10px, env(safe-area-inset-right));
  z-index: 1100;
  min-block-size: 44px;
  min-inline-size: 88px;
  padding-inline: 14px;
  color: var(--gold-hi);
  background: rgba(13, 26, 60, .94);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}

html[dir="ltr"] body { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

.skeleton {
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, .09) 35%, rgba(255, 255, 255, .04) 50%);
  background-size: 240% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { to { background-position-x: -120%; } }

.empty-state { padding: 30px 20px; text-align: center; color: var(--muted); }
.empty-state .icon { inline-size: 36px; block-size: 36px; color: var(--gold); margin-block-end: 8px; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(10, 21, 51, .55), rgba(8, 16, 38, .88)),
    url("/static/brand/splash-bg.webp") center/cover no-repeat;
  transition: opacity .24s ease, visibility .24s ease;
}
.splash--done { opacity: 0; visibility: hidden; }
.splash__inner { text-align: center; }
.splash__mark { inline-size: 112px; block-size: 112px; object-fit: contain; border-radius: 26px; filter: drop-shadow(0 12px 30px rgba(202, 158, 87, .2)); }
.splash__title { margin-block: 6px 0; color: var(--gold-hi); font-size: 24px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── هوية Hotel OS (V5) ── */
.brand__en { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }

/* بوابات الدخول بهوية Hotel OS الكاملة */
.brand--gate { flex-direction: column; text-align: center; gap: 4px; }
.brand--gate .brand__name { font-size: 22px; }
.gate-divider { inline-size: 56px; block-size: 2px; margin: 12px auto; border: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

@media (max-width: 520px) {
  /* الشعار الرسمي يكفي — النص الإنجليزي يلتف بلا داعٍ على الشاشات الضيقة */
  .brand__en { display: none; }
  .language-switch { min-inline-size: 78px; padding-inline: 10px; }
}

/* ── هوية Hotel OS ── */
.brand__lockup { display: inline-flex; align-items: baseline; gap: 0; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; line-height: 1; }
.brand__lockup b { font-weight: 700; font-size: 1.22em; letter-spacing: .02em; color: var(--gold-hi); }
.brand__lockup span { font-weight: 400; font-size: .74em; color: var(--muted); letter-spacing: .03em; }
.brand__name .brand__lockup b { font-size: 21px; }
.brand__name .brand__lockup span { font-size: 13px; }
.splash__title .brand__lockup b { color: #fff; }