/* Sleek Dark Audit & Portal Editorial Theme */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@300;400;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg-primary: hsl(215, 28%, 7%);
  --bg-card: hsla(215, 25%, 15%, 0.5);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: hsla(215, 20%, 30%, 0.2);
  --accent-blue: hsl(199, 89%, 48%);
  --accent-gold: hsl(45, 100%, 68%);
  --gold-dark: hsl(217, 91%, 60%);
  
  --font-inter: 'Inter', sans-serif;
  --font-cairo: 'Cairo', sans-serif;
  --font-arabic: 'Cairo', 'Noto Sans Arabic', sans-serif;
  --font-kurdish: 'Noto Sans Arabic', 'Cairo', sans-serif;
}

html, body {
  background: linear-gradient(135deg, hsl(215, 28%, 7%) 0%, hsl(215, 32%, 10%) 100%) !important;
  color: var(--text-primary) !important;
}

[lang="ar"], [lang="ar"] * { font-family: var(--font-arabic) !important; }
[lang="ku"], [lang="ku"] * { font-family: var(--font-kurdish) !important; }
[lang="ckb"], [lang="ckb"] * { font-family: var(--font-kurdish) !important; }
[lang="en"], [lang="en"] * { font-family: var(--font-inter) !important; }

header {
  background: hsla(215, 28%, 7%, 0.85) !important;
  -webkit-backdrop-filter:blur(16px) !important;  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateZ(0) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.glass, .shadow-card, .rounded-2xl {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter:blur(16px) !important;  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateZ(0) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass:hover, .shadow-card:hover, a.group:hover {
  transform: translateY(-4px) translateZ(0) !important;
  border-color: hsla(199, 89%, 48%, 0.4) !important;
  box-shadow: 0 10px 25px -5px hsla(199, 89%, 48%, 0.2) !important;
}

.tab-active {
  border-color: var(--accent-blue) !important;
  background: hsla(199, 89%, 48%, 0.15) !important;
  color: var(--accent-blue) !important;
  box-shadow: 0 0 10px hsla(199, 89%, 48%, 0.2) !important;
}

button, a, input, select {
  min-height: 48px;
  min-width: 44px;
}

.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: hsla(215, 28%, 7%, 0.7);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter:blur(16px);  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
}
.mobile-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-sidebar-drawer {
  position: fixed;
  top: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  z-index: 1001;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.5);
  display: flex;
  flex-direction: column;
}
.mobile-sidebar-drawer.rtl-sidebar {
  right: 0;
  transform: translateX(100%);
}
.mobile-sidebar-drawer.rtl-sidebar.active {
  transform: translateX(0);
}
.mobile-sidebar-drawer.ltr-sidebar {
  left: 0;
  transform: translateX(-100%);
}
.mobile-sidebar-drawer.ltr-sidebar.active {
  transform: translateX(0);
}

.audit-matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.audit-matrix-table th, .audit-matrix-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsla(215, 20%, 30%, 0.2);
}