/* ========================================
   NESMA Infrastructure & Technology
   Brand Identity System - Version 3.0
   Supply Chain Management Dashboards

   Official Colors from NIT Brand Guidelines
   ======================================== */

/* ==========================================
   CSS Variables - Complete Design System
   ========================================== */
:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --nesma-primary: #2E3192;
  --nesma-primary-light: #4A4DC7;
  --nesma-primary-dark: #1E2175;

  --nesma-secondary: #80D1E9;
  --nesma-secondary-light: #A8E0F0;
  --nesma-secondary-dark: #5BBCD9;

  /* ===== SECONDARY BRAND COLORS ===== */
  --nesma-navy: #0E2841;
  --nesma-navy-light: #152D4A;
  --nesma-navy-dark: #081929;

  --nesma-dark-blue: #203366;
  --nesma-dark-blue-light: #2A4080;
  --nesma-dark-blue-dark: #152447;

  /* ===== PPTX PRESENTATION COLORS ===== */
  --pptx-deep-navy: #002060;
  --pptx-olive: #92A185;
  --pptx-gold: #DEC18C;
  --pptx-rose: #AD8082;
  --pptx-icon-blue: #4472C4;
  --pptx-purple: #7B2D8E;
  --pptx-content-bg: #F2F2F4;

  /* ===== NEUTRAL COLORS ===== */
  --nesma-white: #FFFFFF;
  --nesma-gray-50: #F9FAFB;
  --nesma-gray-100: #F3F4F6;
  --nesma-gray-200: #E8E8E8;
  --nesma-gray-300: #D1D5DB;
  --nesma-gray-400: #B3B3B3;
  --nesma-gray-500: #6B7280;
  --nesma-gray-600: #4B5563;
  --nesma-gray-700: #374151;
  --nesma-gray-800: #1F2937;
  --nesma-gray-900: #111827;
  --nesma-black: #000000;

  /* ===== STATUS COLORS (Brand Harmonized) ===== */
  --nesma-success: #059669;
  --nesma-success-light: #D1FAE5;
  --nesma-success-dark: #047857;

  --nesma-warning: #D97706;
  --nesma-warning-light: #FEF3C7;
  --nesma-warning-dark: #B45309;

  --nesma-danger: #DC2626;
  --nesma-danger-light: #FEE2E2;
  --nesma-danger-dark: #B91C1C;

  --nesma-info: #0284C7;
  --nesma-info-light: #E0F2FE;
  --nesma-info-dark: #0369A1;

  /* ===== BRAND GRADIENTS ===== */
  --gradient-primary: linear-gradient(135deg, #2E3192 0%, #0E2841 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4A4DC7 0%, #152D4A 100%);
  --gradient-secondary: linear-gradient(135deg, #80D1E9 0%, #2E3192 100%);
  --gradient-dark: linear-gradient(135deg, #0E2841 0%, #203366 50%, #0E2841 100%);
  --gradient-light: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
  --gradient-header: linear-gradient(135deg, #0E2841 0%, #2E3192 40%, #5B2D8E 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);

  /* ===== KPI CARD GRADIENTS (Sequential Palette) ===== */
  --gradient-kpi-1: linear-gradient(135deg, #2E3192 0%, #1E2175 100%);
  --gradient-kpi-2: linear-gradient(135deg, #203366 0%, #152447 100%);
  --gradient-kpi-3: linear-gradient(135deg, #0E2841 0%, #081929 100%);
  --gradient-kpi-4: linear-gradient(135deg, #80D1E9 0%, #5BBCD9 100%);
  --gradient-kpi-success: linear-gradient(135deg, #059669 0%, #0E2841 100%);
  --gradient-kpi-warning: linear-gradient(135deg, #D97706 0%, #203366 100%);
  --gradient-kpi-danger: linear-gradient(135deg, #DC2626 0%, #0E2841 100%);
  --gradient-kpi-olive: linear-gradient(135deg, #92A185 0%, #7A8B6E 100%);
  --gradient-kpi-gold: linear-gradient(135deg, #DEC18C 0%, #C5A66E 100%);
  --gradient-kpi-rose: linear-gradient(135deg, #AD8082 0%, #956A6C 100%);
  --gradient-kpi-purple: linear-gradient(135deg, #7B2D8E 0%, #5B1D6E 100%);

  /* ===== CHART COLORS ===== */
  --chart-1: #2E3192;
  --chart-2: #80D1E9;
  --chart-3: #203366;
  --chart-4: #0E2841;
  --chart-5: #4A4DC7;
  --chart-6: #5BBCD9;
  --chart-7: #059669;
  --chart-8: #D97706;
  --chart-9: #92A185;
  --chart-10: #DEC18C;
  --chart-11: #AD8082;
  --chart-12: #4472C4;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(14, 40, 65, 0.05);
  --shadow-sm: 0 2px 4px rgba(14, 40, 65, 0.06), 0 1px 2px rgba(14, 40, 65, 0.04);
  --shadow-md: 0 4px 6px rgba(14, 40, 65, 0.07), 0 2px 4px rgba(14, 40, 65, 0.06);
  --shadow-lg: 0 10px 15px rgba(14, 40, 65, 0.1), 0 4px 6px rgba(14, 40, 65, 0.05);
  --shadow-xl: 0 20px 25px rgba(14, 40, 65, 0.15), 0 10px 10px rgba(14, 40, 65, 0.04);
  --shadow-2xl: 0 25px 50px rgba(14, 40, 65, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(14, 40, 65, 0.06);
  --shadow-glow: 0 0 40px rgba(128, 209, 233, 0.3);
  --shadow-primary: 0 4px 14px rgba(46, 49, 146, 0.25);
  --shadow-card: 0 4px 20px rgba(14, 40, 65, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(46, 49, 146, 0.15);

  /* ===== BORDER RADIUS ===== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ===== SPACING SYSTEM ===== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Cairo', 'Inter', -apple-system, sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-INDEX ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==========================================
   BASE STYLES
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--nesma-gray-800);
  background: var(--pptx-content-bg);
  min-height: 100vh;
}

[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-arabic);
}

/* ==========================================
   TYPOGRAPHY UTILITIES
   ========================================== */
.text-primary { color: var(--nesma-primary); }
.text-secondary { color: var(--nesma-secondary); }
.text-navy { color: var(--nesma-navy); }
.text-success { color: var(--nesma-success); }
.text-warning { color: var(--nesma-warning); }
.text-danger { color: var(--nesma-danger); }
.text-muted { color: var(--nesma-gray-500); }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* ==========================================
   HEADER COMPONENT
   ========================================== */
.nesma-header {
  background: var(--gradient-header);
  color: var(--nesma-white);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-primary);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.nesma-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nesma-secondary) 0%, var(--pptx-gold) 100%);
}

.nesma-header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
}

.nesma-header-subtitle {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-top: 2px;
}

/* ==========================================
   CARD COMPONENTS
   ========================================== */
.nesma-card {
  background: var(--nesma-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(46, 49, 146, 0.06);
  transition: all var(--transition-normal);
  overflow: hidden;
}

.nesma-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(128, 209, 233, 0.2);
}

.nesma-card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--nesma-gray-200);
  background: linear-gradient(180deg, var(--nesma-white) 0%, var(--nesma-gray-50) 100%);
}

.nesma-card-body {
  padding: var(--space-6);
}

.nesma-card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--nesma-gray-200);
  background: var(--nesma-gray-50);
}

/* ==========================================
   KPI CARD COMPONENT
   ========================================== */
.nesma-kpi {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  color: var(--nesma-white);
  overflow: hidden;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.nesma-kpi::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

.nesma-kpi:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.nesma-kpi-1 { background: var(--gradient-kpi-1); }
.nesma-kpi-2 { background: var(--gradient-kpi-2); }
.nesma-kpi-3 { background: var(--gradient-kpi-3); }
.nesma-kpi-4 { background: var(--gradient-kpi-4); color: var(--nesma-navy); }
.nesma-kpi-success { background: var(--gradient-kpi-success); }
.nesma-kpi-warning { background: var(--gradient-kpi-warning); }
.nesma-kpi-danger { background: var(--gradient-kpi-danger); }

.nesma-kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.nesma-kpi-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.nesma-kpi-subtitle {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-top: var(--space-2);
}

.nesma-kpi-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="rtl"] .nesma-kpi-icon {
  right: auto;
  left: var(--space-4);
}

/* ==========================================
   SLA INDICATOR CARDS
   ========================================== */
.nesma-sla-section {
  background: linear-gradient(135deg, var(--nesma-gray-50) 0%, var(--nesma-gray-100) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(46, 49, 146, 0.08);
}

.nesma-sla-card {
  background: var(--nesma-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.nesma-sla-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.nesma-sla-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.nesma-sla-card.sla-green::before { background: linear-gradient(90deg, var(--nesma-success) 0%, #10B981 100%); }
.nesma-sla-card.sla-yellow::before { background: linear-gradient(90deg, var(--nesma-warning) 0%, #F59E0B 100%); }
.nesma-sla-card.sla-red::before { background: linear-gradient(90deg, var(--nesma-danger) 0%, #EF4444 100%); }

.nesma-sla-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin: var(--space-2) 0;
}

.nesma-sla-card.sla-green .nesma-sla-value { color: var(--nesma-success); }
.nesma-sla-card.sla-yellow .nesma-sla-value { color: var(--nesma-warning); }
.nesma-sla-card.sla-red .nesma-sla-value { color: var(--nesma-danger); }

.nesma-sla-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--nesma-gray-700);
}

.nesma-sla-target {
  font-size: var(--text-xs);
  color: var(--nesma-gray-500);
  margin-top: var(--space-1);
}

/* ==========================================
   TAB NAVIGATION
   ========================================== */
.nesma-tabs {
  display: flex;
  border-bottom: 1px solid var(--nesma-gray-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nesma-tab {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--nesma-gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

.nesma-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--nesma-primary);
  transform: scaleX(0);
  transition: transform var(--transition-normal);
  border-radius: 3px 3px 0 0;
}

.nesma-tab:hover {
  color: var(--nesma-primary);
  background: rgba(46, 49, 146, 0.04);
}

.nesma-tab.active {
  color: var(--nesma-primary);
  background: rgba(46, 49, 146, 0.06);
}

.nesma-tab.active::after {
  transform: scaleX(1);
}

.nesma-tab-content {
  display: none;
  animation: fadeSlideIn 0.4s ease;
}

.nesma-tab-content.active {
  display: block;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   TABLE COMPONENT
   ========================================== */
.nesma-table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--nesma-gray-200);
}

.nesma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.nesma-table th {
  background: var(--gradient-primary);
  color: var(--nesma-white);
  padding: var(--space-4);
  font-weight: var(--font-semibold);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.nesma-table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.nesma-table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

[dir="rtl"] .nesma-table th {
  text-align: right;
}

[dir="rtl"] .nesma-table th:first-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

[dir="rtl"] .nesma-table th:last-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.nesma-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--nesma-gray-100);
  color: var(--nesma-gray-700);
}

.nesma-table tbody tr {
  transition: background var(--transition-fast);
}

.nesma-table tbody tr:hover {
  background: rgba(128, 209, 233, 0.08);
}

.nesma-table tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================
   BADGE COMPONENT
   ========================================== */
.nesma-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.nesma-badge-primary {
  background: rgba(46, 49, 146, 0.12);
  color: var(--nesma-primary);
}

.nesma-badge-secondary {
  background: rgba(128, 209, 233, 0.2);
  color: var(--nesma-navy);
}

.nesma-badge-success {
  background: var(--nesma-success-light);
  color: var(--nesma-success-dark);
}

.nesma-badge-warning {
  background: var(--nesma-warning-light);
  color: var(--nesma-warning-dark);
}

.nesma-badge-danger {
  background: var(--nesma-danger-light);
  color: var(--nesma-danger-dark);
}

.nesma-badge-info {
  background: var(--nesma-info-light);
  color: var(--nesma-info-dark);
}

/* ==========================================
   BUTTON COMPONENT
   ========================================== */
.nesma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.nesma-btn-primary {
  background: var(--gradient-primary);
  color: var(--nesma-white);
}

.nesma-btn-primary:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.nesma-btn-secondary {
  background: var(--nesma-secondary);
  color: var(--nesma-navy);
}

.nesma-btn-secondary:hover {
  background: var(--nesma-secondary-dark);
}

.nesma-btn-outline {
  background: transparent;
  border: 2px solid var(--nesma-primary);
  color: var(--nesma-primary);
}

.nesma-btn-outline:hover {
  background: var(--nesma-primary);
  color: var(--nesma-white);
}

.nesma-btn-ghost {
  background: transparent;
  color: var(--nesma-gray-600);
}

.nesma-btn-ghost:hover {
  background: var(--nesma-gray-100);
  color: var(--nesma-primary);
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */
.nesma-input,
.nesma-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--nesma-gray-800);
  background: var(--nesma-white);
  border: 2px solid var(--nesma-gray-200);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nesma-input:focus,
.nesma-select:focus {
  outline: none;
  border-color: var(--nesma-primary);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.1);
}

.nesma-input::placeholder {
  color: var(--nesma-gray-400);
}

.nesma-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 1.25em;
  padding-right: var(--space-10);
  cursor: pointer;
}

[dir="rtl"] .nesma-select {
  background-position: left var(--space-3) center;
  padding-right: var(--space-4);
  padding-left: var(--space-10);
}

/* ==========================================
   FILTER SECTION
   ========================================== */
.nesma-filter-section {
  background: linear-gradient(135deg, var(--nesma-gray-50) 0%, var(--nesma-gray-100) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(46, 49, 146, 0.06);
}

.nesma-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.nesma-filter-item {
  min-width: 150px;
}

.nesma-filter-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--nesma-gray-600);
  margin-bottom: var(--space-1);
}

/* ==========================================
   CHART CONTAINER
   ========================================== */
.nesma-chart-container {
  position: relative;
  height: 300px;
  padding: var(--space-4);
}

.nesma-chart-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--nesma-gray-800);
  margin-bottom: var(--space-4);
}

/* ==========================================
   ALERT / NOTICE COMPONENT
   ========================================== */
.nesma-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.nesma-alert-success {
  background: var(--nesma-success-light);
  border-left: 4px solid var(--nesma-success);
  color: var(--nesma-success-dark);
}

.nesma-alert-warning {
  background: var(--nesma-warning-light);
  border-left: 4px solid var(--nesma-warning);
  color: var(--nesma-warning-dark);
}

.nesma-alert-danger {
  background: var(--nesma-danger-light);
  border-left: 4px solid var(--nesma-danger);
  color: var(--nesma-danger-dark);
}

.nesma-alert-info {
  background: var(--nesma-info-light);
  border-left: 4px solid var(--nesma-info);
  color: var(--nesma-info-dark);
}

[dir="rtl"] .nesma-alert {
  border-left: none;
  border-right: 4px solid;
}

/* ==========================================
   CRITICAL ALERT BANNER
   ========================================== */
.nesma-critical-banner {
  background: linear-gradient(135deg, var(--nesma-danger) 0%, var(--nesma-navy) 100%);
  color: var(--nesma-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-lg);
}

.nesma-critical-banner-icon {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nesma-critical-banner-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.nesma-critical-banner-text {
  font-size: var(--text-sm);
  opacity: 0.9;
}

/* ==========================================
   LOADING SPINNER
   ========================================== */
.nesma-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--nesma-gray-200);
  border-top-color: var(--nesma-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.nesma-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  z-index: var(--z-modal);
}

/* ==========================================
   SCROLL CONTAINER
   ========================================== */
.nesma-scroll-container {
  max-height: 400px;
  overflow-y: auto;
  border-radius: var(--radius-lg);
}

.nesma-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.nesma-scroll-container::-webkit-scrollbar-track {
  background: var(--nesma-gray-100);
  border-radius: var(--radius-full);
}

.nesma-scroll-container::-webkit-scrollbar-thumb {
  background: var(--nesma-secondary);
  border-radius: var(--radius-full);
}

.nesma-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--nesma-secondary-dark);
}

/* ==========================================
   GLASS CARD (Portal)
   ========================================== */
.nesma-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(128, 209, 233, 0.1);
  border-radius: var(--radius-3xl);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.nesma-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-3xl);
  padding: 1px;
  background: linear-gradient(135deg, transparent 0%, rgba(128, 209, 233, 0.3) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.nesma-glass:hover::before {
  opacity: 1;
}

.nesma-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(128, 209, 233, 0.3);
  box-shadow: var(--shadow-glow);
  transform: translateY(-8px) scale(1.02);
}

/* ==========================================
   PORTAL PAGE STYLES
   ========================================== */
.nesma-portal-bg {
  background: var(--gradient-dark);
  min-height: 100vh;
}

.nesma-hero-gradient {
  background:
    radial-gradient(ellipse at top, rgba(128, 209, 233, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(123, 45, 142, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(46, 49, 146, 0.2) 0%, transparent 60%);
}

.nesma-glow-text {
  text-shadow: 0 0 40px rgba(128, 209, 233, 0.5);
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nesma-fade-in {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.nesma-delay-1 { animation-delay: 0.1s; }
.nesma-delay-2 { animation-delay: 0.2s; }
.nesma-delay-3 { animation-delay: 0.3s; }
.nesma-delay-4 { animation-delay: 0.4s; }
.nesma-delay-5 { animation-delay: 0.5s; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.nesma-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 768px) {
  :root {
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
  }

  .nesma-kpi {
    padding: var(--space-4);
  }

  .nesma-kpi-value {
    font-size: var(--text-2xl);
  }

  .nesma-tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  .nesma-card-body {
    padding: var(--space-4);
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
  .nesma-no-print {
    display: none !important;
  }

  .particles {
    display: none !important;
  }

  body {
    background: white;
  }

  .nesma-card,
  .nesma-kpi {
    box-shadow: none;
    border: 1px solid var(--nesma-gray-200);
  }

  .nesma-header {
    background: var(--nesma-primary);
    box-shadow: none;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.nesma-bg-primary { background-color: var(--nesma-primary); }
.nesma-bg-secondary { background-color: var(--nesma-secondary); }
.nesma-bg-navy { background-color: var(--nesma-navy); }
.nesma-bg-white { background-color: var(--nesma-white); }
.nesma-bg-gray-50 { background-color: var(--nesma-gray-50); }
.nesma-bg-gray-100 { background-color: var(--nesma-gray-100); }

.nesma-rounded-sm { border-radius: var(--radius-sm); }
.nesma-rounded-md { border-radius: var(--radius-md); }
.nesma-rounded-lg { border-radius: var(--radius-lg); }
.nesma-rounded-xl { border-radius: var(--radius-xl); }
.nesma-rounded-full { border-radius: var(--radius-full); }

.nesma-shadow-sm { box-shadow: var(--shadow-sm); }
.nesma-shadow-md { box-shadow: var(--shadow-md); }
.nesma-shadow-lg { box-shadow: var(--shadow-lg); }
.nesma-shadow-xl { box-shadow: var(--shadow-xl); }

/* ==========================================
   GRADIENT KPI CARDS (New Design v4.0)
   Professional gradient cards with diagonal shine
   ========================================== */

/* Base gradient card */
.gradient-card {
  position: relative;
  border-radius: 16px;
  padding: 20px 24px;
  color: white;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 120px;
}

/* Diagonal shine overlay effect */
.gradient-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  border-radius: 0 16px 16px 0;
  pointer-events: none;
}

/* Inner glow effect */
.gradient-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-card:hover::after {
  opacity: 1;
}

.gradient-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Color variants - Nesma Brand */
/* Primary Blue - Main actions */
.gradient-card-primary {
  background: linear-gradient(135deg, #4361ee 0%, #3a56d4 50%, #2E3192 100%);
}

/* Secondary Blue - Info */
.gradient-card-blue {
  background: linear-gradient(135deg, #5B8DEF 0%, #4A7DE0 50%, #3B6FD4 100%);
}

/* Navy - Dark info */
.gradient-card-navy {
  background: linear-gradient(135deg, #1E3A5F 0%, #152D4A 50%, #0E2841 100%);
}

/* Success Green */
.gradient-card-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
}

/* Warning Orange/Amber */
.gradient-card-warning {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
}

/* Danger Red */
.gradient-card-danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
}

/* Cyan - Secondary brand */
.gradient-card-cyan {
  background: linear-gradient(135deg, #80D1E9 0%, #5BBCD9 50%, #3BA8C7 100%);
  color: #0E2841;
}

/* Purple - Special */
.gradient-card-purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
}

/* Icon box in corner */
.gradient-card-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

[dir="rtl"] .gradient-card-icon {
  right: auto;
  left: 16px;
}

.gradient-card-icon svg {
  width: 22px;
  height: 22px;
}

/* Card content */
.gradient-card-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.gradient-card-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.gradient-card-subtitle {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 500;
}

/* Compact version for grids */
.gradient-card-compact {
  min-height: 100px;
  padding: 16px 20px;
}

.gradient-card-compact .gradient-card-value {
  font-size: 2rem;
}

.gradient-card-compact .gradient-card-icon {
  width: 38px;
  height: 38px;
}

.gradient-card-compact .gradient-card-icon svg {
  width: 18px;
  height: 18px;
}

/* SLA status cards with gradient */
.sla-gradient-card {
  position: relative;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  background: white;
  border: 1px solid var(--nesma-gray-200);
}

.sla-gradient-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.sla-gradient-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.sla-gradient-card.sla-green::before {
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.sla-gradient-card.sla-yellow::before {
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

.sla-gradient-card.sla-red::before {
  background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
}

.sla-gradient-card .sla-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 8px;
}

.sla-gradient-card.sla-green .sla-indicator {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  color: #059669;
}

.sla-gradient-card.sla-yellow .sla-indicator {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #D97706;
}

.sla-gradient-card.sla-red .sla-indicator {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  color: #DC2626;
}

.sla-gradient-card .sla-value {
  font-size: 2rem;
  font-weight: 800;
  margin: 6px 0;
}

.sla-gradient-card.sla-green .sla-value { color: #059669; }
.sla-gradient-card.sla-yellow .sla-value { color: #D97706; }
.sla-gradient-card.sla-red .sla-value { color: #DC2626; }

/* Cycle time card with gradient background */
.cycle-time-gradient {
  background: linear-gradient(135deg, rgba(46, 49, 146, 0.06) 0%, rgba(128, 209, 233, 0.08) 100%);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  border: 1px solid rgba(46, 49, 146, 0.1);
}

/* Aging bucket with gradient */
.aging-bucket-gradient {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.aging-bucket-gradient::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.aging-bucket-gradient:hover {
  transform: translateX(4px);
}

[dir="rtl"] .aging-bucket-gradient:hover {
  transform: translateX(-4px);
}

.aging-bucket-gradient.bucket-green {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
}
.aging-bucket-gradient.bucket-green::before {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
}

.aging-bucket-gradient.bucket-yellow {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
}
.aging-bucket-gradient.bucket-yellow::before {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
}

.aging-bucket-gradient.bucket-orange {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.02) 100%);
}
.aging-bucket-gradient.bucket-orange::before {
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
}

.aging-bucket-gradient.bucket-red {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
}
.aging-bucket-gradient.bucket-red::before {
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
}

/* Summary cards row */
.summary-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--nesma-gray-200);
  transition: all 0.2s ease;
  cursor: pointer;
}

.summary-card:hover {
  border-color: var(--nesma-primary);
  box-shadow: 0 4px 12px rgba(46, 49, 146, 0.1);
  transform: translateY(-2px);
}

.summary-card-label {
  font-size: 12px;
  color: var(--nesma-gray-500);
  margin-bottom: 4px;
}

.summary-card-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.summary-card-value.text-primary { color: var(--nesma-primary); }
.summary-card-value.text-success { color: #059669; }
.summary-card-value.text-warning { color: #D97706; }
.summary-card-value.text-danger { color: #DC2626; }
.summary-card-value.text-info { color: #0284C7; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .gradient-card {
    padding: 16px 18px;
    min-height: 100px;
  }

  .gradient-card-value {
    font-size: 2rem;
  }

  .gradient-card-icon {
    width: 36px;
    height: 36px;
  }

  .gradient-card-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================
   PPTX DESIGN LANGUAGE
   Supply Chain Monthly Report visual identity
   ========================================== */

/* New KPI gradient card variants */
.nesma-kpi-olive { background: var(--gradient-kpi-olive); }
.nesma-kpi-gold { background: var(--gradient-kpi-gold); color: var(--nesma-navy); }
.nesma-kpi-rose { background: var(--gradient-kpi-rose); }
.nesma-kpi-purple { background: var(--gradient-kpi-purple); }

.gradient-card-olive {
  background: linear-gradient(135deg, #92A185 0%, #7A8B6E 50%, #6B7C60 100%);
}

.gradient-card-gold {
  background: linear-gradient(135deg, #DEC18C 0%, #C5A66E 50%, #B08F55 100%);
  color: #0E2841;
}

.gradient-card-rose {
  background: linear-gradient(135deg, #AD8082 0%, #956A6C 50%, #7D5658 100%);
}

.gradient-card-icon-blue {
  background: linear-gradient(135deg, #4472C4 0%, #3662B4 50%, #2852A4 100%);
}

.gradient-card-deep-navy {
  background: linear-gradient(135deg, #002060 0%, #001844 50%, #001030 100%);
}

/* Blue-to-purple primary gradient (PPTX header bar) */
.bg-primary-gradient-pptx {
  background: linear-gradient(135deg, #2E3192 0%, #5B2D8E 100%);
}

.bg-olive-gradient { background: linear-gradient(135deg, #92A185 0%, #7A8B6E 100%); }
.bg-gold-gradient { background: linear-gradient(135deg, #DEC18C 0%, #C5A66E 100%); }
.bg-rose-gradient-alt { background: linear-gradient(135deg, #AD8082 0%, #956A6C 100%); }
.bg-icon-blue-gradient { background: linear-gradient(135deg, #4472C4 0%, #3662B4 100%); }

/* Gold accent for monetary/value highlights */
.kpi-value-gold { color: var(--pptx-gold); }
.text-gold { color: var(--pptx-gold); }
.text-olive { color: var(--pptx-olive); }
.text-rose { color: var(--pptx-rose); }
.text-deep-navy { color: var(--pptx-deep-navy); }

/* Decorative arc overlay (matching PPTX circular arcs) */
.section-decorated {
  position: relative;
  overflow: hidden;
}

.section-decorated::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(46, 49, 146, 0.06);
  border-radius: 50%;
  top: -300px;
  right: -200px;
  pointer-events: none;
}

.section-decorated::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(128, 209, 233, 0.05);
  border-radius: 50%;
  bottom: -200px;
  left: -100px;
  pointer-events: none;
}

/* Gold accent line under section headers */
.section-title-decorated::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--pptx-gold), transparent);
  margin-top: 8px;
}

/* ==========================================
   DARK THEME
   Uses !important to override dashboard inline styles
   ========================================== */
[data-theme="dark"] body {
  background: var(--nesma-navy-dark) !important;
  color: #E5E7EB !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .nesma-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #E5E7EB !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .nesma-card:hover {
  border-color: rgba(128, 209, 233, 0.15) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

[data-theme="dark"] .nesma-card-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .nesma-card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .sla-card,
[data-theme="dark"] .sla-compliance-section {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #E5E7EB !important;
}

[data-theme="dark"] .sla-target,
[data-theme="dark"] .sla-label { color: #9CA3AF !important; }

[data-theme="dark"] .cycle-time-card {
  background: rgba(46, 49, 146, 0.12) !important;
  border-color: rgba(128, 209, 233, 0.1) !important;
}

[data-theme="dark"] .cycle-time-value { color: var(--nesma-secondary) !important; }

[data-theme="dark"] .aging-bucket { background: rgba(255,255,255,0.03) !important; }

[data-theme="dark"] .kpi-mini {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .kpi-mini .value { color: var(--nesma-secondary) !important; }
[data-theme="dark"] .kpi-mini .label { color: #9CA3AF !important; }

[data-theme="dark"] .filter-section {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #E5E7EB !important;
}

[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus {
  border-color: var(--nesma-secondary) !important;
  box-shadow: 0 0 0 3px rgba(128, 209, 233, 0.15) !important;
}

[data-theme="dark"] .data-table td {
  border-bottom-color: rgba(255,255,255,0.06) !important;
  color: #D1D5DB !important;
}

[data-theme="dark"] .data-table tr:hover td {
  background: rgba(128, 209, 233, 0.06) !important;
}

[data-theme="dark"] .data-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

[data-theme="dark"] .scroll-container {
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .scroll-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .tab-btn { color: #9CA3AF !important; }

[data-theme="dark"] .tab-btn.active {
  color: var(--nesma-secondary) !important;
  border-bottom-color: var(--nesma-secondary) !important;
  background: rgba(128, 209, 233, 0.08) !important;
}

[data-theme="dark"] .tab-btn:hover:not(.active) {
  color: #E5E7EB !important;
  background: rgba(255,255,255,0.05) !important;
}

[data-theme="dark"] .badge-success { background: rgba(5, 150, 105, 0.15) !important; }
[data-theme="dark"] .badge-warning { background: rgba(217, 119, 6, 0.15) !important; }
[data-theme="dark"] .badge-danger  { background: rgba(220, 38, 38, 0.15) !important; }
[data-theme="dark"] .badge-info    { background: rgba(37, 99, 235, 0.15) !important; }

[data-theme="dark"] .score-excellent { background: rgba(5, 150, 105, 0.15) !important; color: #34D399 !important; }
[data-theme="dark"] .score-good { background: rgba(128, 209, 233, 0.15) !important; color: var(--nesma-secondary) !important; }
[data-theme="dark"] .score-fair { background: rgba(217, 119, 6, 0.15) !important; color: #FBBF24 !important; }
[data-theme="dark"] .score-poor { background: rgba(220, 38, 38, 0.15) !important; color: #FCA5A5 !important; }
[data-theme="dark"] .score-critical { background: rgba(220, 38, 38, 0.2) !important; color: #FCA5A5 !important; }

[data-theme="dark"] .alert-card { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .alert-critical { background: rgba(220, 38, 38, 0.1) !important; }
[data-theme="dark"] .alert-warning { background: rgba(217, 119, 6, 0.1) !important; }
[data-theme="dark"] .alert-success { background: rgba(5, 150, 105, 0.1) !important; }

[data-theme="dark"] .summary-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .summary-card:hover { border-color: var(--nesma-secondary) !important; }
[data-theme="dark"] .summary-card-label { color: #9CA3AF !important; }

[data-theme="dark"] .section-title { color: var(--nesma-secondary) !important; }

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 { color: #9CA3AF !important; }
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 { color: #E5E7EB !important; }

[data-theme="dark"] .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--nesma-secondary) !important;
  border-color: rgba(128, 209, 233, 0.3) !important;
}

[data-theme="dark"] .settings-tab { color: #9CA3AF !important; }
[data-theme="dark"] .settings-tab.active {
  color: var(--nesma-secondary) !important;
  border-bottom-color: var(--nesma-secondary) !important;
}

/* Dark theme transition */
body,
.card,
.nesma-card,
.kpi-mini,
.filter-section,
.filter-select,
select,
input,
.data-table td,
.tab-btn,
.badge,
.summary-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================
   SHARED MODAL STYLES
   ========================================== */
.nesma-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal-backdrop, 1040);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 20px;
}

.nesma-modal-overlay.show {
  display: flex;
}

.nesma-modal-container {
  background: white;
  border-radius: 16px;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.3s ease;
}

[data-theme="dark"] .nesma-modal-container {
  background: #0F1D2F;
  border: 1px solid rgba(255,255,255,0.08);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nesma-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--gradient-header, linear-gradient(135deg, #2E3192, #0E2841));
  color: white;
  border-radius: 16px 16px 0 0;
}

.nesma-modal-header .close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.nesma-modal-header .close-btn:hover {
  background: rgba(255,255,255,0.3);
}

.nesma-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--nesma-gray-200, #E8E8E8);
}

[data-theme="dark"] .nesma-modal-toolbar {
  border-bottom-color: rgba(255,255,255,0.06);
}

.nesma-modal-search {
  padding: 8px 14px;
  border: 1px solid var(--nesma-gray-200, #E8E8E8);
  border-radius: 8px;
  font-size: 0.85rem;
  width: 260px;
  background: white;
}

[data-theme="dark"] .nesma-modal-search {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #E5E7EB;
}

.nesma-modal-search:focus {
  outline: none;
  border-color: var(--nesma-primary, #2E3192);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.1);
}

.nesma-modal-body {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}

.nesma-modal-pagination {
  padding: 12px 24px;
  border-top: 1px solid var(--nesma-gray-200, #E8E8E8);
}

[data-theme="dark"] .nesma-modal-pagination {
  border-top-color: rgba(255,255,255,0.06);
}

.nesma-modal-export-btns {
  display: flex;
  gap: 4px;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-excel {
  background: #059669;
  color: white;
}
.btn-excel:hover { background: #047857; }

.btn-csv {
  background: #2563EB;
  color: white;
}
.btn-csv:hover { background: #1D4ED8; }

.btn-pdf {
  background: #DC2626;
  color: white;
}
.btn-pdf:hover { background: #B91C1C; }

.pagination-btn {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--nesma-gray-200, #E8E8E8);
  border-radius: 6px;
  background: white;
  color: var(--nesma-gray-600, #4B5563);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--nesma-primary, #2E3192);
  color: var(--nesma-primary, #2E3192);
}

.pagination-btn.active {
  background: var(--nesma-primary, #2E3192);
  color: white;
  border-color: var(--nesma-primary, #2E3192);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

[data-theme="dark"] .pagination-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #D1D5DB;
}

[data-theme="dark"] .pagination-btn.active {
  background: var(--nesma-primary, #2E3192);
  color: white;
}

/* ==========================================
   PARTICLE ANIMATION (Shared)
   Floating NIT logo particles for portal & NIT theme
   ========================================== */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  display: none;
}

/* Portal always shows particles regardless of theme */
.particles-always {
  display: block !important;
}

.logo-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  contain: layout style;
}

.logo-particle svg {
  display: block;
}

/* ========================================
   SIMPLE DIRECTIONAL ANIMATIONS
   Clean movements: horizontal & vertical
   ======================================== */

/* Move from left to right */
@keyframes logoMoveRight {
  0% {
    transform: translateX(-10vw);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translateX(110vw);
    opacity: 0;
  }
}

/* Move from right to left */
@keyframes logoMoveLeft {
  0% {
    transform: translateX(10vw);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translateX(-110vw);
    opacity: 0;
  }
}

/* Move from top to bottom */
@keyframes logoMoveDown {
  0% {
    transform: translateY(-10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

/* Move from bottom to top */
@keyframes logoMoveUp {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}

/* Diagonal: top-left to bottom-right */
@keyframes logoDiagonalDR {
  0% {
    transform: translate(-10vw, -10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translate(110vw, 110vh);
    opacity: 0;
  }
}

/* Diagonal: top-right to bottom-left */
@keyframes logoDiagonalDL {
  0% {
    transform: translate(10vw, -10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translate(-110vw, 110vh);
    opacity: 0;
  }
}

/* Diagonal: bottom-left to top-right */
@keyframes logoDiagonalUR {
  0% {
    transform: translate(-10vw, 10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translate(110vw, -110vh);
    opacity: 0;
  }
}

/* Diagonal: bottom-right to top-left */
@keyframes logoDiagonalUL {
  0% {
    transform: translate(10vw, 10vh);
    opacity: 0;
  }
  5% {
    opacity: var(--p-opacity);
  }
  95% {
    opacity: var(--p-opacity);
  }
  100% {
    transform: translate(-110vw, -110vh);
    opacity: 0;
  }
}

/* Hide particles class */
.particles-hidden .particles {
  display: none !important;
}

/* ==========================================
   NIT ANIMATED THEME
   Dark background + floating logos + vibrant
   PPTX accent colors (gold, rose, olive, cyan)
   Uses !important to override dashboard inline styles
   ========================================== */

/* Show particles in NIT mode */
[data-theme="nit"] .particles { display: block; }

/* Body: deep gradient background */
[data-theme="nit"] body {
  background: linear-gradient(135deg, #0E2841 0%, #203366 40%, #2E3192 70%, #3B2060 100%) !important;
  color: #E5E7EB !important;
}

/* Main content above particles */
[data-theme="nit"] .relative.z-10,
[data-theme="nit"] main,
[data-theme="nit"] .nesma-header,
[data-theme="nit"] .container { position: relative; z-index: 1; }

/* ---- Cards: glass-morphism ---- */
[data-theme="nit"] .card,
[data-theme="nit"] .nesma-card {
  background: rgba(14, 40, 65, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(222, 193, 140, 0.18) !important;
  color: #E5E7EB !important;
}

/* Animated gradient top border on cards (skip KPI/SLA gradient cards) */
[data-theme="nit"] .card:not(.kpi-card):not(.sla-gradient-card):not(.gradient-card)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pptx-gold), var(--pptx-rose), var(--nesma-secondary), var(--pptx-olive));
  background-size: 300% 100%;
  animation: gradientShift 6s ease infinite;
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-theme="nit"] .card:hover,
[data-theme="nit"] .nesma-card:hover {
  border-color: rgba(222, 193, 140, 0.35) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(222, 193, 140, 0.1);
}

[data-theme="nit"] .nesma-card-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom-color: rgba(222, 193, 140, 0.1) !important;
}

[data-theme="nit"] .nesma-card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top-color: rgba(222, 193, 140, 0.1) !important;
}

/* ---- SLA Cards (dashboard-specific) ---- */
[data-theme="nit"] .sla-card {
  background: rgba(14, 40, 65, 0.65) !important;
  border-color: rgba(222, 193, 140, 0.15) !important;
  color: #E5E7EB !important;
}

[data-theme="nit"] .sla-compliance-section {
  background: rgba(14, 40, 65, 0.5) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
}

[data-theme="nit"] .sla-target,
[data-theme="nit"] .sla-label {
  color: #9CA3AF !important;
}

/* ---- SLA gradient cards ---- */
[data-theme="nit"] .sla-gradient-card {
  background: rgba(14, 40, 65, 0.65) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
}

/* ---- Cycle time & aging ---- */
[data-theme="nit"] .cycle-time-card {
  background: rgba(46, 49, 146, 0.15) !important;
  border-color: rgba(128, 209, 233, 0.15) !important;
}

[data-theme="nit"] .cycle-time-value {
  color: var(--nesma-secondary) !important;
}

[data-theme="nit"] .aging-bucket {
  background: rgba(255,255,255,0.03) !important;
}

[data-theme="nit"] .aging-bucket:hover {
  background: rgba(128, 209, 233, 0.06) !important;
}

/* ---- Filters / Forms ---- */
[data-theme="nit"] .filter-section,
[data-theme="nit"] .nesma-filter-section {
  background: rgba(14, 40, 65, 0.5) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
}

[data-theme="nit"] .filter-select,
[data-theme="nit"] select,
[data-theme="nit"] input[type="text"],
[data-theme="nit"] input[type="search"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(222, 193, 140, 0.18) !important;
  color: #E5E7EB !important;
}

[data-theme="nit"] .filter-select:focus,
[data-theme="nit"] select:focus,
[data-theme="nit"] input:focus {
  border-color: var(--pptx-gold) !important;
  box-shadow: 0 0 0 3px rgba(222, 193, 140, 0.2) !important;
}

/* ---- Tables ---- */
[data-theme="nit"] .data-table td {
  border-bottom-color: rgba(222, 193, 140, 0.08) !important;
  color: #D1D5DB !important;
}

[data-theme="nit"] .data-table tr:hover td {
  background: rgba(128, 209, 233, 0.08) !important;
}

[data-theme="nit"] .data-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

/* ---- Tabs ---- */
[data-theme="nit"] .tab-btn { color: #9CA3AF !important; }

[data-theme="nit"] .tab-btn.active {
  color: var(--pptx-gold) !important;
  border-bottom-color: var(--pptx-gold) !important;
  background: rgba(222, 193, 140, 0.1) !important;
}

[data-theme="nit"] .tab-btn:hover:not(.active) {
  color: #E5E7EB !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ---- Badges ---- */
[data-theme="nit"] .badge-success { background: rgba(5, 150, 105, 0.2) !important; color: #34D399 !important; }
[data-theme="nit"] .badge-warning { background: rgba(222, 193, 140, 0.2) !important; color: var(--pptx-gold) !important; }
[data-theme="nit"] .badge-danger  { background: rgba(173, 128, 130, 0.2) !important; color: #E8A5A7 !important; }
[data-theme="nit"] .badge-info    { background: rgba(128, 209, 233, 0.2) !important; color: var(--nesma-secondary) !important; }

/* ---- Score badges (vendor eval) ---- */
[data-theme="nit"] .score-excellent { background: rgba(5, 150, 105, 0.2) !important; color: #34D399 !important; }
[data-theme="nit"] .score-good { background: rgba(128, 209, 233, 0.2) !important; color: var(--nesma-secondary) !important; }
[data-theme="nit"] .score-fair { background: rgba(222, 193, 140, 0.2) !important; color: var(--pptx-gold) !important; }
[data-theme="nit"] .score-poor { background: rgba(173, 128, 130, 0.2) !important; color: #E8A5A7 !important; }
[data-theme="nit"] .score-critical { background: rgba(220, 38, 38, 0.2) !important; color: #FCA5A5 !important; }

/* ---- Alert cards ---- */
[data-theme="nit"] .alert-card {
  background: rgba(14, 40, 65, 0.5) !important;
}

[data-theme="nit"] .alert-critical { background: rgba(220, 38, 38, 0.12) !important; }
[data-theme="nit"] .alert-warning { background: rgba(217, 119, 6, 0.12) !important; }
[data-theme="nit"] .alert-success { background: rgba(5, 150, 105, 0.12) !important; }

/* ---- KPI mini / summary cards ---- */
[data-theme="nit"] .kpi-mini {
  background: rgba(14, 40, 65, 0.5) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
}

[data-theme="nit"] .kpi-mini .value { color: var(--pptx-gold) !important; }
[data-theme="nit"] .kpi-mini .label { color: #9CA3AF !important; }

[data-theme="nit"] .summary-card {
  background: rgba(14, 40, 65, 0.5) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
}

[data-theme="nit"] .summary-card:hover { border-color: var(--pptx-gold) !important; }
[data-theme="nit"] .summary-card-label { color: #9CA3AF !important; }

/* ---- Section titles & text ---- */
[data-theme="nit"] .section-title { color: var(--pptx-gold) !important; }
[data-theme="nit"] .text-gray-500,
[data-theme="nit"] .text-gray-600,
[data-theme="nit"] .text-gray-700 { color: #9CA3AF !important; }
[data-theme="nit"] .text-gray-800,
[data-theme="nit"] .text-gray-900 { color: #E5E7EB !important; }

/* ---- Scroll containers ---- */
[data-theme="nit"] .scroll-container {
  border-color: rgba(222, 193, 140, 0.08) !important;
}

[data-theme="nit"] .scroll-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}

/* ---- Modals ---- */
[data-theme="nit"] .nesma-modal-container,
[data-theme="nit"] .modal-content {
  background: #0F1D2F !important;
  border: 1px solid rgba(222, 193, 140, 0.18) !important;
  color: #E5E7EB !important;
}

[data-theme="nit"] .nesma-modal-toolbar { border-bottom-color: rgba(222, 193, 140, 0.1) !important; }
[data-theme="nit"] .nesma-modal-pagination { border-top-color: rgba(222, 193, 140, 0.1) !important; }

[data-theme="nit"] .nesma-modal-search {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(222, 193, 140, 0.18) !important;
  color: #E5E7EB !important;
}

[data-theme="nit"] .pagination-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(222, 193, 140, 0.12) !important;
  color: #D1D5DB !important;
}

[data-theme="nit"] .pagination-btn.active {
  background: var(--pptx-gold) !important;
  color: #0E2841 !important;
  border-color: var(--pptx-gold) !important;
}

/* Legacy modal for NIT */
[data-theme="nit"] .modal-overlay .modal-container {
  background: #0F1D2F !important;
  border: 1px solid rgba(222, 193, 140, 0.18) !important;
  color: #E5E7EB !important;
}

/* ---- Settings tabs (procurement) ---- */
[data-theme="nit"] .settings-tab { color: #9CA3AF !important; }
[data-theme="nit"] .settings-tab:hover { color: var(--pptx-gold) !important; }
[data-theme="nit"] .settings-tab.active {
  color: var(--pptx-gold) !important;
  border-bottom-color: var(--pptx-gold) !important;
}

/* ---- Buttons (secondary) ---- */
[data-theme="nit"] .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--pptx-gold) !important;
  border-color: rgba(222, 193, 140, 0.3) !important;
}

[data-theme="nit"] .btn-secondary:hover {
  background: rgba(222, 193, 140, 0.15) !important;
}

/* Legacy modal support (for dashboards still using old pattern) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 20px;
}
.modal-overlay.show { display: flex; }

[data-theme="dark"] .modal-overlay .modal-container,
[data-theme="dark"] .modal-content {
  background: #0F1D2F;
  border: 1px solid rgba(255,255,255,0.08);
  color: #E5E7EB;
}

/* ==========================================
   GLOBAL MOBILE RESPONSIVE STYLES
   ========================================== */

@media (max-width: 768px) {
  /* Header */
  .nesma-header {
    padding: 12px 16px !important;
  }
  .nesma-header img {
    height: 28px !important;
  }
  .nesma-header-title {
    font-size: 0.9rem !important;
  }
  .nesma-header-subtitle {
    font-size: 0.6rem !important;
  }

  /* Cards */
  .nesma-card {
    border-radius: 12px;
  }
  .nesma-card-body {
    padding: 12px !important;
  }
  .nesma-card-header {
    padding: 12px 16px !important;
  }

  /* KPI Cards */
  .nesma-kpi {
    padding: 12px 16px !important;
    border-radius: 12px;
  }
  .nesma-kpi-value {
    font-size: 1.5rem !important;
  }
  .nesma-kpi-label {
    font-size: 0.65rem !important;
  }
  .nesma-kpi-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* SLA Cards */
  .nesma-sla-card {
    padding: 12px !important;
  }
  .nesma-sla-value {
    font-size: 1.5rem !important;
  }
  .nesma-sla-label {
    font-size: 0.75rem !important;
  }

  /* Tabs */
  .nesma-tabs {
    gap: 0;
  }
  .nesma-tab {
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Tables */
  .data-table {
    font-size: 0.7rem !important;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary,
  .btn-export {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Modals */
  .nesma-modal-container {
    width: 95% !important;
    max-width: none !important;
    margin: 10px !important;
  }
  .nesma-modal-header {
    padding: 12px 16px !important;
  }
  .nesma-modal-body {
    padding: 12px !important;
    max-height: 60vh !important;
  }

  /* Filters */
  .filter-section {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .filter-section select,
  .filter-section input {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    min-width: auto !important;
    flex: 1 1 calc(50% - 4px);
  }

  /* Charts */
  .chart-container {
    height: 200px !important;
  }

  /* Scrollable tables */
  .scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid adjustments */
  .grid {
    gap: 12px !important;
  }

  /* Container padding */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main {
    padding: 12px !important;
  }

  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .nesma-header {
    padding: 10px 12px !important;
  }
  .nesma-header img {
    height: 24px !important;
  }

  .nesma-kpi {
    padding: 10px 12px !important;
  }
  .nesma-kpi-value {
    font-size: 1.25rem !important;
  }

  .nesma-tab {
    padding: 8px 10px !important;
    font-size: 0.7rem !important;
  }

  .nesma-modal-container {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .data-table {
    font-size: 0.65rem !important;
  }
  .data-table th,
  .data-table td {
    padding: 6px 8px !important;
  }

  main {
    padding: 8px !important;
  }

  /* Single column on very small screens */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  .nesma-card:hover,
  .nesma-kpi:hover,
  .nesma-sla-card:hover {
    transform: none !important;
  }

  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Mobile: enable particles with optimizations */
@media (max-width: 768px) {
  /* Keep particles visible */
  .particles,
  .particles-always {
    display: block !important;
  }

  /* Disable heavy hover effects only */
  .glass-card::before,
  .nesma-card:hover::before {
    display: none !important;
  }

  /* Simplify hover animations */
  .glass-card:hover,
  .department-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .particles,
  .particles-always,
  .logo-particle {
    display: none !important;
  }

  .logo-glow {
    filter: none !important;
  }

  .sparkle {
    display: none !important;
  }
}

/* GPU acceleration for smooth animations */
.logo-particle {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Optimize particle container */
.particles {
  contain: layout style;
}