/* ============================================================
   MAQMS — Design System v2
   Soft glassmorphism · light & dark · smooth motion
   ============================================================ */

:root{
  --blue-900:#0b3d91; --blue-800:#0f4fb5; --blue-700:#1462d6;
  --blue-600:#1e6fe6; --blue-500:#2e7ff0; --blue-100:#e8f1fd; --blue-50:#f4f8fe;

  /* Light theme surfaces */
  --bg:#eef2f8;
  --bg-grad:radial-gradient(1200px 600px at 15% -10%, #dce9fb 0%, transparent 60%),
            radial-gradient(1000px 500px at 110% 10%, #e7e2f9 0%, transparent 55%),
            linear-gradient(180deg,#f2f5fa,#e9eef6);
  --glass:rgba(255,255,255,.74);
  --glass-strong:rgba(255,255,255,.88);
  --glass-border:rgba(255,255,255,.7);
  --glass-inner:rgba(255,255,255,.45);
  --text:#17202e; --text-2:#48566b; --text-3:#7b8794;
  --line:rgba(23,32,46,.09); --line-2:rgba(23,32,46,.05);
  --sidebar-bg:rgba(11,33,74,.97);
  --accent:#1462d6; --accent-2:#2e7ff0;
  --grad-primary:linear-gradient(135deg,#1462d6,#2e7ff0);
  --glow:0 0 0 transparent;
  --green:#149457; --green-bg:rgba(20,148,87,.12);
  --red:#d23b3b; --red-bg:rgba(210,59,59,.11);
  --amber:#b3760a; --amber-bg:rgba(179,118,10,.13); --amber-hi:rgba(179,118,10,.20);
  --violet:#6d4fd6; --violet-bg:rgba(109,79,214,.12);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --shadow-sm:0 2px 8px rgba(16,42,89,.06);
  --shadow-md:0 8px 24px rgba(16,42,89,.10);
  --shadow-lg:0 18px 50px rgba(16,42,89,.16);
  --dur:220ms; --ease:cubic-bezier(.4,0,.2,1);
  --sidebar-w:256px;

  /* Backdrop photo treatment */
  --bg-image:url('../img/background-logo.png');
  --bg-veil:rgba(246,248,252,.44);   /* light wash — photo stays clearly visible */
  /* Surfaces that carry the photo themselves (popups, chat, login card).
     The tint keeps text crisp while the picture still reads through. */
  --surface-tint:rgba(255,255,255,.82);
  --surface-photo:linear-gradient(var(--surface-tint),var(--surface-tint)),var(--bg-image);
  --bg-blur:0px;
  --bg-bright:1;
  --bg-sat:1;
  --bg-drift:0px;                    /* set by JS: slight parallax, then stops */
}

html[data-theme="dark"]{
  --bg:#0a0f1c;
  --bg-grad:radial-gradient(1100px 600px at 12% -12%, rgba(30,90,200,.22) 0%, transparent 60%),
            radial-gradient(900px 500px at 108% 8%, rgba(120,80,220,.16) 0%, transparent 55%),
            linear-gradient(180deg,#0b1120,#080d18);
  --glass:rgba(22,32,54,.72);
  --glass-strong:rgba(24,35,60,.88);
  --glass-border:rgba(140,170,230,.16);
  --glass-inner:rgba(255,255,255,.04);
  --text:#e8eefb; --text-2:#a9b8d4; --text-3:#6d7e9d;
  --line:rgba(160,190,255,.10); --line-2:rgba(160,190,255,.05);
  --sidebar-bg:rgba(9,15,30,.97);
  --accent:#4c8dff; --accent-2:#6ea6ff;
  --grad-primary:linear-gradient(135deg,#1c56c4,#2a6fdd);
  --glow:0 0 24px rgba(76,141,255,.28);
  --blue-100:rgba(76,141,255,.16); --blue-50:rgba(76,141,255,.08);
  --green:#2fd282; --green-bg:rgba(47,210,130,.13);
  --red:#ff6b6b; --red-bg:rgba(255,107,107,.12);
  --amber:#f0b34c; --amber-bg:rgba(240,179,76,.13); --amber-hi:rgba(240,179,76,.20);
  --violet:#a48bff; --violet-bg:rgba(164,139,255,.14);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 22px 60px rgba(0,0,0,.6);
  --bg-veil:rgba(8,12,24,.70);       /* dark wash — photo stays clearly visible */
  --surface-tint:rgba(12,18,34,.84);
  --bg-bright:.42;                   /* and the photo itself is dimmed */
  --bg-sat:.85;
}

*{box-sizing:border-box}
/* Some resets override the hidden attribute; enforce it. */
[hidden]{display:none !important}
html,body{height:100%}
html{background:var(--bg)}
html{scroll-behavior:smooth}
/* Real scroll containers: keep their scrolling to themselves. */
.chat-body,.modal-box,.sidebar-nav{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}

/* Tables scroll sideways only. `overflow-x:auto` also makes the VERTICAL axis a
   scroll container, so `overscroll-behavior:contain` here would swallow up/down
   swipes made over the rows and stop the page scrolling at all. Contain the
   horizontal axis only and let vertical gestures chain to the page. */
.table-wrap{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}
.viewer-list{scroll-behavior:smooth}
body{
  margin:0; font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:transparent;
  color:var(--text); -webkit-font-smoothing:antialiased; font-size:15px;
  transition:background-color 350ms var(--ease), color 350ms var(--ease);
  position:relative;
}

/* ---------------- Backdrop ----------------
   Two fixed layers sit behind everything: the centre photo, and a veil that
   mutes it so text stays readable. Fixed (not background-attachment:fixed,
   which janks badly on iOS) and taller than the viewport so the small parallax
   drift can never expose an edge. */
/* Layer 1: the photograph only. Do NOT stack the page gradient here — its
   final linear-gradient stop is opaque and would hide the photo entirely. */
body::before{
  content:'';position:fixed;left:0;right:0;top:-70px;bottom:-70px;z-index:-2;
  background-image:var(--bg-image);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  transform:translate3d(0, var(--bg-drift), 0);
  pointer-events:none;
}
/* Layer 2: a translucent veil that mutes the photo so text stays readable. */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:var(--bg-veil);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  body::before{transform:none}
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(76,141,255,.28)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

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

/* Surfaces that show the photograph directly, with a tint for legibility. */
.photo-surface,
.modal-box,
.chat-panel,
.login-card{
  background-image:var(--surface-photo);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

/* ---------------- Glass primitives ---------------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-inner);
}

/* ---------------- Loading screen ---------------- */
.loader-screen{position:fixed;inset:0;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;
  transition:opacity 300ms var(--ease)}
.loader-screen.hide{opacity:0;pointer-events:none}
.loader-logo{width:80px;height:80px;margin-bottom:18px;animation:breathe 1.6s ease-in-out infinite}
.loader-logo img{width:100%;height:100%;object-fit:contain;border-radius:20px;display:block;
  filter:drop-shadow(0 10px 30px rgba(20,98,214,.35))}
.loader-title{font-weight:700;font-size:18px;color:var(--text);letter-spacing:.2px}
.loader-sub{font-size:13px;color:var(--text-3);margin-top:4px}
.loader-bar{width:170px;height:3px;background:var(--line);border-radius:3px;margin-top:22px;overflow:hidden}
.loader-bar::after{content:'';display:block;width:40%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:loadbar 1.1s ease-in-out infinite}
@keyframes loadbar{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes rowGlow{0%{background:rgba(76,141,255,.22)}100%{background:transparent}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,210,130,.55)}50%{box-shadow:0 0 0 6px rgba(47,210,130,0)}}

/* ---------------- Login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:392px;border-radius:var(--r-xl);padding:38px 34px;text-align:center;
  animation:fadeUp 420ms var(--ease);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-inner)}
.login-logo{width:68px;height:68px;margin:0 auto 14px}
.login-logo img{width:100%;height:100%;object-fit:contain;border-radius:18px;display:block;
  filter:drop-shadow(0 8px 22px rgba(20,98,214,.3))}
.login-org{font-size:12.5px;color:var(--text-3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.login-title{font-size:19px;font-weight:700;color:var(--text);margin:2px 0 24px}
.login-error{background:var(--red-bg);color:var(--red);font-size:13px;border-radius:var(--r-sm);
  padding:11px 13px;margin-bottom:16px;text-align:left;border:1px solid rgba(210,59,59,.2)}

/* ---------------- Fields ---------------- */
.field{text-align:left;margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.field input[type=text],.field input[type=password],.field input[type=tel],.field input[type=number],
.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:14.5px;background:var(--glass-inner);color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{
  background:rgba(10,16,30,.4)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(76,141,255,.14), var(--glow)}
.field.error input,.field.error select{border-color:var(--red);background:var(--red-bg)}
.field-error{color:var(--red);font-size:12px;margin-top:5px}
.field select option{background:var(--bg);color:var(--text)}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13.5px;color:var(--text-2)}
.checkbox-row input{width:16px;height:16px;accent-color:var(--accent)}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:var(--r-md);padding:11px 18px;font-weight:600;font-size:14px;cursor:pointer;
  transition:transform 140ms var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), filter var(--dur)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--grad-primary);color:#fff;
  box-shadow:0 6px 18px rgba(30,111,230,.35)}
.btn-primary:hover{box-shadow:0 8px 24px rgba(30,111,230,.45), var(--glow)}
.btn-secondary{background:var(--glass);color:var(--text);border:1px solid var(--glass-border);}
.btn-secondary:hover{background:var(--glass-strong)}
.btn-danger{background:linear-gradient(135deg,#d23b3b,#e05656);color:#fff;box-shadow:0 6px 18px rgba(210,59,59,.3)}
.btn-success{background:linear-gradient(135deg,#149457,#1fb56d);color:#fff;box-shadow:0 6px 18px rgba(20,148,87,.3)}
.btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--text-2)}
.btn-outline:hover{background:var(--glass);border-color:var(--glass-border)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-block{width:100%}

/* ---------------- App shell ---------------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);color:#eaf1ff;flex-shrink:0;display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;transition:transform 300ms var(--ease);
  background:var(--sidebar-bg);
  border-right:1px solid rgba(140,170,230,.12)}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:22px 18px;border-bottom:1px solid rgba(140,170,230,.12)}
.sidebar-brand .logo-box{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.92);padding:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sidebar-brand .logo-box img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar-brand .brand-text .t1{font-size:13px;font-weight:700;line-height:1.2}
.sidebar-brand .brand-text .t2{font-size:10.5px;color:rgba(220,232,255,.6);text-transform:uppercase;letter-spacing:.5px}
.sidebar-nav{flex:1;padding:14px 12px;overflow-y:auto}
.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  color:rgba(226,236,255,.75);font-size:14px;font-weight:500;margin-bottom:4px;
  transition:background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur)}
.sidebar-nav a i{width:18px;text-align:center;font-size:15px}
.sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav a.active{background:linear-gradient(135deg,rgba(76,141,255,.9),rgba(110,166,255,.85));
  color:#fff;box-shadow:0 6px 20px rgba(40,110,230,.4)}
.sidebar-footer{padding:14px 12px;border-top:1px solid rgba(140,170,230,.12)}
.logout-btn{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;
  padding:12px 14px;border-radius:var(--r-md);display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:14px;font-weight:500;transition:background var(--dur)}
.logout-btn:hover{background:rgba(255,80,80,.18)}

.main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;
  position:sticky;top:0;z-index:50;
  background:var(--glass);
  border-bottom:1px solid var(--glass-border)}
.topbar-left{display:flex;align-items:center;gap:14px}
.hamburger{display:none;background:none;border:none;font-size:20px;color:var(--text-2);cursor:pointer;padding:6px}
.page-title{font-size:18px;font-weight:700;color:var(--text)}
.page-date{font-size:12.5px;color:var(--text-3);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-2)}

/* live indicator */
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--green);background:var(--green-bg);
  border:1px solid rgba(47,210,130,.25)}
.live-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(47,210,130,.85)}
.live-pill.offline{color:var(--text-3);background:var(--glass);border-color:var(--line)}
.live-pill.offline .dot{background:var(--text-3);animation:none}

/* theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-border);
  background:var(--glass);color:var(--text-2);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 200ms var(--ease), box-shadow var(--dur), color var(--dur)}
.theme-toggle:hover{transform:rotate(12deg) scale(1.06);color:var(--accent);box-shadow:var(--glow)}

.content{padding:26px 28px 60px;flex:1}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(6,10,22,.55);z-index:150;}
.sidebar-overlay.show{display:block}

/* ---------------- Cards ---------------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:24px}
.stat-card{border-radius:var(--r-lg);padding:20px 22px;animation:fadeUp 360ms var(--ease);
  background:var(--glass);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-inner);
  transition:transform 250ms var(--ease), box-shadow 250ms var(--ease)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md), var(--glow)}
.stat-card .sc-label{font-size:11.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.stat-card .sc-value{font-size:30px;font-weight:800;margin-top:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-card .sc-split{display:flex;gap:20px;margin-top:12px;font-size:12.5px;color:var(--text-2)}
.stat-card .sc-split b{color:var(--accent);font-weight:700}
.stat-card .sc-icon{float:right;width:42px;height:42px;border-radius:13px;background:var(--blue-100);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px}

/* ---------------- Panels ---------------- */
.panel{border-radius:var(--r-lg);overflow:hidden;animation:fadeUp 320ms var(--ease);
  background:var(--glass);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-inner)}
.panel-header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:17px 22px;border-bottom:1px solid var(--line)}
.panel-title{font-size:15.5px;font-weight:700;color:var(--text)}
.search-box{position:relative;min-width:220px;flex:1;max-width:330px}
.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:13px}
.search-box input{width:100%;padding:10px 13px 10px 34px;border:1.5px solid var(--line);
  border-radius:999px;font-size:13.5px;background:var(--glass-inner);color:var(--text);
  transition:border-color var(--dur), box-shadow var(--dur)}
html[data-theme="dark"] .search-box input{background:rgba(10,16,30,.4)}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(76,141,255,.13)}
.toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------------- Filter tabs (pill style) ---------------- */
.filter-tabs{display:flex;gap:6px;padding:14px 22px 0;flex-wrap:wrap}
.ftab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-2);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur), border-color var(--dur)}
.ftab:hover{background:var(--glass);color:var(--text)}
.ftab.active{background:var(--grad-primary);color:#fff;border-color:transparent;
  box-shadow:0 5px 16px rgba(30,111,230,.35)}
.ftab .cnt{min-width:21px;height:21px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;background:var(--blue-100);color:var(--accent)}
.ftab.active .cnt{background:rgba(255,255,255,.25);color:#fff}
.ftab .newdot{position:absolute;top:2px;right:4px;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 9px rgba(47,210,130,.95)}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{color:var(--text-3);font-weight:700;text-align:left;padding:12px 18px;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);
  background:var(--glass-inner);white-space:nowrap}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line-2);color:var(--text);vertical-align:middle}
tbody tr{transition:background 180ms var(--ease);animation:fadeIn 240ms var(--ease)}
tbody tr:hover{background:rgba(76,141,255,.07)}
tbody tr.clickable{cursor:pointer}
tbody tr.row-new{animation:rowGlow 2.2s var(--ease)}

/* ---------------- Assigned & waiting for their turn ---------------- */
/* A guest with khatmas assigned for today but not yet marked Done. The row
   stays tinted with a gold edge until Done clears the assignment — a steady
   state, not a flash, so it survives the 5-second refresh. */
tbody tr.row-waiting{background:var(--amber-bg)}
tbody tr.row-waiting:hover{background:var(--amber-hi)}
tbody tr.row-waiting td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
html[dir="rtl"] tbody tr.row-waiting td:first-child{box-shadow:inset -3px 0 0 var(--amber)}

/* The count itself, as a gold pill with a slowly breathing dot. */
.khatma-wait{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;
  color:var(--amber);background:var(--amber-bg);border:1px solid rgba(240,179,76,.3)}
.khatma-wait b{font-size:14px;font-weight:800}
.khatma-wait .kw-label{font-weight:600;opacity:.85;font-size:11px;text-transform:lowercase}
.kw-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;
  animation:waitPulse 2.6s var(--ease) infinite}
@keyframes waitPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(240,179,76,.55);opacity:1}
  50%{box-shadow:0 0 0 5px rgba(240,179,76,0);opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .kw-dot{animation:none}
}
.empty-state{padding:54px 20px;text-align:center;color:var(--text-3)}
.empty-state i{font-size:32px;color:var(--line);margin-bottom:12px;display:block}

tr.row-assign{cursor:pointer}
tr.row-assign:hover{background:rgba(76,141,255,.10)}
tr.row-assign:hover .name-link{color:var(--accent)}
.name-link{cursor:pointer;font-weight:600;color:var(--text);border-bottom:1.5px dashed transparent;
  transition:color var(--dur), border-color var(--dur)}
.name-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:700;border:1px solid transparent}
.badge-green{background:var(--green-bg);color:var(--green);border-color:rgba(47,210,130,.22)}
.badge-red{background:var(--red-bg);color:var(--red);border-color:rgba(255,107,107,.2)}
.badge-blue{background:var(--blue-100);color:var(--accent);border-color:rgba(76,141,255,.2)}
.badge-amber{background:var(--amber-bg);color:var(--amber);border-color:rgba(240,179,76,.22)}
.badge-violet{background:var(--violet-bg);color:var(--violet);border-color:rgba(164,139,255,.24)}
.badge-clickable{cursor:pointer;transition:transform 130ms var(--ease), box-shadow var(--dur)}
.badge-clickable:hover{box-shadow:0 3px 10px rgba(0,0,0,.12)}
.badge-clickable:active{transform:scale(.93)}
.badge-static{cursor:default}

.icon-btn{background:none;border:none;color:var(--text-3);cursor:pointer;padding:7px;border-radius:var(--r-sm);
  font-size:14px;transition:background var(--dur), color var(--dur), transform 140ms}
.icon-btn:hover{background:var(--glass);color:var(--accent);transform:translateY(-1px)}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red)}
.row-actions{display:flex;gap:5px;align-items:center}

/* ---------------- Period tabs (statistics) ---------------- */
.tabs{display:flex;gap:5px;padding:14px 22px 0;overflow-x:auto}
.tab-btn{padding:10px 17px;background:transparent;border:1px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur), border-color var(--dur)}
.tab-btn:hover{background:var(--glass);color:var(--text)}
.tab-btn.active{background:var(--grad-primary);color:#fff;
  border-color:transparent;box-shadow:0 5px 16px rgba(30,111,230,.35)}

/* ---------------- Modal ---------------- */
/* Overlays MUST be display:none when closed (JS sets flex on open). */
.modal-overlay{position:fixed;inset:0;background:rgba(8,12,24,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;
  opacity:0;transition:opacity 240ms var(--ease)}
.modal-overlay.show{opacity:1}
/* Header and footer stay put; only the body scrolls, so the action buttons are
   always reachable even on a short laptop screen. */
.modal-box{width:100%;max-width:470px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);
  background-color:transparent;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-inner);
  transform:scale(.93) translateY(8px);transition:transform 260ms var(--ease)}
.modal-overlay.show .modal-box{transform:scale(1) translateY(0)}
.modal-box.wide{max-width:650px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.modal-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text)}
.modal-close{background:none;border:none;font-size:16px;color:var(--text-3);cursor:pointer;padding:7px;
  border-radius:var(--r-sm);transition:background var(--dur), color var(--dur), transform 160ms}
.modal-close:hover{background:var(--glass);color:var(--text);transform:rotate(90deg)}
.modal-body{padding:22px 24px;overflow-y:auto;flex:1 1 auto;min-height:0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:17px 24px;
  border-top:1px solid var(--line);flex-shrink:0;
  background:var(--surface-tint);backdrop-filter:none}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.detail-item .dl{font-size:11px;color:var(--text-3);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.detail-item .dv{font-size:14px;color:var(--text);margin-top:4px;font-weight:600}
.detail-item.full{grid-column:1/-1}

/* ---------------- Toast ---------------- */
.toast-container{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:2000;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{color:#fff;padding:12px 21px;border-radius:999px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;opacity:0;
  transform:translateY(-12px) scale(.96);pointer-events:auto;
  transition:opacity 240ms var(--ease), transform 240ms var(--ease)}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast.success{background:linear-gradient(135deg,rgba(20,148,87,.95),rgba(31,181,109,.95))}
.toast.error{background:linear-gradient(135deg,rgba(200,50,50,.95),rgba(224,86,86,.95))}
.toast.info{background:linear-gradient(135deg,rgba(20,98,214,.95),rgba(46,127,240,.95))}

/* ---------------- Pagination ---------------- */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;
  border-top:1px solid var(--line)}
.pagination .pg-info{font-size:12.5px;color:var(--text-3)}
.pagination .pg-btns{display:flex;gap:8px}

/* ---------------- Confirm dialog ---------------- */
.confirm-box{max-width:370px;text-align:center;padding:28px 26px;display:block;overflow:auto}
.confirm-box i{font-size:32px;color:var(--amber);margin-bottom:12px}
.confirm-box h3{color:var(--text);margin:0 0 4px}
.confirm-box p{color:var(--text-2);font-size:14px;margin:6px 0 22px}
.confirm-actions{display:flex;gap:10px;justify-content:center}

.queue-number-big{font-size:20px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.count-anim{display:inline-block}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .detail-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .cards-grid{grid-template-columns:1fr}
  .panel-header{flex-direction:column;align-items:stretch}
  .search-box{max-width:none}
  .live-pill span.lbl{display:none}
}


/* ---------------- Chat ---------------- */
.chat-fab{
  position:fixed;isolation:isolate;z-index:900;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-primary);
  box-shadow:0 10px 30px rgba(30,111,230,.45);
  transition:transform 220ms var(--ease), box-shadow 240ms var(--ease)}
.chat-fab:hover{transform:translateY(-3px) scale(1.05)}
.chat-fab:active{transform:scale(.94)}
.chat-fab.bottom-right{right:26px;bottom:26px}
.chat-fab.middle-right{right:16px;top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:18px}
.chat-fab.middle-right:hover{transform:translateY(-50%) scale(1.06)}
/* Pulse + glow only while there are unread messages */
.chat-fab.has-unread::before{
  content:'';position:absolute;inset:0;border-radius:50%;background:rgba(76,141,255,.45);
  animation:chatRing 1.9s ease-out infinite;pointer-events:none;z-index:-1}
@keyframes chatRing{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.7);opacity:0}}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:#e03b3b;color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);box-shadow:0 3px 10px rgba(224,59,59,.5)}

/* ---------------- Jump-to-bottom button ---------------- */
/* Shown on any page long enough to scroll (guest lists, records, queue).
   Admin pages stack it above the chat button; on the viewer the chat sits
   mid-right, so there it takes the free bottom-right corner. */
.scroll-end-fab{
  position:fixed;z-index:880;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  color:var(--text);background-color:var(--glass-inner);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity 220ms var(--ease), transform 220ms var(--ease),
             background-color var(--dur), color var(--dur), border-color var(--dur)}
.scroll-end-fab.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.scroll-end-fab:hover{color:#fff;background:var(--grad-primary);border-color:transparent}
.scroll-end-fab:active{transform:scale(.92)}
.scroll-end-fab.above-chat{right:32px;bottom:98px}   /* chat FAB is 58px at bottom:26px */
.scroll-end-fab.corner{right:26px;bottom:26px}
html[dir="rtl"] .scroll-end-fab.above-chat{right:auto;left:32px}
html[dir="rtl"] .scroll-end-fab.corner{right:auto;left:26px}
@media (max-width:560px){
  .scroll-end-fab.above-chat{right:22px;bottom:82px}
  .scroll-end-fab.corner{right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-end-fab{transition:opacity 140ms linear}
}

.chat-panel{
  position:fixed;z-index:901;width:360px;max-width:calc(100vw - 32px);height:480px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;
  background-color:transparent;
  -webkit-backdrop-filter:blur(26px) saturate(1.45);backdrop-filter:blur(26px) saturate(1.45);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-inner);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity 260ms var(--ease), transform 260ms var(--ease)}
.chat-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.chat-panel.bottom-right{right:26px;bottom:96px}
.chat-panel.middle-right{right:16px;top:50%;transform:translateY(-46%) scale(.97)}
.chat-panel.middle-right.open{transform:translateY(-50%) scale(1)}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.chat-who{display:flex;align-items:center;gap:10px;min-width:0}
.chat-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-100);color:var(--accent);font-size:14px}
.chat-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.chat-status{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:5px;margin-top:2px}
.pres-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex-shrink:0}
.chat-status.online .pres-dot{background:var(--green);box-shadow:0 0 8px rgba(47,210,130,.8)}
.chat-status.online .pres-text{color:var(--green);font-weight:600}
.chat-head-actions{display:flex;gap:2px;flex-shrink:0}
.chat-icon-btn{background:none;border:none;color:var(--text-3);cursor:pointer;padding:7px;border-radius:9px;font-size:13px;
  transition:background var(--dur), color var(--dur)}
.chat-icon-btn:hover{background:var(--glass);color:var(--text)}
.chat-icon-btn.muted{color:var(--red)}

.chat-body{flex:1;overflow-y:auto;padding:14px 15px;display:flex;flex-direction:column;gap:9px}
.chat-empty{margin:auto;text-align:center;color:var(--text-3);font-size:13px;display:flex;flex-direction:column;gap:8px}
.chat-empty i{font-size:26px;opacity:.5}
.chat-daysep{align-self:center;font-size:10.5px;font-weight:700;color:var(--text-3);letter-spacing:.4px;
  background:var(--glass);border:1px solid var(--line);padding:3px 11px;border-radius:999px;margin:4px 0}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.45;position:relative;
  word-wrap:break-word;overflow-wrap:anywhere;animation:msgIn 240ms var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg.them{align-self:flex-start;background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:var(--grad-primary);box-shadow:0 4px 14px rgba(30,111,230,.28)}
.msg .mtime{display:block;font-size:10px;margin-top:4px;opacity:.72;text-align:right}

.chat-typing{display:flex;align-items:center;gap:4px;padding:0 16px 8px;color:var(--text-3);font-size:11.5px}
.chat-typing .tdot{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:tbounce 1.2s infinite}
.chat-typing .tdot:nth-child(2){animation-delay:.15s}
.chat-typing .tdot:nth-child(3){animation-delay:.3s}
.chat-typing .ttext{margin-left:4px}
@keyframes tbounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.chat-input{display:flex;gap:8px;align-items:flex-end;padding:11px 13px;border-top:1px solid var(--line);flex-shrink:0}
.chat-input textarea{flex:1;resize:none;max-height:104px;padding:10px 13px;border-radius:18px;font-size:13.5px;
  font-family:inherit;border:1.5px solid var(--line);background:var(--glass-inner);color:var(--text);
  transition:border-color var(--dur), box-shadow var(--dur)}
html[data-theme="dark"] .chat-input textarea{background:rgba(10,16,30,.45)}
.chat-input textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(76,141,255,.13)}
.chat-send{width:40px;height:40px;flex-shrink:0;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:14px;
  background:var(--grad-primary);box-shadow:0 5px 16px rgba(30,111,230,.35);
  transition:transform 160ms var(--ease)}
.chat-send:hover{transform:scale(1.07)}
.chat-send:active{transform:scale(.92)}
.chat-send:disabled{opacity:.5;cursor:not-allowed;transform:none}

@media (max-width:560px){
  .chat-panel{width:calc(100vw - 24px);height:calc(100vh - 130px);right:12px}
  .chat-panel.bottom-right{bottom:86px}
  .chat-panel.middle-right{top:auto;bottom:86px;transform:translateY(14px) scale(.97)}
  .chat-panel.middle-right.open{transform:translateY(0) scale(1)}
  .chat-fab.bottom-right{right:16px;bottom:16px}
}

/* ---------------- Viewer (phone-first) ---------------- */
.viewer-shell{max-width:680px;margin:0 auto;padding:14px 14px 120px}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-radius:var(--r-lg);margin-bottom:12px;
  background:var(--glass);border:1px solid var(--glass-border);}
.viewer-brand{display:flex;align-items:center;gap:9px;min-width:0}
.viewer-brand img{width:34px;height:34px;border-radius:10px;background:#fff;padding:3px;object-fit:contain;flex-shrink:0}
.viewer-brand .vt1{font-size:13px;font-weight:700;line-height:1.15}
.viewer-brand .vt2{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
.viewer-top-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}

.viewer-tabs{display:flex;gap:6px;position:sticky;top:0;z-index:60;padding:8px 0 10px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.viewer-tabs .ftab{flex:1;justify-content:center;padding:11px 8px;font-size:13px}

.viewer-list{display:flex;flex-direction:column;gap:8px}
/* Compact cards — short rows, not bulky blocks */
.vcard{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm);animation:fadeUp 240ms var(--ease);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease)}
.vcard:active{transform:scale(.99)}
.vcard.is-new{animation:rowGlow 2.2s var(--ease)}
.vcard-main{flex:1;min-width:0}
.vcard-name{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard-meta{display:flex;align-items:center;gap:7px;margin-top:3px;flex-wrap:wrap}
.vcard-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--blue-100);color:var(--accent)}
.vcard-chip.age{background:var(--amber-bg);color:var(--amber)}
.vcard-chip.note{background:var(--glass-inner);color:var(--text-2);cursor:pointer;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard-done{flex-shrink:0;padding:9px 15px;border-radius:999px;border:none;cursor:pointer;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#149457,#1fb56d);box-shadow:0 4px 14px rgba(20,148,87,.3);
  transition:transform 150ms var(--ease)}
.vcard-done:active{transform:scale(.93)}

.viewer-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:880;
  padding:13px 22px;border-radius:999px;border:none;cursor:pointer;color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:9px;
  background:var(--grad-primary);box-shadow:0 10px 30px rgba(30,111,230,.45)}
.viewer-fab:active{transform:translateX(-50%) scale(.95)}

/* Quick-amount buttons in the Done popup */
.amount-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.amount-quick button{flex:1;min-width:56px;padding:13px 6px;border-radius:var(--r-md);cursor:pointer;
  border:1.5px solid var(--line);background:var(--glass-inner);color:var(--text);font-size:15px;font-weight:700;
  transition:background var(--dur), border-color var(--dur), transform 140ms var(--ease)}
.amount-quick button:hover{border-color:var(--accent);color:var(--accent)}
.amount-quick button:active{transform:scale(.95)}
.amount-quick button.sel{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.amount-quick button.all{background:var(--green-bg);color:var(--green);border-color:rgba(47,210,130,.3)}
.amount-quick button.all.sel{background:linear-gradient(135deg,#149457,#1fb56d);color:#fff}

/* Viewer registers only Free/Live or Online — locked field look */
.locked-field{opacity:.75;pointer-events:none}
.lock-note{font-size:11.5px;color:var(--text-3);margin-top:5px}

/* Completed badge replaces the khatma numbers */
.badge-complete{background:var(--green-bg);color:var(--green);border-color:rgba(47,210,130,.28)}

/* Special-case queue row */
.special-row{background:var(--amber-bg) !important}
.special-tag{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--amber);
  background:var(--amber-bg);border:1px solid rgba(240,179,76,.35);padding:4px 10px;border-radius:999px}

/* Phones: keep the glass look but drop heavy blur on scrolling surfaces so
   scrolling stays smooth on mid-range devices. */
@media (max-width:820px){
  .vcard,.viewer-list,.panel,.stat-card,.table-wrap{}
  html[data-theme="dark"] .vcard,html[data-theme="dark"] .panel,html[data-theme="dark"] .stat-card{
    background:rgba(24,35,60,.80)}
  .vcard,.panel,.stat-card{background:rgba(255,255,255,.82)}
  html[data-theme="dark"] .viewer-top{background:rgba(24,35,60,.84)}
}


/* ---------------- Completed capsule with count ---------------- */
.badge-complete .cc{opacity:.85;font-weight:800;margin-inline-start:2px}

/* ---------------- Keyboard focus row ---------------- */
tr.kb-active, .vcard.kb-active{
  outline:2px solid var(--accent);outline-offset:-2px;
  background:rgba(76,141,255,.13) !important}
.shortcut-table{width:100%;border-collapse:collapse}
.shortcut-table td{padding:8px 6px;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--text-2)}
.shortcut-table td:first-child{width:86px}
kbd{display:inline-block;min-width:26px;text-align:center;padding:3px 8px;border-radius:7px;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--text);
  background:var(--glass-inner);border:1px solid var(--line);box-shadow:0 1px 0 var(--line)}

/* ---------------- Live pill: pending state ---------------- */
.live-pill.pending{color:var(--amber);background:var(--amber-bg);border-color:rgba(240,179,76,.3)}
.live-pill.pending .dot{background:var(--amber);box-shadow:0 0 7px rgba(240,179,76,.8)}

/* ---------------- Chat: mic + recording + voice bubbles ---------------- */
.chat-mic{width:40px;height:40px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  background:var(--glass-inner);color:var(--text-2);font-size:14px;
  transition:transform 160ms var(--ease), color var(--dur), border-color var(--dur)}
.chat-mic:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.chat-mic:active{transform:scale(.92)}

.chat-recording{display:flex;align-items:center;gap:10px;padding:11px 13px;border-top:1px solid var(--line);flex-shrink:0}
.chat-recording .rec-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;
  animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.35}}
.chat-recording .rec-time{font-size:13.5px;font-weight:700;color:var(--text);min-width:42px}
.rec-wave{display:flex;align-items:center;gap:3px;flex:1;height:22px}
.rec-wave i{display:block;width:3px;border-radius:2px;background:var(--accent);opacity:.65;
  animation:recWave 1s ease-in-out infinite}
.rec-wave i:nth-child(1){height:8px;animation-delay:0s}
.rec-wave i:nth-child(2){height:16px;animation-delay:.12s}
.rec-wave i:nth-child(3){height:22px;animation-delay:.24s}
.rec-wave i:nth-child(4){height:14px;animation-delay:.36s}
.rec-wave i:nth-child(5){height:9px;animation-delay:.48s}
@keyframes recWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

.msg.voice{padding:8px 10px;max-width:86%}
.msg.voice audio{display:block;width:220px;max-width:100%;height:36px}
.msg.voice .mtime{margin-top:3px}

/* ---------------- Bulk registration ---------------- */
.bulk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.bulk-paste{width:100%;min-height:140px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  line-height:1.6;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--glass-inner);color:var(--text);resize:vertical}
.bulk-paste:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(76,141,255,.13)}
.bulk-summary{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.bulk-preview{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.bulk-preview table{font-size:13px}
.bulk-preview tr.bad td{background:var(--red-bg)}
.bulk-preview tr.dup td{background:var(--amber-bg)}
.bulk-preview input{width:100%;padding:6px 8px;border-radius:7px;border:1px solid var(--line);
  background:transparent;color:var(--text);font-size:13px}
.bulk-preview input:focus{outline:none;border-color:var(--accent)}

/* ---------------- Settings ---------------- */
.settings-section{margin-bottom:22px}
.settings-section h3{font-size:14.5px;font-weight:700;margin:0 0 12px;color:var(--text)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lang-choice{display:flex;gap:8px;flex-wrap:wrap}
.lang-btn{padding:9px 16px;border-radius:999px;border:1px solid var(--line);cursor:pointer;
  background:transparent;color:var(--text-2);font-size:13.5px;font-weight:600;
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.lang-btn:hover{background:var(--glass);color:var(--text)}
.lang-btn.active{background:var(--grad-primary);color:#fff;border-color:transparent}

/* ---------------- Right-to-left (Arabic) ---------------- */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .sidebar{left:auto;right:0;border-right:none;border-left:1px solid rgba(140,170,230,.12)}
html[dir="rtl"] .main{margin-left:0;margin-right:var(--sidebar-w)}
html[dir="rtl"] .search-box i{left:auto;right:13px}
html[dir="rtl"] .search-box input{padding:10px 34px 10px 13px}
html[dir="rtl"] thead th, html[dir="rtl"] tbody td{text-align:right}
html[dir="rtl"] .modal-footer{justify-content:flex-start}
html[dir="rtl"] .stat-card .sc-icon{float:left}
html[dir="rtl"] .chat-fab.bottom-right{right:auto;left:26px}
html[dir="rtl"] .chat-panel.bottom-right{right:auto;left:26px}
html[dir="rtl"] .chat-fab.middle-right{right:auto;left:16px}
html[dir="rtl"] .chat-panel.middle-right{right:auto;left:16px}
html[dir="rtl"] .msg.me{align-self:flex-start;border-bottom-right-radius:16px;border-bottom-left-radius:5px}
html[dir="rtl"] .msg.them{align-self:flex-end;border-bottom-left-radius:16px;border-bottom-right-radius:5px}
html[dir="rtl"] .msg .mtime{text-align:left}
html[dir="rtl"] .by-viewer-dot{margin-right:0;margin-left:7px}
@media (max-width:980px){
  html[dir="rtl"] .sidebar{transform:translateX(100%)}
  html[dir="rtl"] .sidebar.open{transform:translateX(0)}
  html[dir="rtl"] .main{margin-right:0}
}


/* ---------------- Account markers ---------------- */
.acct-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;
  vertical-align:middle;margin-inline-end:6px;box-shadow:0 0 6px rgba(0,0,0,.18)}
.acct-dot.sm{width:7px;height:7px;margin-inline-end:4px}

/* Colour is set inline per account; the main admin's guests carry no dot at all. */
.by-viewer-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-inline-end:7px;vertical-align:middle;flex-shrink:0}

.dot-choice{display:flex;gap:9px;flex-wrap:wrap}
.dot-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:transform 160ms var(--ease), border-color var(--dur)}
.dot-swatch:hover{transform:scale(1.12)}
.dot-swatch.sel{border-color:var(--text);transform:scale(1.12);
  box-shadow:0 0 0 3px var(--glass-inner)}

/* Sender label above a run of messages in the shared room */
.msg-who{align-self:flex-start;display:flex;align-items:center;font-size:11.5px;font-weight:700;
  color:var(--text-3);margin:6px 0 -3px 4px}
html[dir="rtl"] .msg-who{align-self:flex-end;margin:6px 4px -3px 0}
.chat-status .pres-text{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px}


/* ---------------- Account capsule ----------------
   A small pill carrying the account's icon and name, tinted with their colour.
   The main administrator has no colour, so it falls back to the accent blue. */
.acct-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;
  border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.35;white-space:nowrap;
  background:var(--chip-bg,var(--blue-100));color:var(--chip-fg,var(--accent));
  border:1px solid var(--chip-bd,rgba(76,141,255,.28))}
.acct-chip i{font-size:11.5px;opacity:.95}
.acct-chip.sm{padding:2px 9px 2px 7px;font-size:11.5px}
.acct-chip.sm i{font-size:10.5px}
.topbar-right .acct-chip{margin-inline-start:2px}

/* ---------------- Print ----------------
   print_ticket.php is self-contained; nothing here affects it. */
.print-only{display:none}
@media print{
  @page{size:A4 portrait;margin:12mm}
  *,*::before,*::after{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
    animation:none !important;transition:none !important;}
  html,body{background:#fff !important;background-image:none !important;font-size:10.5px;color:#1b2430}
  body::before,body::after{display:none !important}
  .sidebar,.sidebar-overlay,.topbar,.toast-container,.hamburger,.search-box,.toolbar-actions,
  .tabs,.filter-tabs,.modal-overlay,.pagination,.sc-icon,.row-actions,.logout-btn,
  .panel-title i,.theme-toggle,.live-pill,.chat-fab,.chat-panel,.viewer-fab,.scroll-end-fab{display:none !important}
  .app-shell{display:block}
  .main{margin-left:0 !important}
  .content{padding:0 !important}
  .print-only{display:block}
  .print-header{display:flex;align-items:center;gap:11px;border-bottom:2px solid #0b3d91;
    padding-bottom:8px;margin-bottom:10px}
  .print-logo{width:42px;height:42px;object-fit:contain;flex-shrink:0}
  .print-sys{font-size:15px;font-weight:800;color:#0b3d91;line-height:1.2}
  .print-org{font-size:9px;color:#48566b;margin-top:3px}
  .print-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
  .print-title{font-size:13px;font-weight:700;color:#1b2430}
  .print-gen{font-size:9px;color:#7b8794;white-space:nowrap}
  .print-footer{margin-top:10px;padding-top:6px;border-top:1px solid #dbe2ea;font-size:8.5px;
    color:#7b8794;text-align:center}
  .print-signatures{display:flex;gap:60px;margin-top:30px;break-inside:avoid;page-break-inside:avoid}
  .sig-block{flex:1}
  .sig-line{border-bottom:1px solid #48566b;height:26px}
  .sig-label{font-size:9px;color:#48566b;margin-top:4px}
  .cards-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:6px !important;
    margin-bottom:12px !important}
  .stat-card{border:1px solid #dbe2ea !important;box-shadow:none !important;background:#fff !important;
    padding:7px 9px !important;border-radius:5px !important;break-inside:avoid;transform:none !important}
  .stat-card .sc-label{font-size:7.5px;color:#48566b}
  .stat-card .sc-value{font-size:16px;margin-top:1px;-webkit-text-fill-color:#0b3d91;color:#0b3d91;background:none}
  .stat-card .sc-split{margin-top:3px;font-size:8px;gap:10px;color:#48566b}
  .stat-card .sc-split b{color:#0b3d91}
  .panel{box-shadow:none !important;border:none !important;border-radius:0 !important;
    overflow:visible !important;background:#fff !important}
  .panel-header{padding:0 0 6px !important;border-bottom:none !important;display:block}
  .panel-title{font-size:12px;font-weight:700;color:#1b2430}
  .table-wrap{overflow:visible !important}
  table{width:100% !important;border-collapse:collapse}
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  thead th{background:#f4f6f9 !important;border:1px solid #dbe2ea !important;padding:5px 6px !important;
    font-size:8px !important;color:#48566b}
  tbody td{border:1px solid #e9edf2 !important;padding:5px 6px !important;font-size:9.5px !important;color:#1b2430}
  tbody tr:hover{background:transparent !important}
  tbody tr.row-waiting{background:transparent !important}
  tbody tr.row-waiting td:first-child{box-shadow:none !important}
  .kw-dot{animation:none !important}
  .badge{border:1px solid #dbe2ea;padding:1px 5px;font-size:8.5px;background:#fff !important}
  .badge-green{color:#149457}.badge-red{color:#d23b3b}.badge-blue{color:#0f4fb5}
  .badge-amber{color:#b3760a}.badge-violet{color:#6d4fd6}
  .empty-state{padding:20px !important;font-size:11px}
  .name-link{border-bottom:none;color:#1b2430}
}