/* ==========================================================================
   Looko.live — Shared UI (RTL, Farsi)
   Design system: Glassmorphism · Dark · Premium Violet (Phase 1 refactor)
   - Sahel font preserved
   - Class names preserved for backward compatibility with all pages
   - Tokens drive every primitive; per-page CSS layers on top
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── Brand palette ── */
  --violet-50:#f3efff;
  --violet-100:#e7defe;
  --violet-200:#cdb8fd;
  --violet-300:#b094fc;
  --violet-400:#9a78fa;
  --violet-500:#8b5cf6; /* primary accent */
  --violet-600:#7c3aed;
  --violet-700:#6d28d9;
  --magenta-500:#d946ef;

  /* ── Surfaces (deep midnight w/ violet undertone) ── */
  --bg:#07060d;
  --bg-elev:#0c0a18;
  --surface:rgba(22,18,38,.65);          /* glass card */
  --surface2:rgba(255,255,255,.04);      /* input, chip */
  --surface-strong:rgba(28,22,48,.82);   /* modal, sidebar */
  --surface-solid:#13101e;               /* fallback for no-backdrop-filter */
  --border:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.10);
  --border-accent:rgba(139,92,246,.32);

  /* ── Text ── */
  --text:#ece9f5;
  --text-dim:#8a87a6;
  --text-mute:#5b5874;

  /* ── Accent system ── */
  --accent:var(--violet-500);
  --accent-hi:var(--violet-300);
  --accent-soft:rgba(139,92,246,.12);
  --accent-glow:rgba(139,92,246,.30);
  --accent-grad:linear-gradient(135deg,#8b5cf6 0%,#a855f7 55%,#d946ef 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(139,92,246,.22),rgba(217,70,239,.18));
  --accent-on:#ffffff;

  /* ── Semantic ── */
  --success:#34d399;
  --success-soft:rgba(52,211,153,.14);
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.14);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.14);
  --info:var(--accent);
  --info-soft:var(--accent-soft);

  /* ── Geometry ── */
  --radius-xs:8px;
  --radius-sm:10px;
  --radius:12px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:20px;
  --radius-2xl:22px;
  --radius-pill:999px;

  /* ── Shadows ── */
  --shadow-card:0 24px 60px -28px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.025) inset;
  --shadow-modal:0 40px 90px -30px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.04) inset;
  --shadow-primary:0 10px 30px -10px rgba(139,92,246,.55), 0 2px 12px rgba(139,92,246,.25);
  --shadow-soft:0 12px 30px -18px rgba(0,0,0,.55);

  /* ── Effects ── */
  --blur:blur(28px) saturate(140%);
  --blur-soft:blur(18px) saturate(130%);

  --font:'Sahel',system-ui,sans-serif;
}

html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","ss02";font-variant-numeric:tabular-nums}

p,button,input,textarea,select,span,h1,h2,h3,h4,h5,h6,label,a,td,th{font-family:var(--font);}

/* ── Ambient mesh background (premium violet/magenta) ── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(65% 55% at 85% 8%, rgba(139,92,246,.26) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(217,70,239,.18) 0%, transparent 65%),
    radial-gradient(40% 35% at 15% 5%, rgba(255,255,255,.05) 0%, transparent 70%),
    radial-gradient(45% 40% at 50% 50%, rgba(139,92,246,.07) 0%, transparent 75%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(7,6,13,.45) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% -10%, rgba(139,92,246,.07) 0%, transparent 55%);
}

/* ── Selection ── */
::selection{background:rgba(139,92,246,.35);color:#fff}

/* ── Page layout ── */
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.page-center{align-items:center;justify-content:center;padding:2rem}

/* ── Logo ── */
.logo{display:flex;align-items:center;gap:.7rem;margin-bottom:2rem;text-decoration:none;color:inherit}
.logo-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-grad);color:#fff;
  box-shadow:0 8px 22px -6px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.logo-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo-icon i{font-size:1.05rem;color:#fff}
.logo-text{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.logo-text span{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Glass Card ── */
.card{
  background:var(--surface);border-radius:var(--radius-2xl);
  padding:2rem;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
.card-sm{max-width:440px;width:100%}
.card-title{font-size:1.25rem;font-weight:800;margin-bottom:.45rem;letter-spacing:-.01em}
.card-sub{font-size:.86rem;color:var(--text-dim);margin-bottom:1.5rem;line-height:1.8}

/* ── Form ── */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--text-dim);margin-bottom:.45rem;letter-spacing:.02em}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem 1rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:.92rem;
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute)}
.field select{cursor:pointer}
/* Native dropdown options render in an OS popup drawn over a WHITE system
   surface, so a translucent bg composites to near-white and kills contrast.
   Pin them to an OPAQUE dark color + light text (role picker, demo controls,
   every <select>). --surface-solid is the opaque fallback used elsewhere. */
select option,select optgroup{background:var(--surface-solid);color:var(--text)}
.field textarea{resize:vertical;min-height:74px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.2rem;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font);font-size:.88rem;font-weight:700;
  cursor:pointer;transition:transform .16s ease, filter .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent-grad);color:var(--accent-on);
  box-shadow:var(--shadow-primary);
  border-color:rgba(255,255,255,.08);
}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(139,92,246,.65)}
.btn-primary:active{transform:translateY(0)}
.btn-danger{background:rgba(248,113,113,.12);color:var(--danger);border-color:rgba(248,113,113,.32)}
.btn-danger:hover{background:rgba(248,113,113,.20);border-color:rgba(248,113,113,.5)}
.btn-ghost{background:rgba(255,255,255,.025);color:var(--text-dim);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text);background:rgba(255,255,255,.05)}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}

/* ── Table ── */
.table-wrap{
  overflow-x:auto;border-radius:var(--radius-xl);
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.05);
}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead{background:rgba(255,255,255,.02)}
th{padding:.85rem 1rem;text-align:right;font-weight:700;color:var(--text-dim);font-size:.76rem;letter-spacing:.04em;text-transform:none;white-space:nowrap}
td{padding:.85rem 1rem;border-top:1px solid rgba(255,255,255,.04);vertical-align:middle}
tbody tr:first-child td{border-top:0}
tr:hover td{background:rgba(255,255,255,.025)}

/* ── Badge / status pill ── */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;border:1px solid transparent;line-height:1.5}
.badge-success{background:var(--success-soft);color:var(--success);border-color:rgba(52,211,153,.22)}
.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(248,113,113,.24)}
.badge-warning{background:var(--warning-soft);color:var(--warning);border-color:rgba(251,191,36,.24)}
.badge-info{background:var(--accent-soft);color:var(--accent-hi);border-color:var(--border-accent)}

/* ── Breadcrumb (benchmark `Pages / Dashboard` style) ── */
.page-breadcrumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--text-mute);margin-bottom:.25rem;
}
.page-breadcrumb a{color:inherit;text-decoration:none;transition:color .15s}
.page-breadcrumb a:hover{color:var(--text-dim)}
.page-breadcrumb-sep{opacity:.6}
.page-breadcrumb-current{color:var(--text-dim);font-weight:700}

/* ── Sidebar nav ── */
.app-layout{display:flex;min-height:100vh;height:100vh;overflow:hidden}
.app-nav{
  width:248px;flex-shrink:0;height:100vh;overflow:hidden;
  background:linear-gradient(180deg, rgba(18,15,32,.78) 0%, rgba(12,10,24,.82) 100%);
  box-shadow:-2px 0 30px rgba(0,0,0,.35);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  display:flex;flex-direction:column;position:relative;z-index:20;
}
/* ── Floating / detached sidebar (desktop ≥1024px) ──────────────────────
   Lifts the rail off the top / outer / bottom edges with an even 20px
   gutter, rounds it, and adds soft elevation so it reads as a discrete
   panel instead of a wall flush to the frame. Shared by the tenant and
   platform-owner dashboards via .app-nav. Tablet/mobile (≤1023px) keep the
   off-canvas drawer untouched — this block never matches there. */
@media(min-width:1024px){
  .app-nav{
    height:calc(100vh - 40px);
    margin-block:20px;
    margin-inline-start:20px;            /* RTL → 20px off the right (outer) edge */
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:
      0 22px 50px -24px rgba(0,0,0,.62),
      -14px 0 44px -30px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
}
.nav-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.2rem 1.1rem;gap:.75rem}
.nav-head .logo{padding:0;margin-bottom:0}
.nav-mobile-close{
  display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);cursor:pointer;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s;
}
.nav-mobile-close:hover{border-color:var(--accent);color:var(--accent-hi)}
.nav-links-wrap{flex:1;min-height:0;overflow-y:auto;padding:.5rem .6rem 1rem}
.nav-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}
.nav-links li a{
  position:relative;
  display:flex;align-items:center;gap:.78rem;
  padding:.72rem .85rem;color:var(--text-dim);text-decoration:none;font-size:.88rem;font-weight:700;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:color .16s, background .16s, border-color .16s, transform .16s;
}
.nav-links li a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-links li a.active{
  color:var(--text);
  background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(139,92,246,.06));
  border-color:rgba(139,92,246,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-links li a.active::before{
  content:'';position:absolute;top:.55rem;bottom:.55rem;right:-.6rem;width:3px;border-radius:3px;
  background:var(--accent-grad);box-shadow:0 0 12px rgba(139,92,246,.6);
}
.nav-links li a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nav-links li a i{width:18px;font-size:1rem;flex-shrink:0;text-align:center;line-height:1}
.nav-links li a.active i,.nav-links li a.active svg{color:var(--accent-hi)}

.nav-footer{
  margin-top:auto;padding:.85rem .85rem calc(1rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, transparent 0%, rgba(12,10,24,.92) 60%);
}
.nav-footer-link{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:var(--radius);
  color:var(--text-dim);text-decoration:none;font-size:.84rem;font-weight:700;
  background:rgba(255,255,255,.02);border:1px solid transparent;transition:all .16s ease;
}
.nav-footer-link:hover{color:var(--text);border-color:var(--border);background:var(--surface2)}
.nav-footer-link.active{color:var(--text);border-color:var(--border-accent);background:var(--accent-soft)}
.nav-footer-link i{width:18px;font-size:1rem;flex-shrink:0;text-align:center;line-height:1}
.nav-footer-link + .nav-footer-link{margin-top:.4rem}

.impersonation-return-inline{
  width:100%;margin-top:.6rem;border:1px solid var(--border-accent);border-radius:var(--radius);
  padding:.65rem .78rem;
  display:flex;align-items:center;gap:.65rem;background:var(--accent-soft);color:var(--text);
  font:inherit;text-align:right;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,opacity .16s ease;
}
.impersonation-return-inline:hover,.impersonation-return-inline:focus-visible{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.18);outline:none}
.impersonation-return-inline.is-loading{opacity:.75;cursor:progress}
.impersonation-return-inline > i{
  width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(139,92,246,.20);color:var(--accent-hi);font-size:.95rem;
}

.nav-user{padding:0;margin-top:.7rem;display:flex;align-items:center;gap:.7rem}
.nav-user-avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--accent-grad);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;
  box-shadow:0 6px 18px -6px rgba(139,92,246,.55);
}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover}
.user-avatar-icon{font-size:.95rem;color:#fff;line-height:1}
.avatar-action,.user-avatar-fallback{
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent-grad);color:#fff;overflow:hidden;flex-shrink:0;
  box-shadow:0 6px 18px -6px rgba(139,92,246,.55);
}
.avatar-action{width:38px;height:38px;border:0;cursor:pointer;padding:0;font:inherit;transition:transform .16s ease,filter .16s ease}
.avatar-action:hover,.avatar-action:focus-visible{transform:translateY(-1px);filter:brightness(1.08);outline:none}
.avatar-action img,.user-avatar-fallback img{width:100%;height:100%;object-fit:cover;display:block}
.nav-user-info{flex:1;min-width:0}
.nav-user-name{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-user-role{font-size:.72rem;color:var(--text-dim);margin-top:.1rem}
.nav-logout{
  background:rgba(255,255,255,.025);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);
  width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s,background .2s;
}
.nav-logout:hover{color:var(--danger);border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.08)}
.nav-logout svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-logout i{font-size:.95rem;color:inherit}

.app-nav-backdrop{
  position:fixed;inset:0;background:rgba(5,4,10,.62);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1100;
}
.admin-nav-toggle{
  position:fixed;top:1rem;right:1rem;z-index:1250;display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface-strong);color:var(--text);cursor:pointer;
  backdrop-filter:var(--blur-soft);-webkit-backdrop-filter:var(--blur-soft);
  box-shadow:0 14px 38px rgba(0,0,0,.4);
}
.admin-nav-toggle:hover{border-color:var(--border-accent);color:var(--accent-hi)}

/* ── Main content ── */
.app-main{flex:1;padding:1.75rem 1.75rem 2.5rem;overflow-y:auto;position:relative;z-index:1}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-header > div:first-child{min-width:0}
.page-title{font-size:1.55rem;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.page-subtitle{margin-top:.4rem;color:var(--text-dim);font-size:.82rem;line-height:1.85;max-width:62ch}
.page-header-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.page-header-search{margin-bottom:0;min-width:220px;width:min(320px,38vw)}
.page-header-search input{height:42px}
.page-header > .page-breadcrumb{flex-basis:100%;width:100%;margin-bottom:0}
.page-header > .page-breadcrumb + .page-title,.page-header > .page-breadcrumb + h1{margin-top:0}

/* ── KPI / Stat card (benchmark style: icon disc + label + big number) ── */
.kpi-card{
  display:flex;align-items:center;gap:.85rem;min-height:88px;
  background:var(--surface);border-radius:var(--radius-xl);
  padding:1rem 1.1rem;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s, box-shadow .2s;
}
.kpi-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.06)}
.kpi-card-icon{
  width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.10);color:var(--accent-hi);font-size:1.05rem;flex-shrink:0;
}
.kpi-card-body{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.kpi-card-label{color:var(--text-dim);font-size:.74rem;letter-spacing:.02em;font-weight:600}
.kpi-card-value{font-size:1.4rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── Grid cards (rooms etc.) ── */
.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.room-card{
  background:var(--surface);border-radius:var(--radius-xl);
  padding:1.2rem;cursor:pointer;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s, box-shadow .2s;
}
.room-card.live{box-shadow:0 0 0 1px rgba(52,211,153,.4), 0 22px 50px -28px rgba(52,211,153,.35)}
.room-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--border-accent),0 28px 60px -30px rgba(139,92,246,.45)}
.room-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.5rem}
.room-card-name{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.room-card-code{font-size:.76rem;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.room-card-desc{font-size:.82rem;color:var(--text-dim);margin-bottom:.85rem;line-height:1.7}
.room-card-footer{display:flex;align-items:center;justify-content:space-between}
.room-card-status{display:flex;align-items:center;gap:.4rem;font-size:.78rem;margin-left:auto;}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.live{background:var(--success);box-shadow:0 0 10px var(--success)}
.status-dot.offline{background:var(--text-mute)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(5,4,10,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.show{display:flex}
.modal{
  background:var(--surface-strong);border-radius:var(--radius-2xl);
  padding:1.75rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-modal),inset 0 1px 0 rgba(255,255,255,.07);
}
.modal-title{font-size:1.1rem;font-weight:800;margin-bottom:1.2rem;letter-spacing:-.01em}
.modal-actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.4rem}

/* ── Toast ── */
.toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--surface-strong);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:.6rem 1.1rem;font-size:.82rem;color:var(--text);
  opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;
  /* همیشه بالاترین لایه: روی هر مودال/درای‌ور/فول‌اسکرین در داشبورد و پنل‌ها */
  z-index:2147483647;
  backdrop-filter:var(--blur-soft);-webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--shadow-modal);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Impersonation return floating button ── */
.impersonation-return-btn{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:1400;
  display:inline-flex;align-items:center;gap:.75rem;max-width:min(calc(100vw - 1.5rem),320px);
  border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:.78rem .95rem;
  background:var(--surface-strong);color:var(--text);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-modal);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,opacity .16s ease;
}
.impersonation-return-btn:hover,.impersonation-return-btn:focus-visible{
  transform:translateY(-1px);border-color:rgba(139,92,246,.55);outline:none;
  box-shadow:0 24px 50px -18px rgba(139,92,246,.45);
}
.impersonation-return-btn.is-loading{opacity:.78;cursor:progress}
.impersonation-return-btn i{
  width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(139,92,246,.18);color:var(--accent-hi);font-size:1rem;
}
.impersonation-return-copy{display:flex;flex-direction:column;gap:.12rem;min-width:0;text-align:right}
.impersonation-return-title{font-size:.82rem;font-weight:800;line-height:1.5}
.impersonation-return-meta{font-size:.75rem;line-height:1.7;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Err msg ── */
.err{font-size:.82rem;color:var(--danger);margin-top:.5rem;min-height:1.1rem}

/* ── Utils ── */
.text-center{text-align:center}
.text-dim{color:var(--text-dim)}
.text-mute{color:var(--text-mute)}
.text-accent{color:var(--accent-hi)}
.text-gradient{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.gap-1{gap:.5rem}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.grow{flex:1}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.32);background-clip:padding-box;border:2px solid transparent}

/* ── Focus visible (a11y) ── */
:focus-visible{outline:2px solid rgba(139,92,246,.6);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}

/* ── Responsive ── */
@media(max-width:900px){
  .app-layout{height:auto;min-height:100vh;overflow:visible}
  .app-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(86vw,320px);height:100dvh;
    transform:translateX(100%);transition:transform .24s ease;z-index:1200;
    border-left:1px solid var(--border);box-shadow:-20px 0 48px rgba(0,0,0,.45)
  }
  body.admin-nav-open{overflow:hidden}
  body.admin-nav-open .app-nav{transform:translateX(0)}
  body.admin-nav-open .app-nav-backdrop{opacity:1;pointer-events:auto}
  .admin-nav-toggle{display:inline-flex}
  .nav-mobile-close{display:inline-flex}
  .app-main{padding:4.5rem 1rem 1rem;min-height:100vh;overflow:visible}
  .impersonation-return-btn{right:.85rem;left:.85rem;bottom:calc(5.75rem + env(safe-area-inset-bottom));max-width:none}
  .page-header-actions{width:100%}
  .page-header-search{min-width:0;width:100%}
}

/* ── Fade animation ── */
.fade-in{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Filter row ── */
.filter-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem;align-items:flex-end}
.filter-row .field{margin-bottom:0;min-width:160px}

/* ── Avatar picker (circular) ── */
.avatar-picker-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.avatar-circle{
  position:relative;width:96px;height:96px;border-radius:50%;
  background:var(--accent-grad);cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:3px solid rgba(255,255,255,.05);
  transition:box-shadow .2s, transform .2s;
  font-size:1.6rem;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:0 12px 32px -10px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.avatar-circle:hover{transform:translateY(-1px);box-shadow:0 0 0 4px var(--accent-glow), 0 14px 36px -10px rgba(139,92,246,.65)}
.avatar-circle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-circle .av-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.avatar-circle:hover .av-overlay{opacity:1}
.avatar-circle .av-overlay svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar-picker-hint{font-size:.74rem;color:var(--text-dim)}

/* ── Room image picker (rectangular) ── */
.img-picker-wrap{margin-bottom:1.1rem}
.img-picker-label{display:block;font-size:.78rem;font-weight:700;color:var(--text-dim);margin-bottom:.45rem;letter-spacing:.02em}
.img-picker-box{position:relative;width:100%;height:140px;background:var(--surface2);border:2px dashed var(--border-strong);border-radius:var(--radius-md);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s,background .2s}
.img-picker-box:hover{border-color:var(--accent);background:rgba(139,92,246,.05);box-shadow:0 0 0 3px var(--accent-glow)}
.img-picker-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-picker-placeholder{display:flex;flex-direction:column;align-items:center;gap:.45rem;color:var(--text-dim);font-size:.78rem;pointer-events:none}
.img-picker-placeholder svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.img-picker-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:.4rem;color:#fff;font-size:.78rem;opacity:0;transition:opacity .2s}
.img-picker-box:hover .img-picker-overlay{opacity:1}
.img-picker-overlay svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.25rem}
.pagination button{
  min-width:36px;height:36px;padding:0 .7rem;border-radius:var(--radius);
  background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.pagination button:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);background:rgba(255,255,255,.05)}
.pagination button.is-active{color:#fff;background:var(--accent-grad);border-color:transparent;box-shadow:var(--shadow-primary)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ── Tabs ── */
.tab-strip{
  display:flex;gap:.25rem;
  margin-bottom:1.25rem;overflow-x:auto;scrollbar-width:none;
}
.tab-strip::-webkit-scrollbar{display:none}
.tab-btn{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;background:none;border:0;cursor:pointer;
  color:var(--text-dim);font:inherit;font-size:.86rem;font-weight:700;
  transition:color .15s;border-radius:var(--radius) var(--radius) 0 0;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--text)}
.tab-btn .tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .45rem;border-radius:var(--radius-pill);
  background:var(--surface2);border:1px solid var(--border);
  font-size:.7rem;font-weight:800;color:var(--text-dim);
}
.tab-btn.active .tab-count{background:var(--accent-soft);border-color:var(--border-accent);color:var(--accent-hi)}

/* ── Empty state ── */
.empty-state{
  padding:2.5rem 1.5rem;text-align:center;color:var(--text-dim);
  background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-xl);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── Fallback when backdrop-filter unsupported ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card,.room-card,.kpi-card,.modal,.toast,.app-nav,.table-wrap,.admin-nav-toggle,.impersonation-return-btn{
    background:var(--surface-solid);
  }
}

/* ==========================================================================
   Tenant switcher (shared) — used on the dashboard header (top-left) and in the
   admin sidebar. A multi-tenant identity picks the active workspace here.
   ========================================================================== */
.tenant-switcher-host[hidden]{display:none!important}
.tenant-switcher-dd{position:relative;font-family:inherit}

.tenant-switcher-trigger{
  display:flex;align-items:center;gap:.6rem;width:100%;
  min-height:44px;padding:.42rem .7rem;
  border:1px solid var(--border-strong);border-radius:12px;
  background:var(--surface2);color:var(--text);cursor:pointer;text-align:right;
  transition:background .18s ease,border-color .18s ease;
}
.tenant-switcher-trigger:hover,.tenant-switcher-trigger:focus-visible{
  background:var(--accent-soft);border-color:var(--border-accent);outline:none;
}
.tenant-switcher-ico{
  flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent-hi);font-size:.82rem;
}
.tenant-switcher-label{display:grid;gap:.1rem;min-width:0;flex:1}
.tenant-switcher-label .tenant-switcher-name{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem;font-weight:800;
}
.tenant-switcher-label .tenant-switcher-role{font-size:.68rem;color:var(--text-dim);font-weight:700}
.tenant-switcher-caret{flex-shrink:0;color:var(--text-dim);font-size:.7rem;transition:transform .2s ease}
.tenant-switcher-dd.is-open .tenant-switcher-caret{transform:rotate(180deg)}
.tenant-switcher-host.is-switching .tenant-switcher-trigger{opacity:.7;cursor:wait}

.tenant-switcher-menu{
  position:absolute;z-index:60;top:calc(100% + .4rem);inset-inline-end:0;
  min-width:100%;max-width:min(86vw,320px);max-height:60vh;overflow-y:auto;
  display:grid;gap:.18rem;padding:.35rem;
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);scrollbar-width:thin;
}
.tenant-switcher-menu[hidden]{display:none}

.tenant-switcher-item{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;min-width:200px;padding:.5rem .6rem;
  border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--text);cursor:pointer;text-align:right;font-family:inherit;
  transition:background .15s ease,border-color .15s ease;
}
.tenant-switcher-item:hover,.tenant-switcher-item:focus-visible{background:var(--accent-soft);outline:none}
.tenant-switcher-item.is-active{background:var(--accent-soft);border-color:var(--border-accent)}
.tenant-switcher-item-main{display:grid;gap:.12rem;min-width:0}
.tenant-switcher-item-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem;font-weight:800}
.tenant-switcher-item-role{font-size:.68rem;color:var(--text-dim);font-weight:700}
.tenant-switcher-item-check{flex-shrink:0;color:var(--accent-hi);font-weight:900}

/* Header variant: sits in the dashboard page-header actions (left in RTL). */
.tenant-switcher--header{min-width:200px;max-width:300px}

/* Sidebar variant: full-width block under the logo in the admin nav. */
.tenant-switcher--sidebar{margin:.25rem 1rem 0}
.tenant-switcher--sidebar .tenant-switcher-menu{max-width:min(86vw,260px)}