/* ================================================================
   Access Portal — Design System v3
   Professional · Modern · Responsive · RTL / LTR · Light / Dark
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  --sidebar-w: 252px;

  /* Brand */
  --brand:        #d04a02;
  --brand-dark:   #b53f02;
  --brand-subtle: rgba(208,74,2,0.08);
  --brand-ring:   rgba(208,74,2,0.18);

  /* Semantic */
  --success:     #16a34a;  --success-bg:  rgba(22,163,74,0.08);
  --warning:     #d97706;  --warning-bg:  rgba(217,119,6,0.08);
  --danger:      #dc2626;  --danger-bg:   rgba(220,38,38,0.08);
  --info:        #2563eb;  --info-bg:     rgba(37,99,235,0.08);

  /* Surfaces — Light */
  --bg:          #f6f8fa;
  --bg-card:     #ffffff;
  --bg-subtle:   #f0f4f8;
  --bg-muted:    #e8edf4;

  /* Text — Light */
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;

  /* Borders — Light */
  --b1: #e2e8f0;
  --b2: #cbd5e1;

  /* Shadows — Light */
  --sh-xs: 0 1px 2px rgba(15,23,42,0.04);
  --sh-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.03);
  --sh-md: 0 4px 16px rgba(15,23,42,0.07), 0 2px 6px rgba(15,23,42,0.04);
  --sh-lg: 0 20px 56px rgba(15,23,42,0.10), 0 8px 24px rgba(15,23,42,0.06);
  --sh-brand: 0 4px 20px rgba(208,74,2,0.22);

  /* Sidebar — Light */
  --sb-bg:     #ffffff;
  --sb-border: #e8edf4;
  --nav-hover: #f0f4f8;
  --nav-active-bg:  rgba(208,74,2,0.07);
  --nav-active-fg:  #c43c00;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-full: 9999px;

  /* Fonts */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar: 'Tajawal', 'Inter', sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Transitions */
  --fast: 0.1s ease; --base: 0.15s ease; --slow: 0.25s ease;
}

[lang="ar"], [lang="ar"] * { font-family: var(--font-ar) !important; }

[data-theme="dark"] {
  --bg:       #0d1117;
  --bg-card:  #161b27;
  --bg-subtle:#1c2333;
  --bg-muted: #212d40;

  --t1: #e6edf3;
  --t2: #8b98b1;
  --t3: #4a566d;

  --b1: #21293a;
  --b2: #2d3b52;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.35);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --sh-md: 0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --sh-lg: 0 20px 56px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.40);
  --sh-brand: 0 4px 20px rgba(208,74,2,0.28);

  --sb-bg:    #0d1117;
  --sb-border:#1c2333;
  --nav-hover:#1c2333;
  --nav-active-bg:  rgba(208,74,2,0.13);
  --nav-active-fg:  #fb923c;

  --brand-subtle: rgba(208,74,2,0.13);
  --brand-ring:   rgba(208,74,2,0.25);
  --success-bg:  rgba(22,163,74,0.12);
  --warning-bg:  rgba(217,119,6,0.12);
  --danger-bg:   rgba(220,38,38,0.12);
  --info-bg:     rgba(37,99,235,0.12);
}

/* ================================================================
   2. RESET + BASE
   ================================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.6;
  font-size: 14px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--slow), color var(--slow);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ================================================================
   3. LAYOUT
   ================================================================ */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* ================================================================
   4. SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-inline-end: 1px solid var(--sb-border);
  position: fixed;
  inset-inline-start: 0;   /* right:0 in RTL · left:0 in LTR */
  top: 0;
  height: 100vh;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: transform var(--slow);
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--sh-brand);
}

.brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-brand { flex:1; min-width:0; }
.sidebar-title { font-weight:700; font-size:14px; color:var(--t1); line-height:1.2; }
.sidebar-subtitle { font-size:11px; color:var(--t3); margin-top:1px; }

/* Language + theme row */
.sidebar-controls {
  display: flex; align-items: center; gap:5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.lang-btn {
  flex:1; padding:5px 8px;
  display:flex; align-items:center; justify-content:center; gap:4px;
  border-radius: var(--r-sm);
  font-size: 11.5px; font-weight:600;
  cursor: pointer;
  border: 1px solid var(--b1);
  background: transparent;
  color: var(--t3);
  transition: all var(--base);
  font-family: inherit;
}
.lang-btn:hover { background:var(--nav-hover); color:var(--t1); border-color:var(--b2); }
.lang-btn.active { background:var(--brand-subtle); border-color:rgba(208,74,2,0.35); color:var(--brand); }

.theme-btn {
  width:30px; height:30px;
  border-radius:var(--r-sm);
  border:1px solid var(--b1);
  background:transparent;
  color:var(--t3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all var(--base);
}
.theme-btn:hover { background:var(--nav-hover); color:var(--t1); }

/* Navigation */
.sidebar-nav { flex:1; padding:8px 8px; overflow-y:auto; scrollbar-width:thin; scrollbar-color: var(--b1) transparent; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--b1); border-radius:4px; }

.nav-section-title {
  font-size:10px; font-weight:700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 14px 10px 6px;
  user-select: none;
}

.nav-item {
  display: flex; align-items: center; gap:10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--t2);
  font-size: 13.5px; font-weight:500;
  transition: all var(--fast);
  margin-bottom: 1px;
  position: relative;
  cursor: pointer;
}
.nav-item:hover { background:var(--nav-hover); color:var(--t1); }
.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px; bottom: 6px;
  width: 3px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}
[dir="rtl"] .nav-item.active::before { border-radius: 3px 0 0 3px; }
.nav-item svg { width:16px; height:16px; stroke-width:2; flex-shrink:0; opacity:0.75; }
.nav-item.active svg { opacity:1; }
.nav-item:hover svg { opacity:0.9; }

.nav-badge {
  margin-inline-start: auto;
  background: var(--warning);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-weight: 700; line-height: 1.5;
}

/* Sidebar footer */
.sidebar-footer { padding:10px 10px 14px; border-top:1px solid var(--b1); flex-shrink:0; }

.user-profile {
  display: flex; align-items: center; gap:10px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--b1);
  margin-bottom: 8px;
  transition: background var(--fast);
}
.user-profile:hover { background: var(--bg-muted); }

.user-avatar {
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg, var(--info) 0%, #1d4ed8 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.user-avatar.admin { background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:var(--t3); margin-top:1px; }

/* ================================================================
   5. MOBILE TOPBAR + OVERLAY
   ================================================================ */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--b1);
  z-index: 250;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  box-shadow: var(--sh-sm);
}
.topbar-hamburger {
  width:36px; height:36px;
  border-radius:var(--r-md);
  border:1px solid var(--b1);
  background:transparent;
  color:var(--t2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition: all var(--base);
}
.topbar-hamburger:hover { background:var(--bg-subtle); color:var(--t1); }
.topbar-brand { font-size:15px; font-weight:700; color:var(--t1); flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.topbar-logo { width:24px; height:24px; flex-shrink:0; border-radius:7px; box-shadow:0 4px 12px rgba(208,74,2,0.18); }
.topbar-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}

.sidebar-overlay {
  display: none;
  position: fixed; inset:0;
  background: rgba(0,0,0,0.45);
  z-index: 290;
  backdrop-filter: blur(2px);
  animation: fadeIn var(--slow);
}

/* ================================================================
   6. MAIN CONTENT
   ================================================================ */
.main-content {
  flex: 1;
  /* margin-inline-start: RTL = margin-right, LTR = margin-left — both push away from sidebar */
  margin-inline-start: var(--sidebar-w);
  padding: 32px 36px;
  min-width: 0;
  min-height: 100vh;
}

/* ================================================================
   7. PAGE HEADER
   ================================================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.page-header-left {}
.page-title {
  font-size: 26px; font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.5px; line-height: 1.2;
  margin-bottom: 3px;
}
.page-subtitle { font-size: 14px; color: var(--t2); }

/* ================================================================
   8. STATS GRID
   ================================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--base), transform var(--base);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--stat-color, var(--brand));
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
[dir="rtl"] .stat-card::after { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.stat-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

.stat-header { display:flex; justify-content:space-between; align-items:flex-start; }
.stat-label { font-size:11.5px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.stat-value { font-size:40px; font-weight:800; color:var(--stat-color, var(--t1)); line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.stat-trend { font-size:12px; color:var(--t3); margin-top:6px; }
.stat-icon {
  width:44px; height:44px;
  border-radius:var(--r-lg);
  background:var(--stat-bg, var(--brand-subtle));
  color:var(--stat-color, var(--brand));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ================================================================
   9. CARD
   ================================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  margin-bottom: 20px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card-header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--b1);
  gap: 12px;
}
.card-title { font-size:15px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.card-body { padding:22px; }

/* ================================================================
   10. REQUEST BOX
   ================================================================ */
.request-box { padding:18px 22px; border-bottom:1px solid var(--b1); transition:background var(--fast); }
.request-box:last-child { border-bottom:none; }
.request-box:hover { background:var(--bg-subtle); }
.request-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:12px; flex-wrap:wrap; }
.request-env { display:flex; align-items:center; gap:10px; }
.request-env-name { font-weight:700; font-size:15px; color:var(--t1); }
.request-env-ip { font-family:var(--mono); font-size:11px; color:var(--t3); background:var(--bg-subtle); border:1px solid var(--b1); padding:2px 8px; border-radius:var(--r-sm); }
.request-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--t2); margin-bottom:10px; flex-wrap:wrap; }
.request-meta .dot { color:var(--b2); }
.request-reason { background:var(--bg-subtle); border:1px solid var(--b1); border-inline-start:3px solid var(--brand); padding:10px 14px; border-radius:var(--r-md); font-size:13px; color:var(--t1); margin-bottom:14px; line-height:1.5; }
.request-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ================================================================
   11. BADGE
   ================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  white-space: nowrap;
}
.badge-primary { background:var(--brand-subtle);  color:var(--brand); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger); }
.badge-info    { background:var(--info-bg);    color:var(--info); }
.badge-muted   { background:var(--bg-subtle); color:var(--t3); border:1px solid var(--b1); }

/* ================================================================
   12. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap:6px;
  padding: 8px 16px;
  border: 1px solid var(--b2);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--base);
  background: var(--bg-card);
  color: var(--t1);
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
  box-shadow: var(--sh-xs);
}
.btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--b2);
  box-shadow: var(--sh-sm);
  color: var(--t1);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--sh-brand); }
.btn-primary:hover:not(:disabled) { background:var(--brand-dark); border-color:var(--brand-dark); box-shadow:0 6px 24px rgba(208,74,2,0.35); }

.btn-success { background:var(--success); color:#fff; border-color:var(--success); box-shadow:0 2px 10px rgba(22,163,74,0.22); }
.btn-success:hover:not(:disabled) { background:#15803d; border-color:#15803d; }

.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:0 2px 10px rgba(220,38,38,0.22); }
.btn-danger:hover:not(:disabled) { background:#b91c1c; border-color:#b91c1c; }

.btn-sm { padding:5px 12px; font-size:12px; border-radius:var(--r-sm); box-shadow:none; }
.btn-sm:hover:not(:disabled) { box-shadow:var(--sh-xs); }
.btn-xs { padding:3px 9px; font-size:11px; border-radius:var(--r-sm); box-shadow:none; }

/* ================================================================
   13. INPUTS / FORMS
   ================================================================ */
.input, .select, textarea.input {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  font-size: 13px; font-family: inherit;
  background: var(--bg-card);
  color: var(--t1);
  transition: border-color var(--base), box-shadow var(--base);
  appearance: none;
  line-height: 1.5;
}
.input:hover { border-color: var(--b2); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.input::placeholder { color:var(--t3); }
.form-group { margin-bottom: 16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:5px; }
.form-hint { font-size:11.5px; color:var(--t3); margin-top:4px; line-height:1.5; }

/* ================================================================
   14. TABLE
   ================================================================ */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width:100%; border-collapse:collapse; }
.table thead th {
  padding: 10px 18px;
  text-align: start;
  font-size: 11px; font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
  background: var(--bg-subtle);
  position: sticky; top: 0; z-index: 1;
}
.table td {
  padding: 12px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--b1);
  color: var(--t1);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg-subtle); }

/* ================================================================
   15. PROGRESS
   ================================================================ */
.progress { width:100%; height:5px; background:var(--bg-muted); border-radius:var(--r-full); overflow:hidden; }
.progress-bar { height:100%; background:var(--success); border-radius:var(--r-full); transition:width 0.4s ease; }
.progress-bar.warning { background:var(--warning); }
.progress-bar.danger  { background:var(--danger); }

/* ================================================================
   16. TOAST
   ================================================================ */
.toast-container {
  position: fixed;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: 13px 16px;
  box-shadow: var(--sh-lg);
  display: flex; align-items: flex-start; gap:12px;
  pointer-events: all;
  animation: slideToast var(--slow) cubic-bezier(0.22,1,0.36,1);
}
@keyframes slideToast { from{transform:translateY(-16px) scale(0.97);opacity:0} to{transform:none;opacity:1} }
.toast-icon { width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0; }
.toast-content { flex:1; }
.toast-title { font-weight:700;font-size:13px;color:var(--t1);margin-bottom:2px; }
.toast-message { font-size:12px;color:var(--t2);line-height:1.5; }
.toast.success .toast-icon { background:var(--success-bg);color:var(--success); }
.toast.error   .toast-icon { background:var(--danger-bg); color:var(--danger); }
.toast.warning .toast-icon { background:var(--warning-bg);color:var(--warning); }
.toast.info    .toast-icon { background:var(--info-bg);   color:var(--info); }
.toast.success { border-inline-start:3px solid var(--success); }
.toast.error   { border-inline-start:3px solid var(--danger); }
.toast.warning { border-inline-start:3px solid var(--warning); }
.toast.info    { border-inline-start:3px solid var(--info); }

/* ================================================================
   17. MODAL
   ================================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px;
  backdrop-filter:blur(4px);
  animation:fadeIn var(--base);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--bg-card);
  border:1px solid var(--b1);
  border-radius:var(--r-2xl);
  max-width:500px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-lg);
  animation:modalPop 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop { from{transform:scale(0.92) translateY(12px);opacity:0} to{transform:none;opacity:1} }
.modal-header { padding:22px 24px 16px; border-bottom:1px solid var(--b1); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:17px; font-weight:800; color:var(--t1); }
.modal-close { width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--b1);background:transparent;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--fast); }
.modal-close:hover { background:var(--bg-subtle); color:var(--t1); }
.modal-body { padding:22px 24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--b1); display:flex; gap:8px; justify-content:flex-end; }

/* ================================================================
   18. SEARCH BOX
   ================================================================ */
.search-box { position:relative; display:inline-flex; align-items:center; }
.search-box .input { padding-inline-end:36px; }
.search-icon { position:absolute; inset-inline-end:10px; color:var(--t3); pointer-events:none; display:flex; }

/* ================================================================
   19. EMPTY STATE
   ================================================================ */
.empty-state { text-align:center; padding:64px 24px; }
.empty-icon { width:52px;height:52px;margin:0 auto 16px;color:var(--t3);opacity:0.35; }
.empty-title { font-size:16px;font-weight:700;color:var(--t1);margin-bottom:6px; }
.empty-message { font-size:13px;color:var(--t2); }

/* ================================================================
   20. SPINNER
   ================================================================ */
.loading-spinner { display:inline-block;width:16px;height:16px;border:2px solid var(--b1);border-top-color:var(--brand);border-radius:50%;animation:spin 0.65s linear infinite;vertical-align:middle; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ================================================================
   21. TABS
   ================================================================ */
.tabs { display:flex; border-bottom:1px solid var(--b1); margin-bottom:20px; gap:0; }
.tab { padding:9px 18px; font-size:13px; font-weight:600; color:var(--t2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all var(--fast); border-radius:var(--r-sm) var(--r-sm) 0 0; user-select:none; }
.tab:hover { color:var(--t1); background:var(--bg-subtle); }
.tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ================================================================
   22. PAGINATION
   ================================================================ */
.pagination { display:flex; align-items:center; gap:4px; justify-content:center; padding:16px 0 8px; flex-wrap:wrap; }
.page-btn { padding:5px 10px; border:1px solid var(--b1); border-radius:var(--r-sm); font-size:12px; font-weight:600; cursor:pointer; background:var(--bg-card); color:var(--t2); transition:all var(--fast); font-family:inherit; min-width:32px; }
.page-btn:hover:not(:disabled) { background:var(--bg-subtle); border-color:var(--b2); color:var(--t1); }
.page-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 2px 8px rgba(208,74,2,0.28); }
.page-btn:disabled { opacity:0.35; cursor:not-allowed; }

/* ================================================================
   23. CHARTS
   ================================================================ */
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.chart-container { position:relative; height:260px; padding:4px; }
@media(max-width:1024px) { .charts-row{grid-template-columns:1fr} }

/* ================================================================
   24. FILTER BAR
   ================================================================ */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px 20px;
  background:var(--bg-card);
  border:1px solid var(--b1);
  border-radius:var(--r-xl);
  margin-bottom:20px;
  box-shadow:var(--sh-sm);
}
.filter-bar .input, .filter-bar .select { width:auto; min-width:130px; }

/* ================================================================
   25. AVATAR + USER CELL
   ================================================================ */
.avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--info),#1d4ed8);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0; }
.avatar.admin { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.user-cell { display:flex; align-items:center; gap:10px; }
.user-cell-name { font-weight:600; font-size:13px; color:var(--t1); }
.user-cell-sub  { font-size:11px; color:var(--t3); }

/* ================================================================
   26. TAG
   ================================================================ */
.tag { display:inline-block; padding:2px 8px; border-radius:var(--r-sm); font-size:11px; font-weight:600; background:var(--bg-subtle); border:1px solid var(--b1); color:var(--t2); font-family:var(--mono); letter-spacing:0.3px; }

/* ================================================================
   27. UTILITIES
   ================================================================ */
.text-muted { color:var(--t3); }
.text-sm { font-size:12px; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fw-800 { font-weight:800; }

/* ================================================================
   28. ALERT
   ================================================================ */
.alert-error { background:var(--danger-bg); border:1px solid rgba(220,38,38,0.2); border-radius:var(--r-md); padding:11px 14px; margin-bottom:18px; color:var(--danger); font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; }

/* ================================================================
   29. LOGIN PAGE
   ================================================================ */
.login-bg {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  position:relative; overflow:hidden;
}
.login-bg::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 70% 30%, rgba(208,74,2,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(37,99,235,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 85%, rgba(22,163,74,0.04) 0%, transparent 55%);
  pointer-events:none;
}
.login-card {
  background:var(--bg-card);
  border:1px solid var(--b1);
  border-radius:var(--r-2xl);
  padding:44px 40px;
  width:100%; max-width:430px;
  margin:16px;
  box-shadow:var(--sh-lg);
  position:relative; z-index:1;
}
.login-logo {
  width:58px; height:58px;
  background:transparent;
  border-radius:var(--r-xl);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin:0 auto 22px;
  overflow:hidden;
  box-shadow:var(--sh-brand);
}
.login-title { font-size:24px;font-weight:800;color:var(--t1);text-align:center;margin-bottom:6px;letter-spacing:-0.5px; }
.login-subtitle { font-size:13px;color:var(--t2);text-align:center;margin-bottom:28px; }
.login-lang-row { display:flex;justify-content:center;gap:8px;margin-bottom:24px; }
.login-footer { margin-top:24px;text-align:center;font-size:11px;color:var(--t3); }

.tfa-code-input {
  text-align: center;
  letter-spacing: 0;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--mono) !important;
}
.tfa-code-input.otp-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.otp-code-field {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 8px auto 0;
}
.otp-cell {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  min-height: 54px;
  border: 1px solid var(--b1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0)),
    var(--bg-card);
  color: var(--t1);
  box-shadow: var(--sh-xs);
  text-align: center;
  font-family: var(--mono) !important;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast), background var(--fast);
}
[data-theme="dark"] .otp-cell {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    var(--bg-card);
}
.otp-cell:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring), var(--sh-sm);
  transform: translateY(-1px);
}
.otp-cell.has-value {
  border-color: rgba(15,118,110,0.35);
  background: var(--bg-card);
}
.otp-code-field.is-complete .otp-cell {
  border-color: rgba(22,163,74,0.34);
  box-shadow: inset 0 -2px 0 rgba(22,163,74,0.28), var(--sh-xs);
}
.otp-code-field.is-invalid .otp-cell {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10);
}
.tfa-secret {
  font-family: var(--mono) !important;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.security-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}
.security-page {
  max-width: 1240px;
  margin: 0 auto;
}
.security-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--b1);
}
.security-hero-copy {
  min-width: 0;
}
.security-page .page-title {
  font-size: 32px;
}
.security-kicker {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.security-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.security-highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--b1);
  border-radius: 999px;
  color: var(--t2);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--sh-xs);
}
.security-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 14px 16px;
  border: 1px solid var(--b1);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
}
.security-state:not(.enabled) {
  background:
    linear-gradient(135deg, rgba(208,74,2,0.08), rgba(255,255,255,0)),
    var(--bg-card);
}
.security-state.enabled {
  border-color: rgba(22,163,74,0.22);
  background: linear-gradient(135deg, rgba(22,163,74,0.08), var(--bg-card));
}
.security-state-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-subtle);
}
.security-state.enabled .security-state-icon {
  color: var(--success);
  background: var(--success-bg);
}
.security-state-label {
  color: var(--t3);
  font-size: 12px;
  font-weight: 700;
}
.security-state-value {
  color: var(--t1);
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}
.security-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.security-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--b1);
  border-radius: 14px;
  background: rgba(255,255,255,0.64);
  box-shadow: var(--sh-xs);
}
[data-theme="dark"] .security-step {
  background: rgba(17,24,39,0.72);
}
.security-step > span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-ring);
  font-size: 13px;
  font-weight: 900;
}
.security-step strong {
  display: block;
  color: var(--t1);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.security-step small {
  display: block;
  margin-top: 2px;
  color: var(--t3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
.security-shell {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  grid-template-areas:
    "qr setup"
    "qr verify";
  gap: 18px;
  align-items: start;
}
.security-shell.enabled-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  grid-template-areas: "setup verify";
}
.security-panel {
  border: 1px solid var(--b1);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--sh-md);
  padding: 20px;
}
.qr-panel {
  grid-area: qr;
  position: sticky;
  top: 18px;
}
.setup-panel { grid-area: setup; }
.verify-panel { grid-area: verify; }
.security-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.security-panel-head h2 {
  margin: 0;
  color: var(--t1);
  font-size: 17px;
  font-weight: 800;
}
.security-panel-head p {
  margin: 4px 0 0;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.6;
}
.step-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-ring);
  font-weight: 800;
}
.step-badge.enabled {
  color: var(--success);
  background: var(--success-bg);
  border-color: rgba(22,163,74,0.2);
}
.step-badge.danger {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: rgba(220,38,38,0.2);
}
.qr-frame {
  background: #fff;
  border: 1px solid rgba(16,24,40,0.12);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 0;
  position: relative;
  box-shadow: 0 10px 28px rgba(16,24,40,0.08);
}
.qr-stage {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(194,65,12,0.09), rgba(15,118,110,0.08)),
    var(--bg-subtle);
  border: 1px solid var(--b1);
}
.qr-svg {
  width: min(100%, 340px);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  color: #000;
  image-rendering: pixelated;
}
.auth-app-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 800;
}
.auth-app-strip strong {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--t2);
  background: var(--bg-subtle);
  border: 1px solid var(--b1);
  font-size: 11px;
}
.qr-plain-link {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  background: var(--bg-card);
}
.copy-block { margin-bottom: 14px; }
.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.copy-row textarea {
  resize: vertical;
}
.setup-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  color: var(--t2);
  background: var(--bg-subtle);
  border: 1px solid var(--b1);
  font-size: 13px;
  line-height: 1.6;
}
.setup-note-icon {
  color: var(--info);
  flex-shrink: 0;
  margin-top: 1px;
}
.setup-uri {
  margin-top: 12px;
}
.setup-uri summary {
  cursor: pointer;
  color: var(--t1);
  font-size: 13px;
  font-weight: 800;
}
.enabled-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(22,163,74,0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(22,163,74,0.10), rgba(15,118,110,0.05)),
    var(--bg-card);
}
.enabled-summary strong {
  display: block;
  color: var(--t1);
  font-size: 15px;
  font-weight: 900;
}
.enabled-summary p {
  margin: 4px 0 0;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.6;
}
.enabled-shield {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(22,163,74,0.18);
}

/* ================================================================
   30. RESPONSIVE
   ================================================================ */

/* Tablet + Desktop sidebar visible */
@media (min-width: 769px) {
  .mobile-topbar { display:none; }
  .sidebar-overlay { display:none !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .mobile-topbar { display:flex; }

  /* Sidebar becomes an overlay panel */
  .sidebar {
    /* RTL: slides out to right; LTR: slides out to left */
    transform: translateX(100%);
    box-shadow: none;
    transition: transform var(--slow), box-shadow var(--slow);
  }
  [dir="ltr"] .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: var(--sh-lg);
  }
  .sidebar-overlay.open {
    display: block !important;
  }

  /* Content fills full width + pushes below topbar */
  .main-content {
    margin-inline-start: 0 !important;
    padding: 16px;
    padding-top: calc(56px + 16px);
  }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Filter bar wraps better */
  .filter-bar .input,
  .filter-bar .select { min-width: 0; }

  /* Table */
  .table thead th, .table td { padding:10px 12px; }

  /* Cards */
  .card-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .card-header .search-box { width:100%; }
  .card-header .search-box .input { width:100%; }
  .request-actions { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 580px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-title { font-size:22px; }
  .login-card { padding:32px 24px; }
  .modal { margin:0; border-radius:var(--r-xl) var(--r-xl) 0 0; position:fixed; bottom:0; left:0; right:0; max-width:none; animation:sheetUp 0.25s cubic-bezier(0.22,1,0.36,1); }
  @keyframes sheetUp { from{transform:translateY(100%)} to{transform:none} }
  .modal-overlay { align-items:flex-end; padding:0; }
}

@media (max-width: 400px) {
  .main-content { padding:12px; padding-top:calc(56px + 12px); }
}

/* ================================================================
   31. DESIGN REFRESH v4
   ================================================================ */
:root {
  --sidebar-w: 268px;
  --brand: #c2410c;
  --brand-dark: #9a3412;
  --brand-soft: #fff7ed;
  --accent: #0f766e;
  --accent-light: rgba(15,118,110,0.09);
  --bg: #f4f7fb;
  --bg-card: #ffffff;
  --bg-subtle: #f7f9fc;
  --bg-muted: #edf2f7;
  --t1: #101828;
  --t2: #475467;
  --t3: #98a2b3;
  --b1: #e5e7eb;
  --b2: #d0d5dd;
  --sb-bg: rgba(255,255,255,0.94);
  --sb-border: #e6eaf0;
  --nav-hover: #f3f6fa;
  --nav-active-bg: #fff4ed;
  --nav-active-fg: #9a3412;
  --sh-xs: 0 1px 2px rgba(16,24,40,0.04);
  --sh-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  --sh-md: 0 10px 24px rgba(16,24,40,0.08);
  --sh-lg: 0 24px 64px rgba(16,24,40,0.14);
}

[data-theme="dark"] {
  --bg: #0b1220;
  --bg-card: #111827;
  --bg-subtle: #172033;
  --bg-muted: #1f2a3d;
  --t1: #f3f6fb;
  --t2: #b6c2d3;
  --t3: #758399;
  --b1: #253147;
  --b2: #34425b;
  --sb-bg: rgba(17,24,39,0.94);
  --sb-border: #253147;
  --nav-hover: #172033;
  --nav-active-bg: rgba(194,65,12,0.18);
  --nav-active-fg: #fdba74;
  --brand-soft: rgba(194,65,12,0.14);
  --accent-light: rgba(20,184,166,0.14);
}

html { background: var(--bg); }
body, body * { letter-spacing: 0; }
body {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 260px),
    var(--bg);
}
[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(30,41,59,0.18), rgba(30,41,59,0) 260px),
    var(--bg);
}

.sidebar {
  border-inline-end: 1px solid var(--sb-border);
  backdrop-filter: blur(14px);
  box-shadow: 4px 0 28px rgba(16,24,40,0.04);
}
[dir="rtl"] .sidebar { box-shadow: -4px 0 28px rgba(16,24,40,0.04); }
[data-theme="dark"] .sidebar { box-shadow: none; }

.sidebar-header {
  padding: 22px 18px 18px;
  border-bottom-color: transparent;
}
.sidebar-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(194,65,12,0.24);
}
.sidebar-title { font-size: 15px; }
.sidebar-subtitle { color: var(--accent); font-weight: 700; }
[data-theme="dark"] .sidebar-subtitle { color: #5eead4; }

.sidebar-controls {
  margin: 0 12px 10px;
  padding: 6px;
  border: 1px solid var(--b1);
  border-radius: 12px;
  background: var(--bg-subtle);
}
.lang-btn,
.theme-btn {
  border-color: transparent;
  background: transparent;
}
.lang-btn.active,
.theme-btn:hover {
  background: var(--bg-card);
  box-shadow: var(--sh-xs);
}

.sidebar-nav { padding: 4px 10px 12px; }
.nav-section-title {
  padding: 12px 12px 8px;
  letter-spacing: 0;
}
.nav-item {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  font-weight: 650;
}
.nav-item svg {
  width: 17px;
  height: 17px;
}
.nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(194,65,12,0.16);
}
.nav-item.active::before {
  top: 10px;
  bottom: 10px;
  width: 3px;
}
.nav-badge {
  min-width: 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(217,119,6,0.22);
}

.sidebar-footer {
  padding: 12px;
}
.user-profile {
  background: var(--bg-card);
  border-color: var(--b1);
  box-shadow: var(--sh-xs);
}
.user-avatar,
.topbar-avatar,
.avatar {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}

.mobile-topbar {
  height: 62px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
}
[data-theme="dark"] .mobile-topbar { background: rgba(17,24,39,0.94); }

.main-content {
  padding: 34px 40px 44px;
  max-width: 1540px;
}
.page-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(208,213,221,0.7);
  margin-bottom: 24px;
}
[data-theme="dark"] .page-header { border-bottom-color: rgba(52,66,91,0.75); }
.page-title {
  font-size: 28px;
  letter-spacing: 0;
}
.page-subtitle {
  max-width: 760px;
  color: var(--t2);
}

.stats-grid {
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card {
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--sh-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0)),
    var(--bg-card);
}
[data-theme="dark"] .stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
    var(--bg-card);
}
.stat-card::after {
  width: 4px;
}
.stat-card:hover {
  transform: translateY(-1px);
}
.stat-label {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.stat-value {
  font-size: 34px;
  letter-spacing: 0;
}
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.card,
.filter-bar {
  border-radius: 14px;
  box-shadow: var(--sh-sm);
}
.card {
  overflow: clip;
}
.card-header {
  padding: 15px 20px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-subtle));
}
[data-theme="dark"] .card-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.card-title {
  font-size: 15px;
  letter-spacing: 0;
}
.card-body { padding: 20px; }

.request-box {
  padding: 18px 20px;
}
.request-box:hover {
  background: rgba(15,118,110,0.035);
}
[data-theme="dark"] .request-box:hover {
  background: rgba(20,184,166,0.06);
}
.request-env {
  min-width: 0;
  flex-wrap: wrap;
}
.request-env-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.request-env-ip,
.tag {
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--t2);
}
.request-reason {
  border-radius: 10px;
  background: var(--bg-subtle);
  border-color: var(--b1);
  border-inline-start-color: var(--accent);
}

.badge {
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0;
}
.badge-primary { color: var(--brand-dark); background: var(--brand-soft); }
.badge-info { color: #1d4ed8; background: rgba(37,99,235,0.09); }
.badge-success { color: #15803d; }
.badge-warning { color: #b45309; }
[data-theme="dark"] .badge-info { color: #93c5fd; }
[data-theme="dark"] .badge-success { color: #86efac; }
[data-theme="dark"] .badge-warning { color: #fcd34d; }

.btn {
  min-height: 38px;
  border-radius: 10px;
  box-shadow: none;
  letter-spacing: 0;
}
.btn-sm {
  min-height: 32px;
  border-radius: 8px;
}
.btn-primary {
  background: linear-gradient(180deg, #d3541a, var(--brand));
  border-color: var(--brand);
}
.btn-success {
  background: linear-gradient(180deg, #22c55e, var(--success));
}
.btn-danger {
  background: linear-gradient(180deg, #ef4444, var(--danger));
}
.btn svg { flex-shrink: 0; }

.input,
.select,
textarea.input {
  min-height: 38px;
  border-radius: 10px;
  background: var(--bg-card);
  border-color: var(--b1);
}
.select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t3) 50%),
    linear-gradient(135deg, var(--t3) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 34px;
}
[dir="rtl"] .select {
  background-position: 18px 17px, 12px 17px;
  padding-inline-end: 13px;
  padding-inline-start: 34px;
}
.form-label {
  color: var(--t2);
  font-weight: 700;
}

.table-wrapper {
  border-radius: 0 0 14px 14px;
}
.table {
  min-width: 780px;
}
.table thead th {
  padding: 12px 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t2);
  background: var(--bg-subtle);
}
.table td {
  padding: 13px 16px;
}
.table tbody tr:hover td {
  background: rgba(15,118,110,0.035);
}
[data-theme="dark"] .table tbody tr:hover td {
  background: rgba(20,184,166,0.06);
}

.filter-bar {
  padding: 12px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] .filter-bar { background: rgba(17,24,39,0.74); }
.filter-bar .search-box {
  flex: 1 1 260px;
}
.filter-bar .search-box .input {
  width: 100%;
}
.filter-bar .input,
.filter-bar .select {
  min-width: 150px;
}

.tabs {
  gap: 6px;
  border-bottom: 0;
  background: var(--bg-subtle);
  padding: 5px;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.tab {
  border: 0;
  margin: 0;
  border-radius: 9px;
  white-space: nowrap;
}
.tab.active {
  background: var(--bg-card);
  box-shadow: var(--sh-xs);
  border-bottom-color: transparent;
}

.modal {
  border-radius: 16px;
}
.modal-header,
.modal-footer {
  background: var(--bg-subtle);
}
.toast {
  border-radius: 14px;
}
.empty-state {
  padding: 48px 22px;
}

.login-bg {
  background:
    linear-gradient(135deg, rgba(194,65,12,0.06), transparent 34%),
    linear-gradient(315deg, rgba(15,118,110,0.08), transparent 30%),
    var(--bg);
}
.login-bg::before {
  background-image:
    linear-gradient(rgba(148,163,184,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.48), transparent 78%);
}
.login-card {
  border-radius: 16px;
  box-shadow: var(--sh-lg);
}

@media (max-width: 1180px) {
  .main-content { padding: 28px 28px 38px; }
  .security-shell {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .security-steps {
    grid-template-columns: 1fr;
  }
  .security-shell,
  .security-shell.enabled-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "qr"
      "setup"
      "verify";
  }
  .security-shell.enabled-layout {
    grid-template-areas:
      "setup"
      "verify";
  }
  .qr-panel {
    position: static;
  }
}

@media (max-width: 768px) {
  .mobile-topbar { display: flex; }
  .sidebar { width: min(88vw, 320px); }
  .main-content {
    padding: 16px;
    padding-top: 78px;
  }
  .page-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .page-title { font-size: 23px; }
  .security-page .page-title { font-size: 24px; }
  .page-subtitle { font-size: 13px; }
  .stats-grid,
  .stats-grid[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .stat-card {
    padding: 14px;
    border-radius: 12px;
  }
  .stat-value { font-size: 27px; }
  .stat-icon { width: 36px; height: 36px; }
  .card-header {
    padding: 14px 16px;
  }
  .card-body,
  .request-box {
    padding: 16px;
  }
  .filter-bar {
    gap: 8px;
  }
  .filter-bar .input,
  .filter-bar .select,
  .filter-bar .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .request-actions,
  .request-actions form {
    width: 100%;
  }
  .request-actions form {
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .request-actions .input,
  .request-actions .btn {
    width: 100% !important;
  }
  .security-grid {
    grid-template-columns: 1fr;
  }
  .security-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .security-state {
    min-width: 0;
  }
  .security-highlights {
    margin-top: 12px;
  }
  .security-step {
    padding: 10px;
  }
  .security-shell,
  .security-shell.enabled-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "qr"
      "setup"
      "verify";
  }
  .security-shell.enabled-layout {
    grid-template-areas:
      "setup"
      "verify";
  }
  .copy-row {
    grid-template-columns: 1fr;
  }
  .table { min-width: 720px; }
  .table thead th,
  .table td {
    padding: 10px 12px;
  }
}

@media (max-width: 560px) {
  .main-content {
    padding: 12px;
    padding-top: 74px;
  }
  .stats-grid,
  .stats-grid[style] {
    grid-template-columns: 1fr !important;
  }
  .mobile-topbar {
    height: 58px;
    padding: 0 12px;
  }
  .card,
  .filter-bar {
    border-radius: 12px;
  }
  .page-title { font-size: 21px; }
  .request-header,
  .request-meta {
    gap: 8px;
  }
  .modal {
    border-radius: 16px 16px 0 0;
  }
  .login-card {
    padding: 30px 22px;
  }
  .otp-code-field {
    gap: 6px;
    max-width: 100%;
  }
  .otp-cell {
    min-height: 44px;
    border-radius: 11px;
    font-size: 21px;
  }
  .security-panel {
    padding: 14px;
    border-radius: 14px;
  }
  .security-state {
    width: 100%;
    padding: 12px;
  }
  .security-state-icon {
    width: 38px;
    height: 38px;
  }
  .qr-stage {
    padding: 10px;
    border-radius: 18px;
  }
  .qr-frame {
    padding: 14px;
    border-radius: 14px;
  }
  .qr-svg {
    width: min(100%, 292px);
  }
  .enabled-summary {
    align-items: flex-start;
    padding: 13px;
  }
  .enabled-shield {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
}

/* ================================================================
   32. RESPONSIVE COMPLETE PASS
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
canvas {
  max-width: 100%;
}
.main-content,
.page-header,
.card,
.card-header,
.card-body,
.filter-bar,
.request-box,
.request-env,
.request-meta,
.modal,
.table-wrapper,
.user-cell {
  min-width: 0;
}
.page-header > *,
.card-header > *,
.filter-bar > *,
.request-header > *,
.request-actions > * {
  min-width: 0;
}
.page-title,
.page-subtitle,
.card-title,
.request-env-name,
.request-reason,
.user-cell-name,
.user-cell-sub,
.table td {
  overflow-wrap: anywhere;
}
.table td,
.table th {
  max-width: 360px;
}
.chart-container {
  height: clamp(220px, 34vw, 330px);
}
.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1280px) {
  .main-content {
    padding-inline: 26px;
  }
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 1024px) {
  .main-content {
    padding-inline: 22px;
  }
  .page-header {
    align-items: stretch;
  }
  .page-header .btn,
  .page-header a.btn {
    width: fit-content;
  }
  .filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .filter-bar .search-box {
    grid-column: 1 / -1;
    width: 100%;
  }
  .filter-bar .input,
  .filter-bar .select,
  .filter-bar .btn,
  .filter-bar .search-box .input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .modal {
    width: min(100%, 680px);
  }
}

@media (max-width: 820px) {
  .stats-grid,
  .stats-grid[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .card-header {
    align-items: stretch;
    flex-direction: column;
  }
  .card-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .card-actions .btn,
  .card-header .search-box,
  .card-header .search-box .input {
    width: 100% !important;
  }
  .request-header {
    align-items: stretch;
  }
  .request-env {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .page-header {
    gap: 12px;
  }
  .page-header > .btn,
  .page-header > a.btn,
  .page-header form,
  .page-header form .btn {
    width: 100%;
  }
  .tabs {
    width: 100%;
  }
  .tab {
    flex: 1 0 auto;
    text-align: center;
  }
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-inline: 16px;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
  .modal-footer .btn {
    flex: 1 1 140px;
  }
  .modal-env-row-inner,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr auto auto"],
  [style*="grid-template-columns: 1fr auto auto"] {
    grid-template-columns: 1fr !important;
  }
  .modal-env-row-inner .btn,
  .modal-env-row-inner .input,
  .modal-env-row-inner .select {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .table-wrapper {
    overflow: visible;
  }
  .table.responsive-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .table.responsive-table thead {
    display: none;
  }
  .table.responsive-table,
  .table.responsive-table tbody,
  .table.responsive-table tr,
  .table.responsive-table td {
    display: block;
    width: 100%;
  }
  .table.responsive-table tr {
    background: var(--bg-card);
    border: 1px solid var(--b1);
    border-radius: 14px;
    box-shadow: var(--sh-xs);
    overflow: hidden;
  }
  .table.responsive-table tbody tr:hover td {
    background: transparent;
  }
  .table.responsive-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    max-width: none;
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--b1);
    text-align: start;
  }
  .table.responsive-table td:last-child {
    border-bottom: 0;
  }
  .table.responsive-table td::before {
    content: attr(data-label);
    color: var(--t3);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
  }
  .table.responsive-table td:empty {
    display: none;
  }
  .table.responsive-table .user-cell {
    justify-content: flex-start;
  }
  .table.responsive-table .btn {
    min-width: 38px;
  }
  .table.responsive-table td > div[style*="display:flex"],
  .table.responsive-table td > div[style*="display: flex"] {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .main-content {
    width: 100%;
  }
  .page-header {
    display: grid;
    grid-template-columns: 1fr;
  }
  .filter-bar {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .stats-grid,
  .stats-grid[style] {
    grid-template-columns: 1fr !important;
  }
  .stat-card {
    min-height: auto;
  }
  .request-env,
  .request-meta,
  .request-actions {
    width: 100%;
  }
  .request-actions .btn,
  .request-actions form,
  .request-actions input,
  .request-actions select {
    width: 100% !important;
  }
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal,
  .modal-overlay > div[style*="max-width"] {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-body,
  .modal-overlay > div[style*="max-width"] {
    overscroll-behavior: contain;
  }
  .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }
  .modal-footer .btn,
  .modal-footer button {
    width: 100%;
  }
  .toast-container {
    inset-inline: 12px;
    top: 70px;
    max-width: none;
  }
  .toast {
    width: 100%;
  }
  .login-bg {
    min-height: 100dvh;
    padding: 12px;
  }
  .login-card {
    width: 100%;
    margin: 0;
  }
  .chart-container {
    height: 230px;
  }
}

@media (max-width: 380px) {
  .main-content {
    padding-inline: 10px;
  }
  .btn {
    padding-inline: 12px;
  }
  .table.responsive-table td {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .table.responsive-table td::before {
    font-size: 10px;
  }
  .otp-cell {
    min-height: 38px;
    font-size: 18px;
  }
}