/* =========================================================
   SHAM STAY — Design System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#0F172A;
  --secondary:#1E293B;
  --accent:#C9A227;
  --accent-soft:#F4E9C9;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E2E8F0;
  --success:#16A34A;
  --danger:#DC2626;
  --warning:#F59E0B;
  --info:#2563EB;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 8px 24px -8px rgba(15,23,42,.12);
  --shadow-lg:0 20px 45px -12px rgba(15,23,42,.22);

  --sidebar-w:270px;
  --topbar-h:68px;

  --font-ar:'Cairo', system-ui, sans-serif;
  --font-en:'Manrope', system-ui, sans-serif;
}

[data-theme="dark"]{
  --primary:#0B1220;
  --secondary:#0F172A;
  --bg:#0B1220;
  --surface:#111A2C;
  --text:#E8ECF4;
  --muted:#8B97AC;
  --border:#233047;
  --accent-soft:#2B2412;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar);
  font-size:15px;
  transition:background .25s ease, color .25s ease;
}
html[lang="en"] body{ font-family:var(--font-en); }

::selection{ background:var(--accent-soft); color:var(--primary); }

a{ text-decoration:none; }
.text-muted-2{ color:var(--muted) !important; }
.fw-semibold{ font-weight:600; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* =========================================================
   AUTH / LANDING
   ========================================================= */
.auth-shell{
  min-height:100vh;
  display:flex;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(160deg, var(--primary) 0%, var(--secondary) 55%, #142033 100%);
}
.auth-visual{
  flex:1.1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:56px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.auth-visual::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,162,39,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,.10) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
  pointer-events:none;
}
.auth-card-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:32px;
}
.auth-card{
  width:100%;
  max-width:430px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:40px;
  border:1px solid var(--border);
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:.3px;
}
.brand-mark .bi{ color:var(--accent); }
.brand-tagline{ color:var(--muted); font-size:.92rem; }

.demo-account-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:start;
  border:1px dashed var(--border);
  background:var(--bg);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:.85rem;
  transition:.15s;
}
.demo-account-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* =========================================================
   APP SHELL
   ========================================================= */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  background:var(--primary);
  color:#CBD5E1;
  flex-shrink:0;
  position:fixed;
  inset-inline-start:0;
  top:0; bottom:0;
  overflow-y:auto;
  z-index:1030;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px;
  color:#fff;
  font-weight:800;
  font-size:1.15rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .bi{ color:var(--accent); font-size:1.4rem; }
.sidebar-context{
  margin:14px 16px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:.78rem;
}
.sidebar-context .badge-live{
  font-size:.65rem;
}
.nav-section-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748B;
  padding:14px 20px 6px;
}
.sidebar .nav-link{
  color:#CBD5E1;
  padding:10px 20px;
  font-size:.875rem;
  display:flex; align-items:center; gap:10px;
  border-inline-start:3px solid transparent;
  transition:.15s;
}
.sidebar .nav-link .bi{ font-size:1rem; width:18px; text-align:center; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active{
  background:rgba(201,162,39,.12);
  color:#fff;
  border-inline-start-color:var(--accent);
  font-weight:600;
}
.sidebar-footer{
  padding:14px 16px 22px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:10px;
}

.main-col{
  flex:1;
  margin-inline-start:var(--sidebar-w);
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 22px;
  position:sticky;
  top:0;
  z-index:1020;
}
.topbar-search{
  position:relative;
  flex:1;
  max-width:420px;
}
.topbar-search input{
  padding-inline-start:36px;
  background:var(--bg);
  border-color:var(--border);
}
.topbar-search .bi-search{
  position:absolute;
  inset-inline-start:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
}
.search-results-panel{
  position:absolute;
  top:calc(100% + 6px);
  inset-inline-start:0;
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  max-height:360px;
  overflow-y:auto;
  z-index:1050;
  display:none;
}
.search-results-panel.show{ display:block; }
.search-result-item{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  font-size:.85rem;
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:var(--bg); }

.icon-btn{
  width:38px; height:38px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  position:relative;
}
.icon-btn:hover{ background:var(--bg); }
.notif-dot{
  position:absolute; top:6px; inset-inline-end:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--danger);
  border:1.5px solid var(--surface);
}

.content-area{
  flex:1;
  padding:24px;
  max-width:100%;
}

/* =========================================================
   COMPONENTS
   ========================================================= */
.page-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.page-header h1{
  font-size:1.4rem; font-weight:800; margin:0 0 4px;
}
.page-header .subtitle{ color:var(--muted); font-size:.88rem; }
.breadcrumb-mini{ font-size:.78rem; color:var(--muted); margin-bottom:6px; }

.app-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.app-card .card-header-lite{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.95rem;
}
.app-card .card-body-lite{ padding:18px; }

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  transition:.2s;
}
.stat-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.stat-card .stat-icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; margin-bottom:12px;
}
.stat-card .stat-value{ font-size:1.55rem; font-weight:800; line-height:1.1; }
.stat-card .stat-label{ color:var(--muted); font-size:.8rem; margin-top:2px; }
.stat-card .stat-delta{ font-size:.75rem; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }

.status-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  font-size:.72rem; font-weight:700;
  white-space:nowrap;
}
.status-badge .dot{ width:6px; height:6px; border-radius:50%; }
.s-active,.s-confirmed,.s-paid,.s-clean,.s-available,.s-resolved,.s-completed,.s-approved{ background:rgba(22,163,74,.12); color:var(--success); }
.s-pending,.s-processing,.s-dirty,.s-assigned,.s-cleaning{ background:rgba(245,158,11,.14); color:#B45309; }
.s-suspended,.s-failed,.s-cancelled,.s-maintenance,.s-refunded,.s-noshow{ background:rgba(220,38,38,.12); color:var(--danger); }
.s-deploying,.s-progress,.s-occupied,.s-inprogress,.s-checkedin{ background:rgba(37,99,235,.12); color:var(--info); }
.s-inspected,.s-reserved,.s-new,.s-open{ background:rgba(100,116,139,.14); color:#475569; }

.data-table{ width:100%; font-size:.86rem; }
.data-table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:1px solid var(--border);
  padding:10px 12px; white-space:nowrap; background:var(--bg);
}
.data-table tbody td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:hover{ background:var(--bg); }
.table-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.table-toolbar .form-select, .table-toolbar .form-control{ font-size:.83rem; }
.avatar-chip{
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-soft); color:#8a6d0f;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.75rem; flex-shrink:0;
}

.hotel-card, .room-card, .booking-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:.2s;
  height:100%;
}
.hotel-card:hover, .room-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.hotel-card .hc-cover{
  height:130px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  position:relative;
  display:flex; align-items:flex-end;
  padding:12px;
}
.hotel-card .hc-cover .subdomain-tag{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(4px);
  color:#fff; font-size:.68rem; padding:3px 8px; border-radius:6px;
}
.room-card{ padding:16px; }
.room-card .room-num{ font-size:1.1rem; font-weight:800; }

.star-rating{ color:var(--accent); letter-spacing:2px; }
.star-rating .bi-star{ color:var(--border); }
.star-select{ display:flex; gap:6px; cursor:pointer; font-size:1.4rem; color:var(--border); }
.star-select .bi-star-fill.active{ color:var(--accent); }

.timeline-step{
  display:flex; gap:14px; padding-bottom:20px; position:relative;
}
.timeline-step:not(:last-child)::before{
  content:""; position:absolute; inset-inline-start:13px; top:28px; bottom:0;
  width:2px; background:var(--border);
}
.timeline-step .ts-dot{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:2px solid var(--border); font-size:.75rem; z-index:1;
}
.timeline-step.done .ts-dot{ background:var(--success); border-color:var(--success); color:#fff; }
.timeline-step.active .ts-dot{ background:var(--info); border-color:var(--info); color:#fff; }
.timeline-step .ts-title{ font-weight:600; font-size:.88rem; }
.timeline-step .ts-time{ font-size:.72rem; color:var(--muted); }

.empty-state{
  text-align:center; padding:56px 24px; color:var(--muted);
}
.empty-state .es-icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:1.6rem; color:var(--muted);
}
.empty-state h6{ color:var(--text); font-weight:700; margin-bottom:6px; }

.skeleton{
  background:linear-gradient(90deg, var(--border) 25%, var(--bg) 37%, var(--border) 63%);
  background-size:400% 100%;
  animation:skeleton-loading 1.4s ease infinite;
  border-radius:6px;
}
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.skeleton-row td{ padding:14px 12px; }

.wizard-steps{ display:flex; margin-bottom:26px; overflow-x:auto; gap:0; }
.wizard-step{
  flex:1; min-width:120px; text-align:center; padding:0 6px; position:relative;
}
.wizard-step .ws-circle{
  width:34px; height:34px; border-radius:50%; margin:0 auto 6px;
  background:var(--surface); border:2px solid var(--border); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem;
}
.wizard-step .ws-label{ font-size:.72rem; color:var(--muted); }
.wizard-step::before{
  content:""; position:absolute; top:17px; inset-inline-start:-50%; width:100%; height:2px;
  background:var(--border); z-index:0;
}
.wizard-step:first-child::before{ display:none; }
.wizard-step.done .ws-circle{ background:var(--success); border-color:var(--success); color:#fff; }
.wizard-step.done::before{ background:var(--success); }
.wizard-step.active .ws-circle{ background:var(--info); border-color:var(--info); color:#fff; }
.wizard-step.active .ws-label{ color:var(--text); font-weight:700; }

.edition-card{
  border:1.5px solid var(--border); border-radius:var(--radius); padding:18px;
  cursor:pointer; height:100%; transition:.15s; background:var(--surface);
}
.edition-card:hover{ border-color:var(--accent); }
.edition-card.selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--shadow); }
.edition-card .ec-stars{ color:var(--accent); font-size:1.2rem; letter-spacing:2px; }

.kanban-col{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; min-height:420px; min-width:230px; flex:1;
}
.kanban-col h6{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.kanban-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; margin-bottom:10px; cursor:grab; box-shadow:var(--shadow-sm); font-size:.82rem;
}
.kanban-card.dragging{ opacity:.4; }
.kanban-col.drag-over{ outline:2px dashed var(--accent); outline-offset:2px; }

.calendar-grid{ display:grid; font-size:.78rem; }
.cal-room-col{ position:sticky; inset-inline-start:0; background:var(--surface); z-index:2; font-weight:600; padding:8px; border:1px solid var(--border); }
.cal-cell{ border:1px solid var(--border); min-height:40px; position:relative; }
.cal-block{
  position:absolute; top:4px; bottom:4px; background:var(--info); color:#fff;
  border-radius:6px; font-size:.7rem; display:flex; align-items:center; padding:0 6px;
  cursor:pointer; white-space:nowrap; overflow:hidden; opacity:.92;
}
.cal-block.confirmed{ background:var(--success); }
.cal-block.pending{ background:var(--warning); }

.progress-thin{ height:6px; border-radius:20px; }

.chart-bar-wrap{ display:flex; align-items:flex-end; gap:8px; height:160px; }
.chart-bar{ flex:1; background:linear-gradient(180deg, var(--accent), var(--primary)); border-radius:6px 6px 0 0; position:relative; min-height:4px; }
.chart-bar .bar-tip{ position:absolute; top:-20px; inset-inline-start:0; width:100%; text-align:center; font-size:.65rem; color:var(--muted); }

.donut{ border-radius:50%; }

.toast-stack{ position:fixed; top:20px; inset-inline-end:20px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.st-toast{
  min-width:280px; background:var(--surface); border:1px solid var(--border);
  border-inline-start:4px solid var(--success);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:12px 14px;
  display:flex; align-items:center; gap:10px; animation:toast-in .25s ease;
}
.st-toast.danger{ border-inline-start-color:var(--danger); }
.st-toast.info{ border-inline-start-color:var(--info); }
.st-toast.warning{ border-inline-start-color:var(--warning); }
@keyframes toast-in{ from{ transform:translateX(20px); opacity:0;} to{ transform:translateX(0); opacity:1;} }

.review-stars{ color:var(--accent); }

.landing-nav{ position:sticky; top:0; z-index:100; background:rgba(248,250,252,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
[data-theme="dark"] .landing-nav{ background:rgba(11,18,32,.85); }
.hero-landing{
  background:radial-gradient(1000px 500px at 20% 0%, rgba(201,162,39,.15), transparent 60%), linear-gradient(180deg, var(--primary), var(--secondary));
  color:#fff; padding:90px 0 70px;
}
.pricing-card{ border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--surface); height:100%; }
.pricing-card.featured{ border-color:var(--accent); box-shadow:var(--shadow-lg); position:relative; }
.feature-tile{
  border:1px solid var(--border); border-radius:var(--radius); padding:22px; background:var(--surface); height:100%;
}
.feature-tile .ft-icon{
  width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:#8a6d0f;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.2rem;
}

.form-label{ font-size:.83rem; font-weight:600; }
.form-control, .form-select{ font-size:.88rem; }
.form-control:focus, .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(201,162,39,.15); }

.btn-gold{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-gold:hover{ background:#b3901f; border-color:#b3901f; color:#fff; }
.btn-outline-gold{ border-color:var(--accent); color:var(--accent); }
.btn-outline-gold:hover{ background:var(--accent); color:#fff; }
.btn-primary-dark{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary-dark:hover{ background:var(--secondary); border-color:var(--secondary); color:#fff; }

.section-eyebrow{ color:var(--accent); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

.dropdown-menu{ border-color:var(--border); box-shadow:var(--shadow-lg); }
.modal-content{ border-radius:var(--radius); border:none; }
.offcanvas{ background:var(--primary); color:#CBD5E1; }

.hero-website{
  background:linear-gradient(rgba(15,23,42,.55), rgba(15,23,42,.75)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center;
  color:#fff; padding:100px 0; border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

@media (max-width: 991.98px){
  .sidebar{ transform:translateX(100%); }
  html[lang="en"] .sidebar{ transform:translateX(-100%); }
  .sidebar.show{ transform:translateX(0); }
  .main-col{ margin-inline-start:0; }
}

.cursor-pointer{ cursor:pointer; }
.text-gold{ color:var(--accent) !important; }
.bg-gold-soft{ background:var(--accent-soft) !important; }
.fade-page{ animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }