/* ═══════════════════════════════════════════════════
   نظام تذاكر مدارس مدينة المعرفة — الأنماط الرئيسية
═══════════════════════════════════════════════════ */

/* ── المتغيرات: الوضع الداكن (الافتراضي) ─────────── */
:root, [data-theme="dark"] {
  --primary:        #1a4f8a;
  --primary-light:  #2563b0;
  --primary-dark:   #0f3060;
  --secondary:      #38bdf8;
  --accent:         #fbbf24;
  --accent-green:   #34d399;
  --accent-red:     #f87171;
  --accent-orange:  #fb923c;
  --accent-purple:  #a78bfa;
  --accent-pink:    #f472b6;
  --bg-body:        #080f1e;
  --bg-sidebar:     #0a1628;
  --bg-card:        #0d1e38;
  --bg-card-hover:  #112444;
  --bg-input:       #091525;
  --bg-topbar:      rgba(8,15,30,0.88);
  --bg-modal:       #0a1628;
  --border:         rgba(255,255,255,0.07);
  --border-md:      rgba(255,255,255,0.12);
  --border-active:  rgba(56,189,248,0.45);
  --text-primary:   #e8f0ff;
  --text-secondary: #94a3b8;
  --text-muted:     #4e6280;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.35);
  --shadow:         0 8px 32px rgba(0,0,0,.45);
  --shadow-lg:      0 20px 60px rgba(0,0,0,.6);
  --radius:         16px;
  --radius-sm:      10px;
  --transition:     all 0.28s cubic-bezier(0.4,0,0.2,1);
  --sidebar-w:      272px;
  --scrollbar-track:#091525;
  --scrollbar-thumb:#1a2f50;
}

/* ── الوضع الفاتح ──────────────────────────────────── */
[data-theme="light"] {
  --bg-body:        #f0f4fb;
  --bg-sidebar:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f5f8ff;
  --bg-input:       #f3f6fc;
  --bg-topbar:      rgba(255,255,255,0.92);
  --bg-modal:       #ffffff;
  --border:         rgba(0,0,0,0.07);
  --border-md:      rgba(0,0,0,0.12);
  --border-active:  rgba(56,189,248,0.6);
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow:         0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:      0 20px 60px rgba(0,0,0,.15);
  --scrollbar-track:#e8edf5;
  --scrollbar-thumb:#c2cee0;
}

/* ── إعادة ضبط ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
html { scroll-behavior:smooth; }
body {
  font-family:'Cairo',sans-serif;
  background:var(--bg-body);
  color:var(--text-primary);
  min-height:100vh;
  direction:rtl;
  overflow-x:hidden;
  transition:background .35s, color .35s;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%, rgba(26,79,138,.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 85%, rgba(56,189,248,.08) 0%, transparent 50%);
}
a { text-decoration:none; color:inherit; }

/* ── الشريط الجانبي ──────────────────────────────────── */
.sidebar {
  position:fixed; right:0; top:0; bottom:0; width:var(--sidebar-w);
  background:var(--bg-sidebar); border-left:1px solid var(--border);
  z-index:200; display:flex; flex-direction:column;
  box-shadow:var(--shadow); transition:background .35s, border-color .35s, transform .3s;
}
.sidebar-logo {
  padding:22px 18px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.logo-icon {
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-light),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; box-shadow:0 4px 14px rgba(37,99,176,.35);
}
.logo-title { font-size:13px; font-weight:800; line-height:1.35; }
.logo-sub { font-size:10px; color:var(--text-muted); margin-top:1px; }
.sidebar-nav { flex:1; padding:10px; overflow-y:auto; }
.nav-section {
  font-size:9.5px; font-weight:700; color:var(--text-muted);
  letter-spacing:.9px; text-transform:uppercase; padding:14px 10px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition);
  color:var(--text-secondary); font-size:13.5px; font-weight:500;
  margin-bottom:2px; position:relative; user-select:none;
}
.nav-item:hover { background:rgba(56,189,248,.08); color:var(--text-primary); }
.nav-item.active {
  background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(26,79,138,.12));
  color:var(--secondary); border:1px solid rgba(56,189,248,.18);
}
.nav-item.active::before {
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; background:var(--secondary); border-radius:3px;
}
.nav-item i { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
.nav-badge {
  margin-right:auto; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:20px; min-width:20px; text-align:center;
  background:var(--accent-red); color:#fff;
}
.sidebar-footer { padding:12px 10px; border-top:1px solid var(--border); flex-shrink:0; }
.user-card {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); background:var(--bg-input); cursor:pointer;
  border:1px solid var(--border); transition:var(--transition);
}
.user-card:hover { background:var(--bg-card-hover); border-color:var(--border-md); }

/* ── Avatar ──────────────────────────────────────────── */
.avatar {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
.avatar.green  { background:linear-gradient(135deg,#059669,var(--accent-green)); }
.avatar.purple { background:linear-gradient(135deg,#6d28d9,var(--accent-purple)); }
.user-name { font-size:12.5px; font-weight:700; }
.user-role { font-size:10.5px; color:var(--text-muted); }

/* ── المحتوى الرئيسي ──────────────────────────────────── */
.main-content { margin-right:var(--sidebar-w); min-height:100vh; position:relative; z-index:1; display:flex; flex-direction:column; }
.page-content { padding:28px; flex:1; }
.mb-3 { margin-bottom:16px; }

/* ── الشريط العلوي ──────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:100;
  background:var(--bg-topbar); backdrop-filter:blur(18px) saturate(1.8);
  border-bottom:1px solid var(--border); padding:0 28px; height:64px;
  display:flex; align-items:center; gap:14px;
}
.topbar-title { font-size:18px; font-weight:800; flex:1; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle { position:relative; width:56px; height:30px; cursor:pointer; flex-shrink:0; }
.theme-toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; background:var(--bg-input);
  border:1px solid var(--border-md); border-radius:30px;
  display:flex; align-items:center; padding:0 3px; transition:var(--transition);
}
[data-theme="light"] .toggle-track { background:linear-gradient(135deg,#fde68a,#fbbf24); border-color:#f59e0b; }
.toggle-thumb {
  width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25); transition:var(--transition);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.toggle-thumb::before { content:'🌙'; }
[data-theme="light"] .toggle-thumb { transform:translateX(-26px); }
[data-theme="light"] .toggle-thumb::before { content:'☀️'; }

/* ── الأزرار ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
  border-radius:var(--radius-sm); font-family:'Cairo',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; border:none;
  transition:var(--transition); white-space:nowrap;
}
.btn-primary { background:linear-gradient(135deg,var(--primary-light),var(--secondary)); color:#fff; box-shadow:0 3px 12px rgba(56,189,248,.25); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 5px 18px rgba(56,189,248,.35); }
.btn-outline { background:transparent; color:var(--text-secondary); border:1px solid var(--border-md); }
.btn-outline:hover { background:var(--bg-card-hover); color:var(--text-primary); border-color:var(--border-active); }
.btn-success { background:linear-gradient(135deg,#059669,var(--accent-green)); color:#fff; }
.btn-success:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(52,211,153,.35); }
.btn-danger  { background:linear-gradient(135deg,#dc2626,var(--accent-red)); color:#fff; }
.btn-danger:hover  { transform:translateY(-1px); }
.btn-warning { background:linear-gradient(135deg,#d97706,var(--accent)); color:#fff; }
.btn-warning:hover { transform:translateY(-1px); }
.btn-purple  { background:linear-gradient(135deg,#6d28d9,var(--accent-purple)); color:#fff; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-icon {
  width:36px; height:36px; padding:0; justify-content:center;
  border-radius:var(--radius-sm); background:var(--bg-card);
  border:1px solid var(--border); color:var(--text-secondary); font-size:14px;
}
.btn-icon:hover { background:var(--bg-card-hover); color:var(--text-primary); border-color:var(--border-active); }

/* ── شبكات التخطيط ──────────────────────────────────── */
.g2 { display:grid; grid-template-columns:1fr 1fr;       gap:18px; margin-bottom:20px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr;   gap:18px; margin-bottom:20px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }

/* ── البطاقات ──────────────────────────────────────────── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); transition:background .35s, border-color .35s, box-shadow .28s;
}
.card:hover { box-shadow:var(--shadow); border-color:var(--border-md); }
.card-p   { padding:22px; }
.card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.card-body { padding:18px 22px; }
.card-ttl { font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; }
.card-ttl-icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(56,189,248,.12); color:var(--secondary);
}

/* ── بطاقات الإحصائيات ──────────────────────────────── */
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; position:relative; overflow:hidden;
  transition:var(--transition); cursor:default;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border-md); }
.stat-card::after {
  content:''; position:absolute; top:-20px; left:-20px;
  width:90px; height:90px; border-radius:50%; opacity:.09;
}
.sc-blue::after   { background:var(--secondary); }
.sc-green::after  { background:var(--accent-green); }
.sc-orange::after { background:var(--accent-orange); }
.sc-red::after    { background:var(--accent-red); }
.sc-purple::after { background:var(--accent-purple); }
.sc-yellow::after { background:var(--accent); }
.sc-pink::after   { background:var(--accent-pink); }
.stat-icon { width:42px; height:42px; border-radius:11px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sc-blue   .stat-icon { background:rgba(56,189,248,.12);  color:var(--secondary); }
.sc-green  .stat-icon { background:rgba(52,211,153,.12);  color:var(--accent-green); }
.sc-orange .stat-icon { background:rgba(251,146,60,.12);  color:var(--accent-orange); }
.sc-red    .stat-icon { background:rgba(248,113,113,.12); color:var(--accent-red); }
.sc-purple .stat-icon { background:rgba(167,139,250,.12); color:var(--accent-purple); }
.sc-yellow .stat-icon { background:rgba(251,191,36,.12);  color:var(--accent); }
.sc-pink   .stat-icon { background:rgba(244,114,182,.12); color:var(--accent-pink); }
.stat-val { font-size:30px; font-weight:900; line-height:1; margin-bottom:5px; }
.stat-lbl { font-size:11.5px; color:var(--text-muted); font-weight:500; }
.stat-chg {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; margin-top:9px; padding:3px 8px; border-radius:20px;
}
.chg-up  { background:rgba(52,211,153,.12); color:var(--accent-green); }
.chg-down{ background:rgba(248,113,113,.12); color:var(--accent-red); }
.chg-neu { background:rgba(56,189,248,.12); color:var(--secondary); }

/* ── الجدول ──────────────────────────────────────────── */
.tbl-wrap {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.tbl-hdr {
  padding:16px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tbl-ttl { font-size:14px; font-weight:700; flex:1; display:flex; align-items:center; gap:8px; }
.tbl-ttl i { color:var(--secondary); }
.tbl-wrap table { width:100%; border-collapse:collapse; }
.tbl-wrap thead th {
  padding:11px 16px; text-align:right; font-size:11px; font-weight:700;
  color:var(--text-muted); background:rgba(56,189,248,.04);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.tbl-wrap tbody tr { border-bottom:1px solid var(--border); transition:var(--transition); cursor:pointer; }
.tbl-wrap tbody tr:hover { background:rgba(56,189,248,.05); }
.tbl-wrap tbody tr:last-child { border-bottom:none; }
.tbl-wrap tbody td { padding:13px 16px; font-size:13px; vertical-align:middle; }
.tnum {
  font-weight:700; color:var(--secondary); font-family:monospace; font-size:11.5px;
  background:rgba(56,189,248,.1); padding:3px 8px; border-radius:6px;
}

/* ── الشارات (Badges) ──────────────────────────────── */
.bdg {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap;
}
.bdg-new    { background:rgba(56,189,248,.13);  color:var(--secondary);     border:1px solid rgba(56,189,248,.25); }
.bdg-open   { background:rgba(251,191,36,.13);  color:var(--accent);        border:1px solid rgba(251,191,36,.25); }
.bdg-prog   { background:rgba(167,139,250,.13); color:var(--accent-purple); border:1px solid rgba(167,139,250,.25); }
.bdg-res    { background:rgba(52,211,153,.13);  color:var(--accent-green);  border:1px solid rgba(52,211,153,.25); }
.bdg-cls    { background:rgba(100,116,139,.13); color:var(--text-muted);    border:1px solid rgba(100,116,139,.2); }
.bdg-esc    { background:rgba(248,113,113,.13); color:var(--accent-red);    border:1px solid rgba(248,113,113,.25); }
.bdg-wait   { background:rgba(251,146,60,.13);  color:var(--accent-orange); border:1px solid rgba(251,146,60,.25); }
.bdg-reop   { background:rgba(244,114,182,.13); color:var(--accent-pink);   border:1px solid rgba(244,114,182,.25); }
.bdg-pend   { background:rgba(148,163,184,.13); color:var(--text-secondary); border:1px solid rgba(148,163,184,.2); }

.pri-urgent { color:var(--accent-red);    font-weight:700; font-size:11px; }
.pri-high   { color:var(--accent-orange); font-weight:700; font-size:11px; }
.pri-mid    { color:var(--accent);        font-weight:700; font-size:11px; }
.pri-low    { color:var(--accent-green);  font-weight:700; font-size:11px; }

.act-row { display:flex; gap:5px; }
.act-btn {
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-input); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:11px; transition:var(--transition);
}
.act-btn:hover        { background:var(--primary-light); color:#fff; border-color:var(--primary-light); }
.act-btn.red:hover    { background:var(--accent-red);    color:#fff; border-color:var(--accent-red); }
.act-btn.green:hover  { background:var(--accent-green);  color:#fff; border-color:var(--accent-green); }
.act-btn.orange:hover { background:var(--accent-orange); color:#fff; border-color:var(--accent-orange); }
.act-btn.purple:hover { background:var(--accent-purple); color:#fff; border-color:var(--accent-purple); }

/* ── حقول الإدخال ──────────────────────────────────── */
.inp, .sel, .txa, select.form-select, input.form-control, textarea.form-control {
  background:var(--bg-input); border:1px solid var(--border-md);
  border-radius:var(--radius-sm); padding:9px 13px;
  color:var(--text-primary); font-family:'Cairo',sans-serif; font-size:13px;
  outline:none; transition:var(--transition); width:100%;
}
.inp::placeholder, .txa::placeholder { color:var(--text-muted); }
.inp:focus, .sel:focus, .txa:focus { border-color:var(--border-active); box-shadow:0 0 0 3px rgba(56,189,248,.1); }
.sel option, select.form-select option { background:var(--bg-modal); color:var(--text-primary); }
.txa { min-height:100px; resize:vertical; }
.srch-box {
  display:flex; align-items:center; gap:9px; background:var(--bg-input);
  border:1px solid var(--border-md); border-radius:var(--radius-sm); padding:8px 13px; transition:var(--transition);
}
.srch-box:focus-within { border-color:var(--border-active); box-shadow:0 0 0 3px rgba(56,189,248,.1); }
.srch-box input { background:none; border:none; outline:none; color:var(--text-primary); font-family:'Cairo',sans-serif; font-size:13px; flex:1; }
.srch-box i { color:var(--text-muted); font-size:13px; }
.lbl { font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; display:block; }
.lbl.req::after { content:' *'; color:var(--accent-red); }
.fcol { display:flex; flex-direction:column; gap:6px; }
.fr2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fr3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ── النوافذ المنبثقة ──────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(10px);
  z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden; transition:var(--transition);
}
.overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--bg-modal); border:1px solid var(--border-md);
  border-radius:20px; width:100%; max-width:1000px; max-height:92vh;
  overflow-y:auto; transform:scale(.95) translateY(20px);
  transition:var(--transition); box-shadow:var(--shadow-lg);
}

.overlay.open .modal { transform:scale(1) translateY(0); }
.modal.modal-sm  { max-width:520px; }
.modal.modal-md  { max-width:720px; }
.modal-hdr {
  padding:20px 26px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  position:sticky; top:0; background:var(--bg-modal); z-index:10;
}
.modal-ttl { font-size:16px; font-weight:800; flex:1; }
.modal-body { padding:24px 26px; }
.modal-ftr {
  padding:16px 26px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.close-x {
  width:34px; height:34px; border-radius:9px; background:var(--bg-input);
  border:1px solid var(--border); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; transition:var(--transition);
}
.close-x:hover { background:var(--accent-red); color:#fff; border-color:var(--accent-red); }

/* ── التبويبات ──────────────────────────────────────── */
.tabs {
  display:flex; background:var(--bg-input); border-radius:var(--radius-sm);
  padding:3px; margin-bottom:16px; border:1px solid var(--border);
}
.tab-btn {
  flex:1; padding:8px 6px; border-radius:8px; font-family:'Cairo',sans-serif;
  font-size:12px; font-weight:600; cursor:pointer; border:none;
  background:none; color:var(--text-muted); transition:var(--transition);
}
.tab-btn.active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ── خط الزمن ──────────────────────────────────────── */
.tl { position:relative; padding-right:22px; }
.tl::before { content:''; position:absolute; right:7px; top:14px; bottom:14px; width:2px; background:var(--border); }
.tl-item { position:relative; padding-bottom:18px; }
.tl-dot {
  position:absolute; right:-22px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--secondary); border:2px solid var(--bg-body);
}
.tl-dot.green  { background:var(--accent-green); }
.tl-dot.orange { background:var(--accent-orange); }
.tl-dot.red    { background:var(--accent-red); }
.tl-dot.purple { background:var(--accent-purple); }
.tl-time { font-size:10.5px; color:var(--text-muted); margin-bottom:3px; }
.tl-txt  { font-size:13px; font-weight:500; }
.tl-usr  { font-size:11px; color:var(--secondary); margin-top:2px; }

/* ── التنبيهات ──────────────────────────────────────── */
.alert {
  padding:11px 14px; border-radius:var(--radius-sm);
  font-size:12.5px; display:flex; align-items:flex-start; gap:9px; margin-bottom:14px;
}
.alert-info  { background:rgba(56,189,248,.09); border:1px solid rgba(56,189,248,.2); color:var(--secondary); }
.alert-warn  { background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.2); color:var(--accent); }
.alert-ok    { background:rgba(52,211,153,.09); border:1px solid rgba(52,211,153,.2); color:var(--accent-green); }
.alert-err   { background:rgba(248,113,113,.09); border:1px solid rgba(248,113,113,.2); color:var(--accent-red); }

/* ── نموذج التذكرة ──────────────────────────────────── */
.form-wrap { max-width:820px; margin:0 auto; }
.form-hdr { text-align:center; margin-bottom:28px; }
.form-hdr-ico {
  width:68px; height:68px; border-radius:18px;
  background:linear-gradient(135deg,var(--primary-light),var(--secondary));
  display:flex; align-items:center; justify-content:center; font-size:28px;
  margin:0 auto 14px; box-shadow:0 8px 22px rgba(56,189,248,.3);
}
.form-hdr h2 { font-size:24px; font-weight:800; margin-bottom:6px; }
.form-hdr p  { color:var(--text-secondary); font-size:13px; }
.fsec {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; margin-bottom:16px;
}
.fsec-ttl {
  font-size:13px; font-weight:700; color:var(--secondary);
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.fsec-ttl::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── اختيار النوع والأولوية ──────────────────────────── */
.type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.type-btn {
  padding:13px 8px; border-radius:var(--radius-sm); border:1px solid var(--border-md);
  background:var(--bg-input); color:var(--text-secondary); cursor:pointer;
  text-align:center; font-family:'Cairo',sans-serif; font-size:12px; font-weight:600;
  transition:var(--transition); user-select:none;
}
.type-btn i { display:block; font-size:20px; margin-bottom:5px; }
.type-btn:hover { border-color:var(--border-active); color:var(--secondary); }
.type-btn.sel  { border-color:var(--secondary); background:rgba(56,189,248,.1); color:var(--secondary); }
.pri-grid { display:flex; gap:9px; }
.pri-btn {
  flex:1; padding:11px 8px; border-radius:var(--radius-sm); border:1px solid var(--border-md);
  background:var(--bg-input); color:var(--text-secondary); cursor:pointer; text-align:center;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:600; transition:var(--transition);
}
.pri-btn.sel-low    { border-color:var(--accent-green);  background:rgba(52,211,153,.1);  color:var(--accent-green); }
.pri-btn.sel-mid    { border-color:var(--accent);        background:rgba(251,191,36,.1);  color:var(--accent); }
.pri-btn.sel-high   { border-color:var(--accent-orange); background:rgba(251,146,60,.1);  color:var(--accent-orange); }
.pri-btn.sel-urgent { border-color:var(--accent-red);    background:rgba(248,113,113,.1); color:var(--accent-red); }

/* ── رفع ملفات ──────────────────────────────────────── */
.upload-area {
  border:2px dashed var(--border-md); border-radius:var(--radius-sm);
  padding:28px; text-align:center; cursor:pointer; transition:var(--transition);
}
.upload-area:hover { border-color:var(--border-active); background:rgba(56,189,248,.04); }
.upload-area i  { font-size:28px; color:var(--text-muted); display:block; margin-bottom:10px; }
.upload-area p  { font-size:13px; color:var(--text-secondary); }
.upload-area span { font-size:11px; color:var(--text-muted); }

/* ── Toast ──────────────────────────────────────────── */
.toast {
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--bg-modal); border:1px solid var(--border-md);
  border-radius:var(--radius-sm); padding:13px 20px;
  display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:500;
  z-index:9999; box-shadow:var(--shadow-lg); min-width:300px; max-width:480px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.ok   { border-color:rgba(52,211,153,.3); }
.toast.ok   i { color:var(--accent-green); }
.toast.err  { border-color:rgba(248,113,113,.3); }
.toast.err  i { color:var(--accent-red); }
.toast.info { border-color:rgba(56,189,248,.3); }
.toast.info i { color:var(--secondary); }

/* ── متفرقات ──────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:16px 0; }
.cstat {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 0; border-bottom:1px solid var(--border); font-size:12.5px;
}
.cstat:last-child { border-bottom:none; }
.sw { position:relative; width:42px; height:22px; cursor:pointer; flex-shrink:0; }
.sw input { opacity:0; width:0; height:0; position:absolute; }
.sw-sl {
  position:absolute; inset:0; background:var(--bg-input);
  border:1px solid var(--border-md); border-radius:22px; transition:var(--transition);
}
.sw-sl::before {
  content:''; position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--text-muted); top:3px; right:3px; transition:var(--transition);
}
input:checked + .sw-sl { background:var(--secondary); border-color:var(--secondary); }
input:checked + .sw-sl::before { background:#fff; transform:translateX(-20px); }

/* ── معلومات تفصيلية ──────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.det-item { display:flex; flex-direction:column; gap:5px; }
.det-lbl  { font-size:10.5px; color:var(--text-muted); font-weight:600; }
.det-val  { font-size:13.5px; font-weight:600; }
.info-box {
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
}
.ib-ttl { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px; }

/* ── الأدوار ──────────────────────────────────────── */
.role { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-sa  { background:rgba(248,113,113,.13); color:var(--accent-red); }
.role-mgr { background:rgba(167,139,250,.13); color:var(--accent-purple); }
.role-stf { background:rgba(56,189,248,.13);  color:var(--secondary); }
.role-rec { background:rgba(52,211,153,.13);  color:var(--accent-green); }
.role-com { background:rgba(251,191,36,.13);  color:var(--accent); }

/* ── شريط التقدم ──────────────────────────────────── */
.prog-bar { height:6px; background:rgba(56,189,248,.1); border-radius:3px; overflow:hidden; flex:1; }
.prog-fill { height:100%; border-radius:3px; transition:width .8s ease; }

/* ── الإجازات ──────────────────────────────────────── */
.hol-item {
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:11px 14px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:7px;
}
.hol-date { font-size:11.5px; font-weight:700; color:var(--secondary); }

/* ── صفحة تسجيل الدخول ──────────────────────────────── */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--bg-body); position:relative; z-index:1;
}
.login-card {
  width:100%; max-width:440px; background:var(--bg-card);
  border:1px solid var(--border-md); border-radius:24px;
  padding:44px 40px; box-shadow:var(--shadow-lg);
}
.login-logo {
  width:70px; height:70px; border-radius:20px; margin:0 auto 20px;
  background:linear-gradient(135deg,var(--primary-light),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#fff; box-shadow:0 8px 24px rgba(37,99,176,.4);
}
.login-title { font-size:22px; font-weight:900; text-align:center; margin-bottom:4px; }
.login-sub   { font-size:12px; color:var(--text-muted); text-align:center; margin-bottom:28px; }
.form-group { margin-bottom:16px; }

/* ── صفحة ولي الأمر (عامة) ──────────────────────────── */
.public-page {
  min-height:100vh; background:var(--bg-body); position:relative; z-index:1;
}
.public-topbar {
  background:var(--bg-topbar); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border); padding:16px 28px;
  display:flex; align-items:center; gap:12px;
}
.public-content { padding:40px 20px; max-width:860px; margin:0 auto; }

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:1200px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
  .type-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  .detail-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  :root { --sidebar-w:0px; }
  .sidebar { transform:translateX(100%); transition:transform .3s; }
  .sidebar.open { transform:translateX(0); width:272px; --sidebar-w:272px; }
  .main-content { margin-right:0; }
  .g2,.g3 { grid-template-columns:1fr; }
  .fr2,.fr3 { grid-template-columns:1fr; }
  .topbar { padding:0 14px; }
  .page-content { padding:16px; }
  #sidebarToggle { display:flex !important; }
}

/* ── بطاقات التقارير ──────────────────────────── */
.rpt-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px;
  cursor:pointer; transition:var(--transition);
}
.rpt-card:hover { background:var(--bg-card-hover); border-color:var(--border-md); transform:translateY(-2px); box-shadow:var(--shadow); }
.rpt-ico { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; }

/* ── صفوف أداء المدارس ──────────────────────── */
.school-row {
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); transition:var(--transition);
}
.school-row:hover { background:var(--bg-card-hover); border-color:var(--border-md); box-shadow:var(--shadow-sm); }
.rank-badge {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.r1 { background:rgba(251,191,36,.18); color:var(--accent); }
.r2 { background:rgba(148,163,184,.18); color:#94a3b8; }
.r3 { background:rgba(180,120,60,.18); color:#b4783c; }
.school-info { flex:1; min-width:0; }
.school-nm { font-size:14px; font-weight:700; margin-bottom:3px; }
.school-meta { font-size:11px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; }
.school-kpis { display:flex; gap:16px; flex-shrink:0; }
.kpi { text-align:center; }
.kpi-val { font-size:17px; font-weight:800; }
.kpi-lbl { font-size:10px; color:var(--text-muted); }

/* ── SLA مؤشر ──────────────────────────────── */
.sla-prog { height:8px; background:rgba(56,189,248,.1); border-radius:4px; overflow:hidden; margin:10px 0; }
.sla-fill  { height:100%; border-radius:4px; }

/* ── شريط حالة التذكرة (status-flow) ────────── */
.status-flow { display:flex; align-items:flex-start; margin-bottom:20px; }
.sf-step { flex:1; text-align:center; position:relative; }
.sf-step::before {
  content:''; position:absolute; right:50%; left:-50%; top:13px;
  height:2px; background:var(--border); z-index:0;
}
.sf-step:first-child::before { display:none; }
.sf-dot {
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--border); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 6px; font-size:11px; font-weight:700;
  position:relative; z-index:1; transition:var(--transition); color:var(--text-muted);
}
.sf-step.done   .sf-dot { background:var(--accent-green); border-color:var(--accent-green); color:#fff; }
.sf-step.done::before   { background:var(--accent-green); }
.sf-step.active .sf-dot { background:var(--secondary); border-color:var(--secondary); color:#fff; }
.sf-lbl { font-size:10px; color:var(--text-muted); }
.sf-step.done   .sf-lbl { color:var(--accent-green); }
.sf-step.active .sf-lbl { color:var(--secondary); }

/* ── تقارير متحركة ───────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-content > * { animation:fadeUp .3s ease; }

/* ── Responsive: تفاصيل التذكرة ─────────────── */
@media(max-width:900px) {
  .modal-body [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 300px"] { grid-template-columns:1fr !important; }
  .school-kpis { display:none; }
}

/* ── SLA Row ──────────────────────────────────── */
.sla-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:10px;
}

/* ── parent-box ──────────────────────────────── */
.parent-box { display:flex; flex-direction:column; gap:12px; }

/* ── detail grid 3col ──────────────────────── */
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
@media(max-width:700px) { .detail-grid { grid-template-columns:1fr 1fr; } }

/* ── modal detail grid ──────────────────────── */
#mdDetailGrid { display:grid; grid-template-columns:1fr 290px; gap:20px; }
@media(max-width:800px) { #mdDetailGrid { grid-template-columns:1fr; } }

/* ── tl colors ──────────────────────────────── */
.tl-dot.green  { background:var(--accent-green); }
.tl-dot.orange { background:var(--accent-orange); }
.tl-dot.red    { background:var(--accent-red); }
.tl-dot.purple { background:var(--accent-purple); }

/* ── btn-purple ─────────────────────────────── */
.btn-purple { background:linear-gradient(135deg,#6d28d9,var(--accent-purple)); color:#fff; }
.btn-purple:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(167,139,250,.35); }

/* ── role badges ────────────────────────────── */
.role { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.role-sa  { background:rgba(248,113,113,.13); color:var(--accent-red); }
.role-mgr { background:rgba(167,139,250,.13); color:var(--accent-purple); }
.role-stf { background:rgba(56,189,248,.13);  color:var(--secondary); }
.role-rec { background:rgba(52,211,153,.13);  color:var(--accent-green); }
.role-com { background:rgba(251,191,36,.13);  color:var(--accent); }

/* ── modal full width on mobile ─────────────── */
@media(max-width:768px) {
  .modal { max-width:100% !important; margin:0; border-radius:16px 16px 0 0; max-height:95vh; }
  .overlay { align-items:flex-end; padding:0; }
}

/* ── bar chart ───────────────────────────────── */
.bar-chart { display:flex; align-items:flex-end; gap:5px; height:100px; }
.bar-item  { flex:1; border-radius:5px 5px 0 0; min-height:4px; cursor:pointer; transition:opacity .2s; }
.bar-item:hover { opacity:.75; }
.bar-labels { display:flex; gap:5px; margin-top:6px; }
.bar-lbl { font-size:9px; color:var(--text-muted); text-align:center; flex:1; }

/* ── det-item ────────────────────────────────── */
.det-item { display:flex; flex-direction:column; gap:5px; }
.det-lbl { font-size:10.5px; color:var(--text-muted); font-weight:600; }
.det-val { font-size:13.5px; font-weight:600; }

/* ── success-ico (from original design) ─────── */
.success-ico {
  width:76px; height:76px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; margin:0 auto 18px;
  background:rgba(52,211,153,.12); border:2px solid rgba(52,211,153,.25);
}

/* ── type-grid 4-col ─────────────────────────── */
.type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media(max-width:600px){ .type-grid{grid-template-columns:repeat(2,1fr);} }

/* ── live dot ─────────────────────────────────── */
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-green);display:inline-block;animation:pulse-dot 1.6s ease infinite;margin-left:5px;}

/* ── Rating Cards (Rate page) ────────────────── */
.rating-card {
  background: var(--bg-card);
  border: 2px solid var(--border-md);
  border-radius: var(--radius);
  padding: 24px 16px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rating-card:hover { background: var(--bg-card-hover); transform: translateY(-3px); box-shadow: var(--shadow); }
.rating-selected-green {
  border-color: var(--accent-green) !important;
  background: rgba(52,211,153,.08) !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
}
.rating-selected-red {
  border-color: var(--accent-red) !important;
  background: rgba(248,113,113,.08) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,.2);
}

/* ── Modal header action bar ─────────────────── */
.modal-action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 22px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-input);
}
.modal-action-bar .btn { flex: 1; min-width: 100px; justify-content: center; }

/* ── Timeline colored dots ───────────────────── */
.tl-dot          { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:4px; background:var(--text-muted); }
.tl-dot.tl-blue   { background:#38bdf8; box-shadow:0 0 6px rgba(56,189,248,.4); }
.tl-dot.tl-green  { background:#34d399; box-shadow:0 0 6px rgba(52,211,153,.4); }
.tl-dot.tl-orange { background:#fb923c; box-shadow:0 0 6px rgba(251,146,60,.4); }
.tl-dot.tl-red    { background:#f87171; box-shadow:0 0 6px rgba(248,113,113,.4); }
.tl-dot.tl-purple { background:#a78bfa; box-shadow:0 0 6px rgba(167,139,250,.4); }
.tl-dot.tl-yellow { background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.4); }
.tl-dot.tl-cyan   { background:#22d3ee; box-shadow:0 0 6px rgba(34,211,238,.4); }

/* ── Timeline item ───────────────────────────── */
.tl-item {
  display:grid;
  grid-template-columns:12px 1fr;
  gap:0 12px;
  position:relative;
  padding-bottom:16px;
}
.tl-item::before {
  content:'';
  position:absolute;
  right:5px; top:16px; bottom:0;
  width:2px;
  background:var(--border);
}
.tl-item:last-child::before { display:none; }
.tl-time { grid-column:2; font-size:10.5px; color:var(--text-muted); margin-bottom:3px; }
.tl-txt  { grid-column:2; font-size:13px; font-weight:600; color:var(--text-primary); }
.tl-usr  { grid-column:2; font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ── pri badges ─────────────────────────────── */
.pri-urgent { color:#f87171; font-weight:700; font-size:12px; }
.pri-high   { color:#fb923c; font-weight:700; font-size:12px; }
.pri-mid    { color:#fbbf24; font-weight:700; font-size:12px; }
.pri-low    { color:#94a3b8; font-weight:700; font-size:12px; }

/* ── Modal responsive ───────────────────────── */
@media(max-width:768px){
  #modalDetailGrid,
  .modal-body > div[style*="grid-template-columns:1fr 290px"] {
    grid-template-columns:1fr !important;
  }
}

/* ── Success icon ─────────────────────────────── */
.success-ico { width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 16px; background:rgba(52,211,153,.12); border:2px solid rgba(52,211,153,.25); }

/* ── Timeline colored dots ────────────────────── */
.tl-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:4px; background:var(--text-muted); }
.tl-dot.tl-blue   { background:#38bdf8; box-shadow:0 0 6px rgba(56,189,248,.5); }
.tl-dot.tl-green  { background:#34d399; box-shadow:0 0 6px rgba(52,211,153,.5); }
.tl-dot.tl-orange { background:#fb923c; box-shadow:0 0 6px rgba(251,146,60,.5); }
.tl-dot.tl-red    { background:#f87171; box-shadow:0 0 6px rgba(248,113,113,.5); }
.tl-dot.tl-purple { background:#a78bfa; box-shadow:0 0 6px rgba(167,139,250,.5); }
.tl-dot.tl-yellow { background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.5); }
.tl-dot.tl-cyan   { background:#22d3ee; box-shadow:0 0 6px rgba(34,211,238,.5); }

/* ── Timeline layout ──────────────────────────── */
.tl-item { display:grid; grid-template-columns:12px 1fr; gap:0 12px; position:relative; padding-bottom:16px; }
.tl-item::before { content:''; position:absolute; right:5px; top:16px; bottom:0; width:2px; background:var(--border); }
.tl-item:last-child::before { display:none; }
.tl-time { grid-column:2; font-size:10px; color:var(--text-muted); margin-bottom:2px; }
.tl-txt  { grid-column:2; font-size:13px; font-weight:600; }
.tl-usr  { grid-column:2; font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ── Priority labels ──────────────────────────── */
.pri-urgent { color:#f87171; font-weight:700; font-size:12px; }
.pri-high   { color:#fb923c; font-weight:700; font-size:12px; }
.pri-mid    { color:#fbbf24; font-weight:700; font-size:12px; }
.pri-low    { color:#94a3b8; font-weight:700; font-size:12px; }

/* ── type-grid 4-col ──────────────────────────── */
.type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media(max-width:640px){ .type-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Modal responsive ─────────────────────────── */
@media(max-width:800px) {
  .modal-body > div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 300px"] { grid-template-columns:1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   TICKET DETAIL MODAL — Redesigned Layout (base classes)
   ══════════════════════════════════════════════════════════════ */

/* ── Topbar: tracking number + badges + action buttons ── */
.md-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-md);
  border-radius: 16px 16px 0 0;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Right side — ticket identity */
.md-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.md-title-txt {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.md-title-txt i { color: var(--secondary); }

/* Left side — action buttons */
.md-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.md-close-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.25);
  color: var(--accent-red);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
  flex-shrink: 0;
}
.md-close-btn:hover { background: var(--accent-red); color: #fff; }

/* ── Progress bar ──────────────────────────────── */
.md-progress-bar {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  gap: 0;
  flex-shrink: 0;
  overflow-x: auto;
}
.mpb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mpb-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-md);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  transition: all .3s;
}
/* Step 1: تقديم — always blue */
.mpb-step:nth-child(1) .mpb-dot {
  background: rgba(56,189,248,.15); border-color: var(--secondary); color: var(--secondary);
}
/* Step 2: استلام — cyan when done/active */
.mpb-step.done   .mpb-dot { background: var(--accent-green); border-color: var(--accent-green); color: #fff; box-shadow: 0 0 8px rgba(52,211,153,.4); }
/* Active step — bright blue with pulse */
.mpb-step.active .mpb-dot {
  background: var(--secondary); border-color: var(--secondary); color: #fff;
  box-shadow: 0 0 12px rgba(56,189,248,.6);
  animation: mpb-pulse 1.8s infinite;
}
@keyframes mpb-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(56,189,248,.5); }
  50%      { box-shadow: 0 0 18px rgba(56,189,248,.9); }
}
.mpb-lbl {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 4px;
}
.mpb-step.done   .mpb-lbl { color: var(--accent-green); font-weight: 700; }
.mpb-step.active .mpb-lbl { color: var(--secondary);    font-weight: 700; }
.mpb-step:nth-child(1) .mpb-lbl { color: var(--secondary); }
.mpb-line {
  flex: 1;
  height: 3px;
  background: var(--border);
  margin: 0 4px;
  margin-bottom: 17px;
  min-width: 20px;
  border-radius: 2px;
  transition: background .4s;
}
.mpb-line.done { background: linear-gradient(90deg, var(--accent-green), rgba(52,211,153,.5)); }

/* ── Body scrollable area ─────────────────────── */
.md-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-md) transparent;
}
.md-body::-webkit-scrollbar { width: 5px; }
.md-body::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }

/* ── Two-column grid ──────────────────────────── */
.md-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 14px;
  align-items: start;
}
.md-main   { min-width: 0; overflow: hidden; }
.md-sidebar{ min-width: 0; }
/* override when inside detail modal */

/* ── Card sections ────────────────────────────── */
.md-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  word-break: break-word;
}
.md-card-ttl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.md-card-ttl i { color: var(--secondary); }

/* ── Meta data grid (2 cols) ──────────────────── */
.md-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.md-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-meta-lbl { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.md-meta-val { font-size: 13px; font-weight: 600; overflow-wrap: break-word; word-break: break-word; }

/* ── Sidebar ──────────────────────────────────── */
.md-sidebar { display: flex; flex-direction: column; gap: 12px; }
.md-sidebar .md-card { margin-bottom: 0; }

/* ── Tab panel content area ───────────────────── */
.md-tab-panel {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 14px;
}

/* ── Reply box ────────────────────────────────── */
.md-reply-box {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 10px;
}

/* ── Tracking number chip ─────────────────────── */
.tnum {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.2);
  color: var(--secondary);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
}

/* ── Pulse animation for escalated ───────────── */
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}

/* ── Responsive: stack on small screens ──────── */
@media (max-width: 800px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-sidebar { display: contents; }
  .md-topbar { padding: 10px 12px; }
  .md-actions { gap: 5px; }
  .md-actions .btn { padding: 7px 10px; font-size: 12px; }
}

/* Overlay containing full detail modal — reduce padding */
.overlay:has(.modal-detail-full) {
  padding: 6px;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   Employee Profile Popup
══════════════════════════════════════════════════════════ */
.emp-profile-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-input));
  border-bottom: 1px solid var(--border-md);
}
.emp-avatar-lg {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(56,189,248,.15);
  border: 2px solid rgba(56,189,248,.3);
  color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; flex-shrink: 0;
}
.emp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px 18px;
}
.emp-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  transition: var(--transition);
  overflow: hidden;
  position: relative;
}
.emp-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  opacity: .08;
  transform: translate(20px,-20px);
}
.emp-kpi-card.kpi-blue  { border-color: rgba(56,189,248,.2); }
.emp-kpi-card.kpi-blue::before  { background: #38bdf8; }
.emp-kpi-card.kpi-green { border-color: rgba(52,211,153,.2); }
.emp-kpi-card.kpi-green::before { background: #34d399; }
.emp-kpi-card.kpi-orange{ border-color: rgba(251,146,60,.2); }
.emp-kpi-card.kpi-orange::before{ background: #fb923c; }
.emp-kpi-card.kpi-red   { border-color: rgba(248,113,113,.2); }
.emp-kpi-card.kpi-red::before   { background: #f87171; }
.emp-kpi-card.kpi-purple{ border-color: rgba(167,139,250,.2); }
.emp-kpi-card.kpi-purple::before{ background: #a78bfa; }
.emp-kpi-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.kpi-blue   .emp-kpi-icon { background: rgba(56,189,248,.12);  color: var(--secondary); }
.kpi-green  .emp-kpi-icon { background: rgba(52,211,153,.12);  color: var(--accent-green); }
.kpi-orange .emp-kpi-icon { background: rgba(251,146,60,.12);  color: var(--accent-orange); }
.kpi-red    .emp-kpi-icon { background: rgba(248,113,113,.12); color: var(--accent-red); }
.kpi-purple .emp-kpi-icon { background: rgba(167,139,250,.12); color: var(--accent-purple); }
.emp-kpi-val  { font-size: 28px; font-weight: 900; line-height: 1; text-align: left; }
.emp-kpi-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi-blue   .emp-kpi-val { color: var(--secondary); }
.kpi-green  .emp-kpi-val { color: var(--accent-green); }
.kpi-orange .emp-kpi-val { color: var(--accent-orange); }
.kpi-red    .emp-kpi-val { color: var(--accent-red); }
.kpi-purple .emp-kpi-val { color: var(--accent-purple); }
.emp-score-bar {
  margin: 0 18px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* ══════════════════════════════════════════════════════════════
   TICKET DETAIL MODAL — Full Popup with Vertical Scroll
   ══════════════════════════════════════════════════════════════ */

/* ── Override base .modal for detail popup ── */
.modal.modal-detail-full {
  width:      min(1200px, 97vw) !important;
  max-width:  97vw !important;
  height:     92vh !important;
  max-height: 92vh !important;
  /* CRITICAL: hide overflow on modal itself — body child scrolls */
  overflow:   hidden !important;
  display:    flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
}

/* ── Topbar: fixed at top ── */
.modal.modal-detail-full .md-topbar {
  flex-shrink: 0 !important;
  width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
  z-index: 10;
}

/* ── Progress bar: fixed below topbar ── */
.modal.modal-detail-full .md-progress-bar {
  flex-shrink: 0 !important;
  width: 100% !important;
  z-index: 9;
}

/* ── Body: takes all remaining height, scrolls vertically ── */
.modal.modal-detail-full .md-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 22px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-md) transparent !important;
}
.modal.modal-detail-full .md-body::-webkit-scrollbar { width: 5px; }
.modal.modal-detail-full .md-body::-webkit-scrollbar-thumb {
  background: var(--border-md); border-radius: 3px;
}

/* ── Grid inside body: main content + sidebar ── */
.modal.modal-detail-full .md-grid {
  display: grid !important;
  grid-template-columns: 1fr 295px !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

/* ── Mobile ── */
@media (max-width: 820px) {
  .modal.modal-detail-full {
    height: 98vh !important;
    max-height: 98vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
  }
  .modal.modal-detail-full .md-grid { grid-template-columns: 1fr !important; }
  .modal.modal-detail-full .md-sidebar { order: -1; }
}

/* ══════════════════════════════════════════════════════════════
   MODAL DETAIL — Content Display Fixes
   ══════════════════════════════════════════════════════════════ */

/* Ensure grid cells don't overflow */
.modal.modal-detail-full .md-main,
.modal.modal-detail-full .md-main > * {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Fix topbar to wrap on small width but never overflow */
.modal.modal-detail-full .md-topbar {
  min-height: 58px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 16px !important;
}
.modal.modal-detail-full .md-actions {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.modal.modal-detail-full .md-actions .btn {
  font-size: 12px !important;
  padding: 7px 12px !important;
  white-space: nowrap !important;
}
.modal.modal-detail-full .md-info {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Sidebar: cap height and scroll independently */
.modal.modal-detail-full .md-sidebar {
  position: sticky !important;
  top: 0 !important;
  max-height: calc(92vh - 140px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

/* Tab panel: ensure content wraps */
.modal.modal-detail-full .md-tab-panel {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Meta grid: ensure labels and values fit */
.modal.modal-detail-full .md-meta-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.modal.modal-detail-full .md-meta-item {
  min-width: 0 !important;
  overflow: hidden !important;
}
.modal.modal-detail-full .md-meta-lbl {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.modal.modal-detail-full .md-meta-val {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  overflow: hidden !important;
}

/* Parent name in sidebar */
.modal.modal-detail-full .md-card > div {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}