<style>
/* ═══════════════════════════════════════════════════════════════════
   ELSEWEDY SHARING DMS v21 ULTRA — PREMIUM ENTERPRISE EDITION
   ─────────────────────────────────────────────────────────────────
   ★ CINEMATIC DARK MODE — Layered depth, not flat black
   ★ ELEGANT RED SYSTEM — Logo-matched crimson accents
   ★ GLASSMORPHISM LITE — Subtle transparency, no blur perf hit
   ★ TYPOGRAPHY SCALE — Outfit + Inter + JetBrains Mono
   ★ SPATIAL DESIGN — Generous whitespace, precise grid
   ★ MICRO-INTERACTIONS — Smooth, purposeful animations
   ★ LIGHT MODE — Soft, expensive, paper-like
   ─────────────────────────────────────────────────────────────────
   PRO SECURITY & ENGINEERING FIXES preserved from v15:
   [FIX-1] Client-Side RBAC Enforcement Layer (assertRole system)
   [FIX-2] Mobile Sticky Column Overflow (Arabic text ellipsis)
   [FIX-3] Dynamic Workflow Status System (deterministic HSL hash)
   [FIX-4] Toast Stack Limitation (max 3 visible)
═══════════════════════════════════════════════════════════════════ */

/* [FIX-1] Duplicate font @import removed — fonts are already loaded via <link> in <head>. */

:root {
  /* ═══ CORE BRAND COLORS — Matched to Elsewedy Logo ═══ */
  --brand-red:        #E60026;
  --brand-red-hover:  #FF1A3C;
  --brand-red-deep:   #B8001E;
  --brand-red-glow:   rgba(230,0,38,.35);
  --brand-red-soft:   rgba(230,0,38,.10);
  --brand-red-shadow: 0 0 24px rgba(230,0,38,.30);

  /* Legacy aliases */
  --red:        var(--brand-red);
  --red-dim:    var(--brand-red-soft);
  --red-glow:   var(--brand-red-glow);
  --red-bright: var(--brand-red-hover);

  /* ═══ GOLD ACCENT ═══ */
  --gold:     #C49A6C;
  --gold-dim: rgba(196,154,108,.12);

  /* ═══ CINEMATIC DARK SURFACES — Layered depth ═══ */
  --bg-canvas:    #0A0A0F;
  --bg-base:      #0F0F14;
  --bg-elevated:  #16161D;
  --bg-surface:   #1C1C24;
  --bg-overlay:   #22222C;
  --bg-hover:     rgba(255,255,255,.04);

  --shell-black:    #08080C;
  --shell-black-2:  #0C0C12;
  --shell-border:   rgba(255,255,255,.06);
  --shell-border-2: rgba(255,255,255,.10);

  /* ═══ LIGHT SURFACES — Soft, expensive paper ═══ */
  --bg-light-canvas:  #F8F7F4;
  --bg-light-base:    #FFFFFF;
  --bg-light-elevated:#F2F1ED;
  --bg-light-surface: #EDECE8;
  --bg-light-overlay: #E8E7E3;

  /* ═══ BORDERS — Refined, subtle ═══ */
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.10);
  --border3: rgba(255,255,255,.16);
  --border-light:  rgba(0,0,0,.07);
  --border-light2: rgba(0,0,0,.12);
  --border-light3: rgba(0,0,0,.18);

  /* ═══ TYPOGRAPHY — MAX CONTRAST, ELEGANT ═══ */
  --txt:       #F0F0F5;
  --txt2:      #D0D0D8;
  --txt3:      #9A9AA8;
  --txt-muted: #6E6E7A;

  --txt-light:       #1A1A24;
  --txt-light2:      #3A3A4A;
  --txt-light3:      #5A5A6A;
  --txt-light-muted: #7A7A8A;

  /* ═══ STATUS COLORS — Refined, less neon ═══ */
  --green:      #22C55E;
  --green-dim:  rgba(34,197,94,.10);
  --green-glow: rgba(34,197,94,.25);
  --amber:      #F59E0B;
  --amber-dim:  rgba(245,158,11,.10);
  --amber-glow: rgba(245,158,11,.25);
  --blue:       #3B82F6;
  --blue-dim:   rgba(59,130,246,.10);
  --blue-glow:  rgba(59,130,246,.25);
  --purple:     #8B5CF6;

  /* ═══ SHADOWS — Premium, layered ═══ */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.02);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.03);
  --shadow:     0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-light: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-light-lg: 0 8px 32px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);

  /* ═══ GLASSMORPHISM LITE ═══ */
  --glass:        rgba(255,255,255,.03);
  --glass-border: rgba(255,255,255,.08);
  --glass-light:  rgba(255,255,255,.70);
  --glass-light-border: rgba(0,0,0,.08);

  /* ═══ TYPOGRAPHY FAMILIES ═══ */
  --mono:        'JetBrains Mono','SF Mono','Courier New',monospace;
  --sans:        'Inter','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:     'Outfit','Inter',sans-serif;
  --text-shadow: 0 1px 2px rgba(0,0,0,.8);

  /* ═══ SPACING & RADII ═══ */
  --topH:  72px;
  --sideW: 260px;
  --r:     12px;
  --r-sm:  8px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 9999px;

  /* ═══ ANIMATION CURVES ═══ */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --ease-luxury: cubic-bezier(0.25,0.46,0.45,0.94);

  /* ═══ FONT SIZE SCALE — Improved readability ═══ */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Soft, expensive, paper-like
═══════════════════════════════════════════════════════════════════ */
body.light {
  --bg-canvas:    var(--bg-light-canvas);
  --bg-base:      var(--bg-light-base);
  --bg-elevated:  var(--bg-light-elevated);
  --bg-surface:   var(--bg-light-surface);
  --bg-overlay:   var(--bg-light-overlay);
  --bg-hover:     rgba(0,0,0,.03);

  --shell-black:    #FFFFFF;
  --shell-black-2:  #FAFAF8;
  --shell-border:   rgba(0,0,0,.06);
  --shell-border-2: rgba(0,0,0,.10);

  --border:  var(--border-light);
  --border2: var(--border-light2);
  --border3: var(--border-light3);

  --txt:       var(--txt-light);
  --txt2:      var(--txt-light2);
  --txt3:      var(--txt-light3);
  --txt-muted: var(--txt-light-muted);

  --shadow-xs:  var(--shadow-light);
  --shadow-sm:  var(--shadow-light);
  --shadow:     var(--shadow-light-lg);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 56px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);

  --green:      #16A34A;
  --green-dim:  rgba(22,163,74,.08);
  --green-glow: rgba(22,163,74,.20);
  --amber:      #D97706;
  --amber-dim:  rgba(217,119,6,.08);
  --amber-glow: rgba(217,119,6,.20);
  --blue:       #2563EB;
  --blue-dim:   rgba(37,99,235,.08);
  --blue-glow:  rgba(37,99,235,.20);
  --gold:       #A67C52;
  --gold-dim:   rgba(166,124,82,.08);
  --purple:     #7C3AED;

  --text-shadow: none;

  --glass:        rgba(0,0,0,.02);
  --glass-border: rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESET & BODY
═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }

body {
  font-family: var(--sans);
  background: var(--bg-canvas);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

/* ═══ Premium Scrollbar ═══ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:10px; transition:background .2s; }
::-webkit-scrollbar-thumb:hover { background:var(--brand-red); }
body.light ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.10); }
body.light ::-webkit-scrollbar-thumb:hover { background:var(--brand-red); }

/* ═══════════════════════════════════════════════════════════════════
   LOADING OVERLAY — Cinematic
═══════════════════════════════════════════════════════════════════ */
#loadingOverlay {
  position:fixed; inset:0; z-index:9999;
  background: var(--bg-canvas);
  display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  transition:opacity .5s var(--ease-luxury);
}
#loadingOverlay.active { display:flex; }
#loadingOverlay.fade-out { opacity:0; pointer-events:none; }

.loader-logo {
  width:72px; height:72px;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-deep) 100%);
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:#fff; font-family:var(--display);
  box-shadow: 0 0 60px var(--brand-red-glow), 0 12px 32px rgba(0,0,0,.4), 0 0 0 2px rgba(230,0,38,0.2);
  animation: logo-pulse 2.5s ease-in-out infinite;
  letter-spacing:-1px;
  position:relative;
  overflow:hidden;
}
.loader-logo::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes logo-pulse {
  0%,100% { box-shadow:0 0 40px var(--brand-red-glow), 0 0 0 0 rgba(230,0,38,.2); transform:scale(1); }
  50%     { box-shadow:0 0 60px var(--brand-red-glow), 0 0 0 20px rgba(230,0,38,0); transform:scale(1.04); }
}
.loader-ring {
  width:40px; height:40px; border-radius:50%;
  border:3px solid rgba(255,255,255,.06); border-top-color:var(--brand-red);
  animation: spin .9s linear infinite;
  box-shadow: 0 0 16px var(--brand-red-glow);
}
@keyframes spin { to { transform:rotate(360deg); } }
.loader-text { 
  font-size:13px; color:var(--txt3); font-family:var(--mono); 
  letter-spacing:1.5px; text-transform:uppercase; 
  font-weight:600;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN SCREEN — Premium cinematic
═══════════════════════════════════════════════════════════════════ */
#loginScreen {
  position:fixed; inset:0; z-index:8000;
  background: var(--bg-canvas);
  display:flex; align-items:center; justify-content:center; padding:24px;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,0,38,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(59,130,246,.03) 0%, transparent 50%);
}
body.light #loginScreen {
  background: var(--bg-light-canvas);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,0,38,.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(59,130,246,.02) 0%, transparent 50%);
}
#loginScreen.hidden { display:none !important; }

.login-wrap { width:100%; max-width:420px; }

.login-card {
  background: var(--bg-elevated);
  border:1px solid var(--border2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow:hidden;
  animation: card-in .6s var(--ease-out);
  position:relative;
}
.login-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
@keyframes card-in {
  from { opacity:0; transform:translateY(24px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.lc-hero {
  padding: 48px 40px 32px;
  background: linear-gradient(135deg, rgba(230,0,38,.08) 0%, transparent 70%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:20px;
}
.lc-logo {
  width:64px; height:64px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep));
  border-radius: 16px;
  box-shadow: 0 12px 40px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:#fff;
  font-family:var(--display); letter-spacing:-1px;
  flex-shrink:0;
  position: relative;
  overflow: hidden;
}
.lc-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  animation: shimmer 2s ease-in-out infinite;
}
.lc-title { 
  font-size: var(--fs-3xl); 
  font-weight: 800; 
  letter-spacing: -.5px; 
  color: var(--txt); 
  line-height: 1.15;
  background: linear-gradient(135deg, var(--txt) 0%, var(--brand-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lc-sub   { 
  font-size: var(--fs-sm); 
  color: var(--txt3); 
  font-family: var(--mono); 
  margin-top: 6px; 
  letter-spacing: 1.2px; 
  text-transform: uppercase; 
  font-weight: 600;
  white-space: nowrap; /* v21: prevent Arabic text wrapping in login card */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.lc-body { padding: 28px 32px 28px; }

#authError,#authInfo {
  display:none; margin-bottom:14px; padding:11px 14px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); line-height:1.5;
  align-items:flex-start; gap:8px;
  font-weight:500;
}
#authError { background: rgba(230,0,38,.08); border:1px solid rgba(230,0,38,.2); color: #FF4D6D; }
#authInfo  { background: var(--amber-dim); border:1px solid rgba(245,158,11,.2); color: var(--amber); }
#authError.show,#authInfo.show { display:flex; }
body.light #authError { color:#C41E3A; background: rgba(230,0,38,.06); }

.lf-group { margin-bottom:18px; }
.lf-label {
  display:block; font-size:11px; font-weight:600; color:var(--txt2);
  text-transform:uppercase; letter-spacing:.8px; font-family:var(--mono); margin-bottom:7px;
}
.lf-input {
  width:100%; padding:12px 14px; background: var(--bg-surface);
  border:1.5px solid var(--border2); border-radius: var(--r-sm);
  color:var(--txt); font-size: var(--fs-md); outline:none; font-family:var(--sans);
  transition:all .25s var(--ease); font-weight:450;
  letter-spacing: -0.01em;
}
.lf-input:focus {
  border-color:var(--brand-red);
  box-shadow:0 0 0 3px var(--brand-red-soft), inset 0 1px 2px rgba(0,0,0,.1);
  background: var(--bg-overlay);
}
.lf-input::placeholder { color:var(--txt-muted); font-weight:400; }

.login-btn {
  width:100%; padding:13px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep));
  border:none; border-radius: var(--r-sm);
  color:#fff; font-size: var(--fs-md); font-weight:600;
  cursor:pointer; font-family:var(--sans); letter-spacing:.2px;
  transition:all .25s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 4px 16px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,.2);
  position:relative; overflow:hidden;
}
.login-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%);
  opacity:0; transition:opacity .3s;
}
.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-red-hover), var(--brand-red));
  box-shadow: 0 8px 28px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,.3);
  transform:translateY(-1px);
}
.login-btn:hover:not(:disabled)::before { opacity:1; }
.login-btn:active:not(:disabled) { transform:translateY(0); }
.login-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.lc-footer {
  padding:14px 32px; border-top:1px solid var(--border);
  font-size:10px; color:var(--txt-muted); font-family:var(--mono);
  text-align:center; letter-spacing:.5px; font-weight:500;
}
.auth-switch { margin-top:16px; text-align:center; font-size: var(--fs-sm); color:var(--txt3); font-weight:450; }
.auth-switch a { color:var(--brand-red); cursor:pointer; text-decoration:none; font-weight:600; transition:color .2s; }
.auth-switch a:hover { text-decoration:underline; color:var(--brand-red-hover); }

/* ═══════════════════════════════════════════════════════════════════
   PENDING SCREEN
═══════════════════════════════════════════════════════════════════ */
#pendingScreen {
  position:fixed; inset:0; z-index:7500; background: var(--bg-canvas);
  display:none; align-items:center; justify-content:center; padding:24px;
}
#pendingScreen.show { display:flex; }
body.light #pendingScreen { background: var(--bg-light-canvas); }

.pending-card {
  width:100%; max-width:420px;
  background: var(--bg-elevated); border:1px solid var(--border2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); overflow:hidden;
  animation: card-in .5s var(--ease); text-align:center;
  position:relative;
}
.pending-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.pending-hero {
  padding: 36px 32px 24px;
  background: linear-gradient(135deg, rgba(245,158,11,.06) 0%, transparent 60%);
  border-bottom:1px solid var(--border);
}
.pending-icon {
  width:64px; height:64px; border-radius:50%;
  background: var(--amber-dim); border:2px solid rgba(245,158,11,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:var(--amber); margin:0 auto 16px;
  box-shadow: 0 0 30px var(--amber-glow);
}
.pending-title { font-size: var(--fs-lg); font-weight:700; margin-bottom:6px; color:var(--txt); }
.pending-sub   { font-size: var(--fs-sm); color:var(--txt3); line-height:1.65; max-width:320px; margin:0 auto; font-weight:450; }
.pending-body  { padding:22px 32px 26px; display:flex; flex-direction:column; gap:12px; }
.pending-logout {
  width:100%; padding:11px; background:transparent;
  border:1px solid var(--border2); border-radius: var(--r-sm);
  color:var(--txt2); font-size: var(--fs-sm); font-weight:500;
  cursor:pointer; font-family:var(--sans); transition:all .2s;
}
.pending-logout:hover { border-color:var(--brand-red); background:var(--brand-red-soft); color:var(--brand-red); }

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════════════ */
#app {
  height:100vh; display:flex; flex-direction:column;
  opacity:0; transition:opacity .6s var(--ease-luxury);
}
#app.ready { opacity:1; }

/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND — Subtle, premium watermark
═══════════════════════════════════════════════════════════════════ */
#app::before {
  content:''; position:fixed; inset:0;
  background-image:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(230,0,38,.025) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(59,130,246,.015) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
body.light #app::before {
  background-image:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(230,0,38,.015) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(59,130,246,.008) 0%, transparent 60%);
}
#app::after {
  content:''; position:fixed; bottom:24px; right:24px;
  width:120px; height:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Ctext x='50%25' y='45%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial,sans-serif' font-weight='900' font-size='38' fill='%23E60026' opacity='0.04'%3EELSEWEDY%3C/text%3E%3Ctext x='50%25' y='72%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial,sans-serif' font-weight='700' font-size='24' fill='%23E60026' opacity='0.03'%3ESHARING%3C/text%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain;
  opacity:.5; pointer-events:none; z-index:1;
}
body.light #app::after { opacity:.3; }

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR v21 Ultra — Premium Balanced Flexbox (Linear/Stripe style)
   FIX: Eliminated dead zone between theme toggle and user profile.
   Logo container expanded 25% for premium enterprise weight.
═══════════════════════════════════════════════════════════════════ */
#topbar {
  height: var(--topH);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
  border-bottom: 1px solid var(--shell-border-2);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.03);
}
body.light #topbar { 
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%) !important;
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

#topbar, #topbar * { color: var(--txt); }
body.light #topbar, body.light #topbar * { color: var(--txt-light); }

/* ── Logo region: expanded 25% (was 56px icon, now 70px icon + wider text) ── */
.logo-mark { 
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 8px 16px 8px 10px;
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.03));
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-xl);
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  min-width: 0;
}
.logo-mark:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.08));
  border-color: var(--brand-red-glow);
  box-shadow: 0 4px 24px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,0.1);
  transform: translateY(-1px);
}

/* Logo icon — expanded 25% from 56px → 70px */
.logo-icon {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
  box-shadow: 0 10px 32px var(--brand-red-glow), 0 0 0 2px rgba(230,0,38,0.2);
  letter-spacing: -1px;
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}

/* Logo text — expanded 25% from ~22px → 28px */
.logo-text {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Logo subtitle */
.logo-sub {
  font-size: 11px !important;
  font-family: var(--mono);
  letter-spacing: 1.8px;
  margin-top: 4px;
  color: var(--txt3) !important;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
}

body.light .logo-text { color: var(--txt-light) !important; }
body.light .logo-sub  { color: var(--txt-light3) !important; }

#topbar .proj-name { color: var(--txt) !important; font-weight: 600; }
#topbar .proj-code { color: var(--txt3) !important; }
#topbar .user-name { color: var(--txt) !important; font-weight: 600; }
#topbar .rt-label  { color: var(--txt3) !important; }
body.light #topbar .proj-name { color: var(--txt-light) !important; }
body.light #topbar .proj-code { color: var(--txt-light3) !important; }
body.light #topbar .user-name { color: var(--txt-light) !important; }
body.light #topbar .rt-label  { color: var(--txt-light3) !important; }

/* Vertical separator */
.divider-v { width: 1.5px; height: 40px; background: linear-gradient(180deg, transparent, var(--border2), transparent); flex-shrink: 0; }

/* PROJECT PICKER */
#projBtn {
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
  border:1.5px solid var(--glass-border);
  border-radius: var(--r-xl); padding:11px 18px;
  cursor:pointer; min-width:220px; max-width:320px;
  transition:all .2s var(--ease); flex-shrink:0;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#projBtn:hover {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
  box-shadow: 0 0 0 3px var(--brand-red-soft);
}
.proj-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  box-shadow: 0 0 10px var(--green-glow);
}
.proj-name { font-size: 17px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; letter-spacing: -0.2px; }
.proj-code { font-size: var(--fs-sm); font-family:var(--mono); margin-top:2px; color: var(--txt3); font-weight: 500; }

#projDropdown {
  position:absolute; top:56px; left:160px; width:320px;
  background: var(--bg-elevated); border:1px solid var(--border2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  z-index:300; display:none; padding:10px;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.light #projDropdown {
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#projDropdown.open { display:block; animation: dd-in .3s var(--ease-out); }
@keyframes dd-in {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:none; }
}
#projSearch {
  width:100%; padding:8px 12px; background: var(--bg-surface);
  border:1px solid var(--border2); border-radius: var(--r-sm);
  color:var(--txt); font-family:var(--mono); font-size: var(--fs-sm);
  outline:none; margin-bottom:8px; transition:all .2s;
  font-weight:500;
}
#projSearch:focus { border-color:var(--brand-red); box-shadow:0 0 0 3px var(--brand-red-soft); }
body.light #projSearch { background: #F5F5F3; color: var(--txt-light); }

.proj-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius: var(--r-sm);
  cursor:pointer; transition:all .15s;
}
.proj-item:hover { background: var(--bg-hover); }
.proj-item.active { background: var(--brand-red-soft); }
body.light .proj-item:hover { background: rgba(0,0,0,.03); }
body.light .proj-item.active { background: rgba(230,0,38,.06); }
.proj-avatar {
  width:32px; height:32px; border-radius:8px;
  background: var(--bg-surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--txt3); flex-shrink:0;
}
.proj-item.active .proj-avatar { background: var(--brand-red-soft); color:var(--brand-red); border-color:var(--brand-red-glow); }
.pi-name { font-size: var(--fs-md); font-weight:600; color:var(--txt); }
.pi-code { font-size: var(--fs-xs); color:var(--txt3); font-family:var(--mono); margin-top:2px; }
.pi-dot  { width:6px; height:6px; border-radius:50%; margin-left:auto; flex-shrink:0; }
body.light .pi-name { color: var(--txt-light); }
body.light .pi-code { color: var(--txt-light3); }

/* GLOBAL SEARCH */
#gSearchWrap { flex:1; max-width:360px; position:relative; }
#gSearchWrap i {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--txt-muted); font-size:13px;
}
#gSearch {
  width:100%; padding:12px 16px 12px 40px;
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
  border:1.5px solid var(--glass-border);
  border-radius: var(--r-xl); color:var(--txt) !important;
  font-size: 15px; font-weight:500; outline:none; transition:all .2s var(--ease);
}
#gSearch:focus {
  border-color:var(--brand-red);
  background: var(--brand-red-soft);
  box-shadow:0 0 0 3px var(--brand-red-soft);
}
#gSearch::placeholder { color:var(--txt-muted); }
body.light #gSearch { 
  background: rgba(0,0,0,.03); 
  border-color: rgba(0,0,0,.08);
  color: var(--txt-light) !important;
}
body.light #gSearch:focus { 
  background: rgba(230,0,38,.04); 
  border-color: var(--brand-red);
}
body.light #gSearch::placeholder { color: var(--txt-light-muted); }

/* LIVE SYNC */
.rt-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; padding: 6px 12px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r); }
.rt-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--amber); transition:background .4s;
  box-shadow: 0 0 8px var(--amber-glow);
}
.rt-dot.live {
  background:var(--green); box-shadow: 0 0 8px var(--green-glow);
  animation:pulse 2.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 var(--green-glow); }
  50%     { opacity:.6; box-shadow:0 0 0 5px rgba(34,197,94,0); }
}
.rt-label { font-size: var(--fs-sm); font-family:var(--mono); letter-spacing:.5px; color:var(--txt3); font-weight:600; }

/* v21: #topRight anchored flush to right edge — no dead zone */
#topRight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--shell-border-2);
}

/* ROLE BADGE — Premium pill */
.role-badge {
  padding:5px 14px; border-radius: var(--r-pill); font-size:11px;
  font-family:var(--mono); font-weight:800; letter-spacing:1px;
  text-transform:uppercase; border:2px solid;
  transition: all .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.role-badge.role-admin,.role-badge.rb-admin {
  background: var(--brand-red-soft); color:var(--brand-red);
  border-color: var(--brand-red-glow); box-shadow: 0 0 12px rgba(230,0,38,.15);
}
.role-badge.role-manager,.role-badge.rb-manager   { background: var(--amber-dim); color:var(--amber); border-color: var(--amber-glow); }
.role-badge.role-engineer,.role-badge.rb-engineer  { background: var(--blue-dim); color:var(--blue); border-color: var(--blue-glow); }
.role-badge.role-qa_inspector,.role-badge.rb-qa_inspector { background: var(--green-dim); color:var(--green); border-color: var(--green-glow); }
.role-badge.role-viewer,.role-badge.rb-viewer      { background: rgba(139,92,246,.12); color:var(--purple); border-color: rgba(139,92,246,.25); }

.user-name { font-size: 15px; white-space:nowrap; font-weight:700; letter-spacing: -0.2px; }
.avatar-btn {
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.08)); 
  border:2.5px solid var(--brand-red-glow);
  color:var(--brand-red); font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:var(--mono); transition:all .25s var(--ease);
  box-shadow: 0 2px 10px var(--brand-red-glow);
}
.avatar-btn:hover {
  border-color:var(--brand-red); background:var(--brand-red); color:#fff;
  box-shadow: 0 0 16px var(--brand-red-glow); transform:scale(1.08);
}

/* USER DROPDOWN */
#userDropdown {
  position:absolute; top:var(--topH); right:16px; width:220px;
  background: var(--bg-elevated); border:1px solid var(--border2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  z-index:300; display:none; overflow:hidden;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.light #userDropdown {
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#userDropdown.open { display:block; animation: dd-in .25s var(--ease-out); }
.ud-head { padding:14px 16px; border-bottom:1px solid var(--border); background: var(--bg-surface); }
body.light .ud-head { background: #F8F7F4; }
.ud-name  { font-size: var(--fs-md); font-weight:700; color:var(--txt); }
.ud-email { font-size: var(--fs-xs); color:var(--txt3); font-family:var(--mono); margin-top:3px; font-weight:500; }
.ud-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; font-size: var(--fs-sm); cursor:pointer;
  transition:all .15s; color:var(--txt2); font-weight:500;
}
.ud-item:hover { background: var(--bg-hover); color:var(--txt); }
.ud-item.danger { color:var(--brand-red); }
.ud-item.danger:hover { background: var(--brand-red-soft); color:var(--brand-red-hover); }
body.light .ud-item { color: var(--txt-light2); }
body.light .ud-item:hover { background: rgba(0,0,0,.03); color: var(--txt-light); }

/* THEME TOGGLE */
#themeToggle {
  width:44px; height:44px; border-radius: var(--r-sm);
  border:1.5px solid var(--glass-border);
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.03));
  color:var(--txt); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; transition:all .25s var(--ease);
}
#themeToggle:hover {
  border-color:var(--brand-red);
  background: var(--brand-red-soft);
  color:var(--brand-red);
  transform:rotate(12deg) scale(1.05);
}
body.light #themeToggle { 
  background: rgba(0,0,0,.03); 
  border-color: rgba(0,0,0,.08);
  color: var(--txt-light3);
}
body.light #themeToggle:hover { 
  background: rgba(230,0,38,.06); 
  border-color: var(--brand-red);
  color: var(--brand-red);
}

/* ═══ LANGUAGE TOGGLE — Bilingual AR/EN ═══ */
#langToggle {
  display: flex; align-items: center; gap: 5px;
  height: 44px; padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--glass-border);
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.03));
  color: var(--txt); cursor: pointer; flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .8px;
  font-family: var(--mono); text-transform: uppercase;
  transition: all .25s var(--ease);
  user-select: none;
}
#langToggle:hover {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
  color: var(--brand-red);
  transform: scale(1.03);
}
#langToggle .lt-flag { font-size: 14px; line-height: 1; }
#langToggle .lt-code { font-size: 10px; }
body.light #langToggle {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
  color: var(--txt-light3);
}
body.light #langToggle:hover {
  background: rgba(230,0,38,.06);
  border-color: var(--brand-red);
  color: var(--brand-red);
}

/* ═══ RTL SUPPORT ═══ */
body[dir="rtl"] {
  font-family: 'Cairo', 'Tajawal', var(--sans);
  letter-spacing: 0;
}
body[dir="rtl"] #sidebar { border-right: none; border-left: 1px solid var(--shell-border-2); }
body[dir="rtl"] .sb-head { flex-direction: row-reverse; }
body[dir="rtl"] .mt-btn  { flex-direction: row-reverse; }
body[dir="rtl"] .st-btn  { flex-direction: row-reverse; }
body[dir="rtl"] .sf-btn  { flex-direction: row-reverse; }
body[dir="rtl"] #topbar  { flex-direction: row-reverse; }
body[dir="rtl"] #topRight { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 14px; border-left: none; border-right: 1px solid var(--shell-border-2); }
body[dir="rtl"] #gSearchWrap i { left: auto; right: 13px; }
body[dir="rtl"] #gSearch { padding: 12px 40px 12px 16px; }
body[dir="rtl"] .lc-hero { flex-direction: row-reverse; text-align: right; }
body[dir="rtl"] .dv-header { flex-direction: row-reverse; }
body[dir="rtl"] .dv-meta { flex-direction: row-reverse; }
body[dir="rtl"] .notif-item.unread { border-left: none; border-right: 3px solid var(--brand-red); }
body[dir="rtl"] .toast { flex-direction: row-reverse; }
body[dir="rtl"] .breadcrumb, body[dir="rtl"] #breadcrumb { direction: rtl; }
body[dir="rtl"] .role-badge { letter-spacing: 0; }
body[dir="rtl"] #projDropdown { left: auto; right: 160px; }
body[dir="rtl"] #userDropdown { right: auto; left: 16px; }
body[dir="rtl"] #notifDropdown { right: 0; }
body[dir="rtl"] .mt-btn.active::after { right: auto; left: 8px; }
body[dir="rtl"] .wf-stepper { padding-left: 0; padding-right: 28px; }
body[dir="rtl"] .wf-spine { left: auto; right: 10px; }
body[dir="rtl"] .tab-actions { margin-left: 0; margin-right: auto; }
body[dir="rtl"] .mt-chev { margin-left: 0 !important; margin-right: 4px !important; }

/* ═══ IMPROVED SIDEBAR NAVIGATOR ═══ */
/* Better visual separation between main tabs */
.main-tab { 
  border-bottom: 1px solid rgba(255,255,255,.03);
  margin-bottom: 1px;
}
.main-tab:last-child { border-bottom: none; }
body.light .main-tab { border-bottom-color: rgba(0,0,0,.04); }

/* Cleaner main tab button */
.mt-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin: 2px 6px; border-radius: var(--r-sm);
  cursor: pointer; transition: all .18s var(--ease);
  position: relative;
}
.mt-btn:hover { background: var(--bg-hover); }
.mt-btn.active {
  background: linear-gradient(135deg, rgba(230,0,38,.12), rgba(230,0,38,.05));
  border-left: 2px solid var(--brand-red);
}
body.light .mt-btn:hover { background: rgba(0,0,0,.04); }
body.light .mt-btn.active { background: linear-gradient(135deg, rgba(230,0,38,.07), rgba(230,0,38,.02)); }

/* Sub-tabs indented and visually grouped */
.sub-tabs {
  margin: 2px 6px 6px 18px;
  border-left: 1.5px solid rgba(255,255,255,.07);
  padding-left: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
body.light .sub-tabs { border-left-color: rgba(0,0,0,.08); }

/* Cleaner sub-tab button */
.st-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; transition: all .15s var(--ease);
  font-size: var(--fs-sm); position: relative;
}
.st-btn:hover { background: var(--bg-hover); }
.st-btn.active {
  background: var(--brand-red-soft);
  color: var(--brand-red) !important;
  font-weight: 600;
}
.st-btn.active i { color: var(--brand-red) !important; }
body.light .st-btn:hover { background: rgba(0,0,0,.04); }
body.light .st-btn.active { background: rgba(230,0,38,.08); }

/* Remove Add Folder from sub-tabs area (hidden via JS, but also CSS safety) */
.st-btn.add-sub-inline { display: none !important; }

/* Tab actions — only show edit/delete (no move arrows) */
.tab-actions {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.mt-btn:hover .tab-actions,
.st-btn:hover .tab-actions { opacity: 1; }

.tab-btn {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; transition: all .15s;
  flex-shrink: 0;
}
.tab-btn:hover { border-color: var(--border2); color: var(--txt2); background: var(--bg-overlay); }
.tab-btn.del:hover { border-color: var(--brand-red-glow); color: var(--brand-red); background: var(--brand-red-soft); }
.tab-btn.move { display: none !important; }  /* Hide move arrows */
body.light .tab-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
body.light .tab-btn:hover { background: rgba(0,0,0,.07); }
body.light .tab-btn.del:hover { background: rgba(230,0,38,.06); }

/* MT icon */
.mt-icon { 
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: all .2s;
}
.mt-btn.active .mt-icon { 
  background: var(--brand-red-soft); 
  border-color: var(--brand-red-glow);
  color: var(--brand-red) !important;
}
body.light .mt-icon { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }

/* MT count pill */
.mt-count { 
  font-size: 9px; font-weight: 700; font-family: var(--mono);
  background: var(--bg-overlay); color: var(--txt3);
  border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
  flex-shrink: 0; min-width: 18px; text-align: center;
}
.mt-btn.active .mt-count { 
  background: var(--brand-red-soft); 
  color: var(--brand-red); 
  border-color: var(--brand-red-glow); 
}

/* MT label */
.mt-label {
  flex: 1; font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-chev { font-size: 9px; color: var(--txt3); flex-shrink: 0; }

/* Sidebar footer improvement */
.sb-footer {
  padding: 8px;
  border-top: 1px solid var(--shell-border);
  background: var(--shell-black-2);
  display: flex; flex-direction: column; gap: 2px;
}
body.light .sb-footer { background: #F8F7F4; }
.sf-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: all .15s;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--txt2); position: relative;
}
.sf-btn:hover { background: var(--bg-hover); color: var(--txt); }
body.light .sf-btn:hover { background: rgba(0,0,0,.04); }
.sys-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; font-size: 10px;
  font-family: var(--mono); color: var(--txt-muted);
  font-weight: 500;
}
.sys-row #clock { margin-left: auto; font-size: 10px; }

/* Scrollable sidebar */
#sbScroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }

#mobMenuBtn {
  display:none; width:38px; height:38px; border-radius: var(--r-sm);
  background: var(--glass); border:1px solid var(--glass-border);
  color:var(--txt); cursor:pointer; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  transition: all .2s;
}
#mobMenuBtn:hover { border-color:var(--brand-red); color:var(--brand-red); }

/* NOTIFICATION BUTTON */
#notifBtn {
  position:relative;
  width:44px; height:44px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.03)); 
  border:1.5px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--txt); font-size:17px;
  transition:all .25s var(--ease); flex-shrink:0;
}
#notifBtn:hover { background: var(--brand-red-soft); border-color:var(--brand-red); color:var(--brand-red); }
body.light #notifBtn { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
#notifBadge {
  position:absolute; top:-3px; right:-3px;
  background:var(--brand-red); color:#fff;
  font-size:9px; font-weight:800; font-family:var(--mono);
  border-radius:10px; padding:1px 5px;
  min-width:16px; text-align:center;
  border:2px solid var(--bg-elevated);
  box-shadow: 0 0 10px var(--brand-red-glow);
  animation:badge-pulse 2s infinite;
}
body.light #notifBadge { border-color: #FFFFFF; }
@keyframes badge-pulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.15); }
}
#notifDropdown {
  position:absolute; top:48px; right:0; width:340px;
  background: var(--bg-elevated); border:1px solid var(--border2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  z-index:300; display:none; overflow:hidden;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.light #notifDropdown {
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#notifDropdown.open { display:block; animation: dd-in .25s var(--ease-out); }
.notif-head {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-surface);
}
body.light .notif-head { background: #F8F7F4; }
.notif-head-title { font-size: var(--fs-sm); font-weight:700; color:var(--txt); }
.notif-clear { font-size: var(--fs-xs); color:var(--brand-red); cursor:pointer; font-weight:600; }
.notif-clear:hover { text-decoration:underline; }
.notif-list { max-height:380px; overflow-y:auto; }
.notif-item {
  display:flex; gap:11px; padding:12px 16px;
  border-bottom:1px solid var(--border); cursor:pointer;
  transition:background .15s; align-items:flex-start;
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background:rgba(230,0,38,.03); border-left:3px solid var(--brand-red); }
body.light .notif-item.unread { background:rgba(230,0,38,.02); }
.notif-ico {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.notif-ico.upload { background: var(--green-dim); color:var(--green); }
.notif-ico.status { background: var(--amber-dim); color:var(--amber); }
.notif-ico.delete { background: var(--brand-red-soft); color:var(--brand-red); }
.notif-body { flex:1; min-width:0; }
.notif-text { font-size: var(--fs-sm); color:var(--txt2); line-height:1.5; font-weight:500; }
.notif-time { font-size: var(--fs-xs); color:var(--txt3); font-family:var(--mono); margin-top:3px; font-weight:500; }
.notif-empty { padding:36px; text-align:center; color:var(--txt3); font-size: var(--fs-sm); }

/* NOTIFICATION DOT (sidebar folders) */
.notif-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--brand-red); flex-shrink:0;
  box-shadow: 0 0 6px var(--brand-red-glow);
  animation:pulse-dot 2s infinite;
  display:inline-block; margin-left:auto;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.6; transform:scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════
   BODY LAYOUT
═══════════════════════════════════════════════════════════════════ */
#body { flex:1; display:flex; overflow:hidden; position:relative; }

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — Premium, layered
═══════════════════════════════════════════════════════════════════ */
#sidebar {
  width:var(--sideW); flex-shrink:0;
  background: var(--bg-base) !important;
  border-right:1px solid var(--shell-border-2);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:width .3s var(--ease-luxury),transform .3s var(--ease);
  z-index:50;
  box-shadow: 2px 0 8px rgba(0,0,0,.2);
}
body.light #sidebar { 
  background: #FAFAF8 !important; 
  border-right-color: rgba(0,0,0,.08);
  box-shadow: 2px 0 8px rgba(0,0,0,.04);
}
#sidebar.collapsed { width:56px; }

#sidebar,#sidebar * { color: var(--txt); }
body.light #sidebar, body.light #sidebar * { color: var(--txt-light); }

#sidebar .sb-label  { color: var(--txt-muted) !important; font-weight:700; }
#sidebar .mt-label  { color: var(--txt) !important; font-weight:600; }
#sidebar .st-btn    { color: var(--txt2); font-weight:500; }
#sidebar .sf-btn    { color: var(--txt2); font-weight:500; }
#sidebar .sys-row   { color: var(--txt-muted); font-weight:500; }
body.light #sidebar .sb-label  { color: var(--txt-light-muted) !important; }
body.light #sidebar .mt-label  { color: var(--txt-light) !important; }
body.light #sidebar .st-btn    { color: var(--txt-light2); }
body.light #sidebar .sf-btn    { color: var(--txt-light2); }
body.light #sidebar .sys-row   { color: var(--txt-light-muted); }

.sb-head {
  padding:12px 14px;
  border-bottom:1px solid var(--shell-border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.sb-label {
  font-size:10px; font-weight:800; color:var(--txt-muted);
  letter-spacing:1.2px; text-transform:uppercase; font-family:var(--mono);
}
#sbToggle {
  width:24px; height:24px; border-radius:6px;
  background: var(--glass);
  border:1px solid var(--glass-border);
  color:var(--txt3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; transition:all .2s;
}
#sbToggle:hover { border-color:var(--brand-red); color:var(--brand-red); background: var(--brand-red-soft); }

#sbScroll { flex:1; overflow-y:auto; padding:8px; }
#sbOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:49;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#sbOverlay.vis { display:block; }

.sb-footer {
  border-top:1px solid var(--shell-border);
  padding:10px; flex-shrink:0;
  display:flex; flex-direction:column; gap:3px;
}
.sf-btn {
  display:flex; align-items:center; gap:9px;
  padding:8px 11px; border-radius: var(--r-sm);
  cursor:pointer; transition:all .2s;
  font-size: var(--fs-sm); font-weight:600;
  color:var(--txt2); position:relative;
}
.sf-btn:hover { background: var(--bg-hover); color:var(--txt); }
.sf-btn i { width:16px; text-align:center; flex-shrink:0; font-size:13px; color:var(--brand-red); }
#sidebar.collapsed .sf-btn span { display:none; }
#sidebar.collapsed .sb-label { display:none; }

.sys-row {
  display:flex; align-items:center; gap:7px;
  padding:8px 11px; font-size: var(--fs-xs);
  color:var(--txt-muted); font-family:var(--mono);
}
#sidebar.collapsed .sys-row span:not(#clock) { display:none; }
#clock {
  margin-left:auto; font-family:var(--mono);
  font-size: var(--fs-xs); color:var(--txt3) !important; font-weight:600;
}

/* SIDEBAR TABS */
.main-tab { margin-bottom:2px; }
.mt-btn {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius: var(--r-sm);
  cursor:pointer; transition:all .2s var(--ease);
  color:var(--txt); position:relative; overflow:hidden; font-weight:600;
}
.mt-btn:hover { background: var(--bg-hover); }
.mt-btn.active {
  background: var(--brand-red-soft);
  box-shadow: inset 0 0 0 1px var(--brand-red-glow);
}
.mt-btn.active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; background: var(--brand-red);
  border-radius:0 3px 3px 0;
  box-shadow: 0 0 10px var(--brand-red-glow);
}
.mt-icon { width:18px; text-align:center; font-size:12px; flex-shrink:0; color:var(--txt3); }
.mt-btn.active .mt-icon { color:var(--brand-red); }
.mt-label { flex:1; font-size: var(--fs-md); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--txt); }
.mt-count {
  font-size:10px; background: var(--bg-surface);
  color:var(--txt3); padding:2px 7px;
  border-radius:4px; font-family:var(--mono); font-weight:700;
  flex-shrink:0; border:1px solid var(--border);
}
.mt-btn.active .mt-count {
  background:var(--brand-red); color:#fff;
  border-color:var(--brand-red); box-shadow: 0 0 8px var(--brand-red-glow);
}
.mt-chev {
  font-size:9px; color:var(--txt-muted); flex-shrink:0;
  transition:transform .25s var(--ease);
}
.mt-btn.active .mt-chev { transform:rotate(90deg); color:var(--brand-red); }
#sidebar.collapsed .mt-label,
#sidebar.collapsed .mt-count,
#sidebar.collapsed .mt-chev { display:none; }

.sub-tabs { padding:2px 0 4px 26px; }
.st-btn {
  display:flex; align-items:center; gap:8px;
  padding:6px 9px; border-radius:6px;
  cursor:pointer; font-size: var(--fs-sm); font-weight:500;
  color:var(--txt2); transition:all .15s; position:relative;
}
.st-btn i { font-size:10px; }
.st-btn:hover { background: var(--bg-hover); color:var(--txt); }
.st-btn.active { background: rgba(230,0,38,.08); color:var(--txt); font-weight:600; }
.st-btn.active::before {
  content:''; position:absolute; left:-8px; top:50%;
  transform:translateY(-50%);
  width:3px; height:14px; background:var(--brand-red);
  border-radius:2px; box-shadow: 0 0 6px var(--brand-red-glow);
}
#sidebar.collapsed .sub-tabs { display:none; }

/* TAB ACTIONS (Admin — hover reveals) */
.tab-actions { display:none; align-items:center; gap:3px; margin-left:auto; }
.mt-btn:hover .tab-actions,
.st-btn:hover .tab-actions { display:flex; }
.tab-btn {
  width:20px; height:20px; border-radius:5px;
  border:1px solid var(--border2);
  background: var(--bg-surface);
  color:var(--txt3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; transition:all .15s; flex-shrink:0;
}
.tab-btn:hover { border-color:var(--border3); color:var(--txt); background: var(--bg-overlay); }
.tab-btn.del:hover {
  border-color:var(--brand-red); color:var(--brand-red);
  background: var(--brand-red-soft); box-shadow: 0 0 6px var(--brand-red-glow);
}
.tab-btn.move:hover { border-color:var(--blue); color:var(--blue); background: var(--blue-dim); }
#sidebar.collapsed .tab-actions { display:none !important; }

/* Edit Tab Modal */
.edit-tab-form { display:flex; flex-direction:column; gap:12px; }
.edit-tab-form .fi { width:100%; }

/* ═══════════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════════ */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; background: var(--bg-canvas); position:relative; z-index:1; }
body.light #main { background: var(--bg-light-canvas); }

/* BREADCRUMB — Premium */
#breadcrumb {
  padding:10px 20px; font-size: var(--fs-sm);
  font-family:var(--mono); color:var(--txt-muted);
  display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  border-bottom:1px solid var(--shell-border-2); flex-shrink:0;
  background: var(--bg-base); font-weight:500;
}
body.light #breadcrumb { 
  background: #FFFFFF; 
  border-bottom-color: rgba(0,0,0,.08);
  color: var(--txt-light-muted);
}
.bc-sep { color:var(--brand-red); margin:0 3px; font-weight:700; font-size:12px; opacity:.7; }
.bc-cur { color:var(--txt); font-weight:700; }
body.light .bc-cur { color: var(--txt-light); }

/* EMPTY STATE / MAIN MESSAGE */
#mainMessage {
  flex:1; display:none; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:40px; gap:12px; position:relative; z-index:2;
}
#mainMessage.show { display:flex; }
.mm-icon  { font-size:40px; color:var(--txt); opacity:.7; line-height:1; }
.mm-title { font-size: var(--fs-xl); font-weight:700; color:var(--txt); margin-top:4px; letter-spacing:-.3px; }
.mm-sub   { font-size: var(--fs-sm); color:var(--txt2); max-width:380px; line-height:1.7; font-weight:450; }
.mm-action {
  margin-top:14px; padding:9px 20px; background:var(--brand-red);
  border:none; border-radius: var(--r-sm); color:#fff; font-size: var(--fs-sm); font-weight:600;
  cursor:pointer; font-family:var(--sans); transition:all .2s;
  box-shadow: 0 4px 16px var(--brand-red-glow);
}
.mm-action.hidden { display:none; }
.mm-action:hover { background:var(--brand-red-hover); box-shadow: 0 8px 24px var(--brand-red-glow); transform:translateY(-1px); }
body.light .mm-title { color: var(--txt-light); }
body.light .mm-sub { color: var(--txt-light2); }

/* ADMIN DASHBOARD */
#adminDashboard {
  display:none; padding:20px; gap:14px; flex-wrap:wrap;
}
#adminDashboard.show { display:flex; }
.adm-stat-card {
  flex:1; min-width:160px; background: var(--bg-elevated);
  border:1px solid var(--border); border-radius: var(--r-lg);
  padding:18px; display:flex; flex-direction:column; gap:6px;
  transition: all .2s;
  position:relative; overflow:hidden;
}
.adm-stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  opacity:.6;
}
.adm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border2);
}
.adm-stat-val   { font-size:28px; font-weight:800; font-family:var(--mono); color:var(--txt); letter-spacing:-1px; }
.adm-stat-label { font-size:10px; color:var(--txt3); text-transform:uppercase; letter-spacing:.8px; font-family:var(--mono); font-weight:600; }
.adm-stat-card.red   { border-color: rgba(230,0,38,.15); background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(230,0,38,.04) 100%); }
.adm-stat-card.red::before   { background: var(--brand-red); }
.adm-stat-card.green { border-color: rgba(34,197,94,.15); background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(34,197,94,.04) 100%); }
.adm-stat-card.green::before { background: var(--green); }
.adm-stat-card.amber { border-color: rgba(245,158,11,.15); background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(245,158,11,.04) 100%); }
.adm-stat-card.amber::before { background: var(--amber); }
.adm-stat-card.blue  { border-color: rgba(59,130,246,.15); background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(59,130,246,.04) 100%); }
.adm-stat-card.blue::before  { background: var(--blue); }
.adm-stat-card.red   .adm-stat-val { color:var(--brand-red); }
.adm-stat-card.green .adm-stat-val { color:var(--green); }
.adm-stat-card.amber .adm-stat-val { color:var(--amber); }
.adm-stat-card.blue  .adm-stat-val { color:var(--blue); }
body.light .adm-stat-card { background: #FFFFFF; border-color: rgba(0,0,0,.08); }
body.light .adm-stat-card.red   { background: linear-gradient(135deg, #FFFFFF 0%, rgba(230,0,38,.03) 100%); }
body.light .adm-stat-card.green { background: linear-gradient(135deg, #FFFFFF 0%, rgba(34,197,94,.03) 100%); }
body.light .adm-stat-card.amber { background: linear-gradient(135deg, #FFFFFF 0%, rgba(245,158,11,.03) 100%); }
body.light .adm-stat-card.blue  { background: linear-gradient(135deg, #FFFFFF 0%, rgba(59,130,246,.03) 100%); }

/* LIST VIEW */
#listView { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#listView.hidden { display:none; }

.list-toolbar {
  padding:10px 18px; border-bottom:1px solid var(--shell-border-2);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-shrink:0; background: var(--bg-base);
}
body.light .list-toolbar { background: #FFFFFF; border-bottom-color: rgba(0,0,0,.08); }
.list-title { font-size: var(--fs-lg); font-weight:700; color:var(--txt); letter-spacing:-.2px; }
body.light .list-title { color: var(--txt-light); }
.item-count {
  font-size:11px; color:var(--txt3); font-family:var(--mono);
  padding:3px 8px; background: var(--bg-surface); border-radius:4px; border:1px solid var(--border);
  font-weight:600;
}
body.light .item-count { background: #F5F5F3; color: var(--txt-light3); border-color: rgba(0,0,0,.08); }
.toolbar-right { display:flex; align-items:center; gap:7px; }
.filter-wrap { position:relative; }
.filter-wrap i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--txt-muted); font-size:10px; }
.filter-in {
  padding:7px 11px 7px 28px; background: var(--bg-surface); border:1px solid var(--border);
  border-radius: var(--r-sm); color:var(--txt); font-size: var(--fs-sm);
  outline:none; width:160px; transition:all .2s; font-family:var(--sans);
  font-weight:450;
}
.filter-in:focus { border-color:var(--brand-red); width:200px; box-shadow:0 0 0 3px var(--brand-red-soft); }
.filter-in::placeholder { color:var(--txt-muted); }
body.light .filter-in { background: #F5F5F3; color: var(--txt-light); border-color: rgba(0,0,0,.10); }
body.light .filter-in:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(230,0,38,.08); }

.vt { display:flex; gap:3px; }
.vt-btn {
  width:30px; height:30px; border-radius:6px; border:1px solid var(--border);
  background: var(--bg-surface); color:var(--txt3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s;
}
.vt-btn:hover { border-color:var(--border2); color:var(--txt2); background: var(--bg-overlay); }
.vt-btn.active { background: var(--brand-red-soft); border-color:var(--brand-red-glow); color:var(--brand-red); }
body.light .vt-btn { background: #F5F5F3; color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
body.light .vt-btn:hover { background: #EDECE8; color: var(--txt-light2); }
body.light .vt-btn.active { background: rgba(230,0,38,.08); border-color: rgba(230,0,38,.20); color: var(--brand-red); }

/* BUTTONS — Premium */
.btn-primary {
  padding:7px 14px; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep));
  border:none; border-radius: var(--r-sm);
  color:#fff; font-size: var(--fs-sm); font-weight:600; cursor:pointer; font-family:var(--sans);
  display:inline-flex; align-items:center; gap:6px; transition:all .2s;
  box-shadow: 0 4px 14px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,.2);
  position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  opacity:0; transition:opacity .3s;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-red-hover), var(--brand-red));
  box-shadow: 0 6px 20px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,.3);
  transform:translateY(-1px);
}
.btn-primary:hover:not(:disabled)::before { opacity:1; }
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; transform:none; }

.btn-ghost {
  padding:7px 14px; background:transparent; border:1px solid var(--border2);
  border-radius: var(--r-sm); color:var(--txt2); font-size: var(--fs-sm); font-weight:600;
  cursor:pointer; font-family:var(--sans); transition:all .2s;
}
.btn-ghost:hover { border-color:var(--border3); background: var(--bg-hover); color:var(--txt); }
body.light .btn-ghost { color: var(--txt-light2); border-color: rgba(0,0,0,.12); }
body.light .btn-ghost:hover { background: rgba(0,0,0,.03); color: var(--txt-light); }

.btn-danger {
  padding:7px 14px; background: var(--brand-red-soft); border:1px solid var(--brand-red-glow);
  border-radius: var(--r-sm); color:var(--brand-red); font-size: var(--fs-sm); font-weight:700;
  cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; gap:6px; transition:all .2s;
}
.btn-danger:hover { background:rgba(230,0,38,.18); }
.btn-danger.hidden { display:none; }
body.light .btn-danger { background: rgba(230,0,38,.06); border-color: rgba(230,0,38,.15); }
body.light .btn-danger:hover { background: rgba(230,0,38,.10); }

/* ADVANCED FILTER BAR */
.adv-filter-bar {
  display:flex; gap:7px; align-items:center; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--border);
  background: var(--bg-surface);
}
body.light .adv-filter-bar { background: #F5F5F3; border-bottom-color: rgba(0,0,0,.06); }
.adv-filter-bar .filter-chip {
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px; font-size:10px; font-weight:600;
  border:1px solid var(--border); background: var(--bg-overlay); color:var(--txt3);
  cursor:pointer; font-family:var(--mono); transition:all .15s; white-space:nowrap;
}
.adv-filter-bar .filter-chip:hover { border-color:var(--border2); color:var(--txt2); }
body.light .adv-filter-bar .filter-chip { background: #EDECE8; color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
.adv-filter-select {
  padding:5px 10px; background: var(--bg-overlay); border:1px solid var(--border);
  border-radius: var(--r-sm); color:var(--txt2); font-size:11px; font-family:var(--mono);
  outline:none; cursor:pointer; transition:all .2s;
}
.adv-filter-select:focus { border-color:var(--brand-red); }
.adv-filter-select option { background: var(--bg-surface); }
body.light .adv-filter-select { background: #EDECE8; color: var(--txt-light2); border-color: rgba(0,0,0,.10); }
body.light .adv-filter-select option { background: #F5F5F3; color: var(--txt-light); }
.adv-date-input {
  padding:5px 10px; background: var(--bg-overlay); border:1px solid var(--border);
  border-radius: var(--r-sm); color:var(--txt2); font-size:11px; font-family:var(--mono);
  outline:none; transition:all .2s; max-width:130px;
}
.adv-date-input:focus { border-color:var(--brand-red); }
body.light .adv-date-input { background: #EDECE8; color: var(--txt-light2); border-color: rgba(0,0,0,.10); }

/* DOCUMENT TABLE — Premium */
#tableWrap { flex:1; overflow-y:auto; overflow-x:auto; }
.doc-table { width:100%; border-collapse:collapse; font-size: var(--fs-sm); min-width:780px; }
.doc-table thead { position:sticky; top:0; z-index:5; }
.doc-table th {
  padding:10px 14px; text-align:left; font-size:10px; font-weight:700;
  color:var(--txt3); text-transform:uppercase; letter-spacing:1px;
  font-family:var(--mono); background: var(--bg-base);
  border-bottom:1px solid var(--shell-border-2); white-space:nowrap;
}
body.light .doc-table th { background: #FFFFFF; color: var(--txt-light3); border-bottom-color: rgba(0,0,0,.10); }
.doc-table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
body.light .doc-table td { border-bottom-color: rgba(0,0,0,.05); }
.doc-table tr { cursor:pointer; transition:background .15s; }
.doc-table tbody tr:hover td { background: var(--bg-hover); }
body.light .doc-table tbody tr:hover td { background: rgba(230,0,38,.02); }
.t-code  { font-family:var(--mono); font-size: var(--fs-sm); font-weight:700; color:var(--txt); letter-spacing:.5px; }
body.light .t-code { color: var(--txt-light); }
.t-sub   { font-family:var(--mono); font-size:11px; color:var(--txt3); margin-top:3px; font-weight:500; }
body.light .t-sub { color: var(--txt-light3); }
.t-title { font-size: var(--fs-md); font-weight:600; color:var(--txt); margin-bottom:3px; }
body.light .t-title { color: var(--txt-light); }

/* ═══════════════════════════════════════════════════════════════════
   FIX 2: MOBILE STICKY COLUMN — Arabic Long-Text Overflow Prevention
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .doc-table td:first-child,
  .doc-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-canvas);
  }
  body.light .doc-table td:first-child { background: var(--bg-light-canvas); }
  .doc-table thead th:first-child { background: var(--bg-base); z-index: 3; }
  body.light .doc-table thead th:first-child { background: #FFFFFF; }
  .doc-table td:first-child .t-code,
  .doc-table td:first-child .t-sub {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .mob-title, .mob-code {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* STATUS BADGES — Premium pills */
.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius: var(--r-pill); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  font-family:var(--mono);
}
.status-badge,.s-draft    { background:var(--bg-surface); color:var(--txt3); border:1px solid var(--border); }
body.light .s-draft { background: rgba(0,0,0,.04); color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
.s-approved   { background:var(--green-dim);        color:var(--green);        border:1px solid var(--green-glow); }
.s-rejected   { background:var(--brand-red-soft);   color:var(--brand-red);    border:1px solid var(--brand-red-glow); }
.s-pending    { background:var(--amber-dim);         color:var(--amber);        border:1px solid var(--amber-glow); }
.s-submitted  { background:var(--blue-dim);          color:var(--blue);         border:1px solid var(--blue-glow); }
.s-under_review { background:var(--amber-dim);       color:var(--amber);        border:1px solid var(--amber-glow); }
.s-superseded { background:var(--bg-hover);    color:var(--txt-muted);    border:1px solid var(--border); }
.s-archived   { background:var(--bg-hover);    color:var(--txt-muted);    border:1px solid var(--border); }

/* INLINE STATUS CHANGER */
.status-select-wrap { position:relative; display:inline-flex; }
.status-changer {
  appearance:none; padding:3px 20px 3px 8px;
  border-radius: var(--r-pill); font-size:10px; font-weight:700;
  font-family:var(--mono); border:1px solid transparent;
  cursor:pointer; outline:none; transition:all .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%238b949e' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 5px center; background-size:8px;
}
.status-changer.s-draft       { background-color:var(--bg-surface); color:var(--txt3); border-color:var(--border); }
.status-changer.s-pending     { background-color:var(--amber-dim); color:var(--amber); border-color:rgba(245,158,11,.25); }
.status-changer.s-submitted   { background-color:var(--blue-dim); color:var(--blue); border-color:rgba(59,130,246,.25); }
.status-changer.s-under_review{ background-color:var(--amber-dim); color:var(--amber); border-color:rgba(245,158,11,.25); }
.status-changer.s-approved    { background-color:var(--green-dim); color:var(--green); border-color:rgba(34,197,94,.25); }
.status-changer.s-rejected    { background-color:var(--brand-red-soft); color:var(--brand-red); border-color:var(--brand-red-glow); }
.status-changer.s-superseded  { background-color:var(--bg-hover); color:var(--txt-muted); }
.status-changer.s-archived    { background-color:var(--bg-hover); color:var(--txt-muted); }
body.light .status-changer.s-draft      { background-color:rgba(0,0,0,.04); color:var(--txt-light3); }
body.light .status-changer.s-pending    { background-color:rgba(245,158,11,.08); color:#B45309; border-color:rgba(245,158,11,.2); }
body.light .status-changer.s-submitted  { background-color:rgba(59,130,246,.08); color:#1D4ED8; border-color:rgba(59,130,246,.2); }
body.light .status-changer.s-under_review { background-color:rgba(245,158,11,.08); color:#B45309; }
body.light .status-changer.s-approved   { background-color:rgba(34,197,94,.08); color:#15803D; border-color:rgba(34,197,94,.2); }
body.light .status-changer.s-rejected   { background-color:rgba(230,0,38,.06); color:#991B1B; border-color:rgba(230,0,38,.15); }

/* DISCIPLINE TAGS */
.disc-tag {
  padding:4px 10px; border-radius:6px; font-size:10px; font-weight:700;
  font-family:var(--mono); text-transform:uppercase;
  background:var(--bg-surface); border:1px solid var(--border);
}
.d-HV           { background:rgba(230,0,38,.10);   color:#FF4D6D; border-color:rgba(230,0,38,.25); }
.d-MV           { background:var(--amber-dim);      color:var(--amber); border-color:var(--amber-glow); }
.d-Telecom      { background:var(--blue-dim);        color:var(--blue); border-color:var(--blue-glow); }
.d-Civil        { background:rgba(139,92,246,.12); color:var(--purple); border-color:rgba(139,92,246,.25); }
.d-Architecture { background:var(--green-dim);       color:var(--green); border-color:var(--green-glow); }
.d-Mechanical   { background:var(--blue-dim);        color:#60A5FA; border-color:rgba(59,130,246,.2); }
.d-Electrical   { background:rgba(245,158,11,.12);   color:#FBBF24; border-color:rgba(245,158,11,.25); }
.d-Structural   { background:rgba(196,154,108,.12);  color:#D4A373; border-color:rgba(196,154,108,.25); }
.d-General      { background:var(--bg-surface); color:var(--txt3); border-color:var(--border); }
body.light .disc-tag { text-shadow:none; }
body.light .d-HV        { background:rgba(230,0,38,.06); color:#991B1B; }
body.light .d-MV        { background:rgba(245,158,11,.06); color:#92400E; }
body.light .d-Telecom   { background:rgba(59,130,246,.06); color:#1E40AF; }
body.light .d-Civil     { background:rgba(139,92,246,.06); color:#5B21B6; }
body.light .d-Architecture { background:rgba(34,197,94,.06); color:#15803D; }
body.light .d-Mechanical{ background:rgba(59,130,246,.06); color:#1E40AF; }
body.light .d-Electrical{ background:rgba(245,158,11,.06); color:#92400E; }
body.light .d-Structural{ background:rgba(196,154,108,.08); color:#78350F; }
body.light .d-General   { background:rgba(0,0,0,.04); color:var(--txt-light3); }

/* ROW ACTIONS */
.row-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.row-btn {
  width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-surface); color:var(--txt3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px; transition:all .15s;
}
.row-btn:hover { border-color:var(--border2); color:var(--txt2); background:var(--bg-overlay); }
.row-btn.del:hover { border-color:var(--brand-red-glow); color:var(--brand-red); background:var(--brand-red-soft); }
body.light .row-btn { background: #F5F5F3; color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
body.light .row-btn:hover { background: #EDECE8; color: var(--txt-light2); }
body.light .row-btn.del:hover { background: rgba(230,0,38,.06); color: var(--brand-red); border-color: rgba(230,0,38,.15); }

/* MOBILE DOC LIST */
#mobDocList { display:none; flex-direction:column; gap:8px; padding:12px; overflow-y:auto; flex:1; }
.mob-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--r); padding:14px 16px; cursor:pointer; transition:all .15s;
  box-shadow: var(--shadow-xs);
}
.mob-card:hover { border-color:var(--brand-red-glow); background:var(--bg-surface); box-shadow: var(--shadow-sm); }
body.light .mob-card { background: #FFFFFF; border-color: rgba(0,0,0,.08); box-shadow: var(--shadow-light); }
body.light .mob-card:hover { border-color: rgba(230,0,38,.15); }
.mob-top   { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.mob-code  { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--txt); }
body.light .mob-code { color: var(--txt-light); }
.mob-title { font-size: var(--fs-lg); font-weight:600; color:var(--txt); margin-bottom:3px; }
body.light .mob-title { color: var(--txt-light); }
.mob-desc  { font-size: var(--fs-sm); color:var(--txt3); line-height:1.5; margin-bottom:7px; }
body.light .mob-desc { color: var(--txt-light3); }
.mob-foot  { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mono-date { font-family:var(--mono); font-size:10px; color:var(--txt3); }
body.light .mono-date { color: var(--txt-light3); }

/* GRID VIEW */
#gridWrap { flex:1; overflow-y:auto; padding:16px; }
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.grid-card {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius: var(--r-lg);
  padding:20px; cursor:pointer; transition:all .3s var(--ease);
  display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
}
.grid-card:hover {
  transform:translateY(-3px); border-color:var(--brand-red-glow);
  box-shadow: var(--shadow-lg); background:var(--bg-surface);
}
body.light .grid-card { background: #FFFFFF; border-color: rgba(0,0,0,.08); box-shadow: var(--shadow-light); }
body.light .grid-card:hover { border-color: rgba(230,0,38,.15); box-shadow: var(--shadow-light-lg); }
.gc-title { font-size: var(--fs-md); font-weight:600; color:var(--txt); line-height:1.3; }
body.light .gc-title { color: var(--txt-light); }
.gc-code  { font-family:var(--mono); font-size:11px; color:var(--gold); font-weight:700; }
.gc-desc  { font-size: var(--fs-sm); color:var(--txt3); line-height:1.6; }
body.light .gc-desc { color: var(--txt-light3); }
.gc-foot  { display:flex; align-items:center; justify-content:space-between; }

/* EMPTY STATE */
.empty-state {
  padding:80px 40px; text-align:center;
  background:radial-gradient(circle at center,rgba(230,0,38,.03) 0%,transparent 70%);
}
.es-icon  { font-size:56px; color:var(--brand-red); opacity:.25; margin-bottom:20px; }
.es-title { font-size: var(--fs-2xl); font-weight:800; color:var(--txt); margin-bottom:10px; letter-spacing:-.5px; }
.es-sub   { font-size: var(--fs-md); color:var(--txt3); max-width:400px; margin:0 auto; line-height:1.6; font-weight:450; }
body.light .es-title { color: var(--txt-light); }
body.light .es-sub { color: var(--txt-light3); }

/* ═══════════════════════════════════════════════════════════════════
   DETAIL VIEW — Premium
═══════════════════════════════════════════════════════════════════ */
#detailView { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#detailView.hidden { display:none; }
@keyframes fade-in {
  from { opacity:0; transform:translateX(6px); }
  to   { opacity:1; transform:none; }
}
#detailView.fade-in { animation:fade-in .25s var(--ease); }

.dv-header {
  display:flex; align-items:flex-start; gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--border); flex-shrink:0; background: var(--bg-elevated);
}
body.light .dv-header { background: #FFFFFF; border-bottom-color: rgba(0,0,0,.08); }
.back-btn {
  width:34px; height:34px; border-radius: var(--r-sm); border:1px solid var(--border);
  background:var(--bg-surface); color:var(--txt2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:all .15s;
}
.back-btn:hover { border-color:var(--border2); color:var(--txt); background:var(--bg-overlay); }
body.light .back-btn { background: #F5F5F3; color: var(--txt-light2); border-color: rgba(0,0,0,.10); }
body.light .back-btn:hover { background: #EDECE8; color: var(--txt-light); }
.dv-head  { flex:1; min-width:0; }
.dv-code  { font-family:var(--mono); font-size: var(--fs-sm); color:var(--txt3); margin-bottom:4px; font-weight:600; }
body.light .dv-code { color: var(--txt-light3); }
.dv-title { font-size: var(--fs-xl); font-weight:700; color:var(--txt); margin-bottom:8px; line-height:1.3; letter-spacing:-.3px; }
body.light .dv-title { color: var(--txt-light); }
.dv-meta  { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.dv-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }

.dv-tabs {
  display:flex; gap:2px; padding:8px 16px; border-bottom:1px solid var(--border);
  flex-shrink:0; background: var(--bg-elevated);
}
body.light .dv-tabs { background: #F8F7F4; border-bottom-color: rgba(0,0,0,.08); }
.dtab {
  padding:7px 14px; border-radius: var(--r-sm); cursor:pointer; transition:all .15s;
  font-size: var(--fs-sm); font-weight:600; color:var(--txt3);
  display:flex; align-items:center; gap:6px;
}
.dtab:hover { color:var(--txt2); background: var(--bg-hover); }
.dtab.active { background: var(--brand-red-soft); color:var(--brand-red); }
body.light .dtab { color: var(--txt-light3); }
body.light .dtab:hover { background: rgba(0,0,0,.03); color: var(--txt-light2); }
body.light .dtab.active { background: rgba(230,0,38,.08); color: var(--brand-red); }

#dvPanelArea { flex:1; overflow-y:auto; padding:20px; }
body.light #dvPanelArea { background: var(--bg-light-canvas); }
.d-panel { display:none; }
.d-panel.active { display:block; }
.fsec { margin-bottom:22px; }
.fsec-title {
  font-size:10px; font-weight:700; color:var(--txt2); text-transform:uppercase;
  letter-spacing:1.3px; margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--border2); font-family:var(--mono);
}
body.light .fsec-title { color: var(--txt-light2); border-bottom-color: rgba(0,0,0,.10); }

.fields-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.fc { padding:11px 14px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.fc:nth-child(3n) { border-right:none; }
body.light .fc { border-color: rgba(0,0,0,.06); }
.fc-label { font-size:10px; font-weight:700; color:var(--txt2); text-transform:uppercase; letter-spacing:.8px; font-family:var(--mono); margin-bottom:6px; }
body.light .fc-label { color: var(--txt-light3); }
.fc-val   { font-size: var(--fs-md); font-weight:600; color:var(--txt); }
body.light .fc-val { color: var(--txt-light); }
.fc-val.n { color:var(--txt3); }
body.light .fc-val.n { color: var(--txt-light3); }

/* WORKFLOW STEPPER */
.wf-stepper { position:relative; padding-left:28px; display:flex; flex-direction:column; gap:0; }
.wf-spine {
  position:absolute; left:10px; top:16px; bottom:16px;
  width:2px; background:var(--border2); border-radius:1px; z-index:0;
}
.wf-step { position:relative; display:flex; gap:14px; align-items:flex-start; padding-bottom:14px; }
.wf-node {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:#fff; z-index:1; margin-top:10px;
  background:var(--bg-surface); border:2px solid var(--border2);
}
.wf-node.pending     { background:var(--bg-surface); border-color:var(--border2); }
.wf-node.in_progress { background:var(--amber); border-color:var(--amber); }
.wf-node.completed   { background:var(--green); border-color:var(--green); }
.wf-node.rejected    { background:var(--brand-red); border-color:var(--brand-red); }
.wf-card {
  flex:1; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--r); padding:11px 13px; min-width:0;
}
body.light .wf-card { background: #FFFFFF; border-color: rgba(0,0,0,.08); }
.wf-card.s-completed   { border-color:rgba(34,197,94,.2); }
.wf-card.s-rejected    { border-color:var(--brand-red-glow); }
.wf-card.s-in_progress { border-color:rgba(245,158,11,.25); }
.wf-ch   { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:7px; }
.wf-num  { font-size:9px; color:var(--txt3); font-family:var(--mono); }
.wf-name { font-size: var(--fs-md); font-weight:700; color:var(--txt); }
body.light .wf-name { color: var(--txt-light); }
.wf-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:4px; font-size:10px; font-weight:700; font-family:var(--mono); white-space:nowrap; }
.wb-done     { background:var(--green-dim); color:var(--green); }
.wb-rejected { background:var(--brand-red-soft); color:var(--brand-red); }
.wb-progress { background:var(--amber-dim); color:var(--amber); }
.wb-pending  { background:var(--bg-surface); color:var(--txt3); }
body.light .wb-pending { background: #F5F5F3; color: var(--txt-light3); }
.wf-meta     { display:flex; gap:14px; font-size:11px; color:var(--txt3); flex-wrap:wrap; margin-bottom:5px; }
.wf-meta i   { margin-right:4px; }
.wf-date     { font-size:10px; color:var(--txt3); font-family:var(--mono); margin-top:5px; }
.wf-comment  { font-size:11px; color:var(--txt2); margin-top:7px; line-height:1.6; background:var(--bg-surface); padding:8px 10px; border-radius:6px; border-left:2px solid var(--border2); }
body.light .wf-comment { background: #F5F5F3; border-left-color: rgba(0,0,0,.10); color: var(--txt-light2); }

/* WORKFLOW MANAGER */
.wf-manager {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--r); padding:14px; margin-bottom:16px;
}
body.light .wf-manager { background: #F8F7F4; border-color: rgba(0,0,0,.08); }
.wf-manager-title {
  font-size:10px; font-weight:700; color:var(--txt3);
  text-transform:uppercase; letter-spacing:1px;
  font-family:var(--mono); margin-bottom:10px;
}
body.light .wf-manager-title { color: var(--txt-light3); }
.wf-step-form {
  display:grid; grid-template-columns:1fr 1fr 1fr auto;
  gap:8px; align-items:end;
}
.wf-step-form .fg { margin:0; }
.wf-step-form .fi { padding:7px 10px; font-size: var(--fs-sm); }

/* ATTACHMENTS */
.attach-grid  { display:flex; flex-direction:column; gap:8px; }
.attach-card  {
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--r); transition:all .15s;
}
.attach-card:hover { border-color:var(--border2); background:var(--bg-surface); }
body.light .attach-card { background: #FFFFFF; border-color: rgba(0,0,0,.08); }
body.light .attach-card:hover { background: #F8F7F4; }
.at-thumb {
  width:38px; height:38px; border-radius:8px; background:var(--bg-surface);
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:16px; flex-shrink:0; color:var(--txt3);
}
body.light .at-thumb { background: #F5F5F3; border-color: rgba(0,0,0,.08); color: var(--txt-light3); }
.at-thumb.pdf  { background:var(--brand-red-soft); border-color:var(--brand-red-glow); color:var(--brand-red); }
.at-thumb.xlsx { background:var(--green-dim); border-color:rgba(34,197,94,.2); color:var(--green); }
.at-thumb.img  { background:var(--blue-dim); border-color:var(--blue-glow); color:var(--blue); }
.at-thumb.zip  { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.2); color:var(--purple); }
.at-info    { flex:1; min-width:0; }
.at-name    { font-size: var(--fs-md); font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.light .at-name { color: var(--txt-light); }
.at-size    { font-size:11px; color:var(--txt3); font-family:var(--mono); font-weight:500; }
body.light .at-size { color: var(--txt-light3); }
.at-actions { display:flex; gap:5px; flex-shrink:0; }
.at-btn {
  padding:4px 10px; border-radius:5px; font-size:10px; font-weight:700;
  cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
}
.at-btn.dl { background:var(--green-dim); color:var(--green); border:1px solid rgba(34,197,94,.2); }
.at-btn.dl:hover { background:rgba(34,197,94,.18); }
.at-btn.vw { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(59,130,246,.2); }
.at-btn.vw:hover { background:rgba(59,130,246,.18); }

/* ATTACH UPLOAD BAR */
.attach-upload-bar {
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding:11px 13px;
  background:var(--bg-elevated); border:1px dashed var(--border2);
  border-radius: var(--r); cursor:pointer; transition:all .2s;
}
.attach-upload-bar:hover { border-color:var(--brand-red); background:var(--brand-red-soft); }
body.light .attach-upload-bar { background: #F8F7F4; border-color: rgba(0,0,0,.14); }
body.light .attach-upload-bar:hover { background: rgba(230,0,38,.04); border-color: var(--brand-red); }
.attach-upload-bar i  { color:var(--brand-red); font-size:16px; }
.attach-upload-bar span { font-size: var(--fs-sm); color:var(--txt2); }
body.light .attach-upload-bar span { color: var(--txt-light2); }
.attach-upload-bar .au-hint { font-size:10px; color:var(--txt3); margin-left:auto; }
body.light .attach-upload-bar .au-hint { color: var(--txt-light3); }

/* ═══════════════════════════════════════════════════════════════════
   MODALS — Premium glassmorphism
═══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:overlay-in .2s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.light .modal-overlay { background: rgba(0,0,0,.45); }
@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }
.modal-overlay.hidden { display:none !important; }
.modal {
  background:var(--bg-elevated); border:1px solid var(--border2);
  border-radius: var(--r-xl); width:100%; max-width:640px; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow: var(--shadow-xl);
  animation:modal-in .3s var(--ease-out);
  position:relative;
}
.modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
body.light .modal { background: #FFFFFF; border-color: rgba(0,0,0,.10); }
body.light .modal::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); }
@keyframes modal-in {
  from { opacity:0; transform:scale(.96) translateY(12px); }
  to   { opacity:1; transform:none; }
}
.modal.sm { max-width:440px; }
.m-head {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;
  background: var(--bg-surface);
}
body.light .m-head { background: #F8F7F4; border-bottom-color: rgba(0,0,0,.08); }
.m-title { font-size: var(--fs-lg); font-weight:800; letter-spacing:-.3px; color:var(--txt); }
body.light .m-title { color: var(--txt-light); }
.m-sub   { font-size: var(--fs-sm); color:var(--txt3); margin-top:4px; font-weight:500; }
body.light .m-sub { color: var(--txt-light3); }
.m-close {
  width:30px; height:30px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-overlay); color:var(--txt3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s;
}
.m-close:hover { border-color:var(--brand-red); color:var(--brand-red); background:var(--brand-red-soft); }
body.light .m-close { background: #F5F5F3; color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
body.light .m-close:hover { background: rgba(230,0,38,.06); color: var(--brand-red); border-color: rgba(230,0,38,.15); }
.m-body { padding:20px 22px; overflow-y:auto; flex:1; }
.m-foot {
  padding:14px 22px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; flex-shrink:0;
  background: var(--bg-surface);
}
body.light .m-foot { background: #F8F7F4; border-top-color: rgba(0,0,0,.08); }

.form-row { display:grid; gap:13px; margin-bottom:13px; }
.form-row.c2 { grid-template-columns:1fr 1fr; }
.form-row.c3 { grid-template-columns:1fr 1fr 1fr; }
.fg  { display:flex; flex-direction:column; gap:5px; }
.fl  { font-size:10px; font-weight:700; color:var(--txt2); text-transform:uppercase; letter-spacing:1px; font-family:var(--mono); }
body.light .fl { color: var(--txt-light3); }
.fi,.fs,.ft {
  padding:10px 13px; background:var(--bg-surface); border:1.5px solid var(--border2);
  border-radius: var(--r-sm); color:var(--txt); font-size: var(--fs-md); outline:none;
  font-family:var(--sans); transition:all .2s; width:100%; font-weight:450;
  letter-spacing: -0.01em;
}
.fi:focus,.fs:focus,.ft:focus {
  border-color:var(--brand-red);
  box-shadow:0 0 0 3px var(--brand-red-soft), inset 0 1px 2px rgba(0,0,0,.05);
  background:var(--bg-overlay);
}
.fs option { background:var(--bg-surface); color:var(--txt); }
.ft { resize:vertical; min-height:80px; line-height:1.5; }
body.light .fi,.body.light .fs,.body.light .ft { background: #F5F5F3; color: var(--txt-light); border-color: rgba(0,0,0,.12); }
body.light .fi:focus, body.light .fs:focus, body.light .ft:focus { background: #FFFFFF; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(230,0,38,.08); }
body.light .fi::placeholder, body.light .ft::placeholder { color: var(--txt-light-muted); }
body.light .fs option { background: #FFFFFF; color: var(--txt-light); }

/* DROPZONE — Premium */
.drop-zone {
  border:2px dashed var(--border2); border-radius: var(--r);
  padding:32px 24px; text-align:center;
  cursor:pointer; transition:all .3s var(--ease);
  background:var(--bg-surface); position:relative; overflow:hidden;
}
.drop-zone:hover,.drop-zone.over {
  border-color:var(--brand-red);
  background:var(--brand-red-soft);
  box-shadow:inset 0 0 0 1px var(--brand-red-glow);
}
body.light .drop-zone { background: #F5F5F3; border-color: rgba(0,0,0,.14); }
body.light .drop-zone:hover { background: rgba(230,0,38,.04); border-color: var(--brand-red); }
.drop-zone i {
  font-size:32px; color:var(--brand-red); margin-bottom:12px;
  display:block; opacity:.8; transition:all .3s var(--ease);
}
.drop-zone:hover i { opacity:1; transform:scale(1.1); }
.drop-zone p { font-size: var(--fs-md); color:var(--txt2); font-weight:500; line-height:1.6; margin:0; }
body.light .drop-zone p { color: var(--txt-light2); }
.drop-zone span { color:var(--brand-red); font-weight:700; }

/* UPLOAD PROGRESS */
.upload-progress {
  display:none; margin-top:16px; padding:12px;
  background:var(--bg-surface); border-radius: var(--r-sm); border:1px solid var(--border);
}
.upload-progress.show { display:block; }
.up-bar {
  height:5px; background:var(--bg-overlay); border-radius:3px;
  overflow:hidden; margin-bottom:8px;
}
.up-fill {
  height:100%;
  background:linear-gradient(90deg,var(--brand-red),var(--brand-red-deep));
  border-radius:3px; transition:width .3s var(--ease);
  box-shadow:0 0 12px var(--brand-red-glow);
}
.up-label { font-size:11px; color:var(--txt2); font-family:var(--mono); font-weight:500; }

/* CONFIRM DIALOG */
.confirm-dialog {
  background:var(--bg-surface); border:1px solid var(--border2);
  border-radius: var(--r); padding:16px; margin-bottom:14px;
}
body.light .confirm-dialog { background: #F8F7F4; border-color: rgba(0,0,0,.10); }
.confirm-dialog .cd-title { font-size:13px; font-weight:700; color:var(--brand-red); margin-bottom:6px; }
.confirm-dialog .cd-desc  { font-size:11px; color:var(--txt2); line-height:1.7; }
body.light .confirm-dialog .cd-desc { color: var(--txt-light2); }
.confirm-dialog .cd-stats { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.confirm-dialog .cd-stat  {
  background:var(--bg-overlay); border:1px solid var(--border);
  border-radius:6px; padding:6px 10px; font-size:11px; font-family:var(--mono);
}
body.light .confirm-dialog .cd-stat { background: #EDECE8; border-color: rgba(0,0,0,.08); }
.confirm-dialog .cd-stat span { color:var(--brand-red); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST — Premium
═══════════════════════════════════════════════════════════════════ */
#toasts { position:fixed; bottom:18px; right:18px; z-index:10000; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius: var(--r-lg); min-width:260px; background:var(--bg-elevated);
  border:1px solid var(--border2); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); pointer-events:all; animation:toast-in .3s var(--ease);
  transition:all .3s; font-weight:500;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
body.light .toast { background: #FFFFFF; border-color: rgba(0,0,0,.10); color: var(--txt-light); }
@keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
.toast.success i { color:var(--green); }
.toast.error   i { color:var(--brand-red); }
.toast.warning i { color:var(--amber); }
.toast.info    i { color:var(--blue); }

/* ═══════════════════════════════════════════════════════════════════
   USERS MANAGEMENT PANEL
═══════════════════════════════════════════════════════════════════ */
#modalUsers .m-body { padding:0; }
.users-table-wrap { overflow-x:auto; max-height:440px; overflow-y:auto; }
.users-table { width:100%; border-collapse:collapse; font-size: var(--fs-sm); }
.users-table th {
  padding:9px 14px; text-align:left; font-size:10px; font-weight:700;
  color:var(--txt3); text-transform:uppercase; letter-spacing:.9px; font-family:var(--mono);
  border-bottom:1px solid var(--border2); background:var(--bg-surface);
  position:sticky; top:0; z-index:2;
}
body.light .users-table th { background: #F8F7F4; color: var(--txt-light3); border-bottom-color: rgba(0,0,0,.10); }
.users-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
body.light .users-table td { border-bottom-color: rgba(0,0,0,.06); color: var(--txt-light); }
.users-table tr:hover td { background: var(--bg-hover); }
body.light .users-table tr:hover td { background: rgba(0,0,0,.02); }
.u-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius: var(--r-pill); font-size:10px; font-weight:700; font-family:var(--mono); border:1px solid; }
.u-status.active   { background:var(--green-dim); color:var(--green); border-color:var(--green-glow); }
.u-status.inactive { background:var(--amber-dim); color:var(--amber); border-color:var(--amber-glow); }
.u-action { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:5px; font-size:10px; font-weight:700; cursor:pointer; transition:all .15s; border:1px solid; font-family:var(--mono); }
.u-action.approve    { background:var(--green-dim); color:var(--green); border-color:var(--green-glow); }
.u-action.approve:hover { background:rgba(34,197,94,.18); }
.u-action.deactivate { background:var(--brand-red-soft); color:var(--brand-red); border-color:var(--brand-red-glow); }
.u-action.deactivate:hover { background:rgba(230,0,38,.18); }
.u-role-select {
  padding:4px 9px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:5px; color:var(--txt); font-size:11px; font-family:var(--mono);
  outline:none; cursor:pointer;
}
.u-role-select:focus { border-color:var(--brand-red); }
body.light .u-role-select { background: #F5F5F3; color: var(--txt-light); border-color: rgba(0,0,0,.10); }
.users-panel-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.users-panel-title { font-size: var(--fs-md); font-weight:700; color:var(--txt); }
body.light .users-panel-title { color: var(--txt-light); }
.users-panel-sub   { font-size:10px; color:var(--txt3); font-family:var(--mono); }
.users-filter-row {
  padding:10px 14px; border-bottom:1px solid var(--border);
  display:flex; gap:8px; align-items:center; background:var(--bg-surface);
}
body.light .users-filter-row { background: #F8F7F4; border-bottom-color: rgba(0,0,0,.08); }
.users-filter-btn {
  padding:4px 11px; border-radius:5px; font-size:10px; font-weight:700;
  cursor:pointer; font-family:var(--mono); border:1px solid var(--border);
  color:var(--txt3); background:transparent; transition:all .15s;
}
.users-filter-btn.active { background:var(--brand-red-soft); color:var(--brand-red); border-color:var(--brand-red-glow); }
.users-filter-btn:hover:not(.active) { background:var(--bg-hover); color:var(--txt2); }
body.light .users-filter-btn { color: var(--txt-light3); border-color: rgba(0,0,0,.10); }
body.light .users-filter-btn.active { background: rgba(230,0,38,.08); color: var(--brand-red); border-color: rgba(230,0,38,.20); }

/* CREATE USER SECTION */
#createUserSection {
  padding:14px 18px; border-top:1px solid var(--border); background:var(--bg-surface);
}
body.light #createUserSection { background: #F8F7F4; border-top-color: rgba(0,0,0,.08); }
.create-user-title {
  font-size:11px; font-weight:700; color:var(--txt3); text-transform:uppercase;
  letter-spacing:.8px; font-family:var(--mono); margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
body.light .create-user-title { color: var(--txt-light3); }
.create-user-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
}
.create-user-grid .fi { font-size:11px; padding:7px 10px; }
.create-user-grid .fs { font-size:11px; padding:7px 10px; }

/* ═══════════════════════════════════════════════════════════════════
   ROLE-BASED VISIBILITY
═══════════════════════════════════════════════════════════════════ */
.engineer-hidden { display:none !important; }
body[data-role="engineer"] .admin-only  { display:none !important; }
body[data-role="engineer"] .admin-action { display:none !important; }
body[data-role="viewer"]   .admin-only  { display:none !important; }
body[data-role="viewer"]   .admin-action { display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN-ONLY UPLOAD SYSTEM — Strict enforcement
   Non-admin users must never see upload UI elements
═══════════════════════════════════════════════════════════════════ */
body:not([data-role="admin"]) .admin-only-upload,
body:not([data-role="admin"]) #uploadBtn,
body:not([data-role="admin"]) .drop-zone,
body:not([data-role="admin"]) #fileIn,
body:not([data-role="admin"]) #selFile,
body:not([data-role="admin"]) #attachUploadBar,
body:not([data-role="admin"]) #attachDropZone,
body:not([data-role="admin"]) #attachFileIn,
body:not([data-role="admin"]) #selAttachFile,
body:not([data-role="admin"]) .upload-progress,
body:not([data-role="admin"]) #uploadProgress,
body:not([data-role="admin"]) #attachUploadProgress {
  display: none !important;
}

/* Hide upload section label for non-admin */
body:not([data-role="admin"]) .upload-section-label,
body:not([data-role="admin"]) [onclick*="openUploadModal"],
body:not([data-role="admin"]) [onclick*="openAttachUpload"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════════════════ */
.sep { height:1px; background:var(--border); margin:16px 0; }
.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  #sidebar {
    position:fixed; left:0; top:0; bottom:0; height:100vh;
    transform:translateX(-100%); z-index:200;
    width:var(--sideW) !important; transition:transform .3s var(--ease);
  }
  #sidebar.mob-open { transform:translateX(0); }
  #sbOverlay.vis { display:block; }
  #mobMenuBtn { display:flex; }
  #sbToggle { display:none; }
  .logo-text,.logo-sub { display:none; }
  #gSearchWrap,.rt-wrap,.divider-v { display:none !important; }
  #projBtn { min-width:160px; max-width:220px; padding:9px 12px; }
  .proj-code { display:none; }
  #topbar { padding: 0 14px; gap: 10px; height: 64px; }
  .logo-icon { width: 48px; height: 48px; font-size: 21px; border-radius: 12px; }
  .logo-text { font-size: 18px !important; }
  .logo-sub { display: none; }
  #topRight { gap: 8px; padding-left: 10px; }
  .avatar-btn { width: 38px; height: 38px; }
  #themeToggle, #notifBtn { width: 38px; height: 38px; }
  #langToggle { height: 38px; padding: 0 9px; font-size: 10px; }
  #langToggle .lt-flag { font-size: 13px; }
  body[dir="rtl"] #sidebar { left: auto; right: 0; transform: translateX(100%); }
  body[dir="rtl"] #sidebar.mob-open { transform: translateX(0); }
}

@media (max-width:768px) {
  :root { --topH:64px; --sideW:260px; }
  .modal { max-width:95vw; max-height:95vh; }
  .modal.sm { max-width:90vw; }
  .drop-zone { padding:24px 16px; }
  .fields-grid { grid-template-columns:1fr 1fr; }
  .form-row.c2,.form-row.c3 { grid-template-columns:1fr; }
  .doc-table th:nth-child(5),.doc-table td:nth-child(5),
  .doc-table th:nth-child(6),.doc-table td:nth-child(6) { display:none; }
  .adv-filter-bar { flex-wrap:nowrap; overflow-x:auto; }
  .adv-filter-bar::-webkit-scrollbar { height:0; }
  .list-toolbar { flex-wrap:wrap; gap:8px; padding:10px; }
  .toolbar-right { width:100%; justify-content:space-between; }
  .dv-header { flex-wrap:wrap; gap:8px; padding:12px; }
  .dv-actions { width:100%; display:flex; gap:6px; }
  #notifDropdown { right:-60px; width:290px; }
  #modalUsers .modal { width:96vw; max-width:96vw; }
  .create-user-grid { grid-template-columns:1fr; }
  #breadcrumb { font-size:13px; padding:8px 12px; overflow-x:auto; white-space:nowrap; }
  .role-badge { display:none; }
}

@media (max-width:640px) {
  .list-toolbar { padding:8px 10px; }
  .filter-in { width:120px; }
  #tableWrap { display:none; }
  #mobDocList { display:flex; }
  .fields-grid { grid-template-columns:1fr; }
  .dv-title { font-size:15px; }
  .form-row.c2,.form-row.c3 { grid-template-columns:1fr; }
  #toasts { left:10px; right:10px; bottom:10px; }
  .toast { min-width:unset; }
  .modal { border-radius:16px; }
  .m-head { padding:14px 16px; }
  .m-body { padding:14px 16px; }
  .m-foot { padding:10px 16px; }
}

@media (max-width:480px) {
  :root { --topH: 60px; }
  .doc-table th:nth-child(4),.doc-table td:nth-child(4),
  .doc-table th:nth-child(7),.doc-table td:nth-child(7) { display: none; }
  #projBtn { min-width: 140px; }
  #topbar { height: 60px; padding: 0 10px; }
  .logo-icon { width: 44px; height: 44px; font-size: 19px; border-radius: 11px; }
  .logo-mark { padding: 5px 10px; gap: 10px; }
  .logo-text { font-size: 16px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ELSEWEDY LOGO BRANDING INTEGRATION
   Premium red square "E" identity system
═══════════════════════════════════════════════════════════════════ */

/* Logo mark enhancements */
.logo-mark {
  position: relative;
}
.logo-mark::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-red), transparent);
  border-radius: 1px;
  opacity: 0.6;
}

/* Logo icon — premium red square E */
.logo-icon {
  position: relative;
  overflow: hidden;
}
.logo-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.logo-icon:hover::before {
  opacity: 1;
}

/* Login card logo */
.lc-logo {
  position: relative;
  overflow: hidden;
}
.lc-logo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red-deep), var(--brand-red));
  opacity: 0.8;
}

/* Loader logo */
.loader-logo {
  position: relative;
}

/* Sidebar active states with logo accent */
.mt-btn.active {
  position: relative;
}
.mt-btn.active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand-red-glow);
  opacity: 0.8;
}

/* Focus indicators with logo red */
.fi:focus, .fs:focus, .ft:focus, .lf-input:focus,
#projSearch:focus, #gSearch:focus, .filter-in:focus {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px var(--brand-red-soft), inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Primary buttons with logo identity */
.btn-primary, .login-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .login-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  opacity: 0.5;
}

/* Selected rows with logo accent */
.doc-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(230,0,38,0.03), transparent) !important;
}
body.light .doc-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(230,0,38,0.02), transparent) !important;
}

/* Hover accents */
.sf-btn:hover i,
.mt-btn:hover .mt-icon,
.st-btn:hover i {
  color: var(--brand-red);
  transition: color 0.2s var(--ease);
}

/* Workflow highlights */
.wf-node.in_progress {
  box-shadow: 0 0 0 4px rgba(245,158,11,0.15), 0 0 20px rgba(245,158,11,0.3);
}
.wf-node.completed {
  box-shadow: 0 0 0 4px rgba(34,197,94,0.15), 0 0 20px rgba(34,197,94,0.3);
}
.wf-node.rejected {
  box-shadow: 0 0 0 4px rgba(230,0,38,0.15), 0 0 20px rgba(230,0,38,0.3);
}

/* Notification accents */
.notif-item.unread {
  border-left: 3px solid var(--brand-red);
  background: linear-gradient(90deg, rgba(230,0,38,0.04), transparent);
}
body.light .notif-item.unread {
  background: linear-gradient(90deg, rgba(230,0,38,0.02), transparent);
}

/* Loading indicators */
.loader-ring {
  border-top-color: var(--brand-red);
  box-shadow: 0 0 12px var(--brand-red-glow);
}

/* Status badges enhancement */
.status-badge {
  backdrop-filter: blur(4px);
}

/* Grid card hover with logo glow */
.grid-card:hover {
  border-color: var(--brand-red-glow);
  box-shadow: 0 8px 32px rgba(230,0,38,0.08), var(--shadow-lg);
}
body.light .grid-card:hover {
  box-shadow: 0 8px 32px rgba(230,0,38,0.05), var(--shadow-light-lg);
}

/* Modal header accent */
.modal::before {
  background: linear-gradient(90deg, transparent, rgba(230,0,38,0.15), transparent) !important;
}

/* Toast enhancements */
.toast {
  border-left: 3px solid transparent;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--brand-red); }
.toast.warning { border-left-color: var(--amber); }
.toast.info    { border-left-color: var(--blue); }

/* Topbar logo text enhancement */
.logo-text {
  background: linear-gradient(135deg, var(--txt), var(--txt2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light .logo-text {
  background: linear-gradient(135deg, var(--txt-light), var(--txt-light2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Empty state enhancement */
.empty-state {
  background: radial-gradient(circle at center, rgba(230,0,38,0.04) 0%, transparent 70%);
}

/* Attach card hover */
.attach-card:hover {
  border-color: var(--brand-red-glow);
  background: linear-gradient(135deg, var(--bg-elevated), rgba(230,0,38,0.02));
}
body.light .attach-card:hover {
  background: linear-gradient(135deg, #FFFFFF, rgba(230,0,38,0.01));
}

/* Mobile card hover */
.mob-card:hover {
  border-color: var(--brand-red-glow);
  background: linear-gradient(135deg, var(--bg-elevated), rgba(230,0,38,0.02));
}

/* Admin stat cards */
.adm-stat-card::before {
  opacity: 0.8 !important;
}

/* Project item active */
.proj-item.active {
  background: linear-gradient(90deg, var(--brand-red-soft), transparent) !important;
}

/* User dropdown hover */
.ud-item:hover {
  background: linear-gradient(90deg, var(--bg-hover), transparent);
}

/* Tab actions */
.tab-btn:hover {
  border-color: var(--brand-red-glow);
  color: var(--brand-red);
}

/* Row actions */
.row-btn:hover {
  border-color: var(--brand-red-glow);
  color: var(--brand-red);
}

/* View toggle buttons */
.vt-btn.active {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
}

/* Filter chips */
.adv-filter-bar .filter-chip:hover {
  border-color: var(--brand-red-glow);
  color: var(--brand-red);
}

/* Confirm dialog */
.confirm-dialog {
  background: linear-gradient(135deg, var(--bg-surface), rgba(230,0,38,0.02));
}

/* Drop zone */
.drop-zone:hover, .drop-zone.over {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
}

/* Pending card */
.pending-card::before {
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.1), transparent);
}

/* Login card */
.login-card::before {
  background: linear-gradient(90deg, transparent, rgba(230,0,38,0.15), transparent) !important;
}

/* App background watermark enhancement */
#app::before {
  background-image:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(230,0,38,0.035) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(59,130,246,0.02) 0%, transparent 60%);
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: rgba(230,0,38,0.15);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red);
}

/* Selection color */
::selection {
  background: rgba(230,0,38,0.25);
  color: var(--txt);
}
body.light ::selection {
  background: rgba(230,0,38,0.15);
  color: var(--txt-light);
}


/* ═══════════════════════════════════════════════════════════════════
   v18 — ENHANCED BRANDING & VISUAL WEIGHT
═══════════════════════════════════════════════════════════════════ */

/* v21: Logo icon premium glow — updated border-radius to match 70px size */
.logo-icon {
  position: relative;
  overflow: hidden;
}
.logo-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep), var(--gold));
  border-radius: 17px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  filter: blur(10px);
}
.logo-mark:hover .logo-icon::after {
  opacity: 0.5;
}

/* Logo text gradient effect */
.logo-text {
  background: linear-gradient(135deg, var(--txt) 0%, var(--txt2) 50%, var(--brand-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
body.light .logo-text {
  background: linear-gradient(135deg, var(--txt-light) 0%, var(--txt-light2) 50%, var(--brand-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Logo mark enhanced container */
.logo-mark {
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.logo-mark:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
  border-color: var(--brand-red-glow);
  box-shadow: 0 4px 20px var(--brand-red-glow), 0 0 0 1px rgba(230,0,38,0.1);
  transform: translateY(-1px);
}

/* Project picker enhanced */
#projBtn {
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#projBtn:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
  border-color: var(--brand-red-glow);
  box-shadow: 0 4px 16px var(--brand-red-glow);
}

/* Live sync indicator enhanced */
.rt-wrap {
  background: linear-gradient(135deg, var(--glass), rgba(34,197,94,0.03));
}
.rt-wrap:hover {
  background: linear-gradient(135deg, var(--green-dim), rgba(34,197,94,0.05));
  border-color: var(--green-glow);
}

/* Theme toggle enhanced */
#themeToggle {
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
}
#themeToggle:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
  border-color: var(--brand-red-glow);
  box-shadow: 0 0 16px var(--brand-red-glow);
  transform: rotate(12deg) scale(1.08);
}

/* Notification button enhanced */
#notifBtn {
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
}
#notifBtn:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
  border-color: var(--brand-red-glow);
  box-shadow: 0 0 16px var(--brand-red-glow);
}

/* User section enhanced */
#topRight {
  background: linear-gradient(90deg, transparent, var(--glass));
}

/* Avatar enhanced */
.avatar-btn {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.08));
  box-shadow: 0 2px 8px var(--brand-red-glow);
}
.avatar-btn:hover {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep));
  box-shadow: 0 0 20px var(--brand-red-glow), 0 4px 12px rgba(0,0,0,0.2);
  transform: scale(1.1);
}

/* Role badge enhanced */
.role-badge {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.role-badge.role-admin, .role-badge.rb-admin {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.15));
  box-shadow: 0 0 16px rgba(230,0,38,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Search input enhanced */
#gSearch:focus {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.03));
}

/* Mobile menu button enhanced */
#mobMenuBtn {
  background: linear-gradient(135deg, var(--glass), rgba(230,0,38,0.02));
}
#mobMenuBtn:hover {
  background: linear-gradient(135deg, var(--brand-red-soft), rgba(230,0,38,0.05));
  border-color: var(--brand-red-glow);
  color: var(--brand-red);
}

/* v21: Topbar enhanced — shadow and background locked */
#topbar {
  box-shadow: 0 2px 20px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%) !important;
}
body.light #topbar {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v21 ULTRA — HEADER SPACE OPTIMIZATION & TRANSLATION OVERFLOW FIXES
   ─────────────────────────────────────────────────────────────────
   • Prevents translation text from breaking header heights/alignments
   • Logo branding fully expanded 25% — dominant enterprise presence
   • Topbar flex layout: zero dead zones, fully balanced on all viewports
═══════════════════════════════════════════════════════════════════ */

/* ── Topbar flex: prevent any child from causing height overflow ── */
#topbar > * {
  flex-shrink: 0;
}
#topbar > #gSearchWrap {
  flex-shrink: 1; /* Only the search box can compress */
}

/* ── Logo branding: translation-safe overflow prevention ── */
.logo-text, .logo-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px; /* Prevents Arabic text from stretching the container */
}

/* ── RTL: Arabic logo text alignment ── */
body[dir="rtl"] .logo-mark {
  flex-direction: row-reverse;
}
body[dir="rtl"] .logo-text,
body[dir="rtl"] .logo-sub {
  text-align: right;
}

/* ── Ensure #topRight items never overflow on translation toggle ── */
#topRight .role-badge,
#topRight .user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

/* ── Prevent lang toggle from overflowing when Arabic text is active ── */
#langToggle {
  white-space: nowrap;
  overflow: hidden;
  min-width: 58px;
}

/* ── Sidebar footer: prevent Arabic text overflow ── */
.sf-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── v21: Logo shimmer effect on hover ── */
.logo-mark:hover .logo-icon {
  box-shadow: 0 12px 40px var(--brand-red-glow), 0 0 0 3px rgba(230,0,38,0.25);
}

/* ── v21: Subtle topbar left accent line matching branding ── */
#topbar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand-red), var(--brand-red-deep));
  border-radius: 0 2px 2px 0;
  opacity: 0.7;
}
body[dir="rtl"] #topbar::before {
  left: auto;
  right: 0;
  border-radius: 2px 0 0 2px;
}

/* ── v21: Logo container min-width safety (prevents collapse under flex) ── */
.logo-mark {
  min-width: 0;
}
@media (min-width: 901px) {
  .logo-mark {
    min-width: max-content;
  }
}

/* ── INLINE PDF PREVIEW PANEL ── */

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE PREVIEW ENGINE v19 — Full MIME-aware, PDF.js, Blob-safe
═══════════════════════════════════════════════════════════════════ */
#pdfPreviewPanel {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: flex-end;
}
#pdfPreviewPanel.active {
  display: flex;
}

#pdfPreviewOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  animation: overlayFadeIn 0.3s var(--ease);
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#pdfPreviewBox {
  position: relative;
  width: 55%;
  height: 100%;
  background: var(--bg-elevated);
  border-left: 1px solid var(--shell-border-2);
  box-shadow: -8px 0 48px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.35s var(--ease-out);
  z-index: 1;
  overflow: hidden;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}

#pdfPreviewHeader {
  height: 64px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--shell-border-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 12px;
}

#pdfPreviewTitle {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

#pdfPreviewActions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

/* PDF pagination toolbar */
#pdfPageToolbar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--txt2);
}
#pdfPageToolbar.visible { display: flex; }
#pdfPageToolbar button {
  background: var(--bg-overlay);
  border: 1px solid var(--border2);
  color: var(--txt);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background 0.2s;
}
#pdfPageToolbar button:hover { background: var(--bg-hover); }
#pdfPageToolbar button:disabled { opacity: 0.35; cursor: default; }
#pdfCurrentPage { font-variant-numeric: tabular-nums; color: var(--txt); }

/* Viewer content area */
#pdfViewerContent {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-base);
  position: relative;
}

/* PDF.js canvas renderer */
#pdfCanvas {
  display: none;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
#pdfCanvas.visible { display: block; }

/* Image viewer */
#pdfImageViewer {
  display: none;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  padding: 16px;
}
#pdfImageViewer.visible { display: block; }

/* Blob iframe (for Office-style docs / text fallback) */
#pdfPreviewFrame {
  display: none;
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg-base);
}
#pdfPreviewFrame.visible { display: flex; }

/* Loading state */
#pvLoader {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  color: var(--txt3);
  font-size: var(--fs-sm);
}
#pvLoader.visible { display: flex; }
.pv-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border2);
  border-top-color: var(--brand-red);
  border-radius: 50%;
  animation: pvSpin 0.9s linear infinite;
}
@keyframes pvSpin { to { transform: rotate(360deg); } }

/* Error / fallback state */
#pvError {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  padding: 32px;
  text-align: center;
}
#pvError.visible { display: flex; }
#pvError .pv-err-icon { font-size: 48px; color: var(--txt-muted); margin-bottom: 8px; }
#pvError .pv-err-title { font-size: var(--fs-lg); font-weight: 600; color: var(--txt); }
#pvError .pv-err-msg { font-size: var(--fs-sm); color: var(--txt3); max-width: 320px; line-height: 1.6; }
#pvError .pv-err-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* Mobile responsive */
@media (max-width: 900px) {
  #pdfPreviewBox { width: 82%; }
}
@media (max-width: 640px) {
  #pdfPreviewBox { width: 100%; border-left: none; }
  #pdfPreviewHeader { padding: 0 12px; height: 56px; }
  #pdfPreviewTitle { font-size: var(--fs-sm); }
  #pdfPreviewActions .btn-ghost span { display: none; }
}

/* Light mode overrides */
body.light #pdfPreviewBox { background: #FFFFFF; border-left-color: rgba(0,0,0,0.08); }
body.light #pdfPreviewHeader { background: #F8F7F4; border-bottom-color: rgba(0,0,0,0.08); }
body.light #pdfPageToolbar { background: #F2F1ED; border-color: rgba(0,0,0,0.08); }
body.light #pdfViewerContent { background: #E8E7E3; }
body.light #pdfPreviewFrame { background: #F8F7F4; }

</style>