:root{
  --teal:#0F8080;
  --teal-deep:#0A5A5A;
  --teal-soft:#E8F5F3;
  --teal-mist:#F4FAF9;
  --red:#E0223D;
  --red-deep:#A8132A;
  --red-soft:#FDEAEE;
  --amber:#B8780A;
  --amber-soft:#FFF4E0;
  --blue:#0A6CC2;
  --blue-soft:#E9F3FC;
  --bg:#F5F4F1;
  --surface-2:rgba(20,30,28,0.03);
  --ink:#161A19;
  --ink-soft:#5C6462;
  --ink-mute:#6E746F; /* darkened from #94998F: was 2.8:1 on glass, now 4.6:1 (WCAG AA) */
  --hairline:rgba(20,30,28,0.08);
  --hairline-strong:rgba(20,30,28,0.14);
  --glass:rgba(255,255,255,0.55);
  --glass-strong:rgba(255,255,255,0.68);
  /* Light edge + inner bottom glow that make surfaces read as real frosted glass. */
  --glass-edge:inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.45), inset 0 -14px 26px -14px rgba(255,255,255,0.55);
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.9,.32,1);
  /* Layered, softer, more dimensional shadows — light comes from above, colour-tinted for warmth. */
  --shadow-1:0 1px 2px rgba(15,40,38,0.05), 0 2px 4px rgba(15,40,38,0.04);
  --shadow-2:0 2px 6px rgba(15,40,38,0.05), 0 10px 24px -6px rgba(15,40,38,0.10), 0 4px 10px -4px rgba(15,40,38,0.06);
  --shadow-3:0 4px 12px rgba(15,40,38,0.06), 0 24px 56px -12px rgba(15,40,38,0.18), 0 10px 24px -8px rgba(15,40,38,0.10);
  --shadow-hover:0 6px 16px rgba(15,40,38,0.07), 0 32px 64px -16px rgba(15,80,76,0.22), 0 14px 30px -10px rgba(15,40,38,0.12);
  --shadow-glow-teal:0 12px 32px rgba(15,128,128,0.22);
  --shadow-glow-red:0 12px 32px rgba(224,34,61,0.20);

  /* ==== Design-system tokens (Design Audit, Module 1) ==== */
  /* Type scale — replaces the ad-hoc 11/12/13/13.5/14/14.5/15.5 sizes over time */
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px;
  --lh-tight:1.2; --lh-ui:1.45; --lh-body:1.6;
  /* 8-point spacing scale — replaces inline margins over time */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* Elevation aliases (map onto the existing tinted shadows) */
  --elev-1:var(--shadow-1); --elev-2:var(--shadow-2);
  --elev-3:var(--shadow-3); --elev-4:var(--shadow-hover);
  /* Semantic status colors (AA-checked) */
  --success:#177A4C; --success-bg:#E9F6EF;
  --warning:#B45309; --warning-bg:#FDF6EC;
  --danger:#C41E3A;  --danger-bg:#FDECEF;
  /* Motion durations (250ms ceiling) */
  --dur-fast:100ms; --dur-base:180ms; --dur-slow:250ms;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{
  background:
    radial-gradient(at 10% 12%, rgba(15,128,128,0.20) 0px, transparent 42%),
    radial-gradient(at 92% 8%, rgba(224,34,61,0.12) 0px, transparent 40%),
    radial-gradient(at 78% 92%, rgba(22,166,166,0.18) 0px, transparent 44%),
    radial-gradient(at 22% 96%, rgba(124,107,232,0.10) 0px, transparent 42%),
    linear-gradient(150deg,#F4F8F6 0%,#E4EEEB 100%);
  background-attachment:fixed;
  min-height:100vh;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  background:transparent;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.011em;
  position:relative;
  overflow-x:hidden;
}
/* Old CSS orbs disabled — the animated background is now drawn by assets/bg.js
   (canvas), which renders reliably regardless of reduce-motion or layering. */
body::before, body::after{ display:none !important; }
.ar-bg-orb{ display:none !important; }

/* ---------- Background decor layer (butterflies are drawn/animated by butterfly-fly.js) ---------- */
.ar-bg-decor{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
a{ color:var(--teal); text-decoration:none; }
img{ max-width:100%; }
::selection{ background:rgba(15,128,128,0.22); }

/* ---------- Nav ---------- */
.ar-nav{
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(26px);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:40;
}
.ar-nav-inner{
  max-width:1140px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ar-brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; transition:transform 0.35s var(--spring); }
.ar-brand:hover{ transform:translateY(-1px); }
.ar-brand-icon{
  width:34px; height:34px; border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--teal),var(--teal-deep));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
  box-shadow:0 4px 10px rgba(15,128,128,0.3);
}
.ar-brand-logo{
  height:30px; width:auto; object-fit:contain; display:block;
}
.ar-brand-divider{ width:1px; height:20px; background:var(--hairline-strong); flex-shrink:0; }
.ar-brand-suffix{ font-size:13px; font-weight:600; color:var(--ink-soft); letter-spacing:-0.01em; white-space:nowrap; }
.ar-brand-text{ font-weight:600; font-size:15.5px; color:var(--ink); letter-spacing:-0.015em; }
.ar-brand-text small{ font-weight:400; color:var(--ink-mute); font-size:11.5px; display:block; margin-top:-2px; letter-spacing:0; }

.ar-nav-right{ display:flex; align-items:center; gap:14px; flex:1; justify-content:space-between; min-width:0; margin-left:20px; }
.ar-nav-links{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.ar-nav-account{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ar-nav-user{
  font-size:14px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:7px;
  min-width:0; max-width:170px; overflow:hidden;
  padding:8px 14px; background:var(--teal-mist); border-radius:999px;
}
.ar-nav-user i{ font-size:18px; color:var(--teal); }
.ar-nav-user .ar-nav-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-nav-link{
  position:relative; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  padding:9px 15px; border-radius:999px;
  transition:color 0.25s var(--ease), background 0.25s var(--ease), transform 0.3s var(--spring);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.ar-nav-link i{ font-size:18px; transition:transform 0.3s var(--spring); }
.ar-nav-link:hover{ color:var(--teal-deep); background:var(--teal-soft); transform:translateY(-1px); }
.ar-nav-link:hover i{ transform:scale(1.12); }
.ar-nav-link:active{ transform:translateY(0) scale(0.97); }

/* ---------- Awareness ticker ---------- */
.ar-ticker{
  background:linear-gradient(120deg, var(--teal-deep), var(--teal));
  color:rgba(255,255,255,0.95);
  font-size:12.5px; font-weight:500;
  padding:7px 24px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  letter-spacing:0.01em;
}
.ar-ticker i{ font-size:14px; opacity:0.85; flex-shrink:0; }
.ar-ticker-text{ transition:opacity 0.6s ease; max-width:90%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-ticker-text.fading{ opacity:0; }

@media (max-width:900px){
  .ar-nav-text{ display:none; }
  .ar-nav-link{ padding:10px; }
  .ar-nav-link i{ font-size:20px; }
  .ar-nav-user{ max-width:44px; padding:9px; }
  .ar-nav-user .ar-nav-text{ display:none; }
  .ar-nav-inner{ padding:11px 16px; gap:8px; }
  .ar-nav-right{ margin-left:8px; gap:8px; }
  .ar-nav-links{ gap:2px; }
  .ar-brand-divider, .ar-brand-suffix{ display:none; }
  .ar-brand-text small{ display:none; }
}

/* ---------- Layout ---------- */
.ar-main{ max-width:1140px; margin:0 auto; padding:32px 24px 80px; animation:ar-page-in 0.5s var(--ease) both; }
.ar-narrow{ max-width:440px; margin:0 auto; }

/* ---------- Hero ---------- */
/* Module 5: hero unified onto the glass material — one design language.
   The teal/red now live BEHIND the glass as an aurora, not as the surface. */
.ar-hero{
  background:linear-gradient(150deg, rgba(255,255,255,0.72), rgba(255,255,255,0.50));
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-top-color:rgba(255,255,255,0.92);
  border-radius:var(--r-xl);
  padding:38px 36px;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  margin-bottom:32px;
  box-shadow:var(--shadow-3), var(--glass-edge);
}
.ar-hero::after{
  content:''; position:absolute; right:-70px; top:-90px; width:300px; height:300px;
  border-radius:50%; background:radial-gradient(circle, rgba(15,128,128,0.20), transparent 65%);
  filter:blur(6px);
}
.ar-hero::before{
  content:''; position:absolute; left:-50px; bottom:-100px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(224,34,61,0.10), transparent 65%);
}
.ar-hero-icon{
  width:54px; height:54px; border-radius:var(--r-lg); background:var(--teal-soft);
  color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; z-index:1;
  font-size:25px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(15,80,76,0.10);
}
html.ar-solid .ar-hero{ background:#ffffff !important; }
.ar-hero h1{ font-size:27px; font-weight:600; margin:0 0 7px; position:relative; z-index:1; letter-spacing:-0.02em; }
.ar-hero p{ font-size:var(--text-base); margin:0; color:var(--ink-soft); position:relative; z-index:1; max-width:540px; line-height:var(--lh-body); font-weight:400; }

/* Module 5: hero stat strip — the dashboard answers "what's my status?" instantly */
.ar-hero-stats{ display:flex; gap:var(--s-3); margin-top:var(--s-5); position:relative; z-index:1; flex-wrap:wrap; }
.ar-hero-stat{
  flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.75);
  border-radius:var(--r-md); padding:var(--s-3) var(--s-4);
  text-decoration:none; color:inherit;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
a.ar-hero-stat:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); background:rgba(255,255,255,0.8); }
.ar-hero-stat-v{ font-size:var(--text-xl); font-weight:700; color:var(--teal-deep); letter-spacing:-0.02em; line-height:1.2; }
.ar-hero-stat-k{ font-size:var(--text-xs); font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:0.05em; }
html.ar-solid .ar-hero-stat{ background:#ffffff; border-color:var(--hairline); }
@media (max-width:640px){ .ar-hero-stats{ gap:var(--s-2); } .ar-hero-stat{ min-width:calc(50% - var(--s-2)); padding:10px 12px; } }

/* ---------- Cards / Auth panels ---------- */
.ar-panel{
  background:var(--glass-strong);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:36px; box-shadow:var(--shadow-2), var(--glass-edge);
}
.ar-panel h2{ font-size:21px; font-weight:600; margin:0 0 6px; letter-spacing:-0.015em; }
.ar-panel .ar-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 26px; line-height:1.5; }

.ar-field{ margin-bottom:16px; }
.ar-field label{ display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px; }
.ar-field input, .ar-field select, .ar-field textarea{
  width:100%; padding:12px 15px; border-radius:var(--r-sm); border:1px solid var(--hairline-strong);
  font-size:14.5px; font-family:inherit; background:rgba(255,255,255,0.8); color:var(--ink);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.ar-field input:focus, .ar-field select:focus, .ar-field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(15,128,128,0.13); background:#fff;
}
.ar-field-row{ display:flex; gap:12px; }
.ar-field-row .ar-field{ flex:1; }

/* ---- Uniform glass inputs across every module ----
   .ar-input is used for standalone search/text fields outside .ar-field
   (asset search, employee search, etc.). Give it the same glass treatment
   as .ar-field inputs so every module looks consistent. */
.ar-input,
input.ar-input[type="text"],
input.ar-input[type="search"],
input.ar-input[type="email"],
input.ar-input[type="password"],
input.ar-input[type="number"],
input.ar-input[type="date"],
textarea.ar-input{
  width:100%; padding:12px 15px; border-radius:var(--r-sm);
  border:1px solid var(--hairline-strong);
  font-size:14.5px; font-family:inherit;
  background:rgba(255,255,255,0.8); color:var(--ink);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  box-sizing:border-box;
}
.ar-input::placeholder, textarea.ar-input::placeholder{ color:var(--ink-mute); }

/* ---------- File inputs — clean, branded (replaces ugly native button) ---------- */
/* A styled file picker: hide the raw control's default button, brand the rest. */
input[type="file"].ar-file{
  width:100%; box-sizing:border-box; font-size:13.5px; color:var(--ink-soft);
  padding:0; border:none; background:transparent; cursor:pointer;
}
input[type="file"].ar-file::file-selector-button{
  margin-right:14px; padding:10px 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--teal-soft); color:var(--teal-deep); font-weight:600; font-size:13px;
  font-family:inherit; transition:background 0.18s var(--ease);
}
input[type="file"].ar-file::file-selector-button:hover{ background:rgba(15,128,128,0.18); }
/* Older WebKit prefix */
input[type="file"].ar-file::-webkit-file-upload-button{
  margin-right:14px; padding:10px 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--teal-soft); color:var(--teal-deep); font-weight:600; font-size:13px;
  font-family:inherit;
}

/* A full drop-zone wrapper (nicer than a bare input) */
.ar-drop{
  border:1.5px dashed var(--hairline-strong); border-radius:var(--r-md); background:rgba(255,255,255,0.55);
  padding:22px 18px; text-align:center; cursor:pointer; transition:border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.ar-drop:hover, .ar-drop.drag{ border-color:var(--teal); background:var(--teal-soft); }
.ar-drop-icon{ font-size:30px; color:var(--teal); display:block; margin-bottom:8px; }
.ar-drop-title{ font-size:14px; font-weight:600; color:var(--ink); }
.ar-drop-hint{ font-size:12px; color:var(--ink-mute); margin-top:3px; }
.ar-drop-file{ font-size:13px; color:var(--teal-deep); font-weight:600; margin-top:10px; word-break:break-all; }
.ar-drop input[type="file"]{ display:none; }
.ar-input:focus, textarea.ar-input:focus{
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(15,128,128,0.13); background:#fff;
}
/* Search fields with a leading icon look best pill-shaped; allow an opt-in variant
   that matches the glass pill selects sitting beside them. */
.ar-input-pill{
  border-radius:999px; padding:11px 18px;
  background-color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--glass-edge), var(--shadow-1);
}
.ar-input-pill:focus{ background:#fff; border-color:var(--teal); box-shadow:0 0 0 4px rgba(15,128,128,0.13); }

.ar-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 22px; border-radius:999px; border:1px solid var(--hairline-strong); background:rgba(255,255,255,0.7);
  font-size:14px; font-weight:500; cursor:pointer; color:var(--ink); transition:all 0.2s var(--ease);
  backdrop-filter:blur(6px);
}
.ar-btn:hover{ border-color:var(--ink-mute); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.ar-btn:active{ transform:scale(0.97); }
.ar-btn-block{ width:100%; }
.ar-btn-primary{ background:linear-gradient(150deg,var(--teal),var(--teal-deep)); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow-teal); }
.ar-btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--shadow-glow-teal); }
.ar-btn-danger{ color:var(--red); border-color:var(--red-soft); background:rgba(253,234,238,0.6); }
.ar-btn-danger:hover{ background:var(--red-soft); }
.ar-btn-sm{ padding:7px 14px; font-size:13px; }

.ar-error{
  background:var(--red-soft); color:var(--red-deep); padding:12px 16px; border-radius:var(--r-sm);
  font-size:13.5px; margin-bottom:18px; border:1px solid rgba(224,34,61,0.12);
}
.ar-success{
  background:var(--teal-soft); color:var(--teal-deep); padding:12px 16px; border-radius:var(--r-sm);
  font-size:13.5px; margin-bottom:18px; border:1px solid rgba(15,128,128,0.14);
}

.ar-switch-link{ text-align:center; font-size:13.5px; color:var(--ink-soft); margin-top:20px; }

/* ---------- Tabs (iOS segmented control) ---------- */
.ar-tabs{
  display:flex; gap:3px; background:rgba(255,255,255,0.4); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  padding:5px; border-radius:var(--r-lg); margin-bottom:30px; box-shadow:var(--glass-edge), var(--shadow-1); border:1px solid rgba(255,255,255,0.5);
}
.ar-tab{
  flex:1; text-align:center; padding:10px 16px; border-radius:var(--r-md); font-size:13.5px; font-weight:500;
  color:var(--ink-soft); cursor:pointer; transition:all 0.25s var(--spring); border:none; background:transparent;
}
.ar-tab:hover{ color:var(--ink); }
.ar-tab.active{ background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--ink); box-shadow:var(--shadow-2), var(--glass-edge); font-weight:600; }
.ar-tab-count{ font-size:11px; opacity:0.7; font-weight:500; }

.ar-filter-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.ar-filter-row input[type="text"]{ flex:1; min-width:160px; }
.ar-filter-row select{ width:auto; min-width:140px; }
/* Search & filter fields — glass theme, fully rounded (pill) corners */
.ar-filter-row input[type="text"],
input[type="search"],
#swap-search, #slot-search, #booking-search, #filter-search, #employee_search, #ap-search{
  padding:12px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--glass-edge), var(--shadow-1);
  font-size:14.5px; font-family:inherit; color:var(--ink);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.ar-filter-row input[type="text"]::placeholder,
#swap-search::placeholder, #slot-search::placeholder, #booking-search::placeholder, #filter-search::placeholder, #employee_search::placeholder, #ap-search::placeholder{ color:var(--ink-mute); }
.ar-filter-row input[type="text"]:focus,
input[type="search"]:focus,
#swap-search:focus, #slot-search:focus, #booking-search:focus, #filter-search:focus, #employee_search:focus, #ap-search:focus{
  outline:none; border-color:rgba(15,128,128,0.5);
  background:rgba(255,255,255,0.72);
  box-shadow:var(--glass-edge), 0 0 0 3px rgba(15,128,128,0.14), var(--shadow-2);
}

/* ---------- Category grid (app-icon style) ---------- */
.ar-section-label{ font-size:13.5px; font-weight:500; color:var(--ink-soft); margin:0 0 18px; text-align:center; }
.ar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px; }
.ar-card{
  background:var(--glass-strong); backdrop-filter:blur(22px) saturate(165%); -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,0.6); border-radius:var(--r-lg); padding:26px 16px; text-align:center;
  cursor:pointer; transition:transform 0.32s var(--spring), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease);
  box-shadow:var(--shadow-1), var(--glass-edge); position:relative; overflow:hidden;
}
/* glossy sheen across the top — the Apple-glass shine */
.ar-card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:45%; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.ar-card > *{ position:relative; z-index:1; }
.ar-card:hover{ border-color:rgba(15,128,128,0.25); transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-hover), var(--glass-edge); }
.ar-card:active{ transform:scale(0.95); }
.ar-card-icon{
  width:64px; height:64px; border-radius:19px;
  background:linear-gradient(155deg,#25B8B0 0%,#0F8080 55%,#074B4B 100%);
  display:flex; align-items:center; position:relative;
  justify-content:center; margin:0 auto 15px; font-size:28px; color:#fff;
  transition:all 0.36s var(--spring);
  box-shadow:
    0 10px 22px -5px rgba(0,0,0,0.40),
    0 4px 8px -2px rgba(0,0,0,0.26),
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 -4px 9px rgba(0,0,0,0.22);
}
/* sharp glossy top highlight — makes the tile look like a real physical key */
.ar-card-icon::before{
  content:''; position:absolute; top:3px; left:8%; right:8%; height:42%;
  border-radius:15px 15px 28px 28px / 15px 15px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); pointer-events:none;
}
.ar-card-icon i{ position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.ar-card:hover .ar-card-icon{
  transform:scale(1.09) translateY(-3px);
  box-shadow:
    0 16px 30px -6px rgba(0,0,0,0.44),
    0 6px 12px -2px rgba(0,0,0,0.28),
    inset 0 2px 1px rgba(255,255,255,0.6),
    inset 0 -4px 9px rgba(0,0,0,0.24);
}
/* Per-category deep 3D colors (three-stop gradients for real dimension) */
.ar-ic-teal{   background:linear-gradient(155deg,#25B8B0 0%,#0F8080 55%,#074B4B 100%); }
.ar-ic-blue{   background:linear-gradient(155deg,#5AAEE8 0%,#2C77C0 55%,#1A4E88 100%); }
.ar-ic-violet{ background:linear-gradient(155deg,#9C86F2 0%,#6A4FD0 55%,#3F2C93 100%); }
.ar-ic-amber{  background:linear-gradient(155deg,#F5B65E 0%,#E08A2E 55%,#A85E12 100%); }
.ar-ic-green{  background:linear-gradient(155deg,#4FD79A 0%,#22A56E 55%,#127048 100%); }
.ar-ic-red{    background:linear-gradient(155deg,#F26B81 0%,#D82942 55%,#93142A 100%); }
.ar-card-label{ font-size:14px; font-weight:550; color:var(--ink); letter-spacing:-0.01em; }
@keyframes ar-pop{ 0%{transform:scale(0.85);} 100%{transform:scale(1);} }

/* ---------- Stats ---------- */
.ar-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:12px; margin-bottom:28px; }
.ar-stat{
  background:var(--glass-strong); backdrop-filter:blur(22px) saturate(165%); -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px 14px; text-align:center;
  box-shadow:var(--shadow-1), var(--glass-edge); position:relative; overflow:hidden; transition:transform 0.28s var(--spring), box-shadow 0.28s var(--ease);
}
.ar-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2), var(--glass-edge); }
.ar-stat-icon{
  width:40px; height:40px; border-radius:var(--r-md); margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; position:relative;
  background:linear-gradient(155deg,#25B8B0 0%,#0F8080 60%,#074B4B 100%);
  box-shadow:0 6px 14px -4px rgba(10,90,90,0.45), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.18);
}

/* Colour-coded stat cards — icon gradient + subtle top accent per metric,
   matched to dashboard order: Pending, Accepted, In progress, Resolved,
   Archived, Feedback. Makes dashboards scannable at a glance. */
/* Phase 1A order: Overdue, Pending, In progress, Resolved today, Avg res, CSAT */
.ar-stats .ar-stat{ border-top:3px solid transparent; }
.ar-stats .ar-stat:nth-child(1){ border-top-color:rgba(196,30,58,0.55); }   /* Overdue — red */
.ar-stats .ar-stat:nth-child(2){ border-top-color:rgba(217,119,6,0.55); }   /* Pending — amber */
.ar-stats .ar-stat:nth-child(3){ border-top-color:rgba(124,58,237,0.5); }   /* In progress — purple */
.ar-stats .ar-stat:nth-child(4){ border-top-color:rgba(13,148,136,0.55); }  /* Resolved today — teal */
.ar-stats .ar-stat:nth-child(5){ border-top-color:rgba(37,99,235,0.5); }    /* Avg resolution — blue */
.ar-stats .ar-stat:nth-child(6){ border-top-color:rgba(202,138,4,0.55); }   /* CSAT — gold */
.ar-stats .ar-stat:nth-child(1) .ar-stat-icon{ background:linear-gradient(155deg,#e0475f,#c41e3a); box-shadow:0 6px 14px -4px rgba(196,30,58,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-stats .ar-stat:nth-child(2) .ar-stat-icon{ background:linear-gradient(155deg,#f0a020,#b45309); box-shadow:0 6px 14px -4px rgba(180,83,9,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-stats .ar-stat:nth-child(3) .ar-stat-icon{ background:linear-gradient(155deg,#9d6be6,#6d28d9); box-shadow:0 6px 14px -4px rgba(124,58,237,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-stats .ar-stat:nth-child(4) .ar-stat-icon{ background:linear-gradient(155deg,#22c3a6,#0d9488); box-shadow:0 6px 14px -4px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-stats .ar-stat:nth-child(5) .ar-stat-icon{ background:linear-gradient(155deg,#4d8bff,#1d4ed8); box-shadow:0 6px 14px -4px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-stats .ar-stat:nth-child(6) .ar-stat-icon{ background:linear-gradient(155deg,#e8b428,#a16207); box-shadow:0 6px 14px -4px rgba(161,98,7,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }

/* Clickable KPI cards (Overdue, Pending) — behave as filters */
.ar-stat-btn{ cursor:pointer; font:inherit; width:100%; }
.ar-stat-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2), var(--glass-edge); }
.ar-stat-btn.is-selected{ outline:2px solid var(--teal); outline-offset:1px; }
.ar-stat-btn.is-selected .ar-stat-num{ color:var(--teal-deep); }
/* Overdue card is calm grey until there IS something overdue, then it glows red */
#stat-overdue-card .ar-stat-num{ color:var(--ink-mute); }
#stat-overdue-card.is-active-danger .ar-stat-num{ color:var(--danger); }
#stat-overdue-card.is-active-danger{ border-top-color:var(--danger) !important; }
/* Trend line under a KPI number */
.ar-stat-trend{ font-size:11px; font-weight:600; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:3px; }
.ar-stat-trend.up{ color:var(--success); }
.ar-stat-trend.down{ color:var(--danger); }
.ar-stat-trend.flat{ color:var(--ink-mute); }
.ar-stat-trend i{ font-size:13px; }
.ar-stat-icon::before{
  content:''; position:absolute; top:2px; left:10%; right:10%; height:40%;
  border-radius:10px 10px 20px 20px / 10px 10px 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); pointer-events:none;
}
.ar-stat-icon i{ position:relative; z-index:2; }
.ar-stat-num{ font-size:28px; font-weight:600; color:var(--ink); line-height:1; letter-spacing:-0.02em; }
.ar-stat-label{ font-size:11px; color:var(--ink-mute); margin-top:6px; text-transform:uppercase; letter-spacing:0.05em; font-weight:500; }

/* ---------- Rows / list items ---------- */
.ar-row{
  background:var(--glass-strong); backdrop-filter:blur(22px) saturate(165%); -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:12px;
  box-shadow:var(--shadow-1), var(--glass-edge); transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ar-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2), var(--glass-edge); border-color:var(--hairline-strong); }
.ar-row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.ar-row-meta{ display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.ar-ticket{ font-size:11.5px; color:var(--ink-mute); font-family:'SF Mono','SFMono-Regular',Consolas,monospace; letter-spacing:0.02em; }
.ar-row-title{ font-weight:600; font-size:15.5px; margin:0 0 2px; letter-spacing:-0.012em; }
.ar-row-sub{ font-size:12.5px; color:var(--ink-soft); }
.ar-row-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.ar-pill{ font-size:11px; padding:4px 12px; border-radius:999px; font-weight:600; letter-spacing:0.01em; display:inline-block; }
.ar-pill-pending{ background:var(--red-soft); color:var(--red-deep); }
.ar-pill-accepted{ background:var(--blue-soft); color:var(--blue); }
.ar-pill-in_progress{ background:var(--amber-soft); color:var(--amber); }
.ar-pill-resolved{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-pill-withdrawn{ background:rgba(20,30,28,0.07); color:var(--ink-mute); }

.ar-accept-banner{
  margin-top:14px;
  background:linear-gradient(120deg, var(--teal-mist), var(--teal-soft));
  border:1px solid rgba(15,128,128,0.14); border-radius:var(--r-md);
  padding:13px 17px; display:flex; align-items:center; gap:11px;
  animation:ar-slide-in 0.4s var(--ease);
}
@keyframes ar-slide-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.ar-accept-banner i{ font-size:21px; color:var(--teal-deep); }
.ar-accept-banner span{ font-size:13.5px; color:var(--teal-deep); }

.ar-feedback-block{ margin-top:16px; border-top:1px solid var(--hairline); padding-top:16px; }
.ar-feedback-block p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 10px; }
.ar-stars{ display:flex; gap:5px; margin-bottom:10px; }
.ar-star{ font-size:27px; cursor:pointer; color:#D8D4C8; transition:transform 0.2s var(--spring), color 0.2s var(--ease); }
.ar-star.filled{ color:#FFA70A; }
.ar-star:hover{ transform:scale(1.22); }

.ar-select,
.ar-field select,
select{
  padding:11px 40px 11px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.6); font-size:13.5px; font-family:inherit;
  background-color:rgba(255,255,255,0.55); color:var(--ink); cursor:pointer;
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--glass-edge), var(--shadow-1);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  /* custom chevron so the rounded glass select looks intentional */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F8080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.ar-select:focus,
.ar-field select:focus,
select:focus{
  outline:none; border-color:rgba(15,128,128,0.5);
  background-color:rgba(255,255,255,0.72);
  box-shadow:var(--glass-edge), 0 0 0 3px rgba(15,128,128,0.14), var(--shadow-2);
}

.ar-empty{ text-align:center; padding:56px 20px; color:var(--ink-mute); }
.ar-empty i{ font-size:32px; display:block; margin:0 auto 12px; color:#D8D4C8; }

/* ---------- Employee search picker (Create ticket) ---------- */
.ar-employee-search-wrap{ position:relative; }
.ar-employee-results{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:rgba(255,255,255,0.64); backdrop-filter:blur(14px) saturate(155%); -webkit-backdrop-filter:blur(14px) saturate(155%); border:1px solid rgba(255,255,255,0.7); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); max-height:260px; overflow-y:auto;
}
.ar-employee-result-item{ padding:10px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.ar-employee-result-item:hover{ background:var(--teal-soft); }
.ar-employee-result-item strong{ font-size:13.5px; font-weight:600; }
.ar-employee-result-item span{ font-size:12.5px; color:var(--ink-soft); }
.ar-employee-result-empty{ padding:12px 14px; font-size:13px; color:var(--ink-mute); }

/* ---------- Category management row ---------- */
.ar-cat-row-icon{
  width:40px; height:40px; border-radius:var(--r-md); background:linear-gradient(150deg,var(--teal-soft),#fff);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal-deep); font-size:18px;
  box-shadow:inset 0 0 0 1px rgba(15,128,128,0.08);
}
.ar-cat-edit-form{ flex:1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }
.ar-cat-name-input{ flex:1; min-width:120px; }
.ar-cat-icon-input{ width:130px; flex-shrink:0; }
@media (max-width:600px){
  .ar-cat-edit-form{ flex-direction:column; align-items:stretch; }
  .ar-cat-name-input, .ar-cat-icon-input{ width:100%; min-width:0; }
}

/* ---------- Notes / comment thread ---------- */
.ar-notes{ margin-top:16px; border-top:1px solid var(--hairline); padding-top:16px; }
.ar-notes-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:0 0 10px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.04em; }
.ar-note{
  background:rgba(20,30,28,0.035); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:8px;
}
.ar-note-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
.ar-note-author{ font-size:12.5px; font-weight:600; color:var(--ink); }
.ar-note-author.role-it{ color:var(--teal-deep); }
.ar-note-time{ font-size:11px; color:var(--ink-mute); }
.ar-note-text{ font-size:13.5px; color:var(--ink); line-height:1.5; margin:0; white-space:pre-wrap; word-break:break-word; }
.ar-note-form{ display:flex; gap:8px; margin-top:10px; }
.ar-note-form textarea{
  flex:1; min-height:38px; max-height:120px; resize:vertical; padding:9px 13px; border-radius:var(--r-sm);
  border:1px solid var(--hairline-strong); font-family:inherit; font-size:13.5px; background:rgba(255,255,255,0.8);
}
.ar-note-form textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,128,128,0.12); background:#fff; }

/* ---------- Misc ---------- */
.ar-table-wrap{ overflow-x:auto; }
.ar-flex-between{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }

@media (max-width:600px){
  .ar-field-row{ flex-direction:column; gap:0; }
  .ar-hero{ padding:28px 22px; }
  .ar-panel{ padding:26px 22px; }
  .ar-main{ padding:24px 16px 70px; }
  /* iOS Safari zooms the page in on focus if an input's font-size is under 16px.
     Matching .ar-field's specificity here so this override actually wins on mobile. */
  input, select, textarea,
  .ar-field input, .ar-field select, .ar-field textarea{ font-size:16px; }
  .ar-btn-sm{ min-height:38px; padding:8px 14px; }
  .ar-star{ font-size:30px; }
}

/* ===================== Polish & motion layer ===================== */

/* Page content eases in on load */
@keyframes ar-page-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Hero rises in with a soft settle, and a slow light-sweep crosses it */
.ar-hero{ animation:ar-hero-in 0.6s var(--ease) both; }
@keyframes ar-hero-in{
  from{ opacity:0; transform:translateY(14px) scale(0.99); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.ar-hero::before{
  animation:ar-hero-sweep 7s ease-in-out infinite;
}
@keyframes ar-hero-sweep{
  0%, 100%{ transform:translate(0,0) scale(1); opacity:0.6; }
  50%{ transform:translate(30px,-20px) scale(1.15); opacity:1; }
}

/* Category cards, stat tiles and list rows fade up with a gentle stagger.
   The nth-child delays create a cascade as the eye moves down the page. */
.ar-grid > .ar-card,
.ar-stats > .ar-stat,
#call-list > .ar-row,
#request-list > .ar-row,
#track-list > .ar-row,
#my-bookings-list > .ar-row,
#bookings-list > .ar-row{
  animation:ar-rise 0.5s var(--ease) both;
}
.ar-grid > .ar-card:nth-child(1),
.ar-stats > .ar-stat:nth-child(1){ animation-delay:0.04s; }
.ar-grid > .ar-card:nth-child(2),
.ar-stats > .ar-stat:nth-child(2){ animation-delay:0.08s; }
.ar-grid > .ar-card:nth-child(3),
.ar-stats > .ar-stat:nth-child(3){ animation-delay:0.12s; }
.ar-grid > .ar-card:nth-child(4),
.ar-stats > .ar-stat:nth-child(4){ animation-delay:0.16s; }
.ar-grid > .ar-card:nth-child(5),
.ar-stats > .ar-stat:nth-child(5){ animation-delay:0.20s; }
.ar-grid > .ar-card:nth-child(6),
.ar-stats > .ar-stat:nth-child(6){ animation-delay:0.24s; }
.ar-grid > .ar-card:nth-child(7){ animation-delay:0.28s; }
.ar-grid > .ar-card:nth-child(8){ animation-delay:0.32s; }
@keyframes ar-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Panels ease in too */
.ar-panel{ animation:ar-rise 0.5s var(--ease) both; }

/* Buttons get a subtle press-spring and a sheen on primary hover */
.ar-btn{ position:relative; overflow:hidden; }
.ar-btn:active{ transform:translateY(0) scale(0.97); }
.ar-btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg); transition:none;
}
.ar-btn-primary:hover::after{ animation:ar-sheen 0.8s var(--ease); }
@keyframes ar-sheen{
  from{ left:-120%; }
  to{ left:140%; }
}

/* Tabs: animated active underline feel via smooth background */
.ar-tab{ transition:color 0.25s var(--ease), background 0.25s var(--ease); }

/* Pills gently pop in */
.ar-pill{ animation:ar-pill-in 0.35s var(--spring) both; }
@keyframes ar-pill-in{
  from{ opacity:0; transform:scale(0.8); }
  to{ opacity:1; transform:scale(1); }
}

/* Toic toast slide (if used) and focus rings feel smoother */
.ar-field input:focus, .ar-field select:focus, .ar-field textarea:focus,
input:focus, select:focus, textarea:focus{
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Respect users who prefer less motion — turn off all the entrance/decorative animation */
@media (prefers-reduced-motion: reduce){
  .ar-main, .ar-hero, .ar-panel,
  .ar-grid > .ar-card, .ar-stats > .ar-stat,
  #call-list > .ar-row, #request-list > .ar-row, #track-list > .ar-row,
  #my-bookings-list > .ar-row, #bookings-list > .ar-row,
  .ar-pill{
    animation:none !important;
  }
  .ar-hero::before{ animation:none !important; }
  .ar-btn-primary:hover::after{ animation:none !important; }
}

/* ===================== Super-admin portal switcher (hub) ===================== */
.ar-portal-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin-bottom:26px;
}
.ar-portal-card{
  position:relative; display:flex; align-items:center; gap:18px;
  background:var(--glass-strong); backdrop-filter:blur(12px);
  border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:26px 26px; box-shadow:var(--shadow-1);
  transition:transform 0.3s var(--spring), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  overflow:hidden;
}
.ar-portal-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity 0.3s var(--ease);
  background:radial-gradient(420px 200px at 100% 0%, rgba(15,128,128,0.10), transparent 60%);
}
.ar-portal-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:rgba(15,128,128,0.28); }
.ar-portal-card:hover::before{ opacity:1; }
.ar-portal-card:active{ transform:translateY(-1px) scale(0.995); }
.ar-portal-icon{
  width:60px; height:60px; border-radius:var(--r-lg); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff;
  box-shadow:var(--shadow-glow-teal); transition:transform 0.3s var(--spring);
}
.ar-portal-card:hover .ar-portal-icon{ transform:scale(1.08) rotate(-3deg); }
.ar-portal-it .ar-portal-icon{ background:linear-gradient(150deg,var(--teal),var(--teal-deep)); }
.ar-portal-al .ar-portal-icon{ background:linear-gradient(150deg,#1E7FC0,#0A4E86); box-shadow:0 12px 32px rgba(10,108,194,0.22); }
.ar-portal-body{ flex:1; min-width:0; }
.ar-portal-body h2{ font-size:18px; margin:0 0 4px; letter-spacing:-0.02em; color:var(--ink); }
.ar-portal-body p{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.45; }
.ar-portal-badge{
  display:inline-block; font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:999px;
  background:var(--red-soft); color:var(--red-deep);
}
.ar-portal-badge-clear{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-portal-arrow{
  font-size:22px; color:var(--ink-mute); flex-shrink:0;
  transition:transform 0.3s var(--spring), color 0.3s var(--ease);
}
.ar-portal-card:hover .ar-portal-arrow{ transform:translateX(4px); color:var(--teal); }

.ar-hub-tools{ display:flex; gap:12px; flex-wrap:wrap; }
.ar-hub-tool{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  background:var(--glass-strong); border:1px solid var(--hairline);
  padding:11px 18px; border-radius:999px; transition:all 0.25s var(--ease);
}
.ar-hub-tool:hover{ color:var(--teal-deep); border-color:rgba(15,128,128,0.28); transform:translateY(-1px); box-shadow:var(--shadow-1); }

/* "Switch portal" nav link gets a subtle distinct treatment so it reads as a mode-switch, not a page */
.ar-nav-switch{ color:var(--teal-deep); background:var(--teal-soft); }
.ar-nav-switch:hover{ background:var(--teal); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .ar-portal-card, .ar-portal-icon, .ar-portal-arrow, .ar-hub-tool{ transition:none; }
}

/* ===================== Room booking v2 ===================== */
.ar-book-layout{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:18px; align-items:start; }
.ar-book-schedule{ position:sticky; top:88px; }
.ar-schedule-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.ar-chip{ font-size:12px; font-weight:600; color:var(--teal-deep); background:var(--teal-soft); padding:4px 11px; border-radius:999px; white-space:nowrap; }
.ar-room-meta{ font-size:12.5px; color:var(--ink-mute); margin:6px 0 0; }
.ar-hint{ font-size:12px; color:var(--ink-mute); margin:6px 0 0; }

.ar-free-note{ font-size:13.5px; color:var(--teal-deep); background:var(--teal-soft); padding:12px 14px; border-radius:var(--r-md); display:flex; align-items:center; gap:8px; }
.ar-slot{ display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:var(--r-md); background:var(--surface-2, rgba(20,30,28,0.03)); margin-bottom:8px; animation:ar-rise 0.4s var(--ease) both; }
.ar-slot-time{ font-size:12px; font-weight:600; color:var(--ink); min-width:70px; line-height:1.35; }
.ar-slot-time span{ color:var(--ink-mute); margin:0 2px; }
.ar-slot-info{ display:flex; flex-direction:column; min-width:0; }
.ar-slot-info strong{ font-size:13.5px; color:var(--ink); }
.ar-slot-info span{ font-size:12px; color:var(--ink-mute); }

/* Segmented control (repeat frequency) */
.ar-segmented{ display:inline-flex; background:rgba(20,30,28,0.05); border-radius:var(--r-md); padding:3px; gap:2px; }
.ar-seg{ border:none; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); padding:8px 16px; border-radius:var(--r-sm); cursor:pointer; transition:all 0.25s var(--ease); }
.ar-seg.active{ background:rgba(255,255,255,0.88); color:var(--teal-deep); box-shadow:0 2px 6px rgba(20,30,28,0.1); }

/* Weekday picker */
.ar-weekdays{ display:flex; flex-wrap:wrap; gap:6px; }
.ar-wd{ border:1px solid var(--hairline-strong); background:rgba(255,255,255,0.7); font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); padding:8px 12px; border-radius:999px; cursor:pointer; transition:all 0.2s var(--ease); }
.ar-wd.active{ background:var(--teal); color:#fff; border-color:var(--teal); }

/* Swap */
.ar-swap-incoming{ border:1px solid rgba(224,34,61,0.25); }
.ar-swap-card{ padding:14px; border-radius:var(--r-md); background:var(--surface-2, rgba(20,30,28,0.03)); margin-bottom:10px; }
.ar-swap-card:last-child{ margin-bottom:0; }
.ar-swap-line{ font-size:13.5px; color:var(--ink); margin:0 0 10px; }
.ar-swap-trade{ display:flex; align-items:stretch; gap:12px; margin-bottom:10px; }
.ar-swap-side{ flex:1; background:rgba(255,255,255,0.62); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 12px; font-size:13px; font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:2px; }
.ar-swap-label{ font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-mute); }
.ar-swap-slot{ font-size:11.5px; font-weight:500; color:var(--ink-mute); margin-top:2px; }
.ar-swap-arrow{ align-self:center; font-size:20px; color:var(--teal); }
.ar-swap-msg{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin:0 0 10px; }
.ar-swap-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ar-swap-result{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:var(--r-md); background:var(--surface-2, rgba(20,30,28,0.03)); margin-bottom:8px; }

@media (max-width:820px){
  .ar-book-layout{ grid-template-columns:1fr; }
  .ar-book-schedule{ position:static; }
  .ar-swap-trade{ flex-direction:column; }
  .ar-swap-arrow{ transform:rotate(90deg); }
}
@media (prefers-reduced-motion: reduce){ .ar-slot{ animation:none; } }

/* All-bookings view */
.ar-allbook-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ar-day-group{ margin-bottom:18px; }
.ar-day-head{ font-size:12.5px; font-weight:700; letter-spacing:0.02em; color:var(--ink-soft); text-transform:uppercase; margin:0 2px 8px; display:flex; align-items:center; gap:7px; }
.ar-today-dot{ width:7px; height:7px; border-radius:999px; background:var(--red); display:inline-block; box-shadow:0 0 0 3px rgba(224,34,61,0.15); }
.ar-slot-mine{ border-left:3px solid var(--teal); background:var(--teal-soft); }
@media (max-width:600px){ .ar-allbook-controls{ flex-direction:column; align-items:stretch; } }

/* ===================== Notification bell ===================== */
/* Notification row lives inside the sidebar (.ar-nav-bell); panel opens beside it. */
.ar-bell-panel{
  position:fixed; top:76px; left:calc(var(--ar-sidebar-w) + 12px); bottom:auto; right:auto;
  width:360px; max-width:calc(100vw - 32px); max-height:76vh; overflow-y:auto;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(24px) saturate(165%); -webkit-backdrop-filter:blur(24px) saturate(165%); border:1px solid rgba(255,255,255,0.7); border-radius:var(--r-lg);
  box-shadow:0 20px 55px rgba(20,30,28,0.24); z-index:80;
  animation:ar-pop-right 0.2s var(--ease) both;
}
body.ar-sidebar-collapsed .ar-bell-panel{ left:calc(var(--ar-sidebar-collapsed-w) + 12px); }
@media (max-width:900px){
  .ar-bell-panel{ left:12px; right:12px; width:auto; bottom:auto; top:64px; }
}
@keyframes ar-pop-right{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:translateX(0); } }
.ar-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--hairline); font-weight:700; font-size:14px; color:var(--ink); position:sticky; top:0; background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:16px 16px 0 0; }
.ar-bell-head-actions{ display:flex; align-items:center; gap:4px; }
.ar-bell-readall{ border:none; background:transparent; color:var(--teal-deep); font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:var(--r-sm); }
.ar-bell-readall:hover{ background:var(--teal-soft); }
.ar-bell-clearall{ border:none; background:transparent; color:var(--red); font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:var(--r-sm); }
.ar-bell-clearall:hover{ background:rgba(224,34,61,0.1); }
.ar-bell-body{ padding:6px 0 8px; }
.ar-notif-group{ padding:6px 0; }
.ar-notif-cat{ font-size:11px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-mute); padding:8px 16px 4px; display:flex; align-items:center; gap:6px; }
.ar-notif{ display:flex; gap:10px; padding:10px 16px; text-decoration:none; color:inherit; transition:background 0.15s var(--ease); align-items:flex-start; }
.ar-notif:hover{ background:var(--surface-2, rgba(20,30,28,0.03)); }
.ar-notif-dot{ width:8px; height:8px; border-radius:999px; background:transparent; margin-top:6px; flex-shrink:0; }
.ar-notif.unread{ background:var(--teal-soft); }
.ar-notif.unread .ar-notif-dot{ background:var(--teal); }
.ar-notif.unread .ar-notif-title{ font-weight:600; }
.ar-notif-main{ min-width:0; }
.ar-notif-title{ font-size:13px; color:var(--ink); margin:0 0 2px; line-height:1.35; }
.ar-notif-body{ font-size:12px; color:var(--ink-soft); margin:0 0 3px; line-height:1.35; }
.ar-notif-ago{ font-size:11px; color:var(--ink-mute); }
@media (prefers-reduced-motion: reduce){ .ar-bell-panel{ animation:none; } }

/* "Via email" ticket badge */
.ar-pill-email{ background:#EAF3FB; color:#1E6FB8; }
.ar-pill-email i{ font-size:12px; vertical-align:-1px; }

/* Prominent detailed-request panel (employee create pages) */
.ar-detail-panel{ border:2px solid var(--teal-soft); box-shadow:0 6px 22px rgba(15,128,128,0.08); }

/* Full inbound-email block on ticket cards */
.ar-email-block{ margin:10px 0 4px; }
.ar-email-block details{ background:#f7fafa; border:1px solid var(--hairline); border-radius:var(--r-sm); padding:8px 12px; }
.ar-email-block summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--teal-deep); list-style:none; }
.ar-email-block summary::-webkit-details-marker{ display:none; }
.ar-email-block summary i{ vertical-align:-2px; margin-right:4px; }
.ar-email-body{ margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline); font-size:13px; line-height:1.55; color:var(--ink-soft); max-height:320px; overflow-y:auto; white-space:normal; word-break:break-word; }
.ar-email-att{ margin-top:10px; font-size:12.5px; }
.ar-email-att-label{ color:var(--ink-mute); margin-right:4px; }
.ar-email-att a{ color:var(--teal-deep); text-decoration:none; margin-right:10px; white-space:nowrap; }
.ar-email-att a:hover{ text-decoration:underline; }

/* ============================================================
   PREMIUM INTERACTION LAYER — toasts, skeletons, stagger, transitions
   ============================================================ */

/* --- Staggered entrance for list rows & cards --- */
@keyframes ar-item-in{
  from{ opacity:0; transform:translateY(12px) scale(0.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.ar-stagger > *{ animation:ar-item-in 0.5s var(--ease) both; }
.ar-stagger > *:nth-child(1){ animation-delay:0.02s; }
.ar-stagger > *:nth-child(2){ animation-delay:0.06s; }
.ar-stagger > *:nth-child(3){ animation-delay:0.10s; }
.ar-stagger > *:nth-child(4){ animation-delay:0.14s; }
.ar-stagger > *:nth-child(5){ animation-delay:0.18s; }
.ar-stagger > *:nth-child(6){ animation-delay:0.22s; }
.ar-stagger > *:nth-child(7){ animation-delay:0.26s; }
.ar-stagger > *:nth-child(8){ animation-delay:0.30s; }
.ar-stagger > *:nth-child(n+9){ animation-delay:0.34s; }

/* --- Skeleton loaders (shimmer) so refreshes never flash blank --- */
.ar-skeleton{
  background:linear-gradient(100deg, rgba(15,60,58,0.06) 30%, rgba(15,60,58,0.12) 50%, rgba(15,60,58,0.06) 70%);
  background-size:200% 100%; animation:ar-shimmer 1.3s ease-in-out infinite; border-radius:var(--r-sm);
}
@keyframes ar-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.ar-skel-row{
  background:var(--glass-strong); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:20px 22px; margin-bottom:12px; box-shadow:var(--shadow-1), var(--glass-edge);
}
.ar-skel-line{ height:12px; margin:8px 0; }

/* --- Toast notifications --- */
.ar-toast-wrap{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:1200; pointer-events:none; width:max-content; max-width:92vw;
}
.ar-toast{
  display:flex; align-items:center; gap:11px; padding:13px 20px 13px 16px;
  background:rgba(22,32,30,0.92); color:#fff; border-radius:var(--r-md);
  box-shadow:0 12px 34px -8px rgba(0,0,0,0.4), var(--glass-edge);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  font-size:14px; font-weight:500; letter-spacing:-0.01em; pointer-events:auto;
  animation:ar-toast-in 0.45s var(--spring) both;
}
.ar-toast.ar-toast-out{ animation:ar-toast-out 0.35s var(--ease) forwards; }
.ar-toast i{ font-size:18px; flex-shrink:0; }
.ar-toast-success i{ color:#3ddc97; }
.ar-toast-error i{ color:#ff6b81; }
.ar-toast-info i{ color:#5bc8ff; }
@keyframes ar-toast-in{ from{ opacity:0; transform:translateY(20px) scale(0.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes ar-toast-out{ to{ opacity:0; transform:translateY(12px) scale(0.96); } }

/* --- Smooth status pill transitions + pulse on change --- */
.ar-status{ transition:background 0.4s var(--ease), color 0.4s var(--ease); }
.ar-status-changed{ animation:ar-status-pulse 0.7s var(--ease); }
@keyframes ar-status-pulse{ 0%{ transform:scale(1); } 30%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* --- Button working/success states --- */
.ar-btn.is-working{ position:relative; color:transparent !important; pointer-events:none; }
.ar-btn.is-working::after{
  content:''; position:absolute; width:15px; height:15px; top:50%; left:50%; margin:-7.5px 0 0 -7.5px;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%;
  animation:ar-spin 0.6s linear infinite;
}
.ar-btn-danger.is-working::after, .ar-btn:not(.ar-btn-primary):not(.ar-btn-danger).is-working::after{ border:2px solid rgba(15,128,128,0.3); border-top-color:var(--teal); }
@keyframes ar-spin{ to{ transform:rotate(360deg); } }

/* --- Count-up numbers keep a fixed tabular width so they don't jitter --- */
.ar-stat-num, .ar-tab-count{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .ar-stagger > *, .ar-toast, .ar-skeleton{ animation:none !important; }
  .ar-status-changed{ animation:none; }
}

/* --- PWA install prompt bar --- */
#ar-install-bar{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:1100;
  animation:ar-toast-in 0.5s var(--spring) both; width:max-content; max-width:92vw;
}
.ar-install-inner{
  display:flex; align-items:center; gap:12px; padding:11px 12px 11px 18px;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3), var(--glass-edge); font-size:14px; font-weight:500; color:var(--ink);
}
.ar-install-inner > i{ font-size:20px; color:var(--teal); }
#ar-install-yes{
  border:none; cursor:pointer; padding:8px 18px; border-radius:999px;
  background:linear-gradient(150deg,var(--teal),var(--teal-deep)); color:#fff; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-glow-teal);
}
#ar-install-no{
  border:none; cursor:pointer; background:transparent; color:var(--ink-mute); font-size:22px; line-height:1;
  padding:0 6px; border-radius:var(--r-sm);
}
#ar-install-no:hover{ color:var(--ink); }

/* Optimistic comment: shown instantly, faintly dimmed until the server confirms. */
.ar-note-pending{ opacity:0.62; }
.ar-note-pending .ar-note-time{ font-style:italic; color:var(--ink-mute); }

/* ============================================================
   READABILITY & THEME FIXES (date/time inputs, booking tiles)
   ============================================================ */

/* Date & time inputs — glass theme, rounded, DARK readable text */
input[type="date"], input[type="time"]{
  padding:12px 16px; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.6);
  background-color:rgba(255,255,255,0.62);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--glass-edge), var(--shadow-1);
  font-size:14.5px; font-family:inherit; color:var(--ink); font-weight:600;
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
input[type="date"]:focus, input[type="time"]:focus{
  outline:none; border-color:rgba(15,128,128,0.5);
  background-color:rgba(255,255,255,0.78);
  box-shadow:var(--glass-edge), 0 0 0 3px rgba(15,128,128,0.14), var(--shadow-2);
}
/* Make the native calendar/clock picker icon dark and visible */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:0.75; cursor:pointer; filter:invert(30%) sepia(60%) saturate(700%) hue-rotate(140deg);
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{ color:var(--ink); font-weight:600; }

/* Booking tiles (today / upcoming / history) — darker, readable text */
.ar-slot{ background:rgba(255,255,255,0.6) !important; backdrop-filter:blur(14px) saturate(155%); -webkit-backdrop-filter:blur(14px) saturate(155%); box-shadow:var(--glass-edge), var(--shadow-1); border:1px solid rgba(255,255,255,0.5); }
.ar-slot-time{ color:var(--ink) !important; font-weight:700 !important; }
.ar-slot-time span{ color:var(--ink-soft) !important; }
.ar-slot-info strong{ color:var(--ink) !important; font-weight:600 !important; }
.ar-slot-info span{ color:var(--ink-soft) !important; }

/* Inline reschedule form in My bookings */
.ar-reschedule-form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.ar-reschedule-form .ar-field{ margin:0; }
.ar-reschedule-form .ar-field label{ font-size:12px; }

/* Meeting invite picker */
.ar-invite-results{ margin-top:6px; background:rgba(255,255,255,0.85); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--hairline); border-radius:var(--r-md); box-shadow:var(--shadow-2); overflow:hidden; max-height:260px; overflow-y:auto; }
.ar-invite-opt{ padding:10px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:background 0.15s var(--ease); }
.ar-invite-opt:hover{ background:var(--teal-soft); }
.ar-invite-opt strong{ font-size:14px; color:var(--ink); }
.ar-invite-opt span{ font-size:12px; color:var(--ink-mute); }
.ar-invite-none{ padding:12px 14px; color:var(--ink-mute); font-size:13px; }
.ar-invite-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.ar-invite-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--teal-soft); color:var(--teal-deep); font-size:13px; font-weight:600; padding:6px 8px 6px 13px; border-radius:999px; }
.ar-invite-chip button{ border:none; background:rgba(15,128,128,0.15); color:var(--teal-deep); width:18px; height:18px; border-radius:999px; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; }
.ar-invite-chip button:hover{ background:rgba(15,128,128,0.3); }
/* Invitee list shown on a booking */
.ar-invitee-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ar-invitee-tag{ font-size:11.5px; font-weight:600; color:var(--ink-soft); background:rgba(20,30,28,0.05); padding:3px 10px; border-radius:999px; }

/* ============================================================
   HELP ASSISTANT CHATBOT
   ============================================================ */
.ar-chat-launcher{
  position:fixed; bottom:26px; right:26px; z-index:1150;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(150deg,#25B8B0,#0A5A5A); color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(10,90,90,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  transition:transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}
.ar-chat-launcher:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 16px 34px -6px rgba(10,90,90,0.6), inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-chat-launcher.is-open{ background:linear-gradient(150deg,#5C6462,#3A403E); }

.ar-chat-panel{
  position:fixed; bottom:98px; right:26px; z-index:1150;
  width:376px; max-width:calc(100vw - 32px); height:540px; max-height:calc(100vh - 140px);
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,0.7); border-radius:22px;
  box-shadow:0 24px 60px -12px rgba(10,40,38,0.35), var(--glass-edge);
  animation:ar-chat-in 0.35s var(--spring) both;
}
@keyframes ar-chat-in{ from{ opacity:0; transform:translateY(20px) scale(0.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

.ar-chat-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 16px; background:linear-gradient(150deg,#25B8B0,#0A5A5A); color:#fff; }
.ar-chat-head-title{ display:flex; align-items:center; gap:11px; }
.ar-chat-head-title strong{ font-size:15px; display:block; line-height:1.2; }
.ar-chat-head-title span{ font-size:11.5px; opacity:0.85; }
.ar-chat-avatar{ width:38px; height:38px; border-radius:var(--r-md); background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.4); }
.ar-chat-close{ border:none; background:transparent; color:#fff; cursor:pointer; font-size:20px; opacity:0.85; padding:4px; border-radius:var(--r-sm); }
.ar-chat-close:hover{ opacity:1; background:rgba(255,255,255,0.15); }

.ar-chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.ar-chat-msg{ max-width:86%; padding:11px 14px; border-radius:var(--r-lg); font-size:13.7px; line-height:1.5; animation:ar-chat-msg-in 0.3s var(--ease) both; }
@keyframes ar-chat-msg-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.ar-chat-bot{ align-self:flex-start; background:rgba(255,255,255,0.9); color:var(--ink); border:1px solid var(--hairline); box-shadow:var(--shadow-1); border-bottom-left-radius:5px; }
.ar-chat-user{ align-self:flex-end; background:linear-gradient(150deg,#25B8B0,#0F8080); color:#fff; border-bottom-right-radius:5px; }
.ar-chat-bot em{ color:var(--teal-deep); font-style:normal; font-weight:600; background:var(--teal-soft); padding:1px 5px; border-radius:var(--r-sm); }
.ar-chat-steps{ margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.ar-chat-steps li{ font-size:13.3px; }

.ar-chat-typing{ display:flex; gap:4px; align-items:center; }
.ar-chat-typing span{ width:7px; height:7px; border-radius:50%; background:var(--ink-mute); animation:ar-chat-blink 1.2s infinite; }
.ar-chat-typing span:nth-child(2){ animation-delay:0.2s; } .ar-chat-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes ar-chat-blink{ 0%,60%,100%{ opacity:0.3; } 30%{ opacity:1; } }

.ar-chat-chips{ display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:100%; }
.ar-chat-chips-label{ width:100%; font-size:12px; color:var(--ink-mute); margin-bottom:2px; }
.ar-chat-chip{ border:1px solid var(--teal); background:rgba(255,255,255,0.7); color:var(--teal-deep); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer; transition:all 0.2s var(--ease); }
.ar-chat-chip:hover{ background:var(--teal-soft); }

.ar-chat-escalate{ align-self:flex-start; margin-top:2px; }
.ar-chat-escalate p{ font-size:12px; color:var(--ink-mute); margin-bottom:6px; }
.ar-chat-raise{ border:none; background:linear-gradient(150deg,#F0556E,#C8102E); color:#fff; font-size:13px; font-weight:600; padding:10px 15px; border-radius:var(--r-md); cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 6px 16px -4px rgba(200,16,46,0.4); transition:transform 0.2s var(--spring); }
.ar-chat-raise:hover{ transform:translateY(-1px); }

.ar-chat-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--hairline); background:rgba(255,255,255,0.5); }
#ar-chat-input, #ar-staffchat-input{ flex:1; padding:11px 15px; border-radius:999px; border:1px solid var(--hairline-strong); background:rgba(255,255,255,0.85); font-size:14px; font-family:inherit; color:var(--ink); transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
#ar-chat-input:focus, #ar-staffchat-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,128,128,0.14); }
#ar-chat-input::placeholder, #ar-staffchat-input::placeholder{ color:var(--ink-mute); }
#ar-chat-input:disabled, #ar-staffchat-input:disabled{ opacity:0.6; }
#ar-chat-send, #ar-staffchat-send{ width:44px; flex-shrink:0; border:none; border-radius:50%; background:linear-gradient(150deg,#25B8B0,#0A5A5A); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px -3px rgba(10,90,90,0.5); transition:filter 0.2s var(--ease); }
#ar-chat-send:hover, #ar-staffchat-send:hover{ filter:brightness(1.08); }

@media (max-width:600px){
  .ar-chat-panel{ right:12px; left:12px; bottom:88px; width:auto; height:calc(100vh - 120px); }
  .ar-chat-launcher{ bottom:18px; right:18px; }
}
@media (prefers-reduced-motion: reduce){ .ar-chat-panel, .ar-chat-msg{ animation:none; } }

/* Chatbot "did this help?" resolve prompt */
.ar-chat-resolve{ align-self:flex-start; margin-top:2px; }
.ar-chat-resolve p{ font-size:12.5px; color:var(--ink-soft); margin-bottom:7px; font-weight:600; }
.ar-chat-resolve-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.ar-chat-yes, .ar-chat-no{ border:none; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all 0.2s var(--ease); }
.ar-chat-yes{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-chat-yes:hover{ background:rgba(15,128,128,0.2); }
.ar-chat-no{ background:rgba(20,30,28,0.06); color:var(--ink-soft); }
.ar-chat-no:hover{ background:rgba(20,30,28,0.12); }

/* Chatbot attention nudge (one-time per session, gentle) */
.ar-chat-nudge{
  position:fixed; bottom:98px; right:26px; z-index:1149; max-width:250px;
  display:flex; align-items:flex-start; gap:9px; padding:13px 16px 13px 14px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(20px) saturate(165%); -webkit-backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,0.8); border-radius:16px 16px 4px 16px;
  box-shadow:0 16px 40px -10px rgba(10,60,58,0.32), var(--glass-edge);
  font-size:13.3px; line-height:1.45; color:var(--ink); cursor:pointer;
  animation:ar-nudge-in 0.5s var(--spring) both;
}
.ar-chat-nudge-out{ animation:ar-nudge-out 0.35s var(--ease) forwards; }
@keyframes ar-nudge-in{ from{ opacity:0; transform:translateY(14px) scale(0.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes ar-nudge-out{ to{ opacity:0; transform:translateY(10px) scale(0.96); } }
.ar-chat-nudge-emoji{ font-size:17px; flex-shrink:0; }
.ar-chat-nudge-x{ position:absolute; top:5px; right:7px; border:none; background:transparent; color:var(--ink-mute); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-sm); }
.ar-chat-nudge-x:hover{ color:var(--ink); background:rgba(20,30,28,0.06); }
/* Soft pulse ring on the launcher while nudging */
.ar-chat-launcher.ar-chat-pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(15,128,128,0.5); animation:ar-launch-pulse 1.8s ease-out infinite;
}
@keyframes ar-launch-pulse{ 0%{ box-shadow:0 0 0 0 rgba(15,128,128,0.45); } 70%{ box-shadow:0 0 0 16px rgba(15,128,128,0); } 100%{ box-shadow:0 0 0 0 rgba(15,128,128,0); } }
@media (max-width:600px){ .ar-chat-nudge{ right:18px; bottom:88px; max-width:calc(100vw - 90px); } }
@media (prefers-reduced-motion: reduce){ .ar-chat-nudge{ animation:none; } .ar-chat-launcher.ar-chat-pulse::after{ animation:none; } }

/* ============================================================
   LIVE CHAT — employee live-mode bubbles + staff console
   ============================================================ */
/* Employee live-chat message variants */
.ar-chat-msg.ar-chat-agent{ align-self:flex-start; background:linear-gradient(150deg,#EAF7F5,#DBF0EC); color:var(--ink); border:1px solid rgba(15,128,128,0.25); border-bottom-left-radius:5px; }
.ar-chat-msg.ar-chat-agent strong{ display:block; font-size:11.5px; color:var(--teal-deep); margin-bottom:2px; }
.ar-chat-msg.ar-chat-sys{ align-self:center; background:rgba(20,30,28,0.06); color:var(--ink-soft); font-size:12px; text-align:center; border-radius:var(--r-sm); max-width:92%; }
.ar-chat-panel.ar-chat-agent-joined .ar-chat-head{ animation:ar-agent-flash 0.8s ease 3; }
@keyframes ar-agent-flash{ 50%{ background:linear-gradient(150deg,#2FD0C6,#0F8080); } }

/* Staff console launcher (red-tinted so it's distinct from employee bot) */
.ar-staffchat-launcher{ background:linear-gradient(150deg,#25B8B0,#0A5A5A); }
.ar-staffchat-badge{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }

.ar-staffchat-panel{ height:560px; }
.ar-staffchat-list{ flex:1; overflow-y:auto; padding:10px; }
.ar-staffchat-empty{ text-align:center; color:var(--ink-mute); padding:40px 20px; }
.ar-staffchat-empty i{ font-size:30px; display:block; margin-bottom:10px; color:#C9D3D0; }
.ar-staffchat-item{ padding:12px 14px; border-radius:var(--r-md); cursor:pointer; transition:background 0.15s var(--ease); border:1px solid transparent; }
.ar-staffchat-item:hover{ background:var(--teal-soft); border-color:rgba(15,128,128,0.15); }
.ar-staffchat-item-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ar-staffchat-item-top strong{ font-size:14px; color:var(--ink); }
.ar-staffchat-item-msg{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-staffchat-item-ago{ font-size:11px; color:var(--ink-mute); }
.ar-staffchat-tag{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; }
.ar-staffchat-tag.waiting{ background:rgba(224,34,61,0.12); color:var(--red); }
.ar-staffchat-tag.mine{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-staffchat-tag.active{ background:rgba(20,30,28,0.07); color:var(--ink-soft); }

.ar-staffchat-convo{ flex:1; flex-direction:column; min-height:0; }
.ar-staffchat-convo-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--hairline); }
.ar-staffchat-back{ border:none; background:transparent; cursor:pointer; font-size:18px; color:var(--ink-soft); padding:4px; border-radius:var(--r-sm); }
.ar-staffchat-back:hover{ background:rgba(20,30,28,0.06); }
.ar-staffchat-convo-head #ar-staffchat-with{ font-weight:700; font-size:14px; flex:1; }
.ar-staffchat-actions{ display:flex; gap:6px; }
.ar-staffchat-resolve, .ar-staffchat-followup{ border:none; font-size:11.5px; font-weight:600; padding:7px 11px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.ar-staffchat-resolve{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-staffchat-resolve:hover{ background:rgba(15,128,128,0.2); }
.ar-staffchat-followup{ background:rgba(224,34,61,0.1); color:var(--red); }
.ar-staffchat-followup:hover{ background:rgba(224,34,61,0.18); }

/* ============================================================
   APPROVAL WORKFLOW
   ============================================================ */
.ar-card-plain{ background:var(--glass-strong); backdrop-filter:blur(22px) saturate(165%); -webkit-backdrop-filter:blur(22px) saturate(165%); border:1px solid rgba(255,255,255,0.6); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-1), var(--glass-edge); }
.ar-card-plain textarea{ width:100%; padding:12px 15px; border-radius:var(--r-md); border:1px solid var(--hairline-strong); background:rgba(255,255,255,0.75); font-family:inherit; font-size:14.5px; color:var(--ink); resize:vertical; }
.ar-card-plain textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,128,128,0.14); }
.ar-approver-chosen{ margin-top:10px; }
.ar-ref{ font-size:12px; color:var(--ink-mute); font-weight:600; font-family:ui-monospace, monospace; }
.ar-status-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.ar-approval-row{ cursor:default; }

/* Modal */
.ar-modal{ position:fixed; inset:0; z-index:1200; background:transparent; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:ar-modal-fade 0.18s ease-out; }
@keyframes ar-modal-fade{ from{ opacity:0; } to{ opacity:1; } }
/* Pure frosted glass: NO colour tint at all — the page behind simply blurs.
   This keeps the popup clearly separated from the background without any
   white or dark square. Blur strength is high so the separation reads well. */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
  .ar-modal{ -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%); }
}
.ar-modal-box{ background:linear-gradient(150deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72)); backdrop-filter:blur(30px) saturate(170%); -webkit-backdrop-filter:blur(30px) saturate(170%); border:1px solid rgba(255,255,255,0.8); border-radius:20px; width:100%; max-width:620px; margin:auto; max-height:none; display:flex; flex-direction:column; box-shadow:0 32px 80px -12px rgba(10,40,38,0.45), 0 8px 24px -6px rgba(10,40,38,0.25), 0 0 0 1px rgba(10,40,38,0.04); overflow:hidden; animation:ar-modal-rise 0.22s cubic-bezier(0.22,1,0.36,1); }
@keyframes ar-modal-rise{ from{ transform:translateY(14px) scale(0.98); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }
.ar-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:linear-gradient(150deg,#25B8B0,#0A5A5A); color:#fff; font-weight:600; position:sticky; top:0; }
.ar-modal-close{ border:none; background:rgba(255,255,255,0.18); color:#fff; cursor:pointer; font-size:18px; opacity:0.95; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
.ar-modal-close::before{ content:"\00d7"; font-size:22px; font-weight:400; }
.ar-modal-close i{ display:none; }
.ar-modal-close:hover{ opacity:1; background:rgba(255,255,255,0.3); }
.ar-modal-body{ padding:20px; overflow-y:auto; }
.ar-modal-foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--hairline); background:rgba(255,255,255,0.6); }
.ap-meta table{ width:100%; border-collapse:collapse; margin:12px 0; }
.ap-meta td{ padding:6px 8px; font-size:13.5px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.ap-meta td:first-child{ color:var(--ink-mute); width:130px; font-weight:600; }
.ap-details-box{ background:var(--teal-mist); border-radius:var(--r-md); padding:12px 14px; font-size:14px; margin-top:8px; }
.ap-decision{ background:rgba(224,34,61,0.06); border-radius:var(--r-md); padding:10px 14px; font-size:13.5px; margin-top:10px; }
.ar-approve-actions{ margin:14px 0; padding:14px; background:var(--teal-mist); border-radius:var(--r-md); }
.ar-approve-actions textarea{ width:100%; padding:10px 13px; border-radius:var(--r-md); border:1px solid var(--hairline-strong); font-family:inherit; font-size:14px; resize:vertical; }
.ap-thread-label{ font-weight:600; font-size:13px; color:var(--ink-soft); margin:18px 0 8px; }
.ap-thread{ display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; padding-right:4px; }
.ap-msg{ padding:10px 13px; border-radius:var(--r-md); background:rgba(255,255,255,0.9); border:1px solid var(--hairline); font-size:13.7px; }
.ap-msg.sys{ background:rgba(20,30,28,0.05); color:var(--ink-soft); font-style:italic; font-size:12.5px; text-align:center; }
.ap-who{ font-weight:600; font-size:12.5px; color:var(--teal-deep); margin-bottom:3px; }
.ap-who .ap-role{ font-weight:400; color:var(--ink-mute); margin-left:6px; }
.ap-who .ap-t, .ap-msg.sys .ap-t{ float:right; color:var(--ink-mute); font-weight:400; font-size:11.5px; }
.ap-b{ white-space:pre-wrap; }
.ap-reply-row{ display:flex; gap:8px; margin-top:14px; }
.ap-reply-row input{ flex:1; padding:11px 15px; border-radius:999px; border:1px solid var(--hairline-strong); background:rgba(255,255,255,0.85); font-size:14px; font-family:inherit; }
.ap-reply-row input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,128,128,0.14); }

/* Approval CTA banner in IT / A&L sections */
.ar-approval-cta{ display:flex; align-items:flex-start; gap:15px; padding:18px 20px; margin-bottom:20px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(15,128,128,0.08), rgba(37,184,176,0.05)); border:1px solid rgba(15,128,128,0.2);
  text-decoration:none; color:var(--ink); transition:transform 0.25s var(--spring), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease); }
.ar-approval-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--teal); }
.ar-approval-cta-icon{ width:46px; height:46px; flex-shrink:0; border-radius:var(--r-md); background:linear-gradient(150deg,#25B8B0,#0A5A5A); color:#fff; display:flex; align-items:center; justify-content:center; font-size:23px; box-shadow:0 4px 12px -3px rgba(10,90,90,0.5); }
.ar-approval-cta-body{ flex:1; min-width:0; }
.ar-approval-cta strong{ display:block; font-size:15.5px; margin-bottom:4px; }
.ar-approval-cta-body > span{ display:block; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.ar-approval-cta-tags{ display:flex !important; flex-wrap:wrap; gap:7px; margin:11px 0 4px; }
.ar-approval-tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:550; color:var(--teal-deep); background:rgba(15,128,128,0.1); padding:4px 10px; border-radius:999px; }
.ar-approval-tag i{ font-size:14px; }
.ar-approval-cta-go{ display:inline-flex !important; align-items:center; gap:6px; margin-top:9px; font-size:13.5px; font-weight:600; color:var(--teal); }
.ar-approval-cta-go i{ transition:transform 0.2s var(--ease); }
.ar-approval-cta:hover .ar-approval-cta-go i{ transform:translateX(4px); }
/* Locked team display on approval form */
.ar-locked-team{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-md); background:var(--teal-mist); color:var(--teal-deep); font-weight:600; font-size:14px; }
.ar-locked-team i{ font-size:18px; }

/* Requester actions (withdraw / edit) + inline edit form on approval detail */
.ar-requester-actions{ margin:14px 0; padding:12px 14px; background:rgba(20,30,28,0.04); border-radius:var(--r-md); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ar-edit-form{ background:var(--teal-mist); border:1px solid rgba(15,128,128,0.2); border-radius:var(--r-md); padding:16px; margin-bottom:16px; }
.ar-edit-form .ar-field{ margin-bottom:12px; }
.ar-edit-form input, .ar-edit-form textarea{ width:100%; padding:10px 13px; border-radius:var(--r-sm); border:1px solid var(--hairline-strong); font-family:inherit; font-size:14px; }
.ar-btn-danger{ background:rgba(224,34,61,0.1) !important; color:var(--red) !important; }
.ar-btn-danger:hover{ background:rgba(224,34,61,0.18) !important; }

/* Multi-level approval chain picker */
.ar-chain-info{ background:linear-gradient(135deg, rgba(15,128,128,0.08), rgba(37,184,176,0.05)); border:1px solid rgba(15,128,128,0.2); border-radius:var(--r-md); padding:12px 15px; font-size:13.5px; color:var(--ink-soft); margin:8px 0 14px; }
.ar-chain-info i{ color:var(--teal); margin-right:6px; }
.ar-chain-info strong{ color:var(--teal-deep); }
.ap-level-picker{ border-left:3px solid var(--teal); padding-left:12px; margin-bottom:14px; }
/* Approval steps timeline in detail view */
.ap-steps{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.ap-step{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); background:rgba(255,255,255,0.7); border:1px solid var(--hairline); font-size:13px; }
.ap-step .num{ width:22px; height:22px; border-radius:50%; background:var(--teal-soft); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.ap-step.done .num{ background:#16a34a; color:#fff; }
.ap-step.current .num{ background:var(--teal); color:#fff; }
.ap-step.rejected .num{ background:var(--red); color:#fff; }
.ap-step .lv{ font-weight:600; }
.ap-step .st{ margin-left:auto; font-size:11.5px; font-weight:600; }

/* ============================================================
   ATTACHMENTS widget
   ============================================================ */
.ar-attach-wrap{ margin:6px 0; }
.ar-att-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ar-att{ position:relative; display:flex; align-items:center; gap:9px; border:1px solid var(--hairline-strong); border-radius:var(--r-sm); background:rgba(255,255,255,0.8); padding:6px 12px 6px 8px; text-decoration:none; color:var(--ink); font-size:13px; max-width:240px; height:40px; box-sizing:border-box; cursor:pointer; transition:border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.ar-att:hover{ border-color:var(--teal); box-shadow:0 2px 8px rgba(15,128,128,0.12); }
/* Image attachments: same compact single-line chip, with a small square thumbnail */
.ar-att-img{ flex-direction:row; width:auto; max-width:240px; padding:6px 12px 6px 6px; }
.ar-att-img img{ width:28px; height:28px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }
.ar-att-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; font-size:12.5px; }
.ar-att-file i{ font-size:18px; color:var(--teal); flex-shrink:0; }
.ar-att-del{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:none; background:var(--red); color:#fff; font-size:13px; line-height:1; cursor:pointer; box-shadow:0 0 0 2px #fff; z-index:2; }
.ar-att-upload{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:600; color:var(--teal-deep); background:var(--teal-soft); padding:9px 15px; border-radius:999px; transition:background 0.2s var(--ease); }
.ar-att-upload:hover{ background:rgba(15,128,128,0.18); }
.ar-att-status{ font-size:12px; color:var(--ink-mute); margin-left:10px; }

/* Attachment lightbox — click an image to preview + download */
.ar-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(10,20,18,0.82); display:flex; align-items:center; justify-content:center; padding:24px; }
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){ .ar-lightbox{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } }
.ar-lightbox-inner{ max-width:92vw; max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ar-lightbox img{ max-width:92vw; max-height:78vh; border-radius:var(--r-md); box-shadow:0 20px 60px rgba(0,0,0,0.5); background:#fff; }
.ar-lightbox-bar{ display:flex; align-items:center; gap:10px; }
.ar-lightbox-name{ color:#fff; font-size:14px; max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-lightbox-close{ position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ar-lightbox-close:hover{ background:rgba(255,255,255,0.28); }


/* ============================================================
   LEFT SIDEBAR NAVIGATION — refined, Claude-style
   ============================================================ */
:root{ --ar-sidebar-w:256px; --ar-sidebar-collapsed-w:72px; }

.ar-sidebar.ar-nav{
  position:fixed; top:0; left:0; bottom:0; width:var(--ar-sidebar-w);
  background:var(--glass-strong, rgba(255,255,255,0.68));
  backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  border-right:1px solid rgba(255,255,255,0.5); border-bottom:none;
  z-index:60; overflow:hidden;
  box-shadow:var(--glass-edge), 1px 0 30px rgba(20,30,28,0.06);
  transition:width 0.26s var(--ease), transform 0.26s var(--ease);
}
/* Soft teal + red glow behind the nav, giving depth beneath the glass. */
.ar-sidebar.ar-nav::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(300px 220px at 18% 6%, rgba(15,128,128,0.22), transparent 70%),
    radial-gradient(340px 260px at 82% 94%, rgba(224,34,61,0.16), transparent 72%),
    radial-gradient(260px 220px at 60% 48%, rgba(37,184,176,0.10), transparent 75%);
}
.ar-sidebar .ar-nav-inner{ position:relative; z-index:1; }
.ar-sidebar .ar-nav-inner{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  max-width:none; margin:0; padding:0; gap:0; height:100%;
}

/* Top zone: brand + collapse */
.ar-sidebar-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:18px 16px 14px; border-bottom:1px solid var(--hairline); flex-shrink:0;
}
.ar-sidebar .ar-brand{ padding:0; margin:0; border:none; display:flex; align-items:center; gap:10px; min-width:0; }
.ar-sidebar .ar-brand-logo{ height:28px; width:auto; flex-shrink:0; }
.ar-sidebar .ar-brand-suffix{ font-weight:600; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.ar-sidebar-collapse{
  border:none; background:transparent; color:var(--ink-mute); font-size:18px; cursor:pointer;
  padding:6px; border-radius:var(--r-sm); flex-shrink:0; display:flex; transition:background 0.2s var(--ease), color 0.2s var(--ease);
}
.ar-sidebar-collapse:hover{ background:rgba(20,30,28,0.06); color:var(--ink); }

/* Scrollable middle — fills all available height so every item is reachable
   without hidden overflow, and content is distributed rather than bunched. */
.ar-nav-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:10px 10px 8px; display:flex; flex-direction:column; }
/* The primary menu takes the space it needs; the Updates + Account groups that
   follow are pushed to sit just below it, and any leftover space stays at the
   very bottom (above the pinned user card) instead of appearing as a gap
   between menu items. */
.ar-nav-scroll > .ar-nav-links{ flex:0 0 auto; }
.ar-nav-scroll > .ar-nav-section{ flex:0 0 auto; }
.ar-nav-scroll > .ar-nav-link{ flex:0 0 auto; }
/* Push the Account section (last section label + its links) to the bottom,
   using the empty space, so Change password / Log out sit at the foot of the
   list and the gap disappears. */
.ar-nav-scroll > .ar-nav-section.ar-nav-section-account{ margin-top:auto; }
.ar-nav-scroll::-webkit-scrollbar{ width:6px; }
.ar-nav-scroll::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:var(--r-sm); }

/* Section labels — quiet, muted */
.ar-nav-section{
  font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-mute); padding:14px 12px 5px; margin:0; opacity:0.75;
}
.ar-nav-scroll > .ar-nav-section:first-child{ padding-top:4px; }

/* Nav links — minimal, calm, neutral hover, teal-tinted active */
.ar-sidebar .ar-nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:1px; }
.ar-sidebar .ar-nav-link{
  display:flex; align-items:center; gap:11px; width:100%; justify-content:flex-start; position:relative;
  padding:9px 11px; border-radius:var(--r-sm); font-size:14px; font-weight:500;
  color:var(--ink); text-decoration:none; border:none; background:rgba(20,30,28,0.03);
  cursor:pointer; text-align:left; margin-bottom:3px;
  transition:background 0.14s var(--ease), color 0.14s var(--ease), transform 0.12s var(--ease), box-shadow 0.14s var(--ease);
}
.ar-sidebar .ar-nav-link i{ font-size:18px; flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); text-align:center; transition:color 0.14s var(--ease), background 0.14s var(--ease); }
.ar-sidebar .ar-nav-link:hover{ transform:translateX(2px); box-shadow:0 3px 10px -4px rgba(20,30,28,0.18); }

/* Per-module coloured tiles — each nav item gets its own soft hue + matching
   icon chip, so modules are easy to tell apart at a glance. Colour is picked
   by the link's href via [href*=...] so it works in every nav branch. */
.ar-sidebar .ar-nav-link[href*="dashboard"]      { background:rgba(15,128,128,0.09); }
.ar-sidebar .ar-nav-link[href*="dashboard"] i    { background:rgba(15,128,128,0.15); color:var(--teal-deep); }
.ar-sidebar .ar-nav-link[href*="home"]           { background:rgba(15,128,128,0.09); }
.ar-sidebar .ar-nav-link[href*="home"] i         { background:rgba(15,128,128,0.15); color:var(--teal-deep); }
.ar-sidebar .ar-nav-link[href*="index"]          { background:rgba(37,184,176,0.10); }
.ar-sidebar .ar-nav-link[href*="index"] i        { background:rgba(37,184,176,0.18); color:#0a7a74; }
.ar-sidebar .ar-nav-link[href*="assets"]         { background:rgba(56,132,255,0.10); }
.ar-sidebar .ar-nav-link[href*="assets"] i       { background:rgba(56,132,255,0.16); color:#2f6fe0; }
.ar-sidebar .ar-nav-link[href*="people"]         { background:rgba(155,89,214,0.10); }
.ar-sidebar .ar-nav-link[href*="people"] i       { background:rgba(155,89,214,0.16); color:#8b46c8; }
.ar-sidebar .ar-nav-link[href*="admin_requests"] { background:rgba(217,119,6,0.10); }
.ar-sidebar .ar-nav-link[href*="admin_requests"] i{ background:rgba(217,119,6,0.16); color:#b45309; }
.ar-sidebar .ar-nav-link[href*="create_ticket"], .ar-sidebar .ar-nav-link[href*="create_admin_request"]{ background:rgba(20,160,120,0.10); }
.ar-sidebar .ar-nav-link[href*="create_ticket"] i, .ar-sidebar .ar-nav-link[href*="create_admin_request"] i{ background:rgba(20,160,120,0.16); color:#14875f; }
.ar-sidebar .ar-nav-link[href*="categor"]        { background:rgba(100,116,139,0.10); }
.ar-sidebar .ar-nav-link[href*="categor"] i      { background:rgba(100,116,139,0.16); color:#556070; }
.ar-sidebar .ar-nav-link[href*="approval"], .ar-sidebar .ar-nav-link[href*="approvals"]{ background:rgba(13,148,136,0.10); }
.ar-sidebar .ar-nav-link[href*="approval"] i, .ar-sidebar .ar-nav-link[href*="approvals"] i{ background:rgba(13,148,136,0.16); color:#0d9488; }
.ar-sidebar .ar-nav-link[href*="rooms"]          { background:rgba(202,138,4,0.10); }
.ar-sidebar .ar-nav-link[href*="rooms"] i        { background:rgba(202,138,4,0.16); color:#a16207; }
.ar-sidebar .ar-nav-link[href*="poll"]           { background:rgba(219,39,119,0.09); }
.ar-sidebar .ar-nav-link[href*="poll"] i         { background:rgba(219,39,119,0.15); color:#be185d; }
.ar-sidebar .ar-nav-link[href*="users"]          { background:rgba(37,99,235,0.10); }
.ar-sidebar .ar-nav-link[href*="users"] i        { background:rgba(37,99,235,0.16); color:#1d4ed8; }
.ar-sidebar .ar-nav-link[href*="roles"]          { background:rgba(124,58,237,0.10); }
.ar-sidebar .ar-nav-link[href*="roles"] i        { background:rgba(124,58,237,0.16); color:#6d28d9; }
.ar-sidebar .ar-nav-link[href*="audit"]          { background:rgba(71,85,105,0.10); }
.ar-sidebar .ar-nav-link[href*="audit"] i        { background:rgba(71,85,105,0.16); color:#475569; }
.ar-sidebar .ar-nav-link[href*="system_reset"]   { background:rgba(224,34,61,0.09); }
.ar-sidebar .ar-nav-link[href*="system_reset"] i { background:rgba(224,34,61,0.15); color:var(--red); }
.ar-sidebar .ar-nav-link[href*="change_password"]{ background:rgba(100,116,139,0.09); }
.ar-sidebar .ar-nav-link[href*="change_password"] i{ background:rgba(100,116,139,0.15); color:#556070; }
.ar-sidebar .ar-nav-switch{ background:rgba(15,128,128,0.10); color:var(--teal-deep); }
.ar-sidebar .ar-nav-switch i{ background:rgba(15,128,128,0.16); color:var(--teal-deep); }
.ar-sidebar .ar-nav-bell{ background:rgba(37,184,176,0.10); }
.ar-sidebar .ar-nav-bell i{ background:rgba(37,184,176,0.18); color:#0a7a74; }

/* Active: stronger teal wash + teal marker so the current page still stands out */
.ar-sidebar .ar-nav-link.ar-active{ background:var(--teal-soft) !important; color:var(--teal-deep); font-weight:600; position:relative; }
/* Module 2: 3px teal rail — "where am I" readable in peripheral vision */
.ar-sidebar .ar-nav-link.ar-active::after{
  content:""; position:absolute; left:-10px; top:20%; bottom:20%;
  width:3px; border-radius:999px; background:var(--teal);
}
.ar-sidebar .ar-nav-link.ar-active i{ background:var(--teal) !important; color:#fff !important; }
.ar-sidebar .ar-nav-link.ar-active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--teal);
}
.ar-sidebar .ar-nav-logout{ background:rgba(224,34,61,0.08); }
.ar-sidebar .ar-nav-logout i{ background:rgba(224,34,61,0.14); color:var(--red); }
.ar-sidebar .ar-nav-logout:hover{ background:rgba(224,34,61,0.14); color:var(--red); }

/* Notification row */
.ar-nav-bell{ position:relative; }
.ar-nav-bell-badge{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ar-nav-bell.has-unread i{ color:var(--red); }

/* Bottom account zone */
.ar-sidebar .ar-nav-account{
  flex-shrink:0; padding:12px; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:stretch;
}
.ar-sidebar .ar-nav-user{ display:flex; align-items:center; gap:10px; max-width:none; padding:6px 4px; }
.ar-nav-avatar{
  width:32px; height:32px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--teal-soft); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.ar-nav-user-meta{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.ar-nav-user-name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-nav-user-role{ font-size:11.5px; color:var(--ink-mute); }

/* Content shifts to make room for the sidebar (logged-in pages only) */
body{ transition:padding-left 0.26s var(--ease); }
@media (min-width:901px){
  body.ar-has-sidebar{ padding-left:var(--ar-sidebar-w); }
  body.ar-has-sidebar.ar-sidebar-collapsed{ padding-left:var(--ar-sidebar-collapsed-w); }
  /* Hide the floating hamburger on desktop — the sidebar is always present. */
  body.ar-has-sidebar .ar-sidebar-toggle{ display:none; }
}

/* Collapsed to icons (desktop) */
@media (min-width:901px){
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav{ width:var(--ar-sidebar-collapsed-w); }
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-text,
  body.ar-sidebar-collapsed .ar-sidebar .ar-brand-suffix,
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-section,
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-user-meta,
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-bell-badge{ display:none; }
  body.ar-sidebar-collapsed .ar-sidebar-top{ justify-content:center; padding:16px 8px 14px; flex-direction:column; gap:10px; }
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-link{ justify-content:center; padding:11px; gap:0; }
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-link.ar-active::before{ display:none; }
  body.ar-sidebar-collapsed .ar-sidebar .ar-nav-user{ justify-content:center; padding:6px; }
  body.ar-sidebar-collapsed .ar-nav-scroll{ padding:12px 10px; }
  /* Expand button (in collapsed mode, the top toggle re-expands) */
  body.ar-sidebar-collapsed .ar-sidebar-top{ position:relative; }

  /* --- Hover to expand: when collapsed, hovering the rail slides it open
         as an overlay (floating above content, so the page doesn't shift),
         then retracts when the cursor leaves. Saved preference is untouched. --- */
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover{
    width:var(--ar-sidebar-w);
    box-shadow:var(--glass-edge), 6px 0 40px rgba(20,30,28,0.18);
  }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-text,
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-brand-suffix,
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-section,
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-bell-badge{ display:block; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-user-meta{ display:flex; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-links{ display:flex; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-sidebar-top{ flex-direction:row; justify-content:space-between; padding:18px 16px 14px; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-link{ justify-content:flex-start; padding:8px 11px; gap:11px; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-link.ar-active::before{ display:block; }
  body.ar-sidebar-collapsed .ar-sidebar.ar-nav:hover .ar-nav-user{ justify-content:flex-start; padding:6px 4px; }
}

/* Hamburger toggle — used on mobile (and desktop collapsed re-open via the top area) */
.ar-sidebar-toggle{
  position:fixed; top:14px; left:12px; z-index:70;
  width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--hairline);
  background:var(--glass-strong, #fff); backdrop-filter:blur(12px); color:var(--teal-deep);
  font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-1, 0 4px 14px rgba(20,30,28,0.1)); transition:background 0.2s var(--ease);
}
.ar-sidebar-toggle:hover{ background:var(--teal-soft); }
.ar-sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(10,40,38,0.45); z-index:55; }

/* Mobile: sidebar slides in from the left */
@media (max-width:900px){
  body.ar-has-sidebar{ padding-left:0; }
  .ar-sidebar.ar-nav{ transform:translateX(-100%); width:var(--ar-sidebar-w); box-shadow:0 0 44px rgba(0,0,0,0.22); }
  body.ar-sidebar-open .ar-sidebar.ar-nav{ transform:translateX(0); }
  body.ar-sidebar-open .ar-sidebar-overlay{ display:block; }
  .ar-sidebar .ar-nav-text, .ar-sidebar .ar-nav-section, .ar-sidebar .ar-nav-user-meta{ display:inline !important; }
  .ar-sidebar .ar-nav-user-meta{ display:flex !important; }
  /* Give page content room so the fixed hamburger doesn't overlap headings */
  body.ar-has-sidebar .ar-main{ padding-top:64px; }
}

/* ---------- "Needs my attention" panel ---------- */
/* Module 2: urgency treatment — impossible to miss without shouting */
.ar-attention{ max-width:900px; margin:0 auto 22px; background:linear-gradient(150deg, rgba(253,246,236,0.92), rgba(253,246,236,0.75)); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,0.65); border-left:4px solid var(--warning); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--elev-2); }
.ar-attention-head{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:var(--ink); margin-bottom:12px; }
.ar-attention-head i{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--warning); color:#fff; font-size:16px; }
.ar-attention-total{ margin-left:auto; background:var(--warning); color:#fff; font-size:12px; font-weight:700; min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
/* All-clear: the same box must read CALM, not urgent */
.ar-attention.is-clear{ background:var(--glass-strong,#fff); border-left:4px solid var(--teal); }
.ar-attention.is-clear .ar-attention-head i{ background:var(--teal); }
html.ar-solid .ar-attention.is-clear{ background:#ffffff !important; }
html.ar-solid .ar-attention{ background:var(--warning-bg) !important; }
.ar-attention-list{ display:flex; flex-direction:column; gap:8px; }
.ar-attention-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--hairline); background:rgba(255,255,255,0.6); text-decoration:none; color:var(--ink); transition:border-color 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease); }
.ar-attention-item:hover{ border-color:var(--teal); transform:translateX(2px); background:var(--teal-soft); }
.ar-attention-icon{ width:34px; height:34px; flex-shrink:0; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--teal-soft); color:var(--teal-deep); }
.ar-attn-warn .ar-attention-icon{ background:rgba(180,83,9,0.12); color:#b45309; }
.ar-attn-info .ar-attention-icon{ background:rgba(15,128,128,0.12); color:var(--teal-deep); }
.ar-attention-label{ flex:1; font-size:14px; }
.ar-attention-count{ flex-shrink:0; min-width:24px; height:24px; padding:0 8px; border-radius:999px; background:var(--teal); color:#fff; font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.ar-attn-warn .ar-attention-count{ background:#b45309; }
.ar-attention-go{ color:var(--ink-mute); font-size:16px; flex-shrink:0; }
.ar-attention-clear{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#16794f; padding:6px 2px; }
.ar-attention-clear i{ font-size:18px; }

/* ---------- Audit log ---------- */
.ar-audit-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--hairline); background:rgba(255,255,255,0.55); margin-bottom:8px; }
.ar-audit-icon{ color:var(--teal); font-size:14px; margin-top:3px; flex-shrink:0; }
.ar-audit-main{ flex:1; min-width:0; }
.ar-audit-summary{ margin:0 0 4px; font-size:14px; color:var(--ink); }
.ar-audit-meta{ margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--ink-mute); }
.ar-audit-tag{ background:var(--teal-soft); color:var(--teal-deep); padding:2px 8px; border-radius:999px; font-weight:600; }
.ar-audit-entity{ font-family:ui-monospace,monospace; opacity:0.85; }
.ar-audit-time{ opacity:0.8; }
.ar-audit-ip{ opacity:0.6; font-family:ui-monospace,monospace; }

/* ---------- Mobile polish (phones ≤560px) ---------- */
@media (max-width:560px){
  /* Stack filter rows so the search box gets full width instead of being cramped */
  .ar-filter-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .ar-filter-row input[type="text"],
  .ar-filter-row select{ width:100%; min-width:0; }

  /* Attention panel: a touch tighter, and keep long labels readable */
  .ar-attention{ padding:14px; border-radius:var(--r-md); }
  .ar-attention-item{ padding:10px 12px; gap:10px; }
  .ar-attention-icon{ width:30px; height:30px; font-size:15px; }
  .ar-attention-label{ font-size:13.5px; line-height:1.35; }

  /* Audit rows: let the meta chips breathe when they wrap */
  .ar-audit-meta{ gap:6px 8px; }
  .ar-audit-entity, .ar-audit-ip{ word-break:break-all; }

  /* Report/CSV export buttons: full width so they're easy to tap */
  .ar-hero + .ar-filter-row .ar-btn,
  .ar-filter-row .ar-btn{ width:100%; justify-content:center; }

  /* Tables that carry many columns: allow horizontal scroll rather than squish */
  .ar-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Very small phones (≤380px): trim hero and spacing so content leads */
@media (max-width:380px){
  .ar-hero h1{ font-size:20px; }
  .ar-hero p{ font-size:13px; }
  .ar-attention-count{ min-width:22px; height:22px; font-size:12px; }
}

/* ---------- Live Polls ---------- */
.ar-poll-wrap{ padding:0 4px; }
.ar-poll-code-input{ width:100%; padding:16px; font-size:26px; font-weight:700; text-align:center; letter-spacing:6px; text-transform:uppercase; border:2px solid rgba(255,255,255,0.75); border-radius:var(--r-md); background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--ink); }
.ar-poll-code-input:focus{ border-color:var(--teal); outline:none; }
.ar-poll-question{ font-size:22px; font-weight:700; color:var(--ink); margin:6px 0 16px; line-height:1.25; }
.ar-poll-status-pill{ display:inline-block; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; margin:0 0 6px; }
.ar-poll-status-pill.is-open{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-poll-status-pill.is-closed{ background:rgba(20,30,28,0.08); color:var(--ink-mute); }
.ar-poll-status-pill.is-draft{ background:rgba(180,83,9,0.12); color:#b45309; }
.ar-poll-options{ display:flex; flex-direction:column; gap:10px; }
.ar-poll-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:15px 16px; border:2px solid rgba(255,255,255,0.75); border-radius:var(--r-md); background:rgba(255,255,255,0.62); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); cursor:pointer; font-size:15px; color:var(--ink); transition:border-color 0.15s, background 0.15s, transform 0.1s; }
.ar-poll-opt:hover{ border-color:var(--bright); }
.ar-poll-opt:active{ transform:scale(0.99); }
.ar-poll-opt.is-sel{ border-color:var(--teal); background:var(--teal-soft); }
.ar-poll-opt-check{ font-size:20px; color:var(--teal); display:flex; }
.ar-poll-result{ padding:12px 14px; border-radius:var(--r-md); background:rgba(20,30,28,0.03); border:1px solid var(--hairline); }
.ar-poll-result.is-mine{ border-color:var(--teal); background:var(--teal-soft); }
.ar-poll-result-top{ display:flex; justify-content:space-between; font-weight:600; font-size:14px; margin-bottom:7px; color:var(--ink); }
.ar-poll-pct{ color:var(--teal-deep); }
.ar-poll-bar{ height:10px; background:rgba(20,30,28,0.08); border-radius:999px; overflow:hidden; }
.ar-poll-bar-fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--bright)); border-radius:999px; transition:width 0.6s cubic-bezier(0.22,1,0.36,1); }
.ar-poll-count{ font-size:12px; color:var(--ink-mute); margin-top:5px; }
.ar-poll-meta{ text-align:center; font-size:13px; color:var(--ink-mute); margin-top:14px; }
.ar-poll-code-chip{ font-family:ui-monospace,monospace; font-weight:700; background:var(--ink); color:#fff; padding:2px 9px; border-radius:var(--r-sm); font-size:12px; letter-spacing:1px; }
.ar-poll-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ar-poll-opt-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.ar-poll-opt-row .ar-input{ flex:1; }
.ar-poll-toggles{ display:flex; flex-direction:column; gap:10px; }

/* Small shared utilities used by the poll UI */
.ar-check{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); cursor:pointer; }
.ar-check input{ width:17px; height:17px; accent-color:var(--teal); }
.ar-icon-btn{ border:1px solid rgba(255,255,255,0.7); background:rgba(255,255,255,0.66); border-radius:var(--r-sm); width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-mute); flex-shrink:0; }
.ar-icon-btn:hover{ border-color:var(--red); color:var(--red); }

@media (max-width:560px){
  .ar-poll-actions{ width:100%; }
  .ar-poll-actions .ar-btn, .ar-poll-actions a{ flex:1; justify-content:center; }
}

/* Poll share dialog */
.ar-share-link-row{ display:flex; gap:8px; margin-top:6px; }
.ar-share-link-row .ar-input{ flex:1; font-family:ui-monospace,monospace; font-size:13px; }
.ar-share-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.ar-share-actions .ar-btn{ flex:1; justify-content:center; }
@media (max-width:560px){ .ar-share-link-row{ flex-direction:column; } .ar-share-actions{ flex-direction:column; } }

/* ---------- Instant button feedback ---------- */
/* Immediate press response on tap — feels responsive even before the server replies */
.ar-pressed{ transform:scale(0.97) !important; transition:transform 0.06s ease !important; }
.ar-portal-card.ar-pressed, .ar-nav-link.ar-pressed{ transform:scale(0.985) !important; }

/* Busy state on form-submit buttons */
.ar-btn-busy{ pointer-events:none; opacity:0.85; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.ar-btn-spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.45); border-top-color:#fff;
  display:inline-block; animation:ar-spin 0.6s linear infinite; flex-shrink:0;
}
/* On light/outline buttons the spinner needs a darker track */
.ar-btn:not(.ar-btn-primary) .ar-btn-spinner{ border-color:rgba(15,128,128,0.3); border-top-color:var(--teal); }
@keyframes ar-spin{ to{ transform:rotate(360deg); } }

/* ---------- Backdrop-filter safety net ----------
   When JS detects that backdrop-filter is unsupported/broken (which can
   render as an opaque black box), <html> gets .no-backdrop and we strip
   every blur, falling back to solid/semi-transparent colours everywhere.
   This guarantees no "black square" behind any popup on any device. */
html.no-backdrop *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Ensure glassy surfaces stay readable once blur is removed (give them a
   solid-enough background instead of relying on the blur for contrast). */
/* Only when real blur is unavailable, apply a gentle neutral dim so the popup
   still separates from the page (kept light + subtle — never a hard square). */
html.no-backdrop .ar-modal{ background:rgba(20,32,30,0.28) !important; }
html.no-backdrop .ar-modal-box{ background:#ffffff !important; }
html.no-backdrop .ar-invite-results,
html.no-backdrop .ar-tab,
html.no-backdrop .ar-tabs,
html.no-backdrop .ar-card,
html.no-backdrop .ar-panel{ background:#ffffff !important; }
html.no-backdrop .ar-lightbox{ background:rgba(10,20,18,0.9) !important; }

/* ---------- Poll create: question-type picker ---------- */
.pc-types{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin-top:6px; }
.pc-type{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border:1.5px solid rgba(255,255,255,0.7); border-radius:var(--r-md); background:rgba(255,255,255,0.58); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:all 0.15s var(--ease); }
.pc-type i{ font-size:20px; color:var(--ink-mute); transition:color 0.15s var(--ease); }
.pc-type:hover{ border-color:var(--teal); transform:translateY(-1px); }
.pc-type.active{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-deep); }
.pc-type.active i{ color:var(--teal); }
.ar-poll-opt-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pc-correct{ display:none; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
.pc-correct input{ width:18px; height:18px; accent-color:var(--teal); cursor:pointer; }

/* ---------- Voter page: extra question types ---------- */
.v-textarea{ width:100%; padding:14px; border:1.5px solid rgba(15,128,128,0.25); border-radius:var(--r-md); font-size:16px; font-family:inherit; resize:vertical; outline:none; }
.v-textarea:focus{ border-color:var(--teal); }
.v-feed{ display:flex; flex-direction:column; gap:10px; }
.v-feed-card{ background:rgba(255,255,255,0.66); backdrop-filter:blur(14px) saturate(155%); -webkit-backdrop-filter:blur(14px) saturate(155%); border:1px solid var(--hairline); border-left:3px solid var(--teal); border-radius:var(--r-md); padding:12px 14px; font-size:15px; box-shadow:0 2px 8px -4px rgba(10,40,38,0.15); animation:v-pop 0.3s ease; }
.v-empty{ text-align:center; color:var(--ink-mute); padding:24px; font-size:15px; }
.v-cloud{ display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; align-items:center; padding:20px 10px; }
.v-cloud-word{ font-weight:700; color:var(--teal-deep); line-height:1.1; animation:v-pop 0.3s ease; }
.v-cloud-word:nth-child(3n){ color:var(--teal); }
.v-cloud-word:nth-child(3n+1){ color:#be185d; }
@keyframes v-pop{ from{ transform:scale(0.8); opacity:0; } to{ transform:scale(1); opacity:1; } }
.v-rating-pick{ display:flex; gap:6px; justify-content:center; padding:12px 0; flex-wrap:wrap; }
.v-star{ background:none; border:none; cursor:pointer; font-size:34px; color:#d8dede; padding:2px; transition:transform 0.1s ease, color 0.15s ease; }
.v-star:hover{ transform:scale(1.15); }
.v-star.on{ color:#f5b301; }
.v-rating-hint{ text-align:center; color:var(--ink-mute); font-size:14px; margin-top:4px; }
.v-rating-result{ text-align:center; padding:16px 0; }
.v-rating-avg{ font-size:46px; font-weight:800; color:var(--teal-deep); line-height:1; }
.v-rating-avg span{ font-size:22px; color:var(--ink-mute); font-weight:600; }
.v-rating-stars{ font-size:26px; color:#f5b301; margin:8px 0; }
.v-res.correct{ border:1.5px solid #16a34a; background:rgba(22,163,74,0.06); border-radius:var(--r-md); padding:8px 10px; }

/* License nav tile */
.ar-sidebar .ar-nav-link[href*="licenses"]   { background:rgba(79,70,229,0.10); }
.ar-sidebar .ar-nav-link[href*="licenses"] i { background:rgba(79,70,229,0.16); color:#4f46e5; }

/* Poll share: email scope + cherry-pick */
.ar-share-email-box{ margin-top:16px; padding:14px; background:var(--wash); border-radius:var(--r-md); }
.ar-scope-row{ display:flex; gap:16px; flex-wrap:wrap; }
.ar-radio{ display:inline-flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
.ar-people-list{ max-height:220px; overflow-y:auto; border:1px solid rgba(255,255,255,0.7); border-radius:var(--r-sm); background:rgba(255,255,255,0.6); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); }
.ar-person{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--hairline); }
.ar-person:last-child{ border-bottom:none; }
.ar-person small{ color:var(--ink-mute); }

/* Home: My devices + My licenses side by side */
.ar-my-columns{ display:flex; flex-wrap:wrap; gap:24px; align-items:start; }
.ar-my-columns > div{ flex:1 1 340px; min-width:0; }  /* each fills; alone = full width */
.ar-my-columns .ar-myasset-grid{ grid-template-columns:1fr; }  /* single column inside each half */
@media (max-width:820px){ .ar-my-columns{ display:block; } .ar-my-columns > div{ margin-bottom:26px; } }

/* Request modals: redesigned device + licence */
.ar-req-lead{ color:var(--ink-soft); font-size:13.5px; margin:0 0 16px; line-height:1.5; }
.ar-req-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.ar-catalogue{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.ar-cat-pick{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:rgba(255,255,255,0.55); border:1.5px solid rgba(255,255,255,0.7); border-radius:var(--r-md); cursor:pointer; transition:all .15s var(--ease); }
.ar-cat-pick:hover{ border-color:var(--teal); }
.ar-cat-pick input{ width:18px; height:18px; accent-color:var(--teal); flex-shrink:0; }
.ar-cat-pick-main{ display:flex; flex-direction:column; gap:2px; flex:1; }
.ar-cat-pick.full{ opacity:0.55; cursor:not-allowed; }
.ar-cat-full{ font-size:11px; font-weight:700; color:var(--red); background:rgba(224,34,61,0.1); padding:2px 9px; border-radius:999px; }

/* Licence request rows (admin) */
.ar-lic-req{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.65); border-left:3px solid var(--amber); border-radius:var(--r-md); margin-bottom:8px; }
.ar-lic-req-main{ flex:1; min-width:200px; }
.ar-lic-req-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* ============================================================
   Glassmorphism pillars — the two remaining request sections
   (approval CTA + detailed form) on Need support / Admin requests.
   True glass: blur + saturation, light hairline edge, layered depth.
   ============================================================ */
.ar-glass-pillar{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.38)) !important;
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,0.65) !important;
  border-top-color:rgba(255,255,255,0.85) !important;   /* light catches the top edge */
  border-radius:20px;
  box-shadow:
    0 24px 48px -20px rgba(10,90,90,0.25),
    0 8px 20px -8px rgba(10,90,90,0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);
  overflow:hidden;
}
/* soft light streak across the glass */
.ar-glass-pillar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 45%, transparent 60%);
}
a.ar-glass-pillar{ transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
a.ar-glass-pillar:hover{
  transform:translateY(-2px);
  box-shadow:
    0 30px 56px -20px rgba(10,90,90,0.32),
    0 10px 24px -8px rgba(10,90,90,0.15),
    inset 0 1px 0 rgba(255,255,255,0.75);
}
/* teal aurora behind the pillars so the glass refracts something */
#view-request{ position:relative; }
#view-request::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-40px; left:-8%; width:55%; height:340px;
  background:radial-gradient(closest-side, rgba(37,184,176,0.22), transparent 70%);
  filter:blur(10px);
}
#view-request::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:120px; right:-10%; width:50%; height:380px;
  background:radial-gradient(closest-side, rgba(15,128,128,0.16), transparent 70%);
  filter:blur(12px);
}
/* inputs sit ON the glass: slightly more opaque so text stays crisp */
.ar-glass-pillar select, .ar-glass-pillar textarea, .ar-glass-pillar input[type="text"]{
  background:rgba(255,255,255,0.72);
}
.ar-glass-pillar select:focus, .ar-glass-pillar textarea:focus{
  background:rgba(255,255,255,0.92);
}
/* fallback: no backdrop-filter support = solid enough to read */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ar-glass-pillar{ background:rgba(255,255,255,0.92) !important; }
}
/* space between the two pillars */
.ar-approval-cta.ar-glass-pillar{ margin-bottom:22px; }
@media (prefers-reduced-motion: reduce){
  a.ar-glass-pillar{ transition:none; }
  a.ar-glass-pillar:hover{ transform:none; }
}

/* ============================================================
   Solid mode — one mechanism, three triggers:
   1. html.no-backdrop  — browser can't render backdrop-filter
   2. html.ar-solid     — user asked (toggle), or OS asked
                          (prefers-reduced-transparency / contrast)
   Glass becomes calm, opaque surfaces; nothing else changes.
   ============================================================ */
html.ar-solid *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.ar-solid .ar-panel, html.no-backdrop .ar-panel,
html.ar-solid .ar-card, html.no-backdrop .ar-card,
html.ar-solid .ar-stat,
html.ar-solid .ar-modal-box,
html.ar-solid .ar-bell-panel,
html.ar-solid .ar-bell-head,
html.ar-solid .ar-glass-pillar,
html.ar-solid .ar-asset-table,
html.ar-solid .ar-myasset,
html.ar-solid .ar-poll-opt,
html.ar-solid .ar-poll-code-input,
html.ar-solid .pc-type,
html.ar-solid .v-feed-card,
html.ar-solid .ar-people-list,
html.ar-solid .ar-swap-side,
html.ar-solid .ar-lic-req,
html.ar-solid .ar-cat-pick,
html.ar-solid .ar-pe-card,
html.ar-solid .ar-lic-card,
html.ar-solid .ar-lic-stat,
html.ar-solid .ar-icon-btn{
  background:#ffffff !important;
}
html.ar-solid .ar-tabs{ background:#eceeec !important; }
html.ar-solid .ar-tab.active{ background:#ffffff !important; }
html.ar-solid .ar-nav{ background:rgba(255,255,255,0.97) !important; }
/* aurora glows add nothing without glass — remove noise */
html.ar-solid #view-request::before,
html.ar-solid #view-request::after,
html.ar-solid .ar-glass-pillar::before{ display:none !important; }

/* ============================================================
   Mobile optimisation — Android & iOS browsers
   ============================================================ */

/* iOS/Android niceties that cost nothing on desktop */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
input, select, textarea, button{ -webkit-tap-highlight-color:transparent; }

/* Notched iPhones (with viewport-fit=cover): keep content out of the notch
   and the home-indicator strip. Falls back to 0 everywhere else. */
body{
  padding-left:env(safe-area-inset-left, 0);
  padding-right:env(safe-area-inset-right, 0);
}
.ar-nav{ padding-top:env(safe-area-inset-top, 0); }
.ar-modal{ padding-bottom:max(16px, env(safe-area-inset-bottom, 0)); }

@media (max-width:640px), (pointer:coarse){
  /* iOS zooms the page when a focused field's font is under 16px.
     16px inputs on touch devices kill that zoom-jump for good. */
  .ar-field input, .ar-field select, .ar-field textarea,
  .ar-input, .ar-select, textarea, .ar-input-pill{
    font-size:16px !important;
  }

  /* Comfortable thumb targets (Android/iOS guidelines: ≥44-48px). */
  .ar-btn{ min-height:44px; }
  .ar-btn-sm{ min-height:40px; padding-top:8px; padding-bottom:8px; }
  .ar-icon-btn{ width:44px; height:44px; }
  .ar-nav-link{ min-height:44px; min-width:44px; justify-content:center; }
  .ar-person, .ar-cat-pick{ min-height:44px; }
  .ar-tab{ min-height:42px; }
}

@media (max-width:640px){
  /* Modals: full-friendly on small screens — never taller than the
     visible viewport (dvh tracks the iOS collapsing address bar),
     body scrolls inside, buttons stay reachable. */
  .ar-modal{ padding:10px; align-items:flex-end; }
  .ar-modal-box{ max-width:100%; max-height:92dvh; border-radius:18px 18px 14px 14px; }
  .ar-modal-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:calc(92dvh - 60px); }

  /* Panels & heroes: tighter padding so content wins on a small screen */
  .ar-panel{ padding:20px 16px; }
  .ar-hero{ padding:22px 18px; }
  .ar-hero h1{ font-size:22px; }

  /* Request footers: stack buttons full-width for thumbs */
  .ar-req-foot{ flex-direction:column-reverse; }
  .ar-req-foot .ar-btn{ width:100%; }

  /* Glass pillars breathe less on mobile */
  .ar-glass-pillar{ border-radius:var(--r-lg); }

  /* Kill any accidental horizontal scroll */
  html, body{ overflow-x:hidden; }
}


/* ============================================================
   Module 1 foundations: keyboard focus + disabled states
   ============================================================ */
/* One visible focus ring for every interactive element (WCAG 2.4.7).
   :focus-visible only fires for keyboard, so mouse users see nothing new. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:inherit;
}
/* Cards that act as links need the ring too */
.ar-portal-card:focus-visible, .ar-hub-tool:focus-visible{ outline-offset:3px; }

/* Disabled buttons: previously undefined anywhere in the portal */
.ar-btn:disabled, .ar-btn[disabled], .ar-btn[aria-disabled="true"]{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:auto;      /* keep cursor feedback */
  transform:none !important;
  box-shadow:none !important;
}

/* ============================================================
   Module 3: ONE status-pill anatomy portal-wide.
   Legacy classes (.ar-dev-status, .ar-status-badge,
   .ar-poll-status-pill) are aliased onto this spec so existing
   markup keeps working — three anatomies become one.
   ============================================================ */
.ar-pill, .ar-dev-status, .ar-status-badge, .ar-poll-status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0;
  line-height:1.4;
}
/* Leading 8px dot when the pill has no icon of its own */
.ar-pill::before, .ar-dev-status::before, .ar-status-badge::before, .ar-poll-status-pill::before{
  content:""; width:8px; height:8px; border-radius:999px; background:currentColor; flex-shrink:0;
}
.ar-pill:has(i)::before, .ar-dev-status:has(i)::before{ display:none; }
.ar-dev-status i, .ar-pill i{ font-size:13px; }

/* Tones — semantic tokens only, no inline hex */
.ar-pill.ok,   .ar-dev-status.ok,   .ar-status-badge.ok,   .ar-poll-status-pill.is-open { background:var(--success-bg); color:var(--success); }
.ar-pill.warn, .ar-dev-status.wait, .ar-dev-status.warn, .ar-status-badge.warn { background:var(--warning-bg); color:var(--warning); }
.ar-pill.bad,  .ar-dev-status.prob, .ar-dev-status.bad, .ar-status-badge.bad  { background:var(--danger-bg);  color:var(--danger); }
.ar-pill.info, .ar-dev-status.info, .ar-status-badge.info { background:var(--blue-soft);  color:var(--blue); }
.ar-pill.mute, .ar-dev-status.mute, .ar-status-badge.mute, .ar-poll-status-pill.is-closed { background:rgba(20,30,28,0.07); color:var(--ink-soft); }

/* ============================================================
   Module 6: skeleton loading states.
   Shimmer replaces "Loading…" text — content areas appear
   instantly with placeholder shapes, so pages feel faster and
   nothing pops in. Respects prefers-reduced-motion.
   ============================================================ */
.ar-skel{
  position:relative; overflow:hidden;
  background:rgba(20,30,28,0.07);
  border-radius:var(--r-sm);
}
.ar-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  transform:translateX(-100%);
  animation:ar-skel-sweep 1.2s ease-in-out infinite;
}
@keyframes ar-skel-sweep{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .ar-skel::after{ animation:none; }
}

.ar-skel-line{ height:12px; margin:6px 0; }
.ar-skel-line.w-30{ width:30%; } .ar-skel-line.w-50{ width:50%; } .ar-skel-line.w-70{ width:70%; }
.ar-skel-pill{ width:90px; height:22px; border-radius:999px; }
.ar-skel-ico{ width:40px; height:40px; border-radius:var(--r-sm); flex-shrink:0; }

/* Card placeholder shaped like .ar-myasset (device/license cards) */
.ar-skel-card{
  background:var(--glass, rgba(255,255,255,0.55));
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:16px;
}
.ar-skel-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ar-skel-card-head > div{ flex:1; }

/* Row placeholder for request lists */
.ar-skel-row{
  display:flex; align-items:center; gap:14px;
  background:var(--glass, rgba(255,255,255,0.55));
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:14px 16px; margin-bottom:8px;
}
.ar-skel-row > div{ flex:1; }
html.ar-solid .ar-skel-card, html.ar-solid .ar-skel-row{ background:#fff; }

/* ============================================================
   Module 7: inline-style elimination — spacing owned by classes.
   ============================================================ */
/* Section rhythm between dashboard blocks */
.ar-mt-section{ margin-top:var(--s-5); }
/* A section label inside a flex header row carries no margin of its own */
.ar-flex-between > .ar-section-label{ margin:0; text-align:left; }
/* Tight header-to-cards coupling in the My-columns area */
.ar-my-columns .ar-flex-between{ margin-bottom:var(--s-3); }
/* Compact empty state for inside cards/columns (default stays roomy) */
.ar-empty.compact{ padding:var(--s-5) var(--s-4); }
/* Scope row: one margin for all three use sites (was 2 different inline values) */
.ar-scope-row{ margin:var(--s-2) 0 var(--s-3); }
/* Small top gap utility (fields under a radio group etc.) */
.ar-mt-2{ margin-top:var(--s-2); }

/* ============================================================
   Module 8: Recent requests widget — "did anyone see my ticket?"
   answered on the dashboard itself.
   ============================================================ */
.ar-recent{ max-width:900px; margin:0 auto var(--s-5); }
.ar-recent .ar-flex-between{ margin-bottom:var(--s-3); }
.ar-recent-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.ar-recent-row{
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--glass, rgba(255,255,255,0.55));
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:12px 14px;
  text-decoration:none; color:var(--ink);
  transition:border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ar-recent-row:hover{ border-color:var(--teal); transform:translateX(2px); background:rgba(255,255,255,0.8); }
.ar-recent-ico{
  width:34px; height:34px; flex-shrink:0; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:var(--teal-soft); color:var(--teal-deep);
}
.ar-recent-ico.kind-admin{ background:var(--blue-soft); color:var(--blue); }
.ar-recent-main{ flex:1; min-width:0; }
.ar-recent-cat{ font-size:var(--text-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-recent-meta{ font-size:var(--text-xs); color:var(--ink-mute); }
.ar-recent-when{ font-size:var(--text-xs); color:var(--ink-mute); flex-shrink:0; }
.ar-recent .ar-view-all{ font-size:var(--text-sm); color:var(--teal-deep); text-decoration:none; font-weight:600; }
.ar-recent .ar-view-all:hover{ text-decoration:underline; }
html.ar-solid .ar-recent-row{ background:#fff; }
@media (max-width:640px){ .ar-recent-when{ display:none; } }

/* ============================================================
   Module 9: persistent New-request CTA — one tap from anywhere.
   Sidebar button on desktop; floating action button on mobile
   (where the sidebar is off-canvas).
   ============================================================ */
.ar-newreq-wrap{ position:relative; margin:0 0 var(--s-3); }
.ar-newreq-btn{ width:100%; justify-content:center; gap:8px; }
/* Collapsed sidebar: icon-only, still tappable */
.ar-sidebar-collapsed .ar-newreq-btn{ padding-left:0; padding-right:0; }

.ar-newreq-pop{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:80;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.8); border-radius:var(--r-md);
  box-shadow:var(--elev-3);
  padding:6px;
  animation:ar-pop-in var(--dur-base) var(--ease);
}
@keyframes ar-pop-in{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }
.ar-newreq-pop a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; min-height:44px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); font-size:var(--text-base); font-weight:500;
}
.ar-newreq-pop a:hover, .ar-newreq-pop a:focus-visible{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-newreq-pop a i{ font-size:18px; color:var(--teal-deep); }

/* Mobile FAB: only when the sidebar is off-canvas */
.ar-fab{
  display:none;
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:70;
  width:56px; height:56px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(150deg, var(--teal), var(--teal-deep)); color:#fff;
  font-size:24px; box-shadow:var(--elev-3), var(--shadow-glow-teal);
  align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.ar-fab:active{ transform:scale(0.94); }
@media (max-width:900px){
  .ar-fab{ display:flex; }
  /* When opened from the FAB, the popover docks above it */
  .ar-newreq-pop.from-fab{
    position:fixed; left:auto; right:18px; top:auto;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    width:min(260px, calc(100vw - 36px));
  }
}
html.ar-solid .ar-newreq-pop{ background:#ffffff; }
@media (prefers-reduced-motion: reduce){ .ar-newreq-pop{ animation:none; } }

/* ============================================================
   Module 10: polish cluster
   ============================================================ */
/* License progress ring — % of term remaining at a glance */
.ar-ring{ flex-shrink:0; transform:rotate(-90deg); }
.ar-ring circle{ fill:none; stroke-width:3.5; }
.ar-ring .bg{ stroke:rgba(20,30,28,0.10); }
.ar-ring .fg{ stroke:currentColor; stroke-linecap:round; transition:stroke-dashoffset var(--dur-slow) var(--ease); }
.ar-ring-wrap{ display:inline-flex; align-items:center; gap:6px; }

/* First-run welcome strip */
.ar-welcome{
  max-width:900px; margin:0 auto var(--s-5);
  display:none; align-items:flex-start; gap:var(--s-3);
  background:linear-gradient(150deg, rgba(232,245,243,0.9), rgba(232,245,243,0.6));
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7); border-left:4px solid var(--teal);
  border-radius:var(--r-lg); padding:var(--s-4) var(--s-4);
}
.ar-welcome.show{ display:flex; }
.ar-welcome-ico{ width:34px; height:34px; flex-shrink:0; border-radius:999px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; }
.ar-welcome-body{ flex:1; font-size:var(--text-sm); color:var(--ink-soft); line-height:var(--lh-ui); }
.ar-welcome-body strong{ color:var(--ink); font-size:var(--text-base); display:block; margin-bottom:2px; }
.ar-welcome-x{ background:none; border:none; cursor:pointer; color:var(--ink-mute); font-size:18px; padding:6px; border-radius:var(--r-sm); min-width:36px; min-height:36px; }
.ar-welcome-x:hover{ background:rgba(20,30,28,0.06); color:var(--ink); }
html.ar-solid .ar-welcome{ background:var(--teal-mist); }

/* Announcements strip (Module 11 uses this) */
.ar-announce{
  max-width:900px; margin:0 auto var(--s-5);
  display:flex; align-items:flex-start; gap:var(--s-3);
  background:linear-gradient(150deg, rgba(233,243,252,0.9), rgba(233,243,252,0.6));
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7); border-left:4px solid var(--blue);
  border-radius:var(--r-lg); padding:var(--s-4);
}
.ar-announce-ico{ width:34px; height:34px; flex-shrink:0; border-radius:999px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.ar-announce-body{ flex:1; font-size:var(--text-sm); color:var(--ink-soft); line-height:var(--lh-ui); }
.ar-announce-body strong{ color:var(--ink); font-size:var(--text-base); display:block; margin-bottom:2px; }
html.ar-solid .ar-announce{ background:var(--blue-soft); }

/* Skip-to-content: invisible until keyboard focus (WCAG 2.4.1) */
.ar-skip{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--teal-deep); color:#fff; font-weight:600; font-size:var(--text-sm);
  padding:10px 16px; border-radius:var(--r-sm); text-decoration:none;
  transition:top var(--dur-base) var(--ease);
}
.ar-skip:focus-visible{ top:12px; outline:2px solid #fff; outline-offset:2px; }

/* Gentle page entrance (respects reduced motion via the global guard below) */
.ar-main{ animation:ar-page-in 0.18s var(--ease) both; }
@keyframes ar-page-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ar-main{ animation:none; } }

/* Dark-mode token stubs — intentionally inert placeholders so a future
   dark theme is a token edit, not a rewrite. Values TBD with the brand.
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12100E; --ink:#ECEDEA; --ink-soft:#B9BFBB; --ink-mute:#9AA19C;
    --glass:rgba(30,36,34,0.55); --glass-strong:rgba(30,36,34,0.72);
    --hairline:rgba(255,255,255,0.09); --teal-soft:#123A38; --surface-2:rgba(255,255,255,0.04);
  }
}
*/

/* Module 12: spacing utility ladder — replaces the portal-wide inline margins */
.ar-mt-3{ margin-top:var(--s-3); }
.ar-mt-4{ margin-top:var(--s-4); }
.ar-mb-3{ margin-bottom:var(--s-3); }
.ar-mb-4{ margin-bottom:var(--s-4); }

/* ============================================================
   Phase 1B: attention chip band — triage at a glance.
   ============================================================ */
.ar-attn-band{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin:0 0 var(--s-4); }
.ar-attn-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--text-sm); font-weight:600; cursor:pointer;
  padding:8px 14px; min-height:38px; border-radius:999px;
  border:1px solid transparent; background:var(--surface-2); color:var(--ink-soft);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ar-attn-chip i{ font-size:16px; }
.ar-attn-chip .ar-attn-chip-n{ font-weight:700; }
.ar-attn-chip:hover{ transform:translateY(-1px); box-shadow:var(--elev-1); }
.ar-attn-chip.chip-danger{ background:var(--danger-bg); color:var(--danger); }
.ar-attn-chip.chip-warn{ background:var(--warning-bg); color:var(--warning); }
.ar-attn-chip.chip-info{ background:var(--blue-soft); color:var(--blue); }
.ar-attn-chip.is-selected{ box-shadow:0 0 0 2px currentColor inset; }
.ar-attn-clear .ar-btn{ min-height:38px; }
@media (max-width:640px){ .ar-attn-band{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .ar-attn-chip{ flex-shrink:0; } }

/* ============================================================
   Phase 2: compact, collapsible ticket rows.
   Header stays ~64px and scannable; the notes thread, composer,
   email and attachments live inside a <details> collapsed by
   default — same markup and handlers, far less scrolling.
   ============================================================ */
.ar-row-compact{ padding:0; overflow:hidden; }
.ar-row-details{ }
.ar-row-summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:var(--s-3);
  padding:14px 18px; min-height:64px;
  transition:background var(--dur-base) var(--ease);
}
.ar-row-summary::-webkit-details-marker{ display:none; }
.ar-row-summary:hover{ background:rgba(15,128,128,0.04); }
.ar-row-summary-main{ flex:1; min-width:0; }
.ar-row-summary-main .ar-row-title{ margin:4px 0 0; font-size:var(--text-base); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-row-summary-side{ display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }
.ar-row-chip{
  display:inline-flex; align-items:center; gap:3px;
  font-size:var(--text-xs); font-weight:600; color:var(--ink-mute);
  background:var(--surface-2); border-radius:999px; padding:3px 9px;
}
.ar-row-chip i{ font-size:13px; }
.ar-assignee{
  width:28px; height:28px; flex-shrink:0; border-radius:999px;
  background:var(--teal-soft); color:var(--teal-deep);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}
.ar-age-badge{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700; color:var(--ink-mute);
  background:var(--surface-2); border-radius:999px; padding:2px 8px;
}
.ar-age-badge.overdue{ background:var(--danger-bg); color:var(--danger); }
.ar-age-badge i{ font-size:12px; }
.ar-row-chev{ color:var(--ink-mute); font-size:18px; transition:transform var(--dur-base) var(--ease); }
.ar-row-details[open] .ar-row-chev{ transform:rotate(180deg); }
.ar-row-expand{ padding:0 18px 16px; animation:ar-expand-in var(--dur-base) var(--ease); }
.ar-row-expand .ar-row-sub{ margin-top:0; }
@keyframes ar-expand-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ar-row-expand{ animation:none; } .ar-row-chev{ transition:none; } }
/* open row gets a subtle emphasis so you know which is expanded */
.ar-row-details[open]{ background:rgba(15,128,128,0.02); }
.ar-row-details[open] > .ar-row-summary{ border-bottom:1px solid var(--hairline); }
@media (max-width:640px){
  .ar-row-summary-main .ar-row-title{ white-space:normal; }
  .ar-row-summary{ padding:12px 14px; }
}

/* ============================================================
   Phase 4: keyboard navigation — selected row + shortcuts help.
   ============================================================ */
.ar-row-selected{ box-shadow:0 0 0 2px var(--teal) inset; border-radius:var(--r-lg); }
.ar-row-selected .ar-row-summary{ background:rgba(15,128,128,0.05); }

.ar-keys-help .ar-keys-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.ar-keys-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); font-size:var(--text-sm); }
.ar-keys-row kbd{
  font-family:inherit; font-size:var(--text-xs); font-weight:700;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--hairline);
  border-bottom-width:2px; border-radius:6px; padding:3px 8px; min-width:64px; text-align:center;
}
.ar-keys-row span{ color:var(--ink-soft); }

/* ============================================================
   Phase 4: error & reconnecting states for the admin queues.
   ============================================================ */
.ar-error-state{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  padding:var(--s-7) var(--s-4); text-align:center;
  background:var(--glass, rgba(255,255,255,0.55));
  border:1px solid var(--hairline); border-radius:var(--r-lg);
}
.ar-error-state i{ font-size:34px; color:var(--danger); }
.ar-error-state p{ margin:0; color:var(--ink-soft); font-size:var(--text-base); max-width:340px; }

.ar-reconnect{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--warning-bg); color:var(--warning);
  font-size:var(--text-sm); font-weight:600;
  padding:6px 14px; border-radius:999px;
  margin:0 auto var(--s-3); width:fit-content;
  animation:ar-reconnect-pulse 1.4s ease-in-out infinite;
}
.ar-reconnect i{ font-size:15px; }
@keyframes ar-reconnect-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
@media (prefers-reduced-motion: reduce){ .ar-reconnect{ animation:none; } }
.ar-empty .ar-btn{ margin-top:var(--s-2); }

/* ============================================================
   Collapsible navigation groups (enterprise sidebar pattern).
   A quiet group header with a chevron; the body holds the links.
   Reuses .ar-nav-link untouched — only the grouping is new.
   ============================================================ */
.ar-nav-group{ margin:2px 0; }
.ar-nav-group-head{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-radius:var(--r-sm);
  font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-mute); user-select:none;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ar-nav-group-head::-webkit-details-marker{ display:none; }
.ar-nav-group-head:hover{ background:rgba(20,30,28,0.05); color:var(--ink-soft); }
.ar-nav-group-chev{ font-size:15px; transition:transform var(--dur-base) var(--ease); opacity:0.7; }
.ar-nav-group[open] > .ar-nav-group-head .ar-nav-group-chev{ transform:rotate(90deg); }
.ar-nav-group-body{ display:flex; flex-direction:column; gap:2px; padding:2px 0 4px; }
/* subtle indent so grouped links read as children of their header */
.ar-nav-group-body .ar-nav-link{ padding-left:14px; }
.ar-nav-group-body .ar-nav-link.ar-active{ padding-left:11px; } /* keep active rail aligned */

/* Collapsed (icon-rail) sidebar: hide group headers, show only link icons,
   and force every group open so all icons remain reachable. */
body.ar-sidebar-collapsed .ar-nav-group-head{ display:none; }
body.ar-sidebar-collapsed .ar-nav-group-body{ padding:0; }
body.ar-sidebar-collapsed .ar-nav-group-body .ar-nav-link{ padding-left:0; }
body.ar-sidebar-collapsed .ar-nav-group{ margin:0; }

@media (prefers-reduced-motion: reduce){ .ar-nav-group-chev{ transition:none; } }

/* ============================================================
   System configuration page (admin/system_config.php)
   ============================================================ */
.ar-cfg-panel{ margin-top:16px; }
.ar-toggle-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px;
  background:var(--surface, #fff); border:1px solid var(--hairline); border-radius:var(--r-md, 12px);
  font-size:14px; color:var(--ink); cursor:pointer; transition:border-color var(--dur-fast) var(--ease);
}
.ar-toggle-row:hover{ border-color:var(--brand-teal, #0F8080); }
.ar-toggle-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brand-teal, #0F8080); flex-shrink:0; cursor:pointer; }
.ar-callout{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-md, 12px);
  background:rgba(224,34,61,0.06); border:1px solid rgba(224,34,61,0.18); color:#8a1020; font-size:13px; line-height:1.5;
}
.ar-callout i{ font-size:18px; flex-shrink:0; margin-top:1px; }
.ar-cfg-links{ display:flex; flex-direction:column; gap:8px; }

/* Deep-link focus highlight: briefly draws attention to the row a notification
   linked to (e.g. the specific meeting an invitee was sent to). */
.ar-row-focus{
  animation: arRowFocus 2.6s var(--ease);
  scroll-margin-top:90px;
}
@keyframes arRowFocus{
  0%   { background:rgba(15,128,128,0.18); box-shadow:0 0 0 2px rgba(15,128,128,0.45); }
  70%  { background:rgba(15,128,128,0.10); box-shadow:0 0 0 2px rgba(15,128,128,0.25); }
  100% { background:transparent; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){ .ar-row-focus{ animation:none; box-shadow:0 0 0 2px rgba(15,128,128,0.4); } }