/*! Lintel theme layer for Stayinn CRM. Tokens/look adapted from "Lintel" (175-lintel) (c) 2026 Hasib (OVERSHOOT), licensed to itsahmadfakih@hotmail.com, order INS-717FF07D. Not for redistribution. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Lintel Tokens Light */
  --l-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --l-bg: #eef0f4; --l-mesh-a: #d3dcfa; --l-mesh-b: #fbdcc6; --l-mesh-c: #d2ebe2;
  --l-glass: rgba(255, 255, 255, .5); --l-glass-2: rgba(255, 255, 255, .7); --l-glass-3: rgba(255, 255, 255, .86);
  --l-solid: #f7f8fb; --l-float: #fdfdfe;
  --l-well: rgba(18, 23, 34, .055); --l-line: rgba(18, 23, 34, .085); --l-line-2: rgba(18, 23, 34, .16);
  --l-rim: rgba(255, 255, 255, .85);
  --l-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 22px 44px -30px rgba(30, 44, 80, .3);
  --l-shadow-pop: 0 24px 60px -18px rgba(20, 30, 60, .32), 0 2px 6px rgba(20, 30, 60, .08);
  --l-text: #121722; --l-muted: #5f6878; --l-faint: #8a92a1;
  --l-cobalt: #2f5bea; --l-on-cobalt: #f8f9fc; --l-cobalt-soft: rgba(47, 91, 234, .12);
  --l-apricot: #ff8a3d; --l-on-apricot: #121722; --l-apricot-soft: rgba(255, 138, 61, .16);
  --l-mint: #138a63; --l-on-mint: #f8f9fc; --l-mint-soft: rgba(19, 138, 99, .12);
  --l-rose: #d93f45; --l-on-rose: #f8f9fc; --l-rose-soft: rgba(217, 63, 69, .12);
  --l-pill: #121722; --l-on-pill: #f8f9fc;
  --l-r-card: 24px; --l-r-ctl: 999px; --l-r-sm: 10px;

  /* Stayinn Variable Remap Light */
  --brand: var(--l-cobalt);
  --brand-d: color-mix(in srgb, var(--l-cobalt) 88%, black);
  --brand-50: var(--l-cobalt-soft);
  --brand-100: color-mix(in srgb, var(--l-cobalt) 22%, transparent);
  --ink: var(--l-text); --ink2: color-mix(in srgb, var(--l-text) 78%, var(--l-muted)); --muted: var(--l-muted);
  --line: var(--l-line); --bg: var(--l-bg); --surface: var(--l-solid); --surface2: color-mix(in srgb, var(--l-solid) 96%, var(--l-bg));
  --soft: var(--l-cobalt-soft);
  --shadow: rgba(30, 44, 80, .08); /* Stayinn uses --shadow as a COLOUR */
  --si-navy: var(--l-text); --si-navy-2: var(--l-muted); /* only used as text now; sidebar/topbar backgrounds are set below */
  --si-green: var(--l-mint); --si-green-2: color-mix(in srgb, var(--l-mint) 88%, black);
  --ok: var(--l-mint); --ok-bg: var(--l-mint-soft);
  --warn: var(--l-apricot); --warn-bg: var(--l-apricot-soft);
  --bad: var(--l-rose); --bad-bg: var(--l-rose-soft);
  --info: var(--l-cobalt); --info-bg: var(--l-cobalt-soft);
  --radius: var(--l-r-card); --r-sm: var(--l-r-sm);
  --focus: 0 0 0 3px var(--l-cobalt-soft);
}

:root[data-theme="dark"] {
  /* Lintel Tokens Dark */
  --l-bg: #0e1117; --l-mesh-a: rgba(47, 91, 234, .32); --l-mesh-b: rgba(255, 138, 61, .14); --l-mesh-c: rgba(19, 138, 99, .2);
  --l-glass: rgba(255, 255, 255, .045); --l-glass-2: rgba(255, 255, 255, .08); --l-glass-3: #1d222c;
  --l-solid: #171b23; --l-float: #20252f;
  --l-well: rgba(255, 255, 255, .065); --l-line: rgba(255, 255, 255, .08); --l-line-2: rgba(255, 255, 255, .16);
  --l-rim: rgba(255, 255, 255, .075);
  --l-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -30px rgba(0, 0, 0, .7);
  --l-shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  --l-text: #eef1f6; --l-muted: #a0a8b6; --l-faint: #79808e;
  --l-cobalt: #7192ff; --l-on-cobalt: #0e1117; --l-cobalt-soft: rgba(113, 146, 255, .16);
  --l-apricot: #ff9a55; --l-on-apricot: #121722; --l-apricot-soft: rgba(255, 154, 85, .16);
  --l-mint: #4cc79c; --l-on-mint: #0e1117; --l-mint-soft: rgba(76, 199, 156, .14);
  --l-rose: #ff6b70; --l-on-rose: #0e1117; --l-rose-soft: rgba(255, 107, 112, .14);
  --l-pill: #eef1f6; --l-on-pill: #121722;

  /* Stayinn Variable Remap Dark */
  --brand: var(--l-cobalt);
  --brand-d: color-mix(in srgb, var(--l-cobalt) 80%, white);
  --brand-50: var(--l-cobalt-soft);
  --brand-100: color-mix(in srgb, var(--l-cobalt) 22%, transparent);
  --ink: var(--l-text); --ink2: color-mix(in srgb, var(--l-text) 78%, var(--l-muted)); --muted: var(--l-muted);
  --line: var(--l-line); --bg: var(--l-bg); --surface: var(--l-solid); --surface2: color-mix(in srgb, var(--l-solid) 96%, var(--l-bg));
  --soft: var(--l-cobalt-soft);
  --shadow: rgba(0, 0, 0, .45);
  --si-navy: var(--l-text); --si-navy-2: var(--l-muted);
  --si-green: var(--l-mint); --si-green-2: color-mix(in srgb, var(--l-mint) 80%, white);
  --ok: var(--l-mint); --ok-bg: var(--l-mint-soft);
  --warn: var(--l-apricot); --warn-bg: var(--l-apricot-soft);
  --bad: var(--l-rose); --bad-bg: var(--l-rose-soft);
  --info: var(--l-cobalt); --info-bg: var(--l-cobalt-soft);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html, html body {
  font-family: var(--l-font), Tajawal, system-ui, sans-serif !important;
  background: var(--l-bg) !important;
  color: var(--l-text) !important;
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
}
html { background: var(--l-bg) !important; }
html body, html body.si { background: transparent !important; color: var(--l-text) !important; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46vmax 46vmax at 8% -6%, var(--l-mesh-a), transparent 72%),
    radial-gradient(42vmax 42vmax at 100% 104%, var(--l-mesh-b), transparent 72%),
    radial-gradient(36vmax 36vmax at 46% 112%, var(--l-mesh-c), transparent 72%);
}
html[dir=rtl] body, [dir=rtl] input, [dir=rtl] button, [dir=rtl] select, [dir=rtl] textarea { font-family: Tajawal, var(--l-font), system-ui, sans-serif !important; }
button, input, select, textarea { font-family: var(--l-font), Tajawal, system-ui, sans-serif; }
body.si :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; }
h1, h2, h3, body.si h1, body.si h2 { font-weight: 700; letter-spacing: -.03em; }
body.si h2 { font-size: 24px; }
@media (max-width:760px) { body.si h2 { font-size: 20px; } }
::selection { background: var(--l-cobalt); color: var(--l-on-cobalt); }
a { color: var(--brand-d); }

/* ── Shell: sidebar = Lintel frosted pane ───── */
#si-sb {
  background: color-mix(in srgb, var(--l-solid) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--l-text) !important;
  padding-block-start: 6px; scrollbar-width: none;
  border-inline-end: 1px solid var(--l-line);
}
:root[data-theme=dark] #si-sb {
  background: color-mix(in srgb, var(--l-solid) 78%, transparent) !important;
  color: var(--l-text) !important;
}
#si-sb .brand { color: var(--l-text) !important; font-size: 19px; letter-spacing: -.04em; padding: 18px 18px 12px; }
#si-sb .brand img { width: 36px; height: 36px; border-radius: 12px; }
#si-sb h6 { color: var(--l-muted) !important; font-weight: 700; letter-spacing: .08em; margin: 16px 20px 6px; }
#si-sb a.it { color: var(--l-text) !important; padding: 8px 12px; margin: 1px 10px; border-radius: 14px; font-weight: 600; font-size: 14px; }
#si-sb a.it i { opacity: .8; }
#si-sb a.it:hover { background: var(--l-well) !important; }
#si-sb a.it.on { background: var(--l-pill) !important; color: var(--l-on-pill) !important; font-weight: 700; border-radius: 999px !important; }
#si-sb a.it.on i { opacity: 1; }
#si-sb .foot { border-top-color: var(--l-line) !important; color: var(--l-faint) !important; }
#si-sb .foot button { background: var(--l-well) !important; color: var(--l-text) !important; }
#si-top {
  background: color-mix(in srgb, var(--l-glass-3) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--l-text) !important;
}
#si-top button { background: var(--l-well) !important; color: var(--l-text) !important; border-radius: 12px !important; }
header, body.si.has-sb>header {
  background: color-mix(in srgb, var(--l-glass-3) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--l-line) !important; box-shadow: none !important;
}

/* ── Cards, tiles, stats ─────────────────────────────────────────────── */
.card, body.si .card { background: var(--l-glass-2) !important; border: 1px solid var(--l-rim) !important; border-radius: var(--l-r-card) !important; box-shadow: var(--l-shadow) !important; }
#modal .card { background: var(--l-float) !important; box-shadow: var(--l-shadow-pop) !important; }
#modal { background: rgba(14, 20, 34, .28) !important; }
:root[data-theme=dark] #modal { background: rgba(0, 0, 0, .55) !important; }
@media (max-width:760px) { .card, body.si .card { border-radius: 18px !important; } #modal .card { border-radius: 0 !important; } }
a.tile { background: var(--l-glass-2) !important; border: 1px solid var(--l-rim) !important; border-radius: var(--l-r-card) !important; box-shadow: var(--l-shadow) !important; color: var(--l-text) !important; }
a.tile:hover { border-color: var(--l-line-2) !important; box-shadow: var(--l-shadow-pop) !important; }
.ic { background: var(--l-cobalt-soft) !important; border-radius: 14px !important; }
.tile span { color: var(--l-muted) !important; }
.stat, body.si .stat { color: var(--l-text) !important; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; font-size: 30px; }
@media (max-width:760px) { .stat, body.si .stat { font-size: 24px; } }
.lbl { color: var(--l-muted); }
h2.g { color: var(--l-muted) !important; font-size: 0.72rem !important; font-weight: 700; letter-spacing: .08em; }
.badge { background: var(--l-apricot) !important; color: var(--l-on-apricot) !important; font-weight: 700; }

/* ── Buttons: Lintel pill buttons ──────────────────────────────────────── */
.btn, button.btn, body.si .btn {
  background: var(--l-pill) !important; color: var(--l-on-pill) !important;
  border: 1px solid transparent !important; border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 0 10px 22px -14px rgba(18, 23, 34, .55);
  transition: filter .15s cubic-bezier(.2,.8,.2,1), transform .1s;
}
.btn:hover, body.si .btn:hover { background: var(--l-pill) !important; filter: brightness(1.25); }
:root[data-theme=dark] .btn:hover { filter: brightness(.9); }
:root[data-theme=dark] .btn:not(.ghost) { color: var(--l-on-pill) !important; }
.btn.ghost, body.si .btn.ghost { background: var(--l-glass) !important; color: var(--l-text) !important; border: 1px solid var(--l-line-2) !important; box-shadow: none; }
.btn.ghost:hover, body.si .btn.ghost:hover { background: var(--l-glass-2) !important; filter: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
a.wa { background: #25d366 !important; color: #052812 !important; } /* dark text: white on WhatsApp green fails AA */
a.tel { color: var(--brand-d) !important; }

/* ── Form controls: pill inputs, 16px textareas ──────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select:not([multiple]) {
  border-radius: 999px !important; border: 1px solid var(--l-line-2) !important;
  background: var(--l-glass-3) !important; color: var(--l-text) !important;
  padding-inline: 16px; min-height: 40px;
}
:root[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
:root[data-theme=dark] select:not([multiple]) {
  background: var(--l-solid) !important;
}
select[multiple], textarea { border-radius: 16px !important; border: 1px solid var(--l-line-2) !important; background: var(--l-glass-3) !important; color: var(--l-text) !important; }
:root[data-theme=dark] select[multiple], :root[data-theme=dark] textarea {
  background: var(--l-solid) !important;
}
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--l-cobalt) !important; box-shadow: 0 0 0 3px var(--l-cobalt-soft) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--l-cobalt); }
.f>input, .f>select, .f>textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.si-tools select, .si-tools button { background: var(--l-glass-2) !important; border: 1px solid var(--l-line) !important; color: var(--l-text) !important; box-shadow: var(--l-shadow); min-height: 36px; }
.si-tools button:hover { background: var(--l-well) !important; }

/* ── Tables: muted heads, hairline rows, well hover ───────── */
table th, body.si th { color: var(--l-muted) !important; font-size: 0.72rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
th, td { border-bottom-color: var(--l-line) !important; }
body.si tbody tr:nth-child(even) td { background: transparent; } /* No zebra stripes */
tr.r:hover, tr.r:hover td { background: var(--l-well) !important; }
.si-pg button { border-radius: 999px !important; border-color: var(--l-line-2) !important; background: var(--l-glass-2) !important; color: var(--l-text) !important; }

/* ── Pills / status (Lintel tints) ─────────────────────────────────────── */
.pill { background: var(--l-cobalt-soft) !important; color: var(--l-cobalt) !important; font-weight: 650; border-radius: 999px !important; }
.si-pill { background: var(--l-well) !important; color: var(--l-muted) !important; font-weight: 650; }
.si-pill.ok, .pill.ok { background: var(--l-mint-soft) !important; color: var(--l-mint) !important; }
.si-pill.warn, .pill.warn { background: var(--l-apricot-soft) !important; color: #b8530f !important; }
:root[data-theme=dark] .si-pill.warn, :root[data-theme=dark] .pill.warn { color: var(--l-apricot) !important; }
.si-pill.bad, .pill.bad { background: var(--l-rose-soft) !important; color: var(--l-rose) !important; }
.si-pill.info { background: var(--l-cobalt-soft) !important; color: var(--l-cobalt) !important; }
pre { background: var(--l-well) !important; border: 1px solid var(--l-line); border-radius: 14px !important; color: var(--l-text) !important; }

/* ── In-page section menus (Governance/Marketing tab bar) ── */
nav a { border-radius: 999px; }
nav a.on, nav a:hover { background: var(--l-well) !important; color: var(--l-text) !important; }
body.si.has-sb .lay>aside#nav {
  background: var(--l-glass) !important; border: 1px solid var(--l-rim) !important; box-shadow: var(--l-shadow) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--l-line) !important;
}
body.si.has-sb .lay>aside#nav a { color: var(--l-muted) !important; font-weight: 600; }
body.si.has-sb .lay>aside#nav a.on { background: var(--l-pill) !important; color: var(--l-on-pill) !important; }

/* ── Mobile chrome (colours only; layout untouched) ─────────────────── */
#bnav, #more.open {
  background: color-mix(in srgb, var(--l-glass-3) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top-color: var(--l-line) !important;
}
#bnav a.on { color: var(--l-cobalt) !important; }
#fab { box-shadow: var(--l-shadow-pop) !important; }
.si-skel { background: linear-gradient(90deg, var(--l-well), var(--l-line), var(--l-well)) !important; background-size: 200% 100% !important; }