/**
 * Sience Custom Styles — Brand Identity "Signal"
 * Primary: Sapin #122A20 | Orangé #F4A340
 */

/* ═══ CSS VARIABLES ═══ */
:root {
  /* Colors */
  --primary-color: #F4A340;
  --primary-light: #f5b563;
  --primary-dark: #d4892e;
  --sience-sapin: #122A20;
  --sience-orange-signal: #F4A340;
  --sience-vert: #3D7A5A;
  --sience-corail: #E8694A;
  --sience-violet: #7B5EA7;
  --sience-petrole: #2A6B7C;
  --sience-dore: #C9A84C;
  
  /* Backgrounds - Light Mode Default */
  --bg-void: #FFFFFF;
  --bg-surface: #F7F8FA;
  --bg-card: #FFFFFF;
  
  /* Glass Effects */
  --glass-bg: rgba(255, 255, 255, 0.80);
  --glass-border: rgba(18, 42, 32, 0.10);
  
  /* Card */
  --card-bg: #FFFFFF;
  --card-border: rgba(18, 42, 32, 0.06);
  --card-hover-bg: rgba(244, 163, 64, 0.06);
  --card-hover-border: rgba(244, 163, 64, 0.35);
  
  /* Overlays */
  --overlay-soft: rgba(18, 42, 32, 0.02);
  
  /* Text */
  --text-heading: #122A20;
  --text-body: #3A5A4A;
  --text-muted: #6B8C7A;
  --text-subtle: #A0BDB0;
  
  /* Borders */
  --border-light: rgba(18, 42, 32, 0.06);
  --border-subtle: #D4E4DC;
  
  /* Effects */
  --grain-opacity: 0.008;
  --glow-color: rgba(244, 163, 64, 0.10);
}

/* Dark Mode */
.dark-mode {
  --bg-void: #0d1a12;
  --bg-surface: #0d1f17;
  --bg-card: #141921;

  --glass-bg: rgba(20, 25, 33, 0.80);
  --glass-border: rgba(255, 255, 255, 0.08);

  --card-bg: #141921;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-hover-bg: rgba(244, 163, 64, 0.06);
  --card-hover-border: rgba(244, 163, 64, 0.35);
  
  --overlay-soft: rgba(255, 255, 255, 0.01);
  
  --text-heading: #F5F0E8;
  --text-body: #BDD4C8;
  --text-muted: #7A9E8E;
  --text-subtle: #4A6E5E;
  
  --border-light: rgba(255, 255, 255, 0.08);
  --border-subtle: #1E3D2F;
  
  --grain-opacity: 0.015;
  --glow-color: rgba(244, 163, 64, 0.08);
}

/* ═══ BASE ═══ */
body {
  background: var(--bg-void);
  color: var(--text-body);
  font-family: 'DM Sans', sans-serif;
  transition: background 0.5s, color 0.5s;
  -webkit-font-smoothing: antialiased;
}

/* Dashboard and Content Body */
body.dashboard,
.dashboard,
.content-body {
  background: var(--bg-void) !important;
  color: var(--text-body);
  transition: background 0.5s, color 0.5s;
}

.container,
.container-fluid {
  background: transparent;
}

/* Override default Bootstrap/Template font */
* {
  font-family: 'DM Sans', sans-serif;
}

/* Preserve icon fonts */
i[class^="bi-"],
i[class*=" bi-"],
.bi {
  font-family: 'bootstrap-icons' !important;
}

/* Grain Texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

::selection {
  background: rgba(244, 163, 64, 0.25);
}

/* ═══ TYPOGRAPHY ═══ */
.font-heading {
  font-family: 'Syne', sans-serif;
}

.font-data {
  font-family: 'Space Mono', monospace;
}

/* Apply Syne font to all headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title h1,
.page-title h2,
.page-title h3,
.card-title,
.modal-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-heading) !important;
}

/* Apply DM Sans to body text elements */
p, span, div, a, button, input, textarea, select, label,
.btn, .form-control, .nav-text, .badge, .alert {
  font-family: 'DM Sans', sans-serif;
}

/* Apply Space Mono to data/code elements */
code, pre, .font-data,
.badge-text,
table td, table th,
.stat-widget-1 h3,
.currency, .amount, .data-value {
  font-family: 'Space Mono', monospace;
}

/* Specific typography sizes and weights */
h1, .h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
}

h2, .h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
}

h3, .h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
}

h4, .h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
}

h5, .h5 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Body text */
body, p {
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 400;
}

/* Small text */
small, .small {
  font-size: 0.813rem;
  line-height: 1.5;
}

/* Lead text */
.lead {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
}

/* ═══ ICON SUPPORT ═══ */
/* Ensure Bootstrap Icons work properly */
i[class^="bi-"],
i[class*=" bi-"],
.bi {
  /* Don't override font-family - let Bootstrap Icons CSS handle it */
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  line-height: 1;
  display: inline-block;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  speak: none;
  vertical-align: middle;
  font-size: 16px;
}

/* ═══ ACCENT COLOR ═══ */
.text-gradient {
  color: var(--primary-color);
}

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pulsePrimary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 163, 64, 0.25);
  }
  50% {
    box-shadow: 0 0 30px 10px rgba(244, 163, 64, 0.06);
  }
}

@keyframes orbitSlow {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

.anim-fiu {
  animation: fadeInUp 0.8s ease-out forwards;
}

.anim-fi {
  animation: fadeIn 0.6s ease-out forwards;
}

.anim-float {
  animation: float 6s ease-in-out infinite;
}

.anim-pulse {
  animation: pulsePrimary 3s ease-in-out infinite;
}

.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.2s; }
.d3 { animation-delay: 0.3s; }
.d4 { animation-delay: 0.4s; }
.d5 { animation-delay: 0.5s; }
.d7 { animation-delay: 0.7s; }

.fill-both {
  animation-fill-mode: both;
}

/* ═══ SCROLL REVEAL ═══ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ BUTTONS ═══ */
.btn-primary-sience {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
}

.btn-primary-sience:hover {
  background: var(--primary-light);
  color: #fff;
}

.btn-secondary-sience {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
}

.btn-secondary-sience:hover {
  border-color: var(--text-muted);
  color: var(--text-heading);
}

/* ═══ GLASS / CARD ═══ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  transition: background 0.5s, border-color 0.3s;
}

.glass-primary {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 163, 64, 0.18);
  transition: background 0.5s, border-color 0.3s;
}

.card-sience {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.card-sience::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244, 163, 64, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
}

.card-sience:hover {
  border-color: var(--card-hover-border);
  transform: translateY(-4px);
}

.card-sience:hover::before {
  opacity: 1;
}

/* ═══ HEADER STYLING ═══ */
.header {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  transition: all 0.3s;
}

.header-content {
  padding: 0px 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent !important;
  width: 100%;
  gap: 1rem;
}

@media (max-width: 768px) {
  .header-content {
    padding: 0px 12px;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* Header-right spacing */
.header-right {
  gap: 3rem;                /* consistent spacing between actions */
  display: flex;
  align-items: center;
}

/* Remove redundant margin classes when gap is used */
.header-right .btn-ghost {
  margin: 0;                /* reset margins when using gap */
}
/* Ensure header icons are visible */
.header .bi {
  color: var(--text-body);
  font-size: 18px;
  transition: color 0.3s;
}

.header a:hover .bi,
.header button:hover .bi {
  color: var(--primary-color);
}

/* ═══ BRAND LOGO / THEME AWARE SWAP ═══ */
.brand-logo { display:inline-block; }
.brand-logo .brand-img { display:inline-block; vertical-align:middle; max-width:48px; height:auto; object-fit:contain; transition:opacity .25s, filter .25s; }
.logo-dark { display:none; }

/* When dark-mode active, show white logo and hide light one */
.dark-mode .logo-dark { display:inline-block !important; }
.dark-mode .logo-light { display:none !important; }

/* Accessibility: ensure image has contrast and is visible */
.brand-logo .brand-img[alt=""] { visibility:visible; }

/* ═══ HEADER - enhanced design from index.html ═══ */
.brand-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-heading);
  line-height: 1;
  display: inline-block;
}

 
 

/* remove previously-added primary "Importer" CTA in header when user prefers compact header */


.btn-ghost { background: transparent; border: 1px solid var(--border-light); color: var(--text-body); }

.notify-bell { position: relative; display: inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; border:1px solid var(--border-light); background:var(--card-bg); color:var(--text-body); }
.notify-bell .bi { font-size: 18px; }
.notify-count { position:absolute; top:6px; right:6px; min-width:18px; height:18px; padding:0 5px; font-size:11px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--sience-red); color:#fff; font-weight:700; }

.profile_log .user.icon-menu { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border-light); background:var(--card-bg); color:var(--text-body); }

@media (max-width: 767px) {
  .header-search { display:none !important; }
  .brand-title { display:none; }
  .btn-ghost.d-none.d-md-inline-flex { display:none !important; }
}

/* ═══ SIDEBAR STYLING ═══ */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-light);
  transition: all 0.3s;
}

/* Sidebar menu links */
.sidebar .menu ul li a {
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s;
 
}

.sidebar .menu ul li:hover a,
.sidebar .menu ul li.active a {
  color: var(--text-heading);
  background: var(--overlay-soft);
}

.sidebar .nav-text {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500;

}

/* Sidebar icons sizing and styling */
.sidebar .menu ul li i,
.sidebar .menu ul li .bi {
  color: var(--text-muted);
  font-size: 20px !important;
  opacity: 0.8;
  margin-right: 15px;
  transition: all 0.3s;
}

/* Icon colors on hover and active */
.sidebar .menu ul li:hover i,
.sidebar .menu ul li:hover .bi,
.sidebar .menu ul li.active i,
.sidebar .menu ul li.active .bi {
  color: var(--primary-color);
  opacity: 1;
}

/* Active state text — exclut .nav-text, qui est le tooltip au survol et non le
   libellé de l'item : le repeindre en --text-heading le rendait blanc sur blanc. */
.sidebar .menu ul li.active span:not(.nav-text) {
  color: var(--text-heading);
}

/* Tooltip de survol : même rendu quel que soit l'état actif de l'item. */
.sidebar .menu ul li:hover a .nav-text,
.sidebar .menu ul li:focus a .nav-text,
.sidebar .menu ul li.active:hover a .nav-text {
  background: #fff;
  color: #041d21;
}

/* Ensure metismenu compatibility (if used elsewhere) */
.sidebar .metismenu > li > a {
  color: var(--text-muted);
  transition: all 0.3s;
}

.sidebar .metismenu > li > a:hover,
.sidebar .metismenu > li.mm-active > a {
  color: var(--primary-color);
  background: var(--overlay-soft);
}

.sidebar .metismenu > li > a:hover .bi,
.sidebar .metismenu > li.mm-active > a .bi {
  color: var(--primary-color);
}

/* ═══ DECORATORS ═══ */
.gold-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), transparent);
}

.gold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 12px rgba(244, 163, 64, 0.35);
}

.section-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary-color), transparent);
  opacity: 0.2;
}

.icon-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: rgba(244, 163, 64, 0.15);
  border: 1px solid rgba(244, 163, 64, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.icon-box-lg {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
}

.card-sience:hover .icon-box {
  background: rgba(244, 163, 64, 0.18);
}

.badge-sience {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(244, 163, 64, 0.25);
  background: rgba(244, 163, 64, 0.06);
}

.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primary-color);
  animation: pulsePrimary 2s infinite;
}

.badge-text {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  font-family: 'Space Mono', monospace;
  font-weight: 400;
}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle-sience {
  position: relative;
  width: 52px;
  height: 26px;
  border-radius: 13px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-sience.light {
  background: linear-gradient(135deg, #F4A340, #f5b563);
}

.theme-toggle-sience.dark {
  background: linear-gradient(135deg, #1E293B, #334155);
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #0F172A;
}

.theme-toggle-sience.light .theme-toggle-knob {
  left: 3px;
  background: #fff;
  color: #0F172A;
}

.theme-toggle-sience.dark .theme-toggle-knob {
  left: 29px;
  background: #0F172A;
  color: #F1F5F9;
}

/* ═══ STAT CARD ═══ */
.stat-card {
  position: relative;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

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

/* ═══ STEP COLORS ═══ */
.step-1 {
  color: var(--sience-red);
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.2);
}

.step-2 {
  color: var(--sience-teal);
  background: rgba(244, 163, 64, 0.15);
  border-color: rgba(244, 163, 64, 0.25);
}

.step-3 {
  color: var(--sience-blue);
  background: rgba(52, 152, 219, 0.1);
  border-color: rgba(52, 152, 219, 0.2);
}

.step-4 {
  color: var(--sience-orange);
  background: rgba(243, 156, 18, 0.1);
  border-color: rgba(243, 156, 18, 0.2);
}

/* ═══ UPLOAD ZONE ═══ */
.upload-zone {
  border: 2px dashed var(--border-subtle);
  transition: all 0.4s;
  background: var(--overlay-soft);
  cursor: pointer;
  border-radius: 0;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--primary-color);
  background: var(--card-hover-bg);
  transform: scale(1.01);
}

/* ═══ INPUT STYLING ═══ */
.form-control,
.form-select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-body) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.5;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--border-subtle) !important;
  background: var(--card-hover-bg) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input:focus {
  background: var(--card-bg) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-heading) !important;
  box-shadow: 0 0 0 3px rgba(244, 163, 64, 0.15) !important;
  outline: none;
}

.form-control::placeholder,
textarea.form-control::placeholder,
input::placeholder {
  color: var(--text-subtle) !important;
  opacity: 0.8;
  font-size: 0.875rem;
}

.form-control:disabled,
.form-select:disabled {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--sience-red) !important;
  background: rgba(231, 76, 60, 0.05) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--primary-color) !important;
  background: rgba(244, 163, 64, 0.05) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(244, 163, 64, 0.15) !important;
}

/* Textarea specific */
textarea.form-control {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Input Groups */
.input-group {
  position: relative;
}

.input-group-text {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0;
  transition: all 0.3s;
}


/* Select styling */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23718096' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

.form-select option {
  background: var(--card-bg);
  color: var(--text-body);
  padding: 0.5rem;
}

/* Form labels */
.form-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-heading) !important;
  margin-bottom: 0.5rem;
  display: block;
  letter-spacing: 0.01em;
}

.form-label.required::after {
  content: ' *';
  color: var(--sience-red);
  font-weight: 700;
}

/* Form text / help text */
.form-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.813rem;
  color: var(--text-muted) !important;
  margin-top: 0.25rem;
  display: block;
}

/* Invalid feedback */
.invalid-feedback {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.813rem;
  color: var(--sience-red) !important;
  margin-top: 0.25rem;
  display: block;
}

/* Valid feedback */
.valid-feedback {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.813rem;
  color: var(--primary-color) !important;
  margin-top: 0.25rem;
  display: block;
}

/* Checkbox and Radio */
.form-check-input {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  transition: all 0.3s;
}

.form-check-input:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(244, 163, 64, 0.15) !important;
  border-color: var(--primary-color) !important;
}

.form-check-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--text-body) !important;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* File input */
input[type="file"] {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--text-body);
}

input[type="file"]::file-selector-button {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover {
  background: var(--primary-light);
}

/* ═══ TABLE STYLING ═══ */
.table {
  color: var(--text-body);
  font-family: 'DM Sans', sans-serif;
}

.table thead th {
  color: var(--text-heading);
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-light);
}

.table tbody td {
  font-family: 'Space Mono', monospace;
  font-size: 0.813rem;
}

.table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.3s;
}

.table tbody tr:hover {
  background: var(--card-hover-bg);
}

/* ═══ MODAL STYLING ═══ */
.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
}

.modal-header,
.modal-footer {
  border-color: var(--border-light);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .btn-primary-sience,
  .btn-secondary-sience {
    padding: 0.75rem 1.5rem;
    font-size: 0.813rem;
  }
}

/* ═══ OVERRIDE BOOTSTRAP PRIMARY ═══ */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

/* ═══ LINK COLORS ═══ */
a {
  color: var(--primary-color);
  transition: color 0.3s;
}

a:hover {
  color: var(--primary-light);
}

/* ═══ PAGE BACKGROUND ═══ */
#main-wrapper {
  background: var(--bg-void);
  transition: background 0.5s;
}

.page-content {
  background: transparent;
}

/* ═══ CARD ENHANCEMENTS ═══ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: all 0.3s;
}

.card:hover {
  border-color: var(--card-hover-border);
}

.card-header,
.card-footer {
  background: transparent !important;
  border-color: var(--border-light);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: var(--text-heading) !important;
  margin: 0;
}

/* ═══ ALERT STYLING ═══ */
.alert {
  border-radius: 0;
  border-width: 1px;
}

.alert-success {
  background: rgba(244, 163, 64, 0.15);
  border-color: rgba(244, 163, 64, 0.25);
  color: var(--primary-color);
}

.alert-info {
  background: rgba(52, 152, 219, 0.1);
  border-color: rgba(52, 152, 219, 0.2);
  color: var(--sience-blue);
}

.alert-warning {
  background: rgba(243, 156, 18, 0.1);
  border-color: rgba(243, 156, 18, 0.2);
  color: var(--sience-orange);
}

.alert-danger {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.2);
  color: var(--sience-red);
}

/* ═══ ICON VISIBILITY FIX ═══ */
/* Ensure all icons are visible and properly styled */
.bi, [class^="bi-"], [class*=" bi-"] {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Ensure icons in buttons and links are visible */
button .bi,
.btn .bi,
a .bi,
span .bi {
  display: inline-block;
  vertical-align: middle;
}

/* Fix icon sizing in various contexts */
.header .bi,
.nav .bi {
  font-size: inherit;
  line-height: inherit;
}

/* Sidebar icons have specific sizing */
.sidebar .bi {
  font-size: 20px !important;
  line-height: 1;
}

/* Ensure icon colors inherit properly */
.text-primary .bi,
.text-success .bi,
.text-danger .bi,
.text-warning .bi,
.text-info .bi {
  color: inherit;
}

/* ═══ STATISTICS & DATA DISPLAYS ═══ */
.stat-widget-1 h3,
.stat-card h3,
.data-number,
.amount,
.price,
.percentage,
.counter {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-widget-1 h6,
.stat-widget-1 p,
.stat-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

/* ═══ NAVIGATION & NAV ITEMS ═══ */
.nav-link,
.navbar-nav .nav-link,
.dropdown-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ═══ MODAL TYPOGRAPHY ═══ */
.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
}

.modal-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}

.modal-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ═══ ALERT TYPOGRAPHY ═══ */
.alert {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ═══ BADGE TYPOGRAPHY ═══ */
.badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ═══ BUTTON OVERRIDES ═══ */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  font-family: 'DM Sans', sans-serif;
}

/* Outline buttons - Light mode */
.btn-outline-danger {
  color: #E74C3C;
  border-color: #E74C3C;
  background: transparent;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #E74C3C;
  border-color: #E74C3C;
}

/* Outline buttons - Dark mode */
.dark-mode .btn-outline-danger {
  color: #FF6B6B;
  border-color: #FF6B6B;
  background: rgba(255, 107, 107, 0.1);
}

.dark-mode .btn-outline-danger:hover {
  color: #fff;
  background-color: #FF6B6B;
  border-color: #FF6B6B;
}

/* ═══ CARD TYPOGRAPHY ═══ */
.card-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text-heading) !important;
}

.card-header .card-title {
  color: var(--text-heading) !important;
}

.card-text,
.card-body p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ═══ PAGE TITLE TYPOGRAPHY ═══ */
.page-title h3,
.page-title h2,
.page-title h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-title p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ═══ HEADER TYPOGRAPHY ═══ */
.header {
  font-family: 'DM Sans', sans-serif;
}

.header .nav-link,
.header .dropdown-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

/* ═══ TABLE ACTION ICONS ═══ */
.tbl-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tbl-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 1rem; text-decoration: none;
  border: none; background: transparent; cursor: pointer;
  color: #6c757d;
  transition: color .18s ease, background .18s ease, transform .15s ease;
}
.tbl-action:hover { transform: translateY(-1px); }
.tbl-action.view:hover  { color: #0dcaf0; background: rgba(13,202,240,.1); }
.tbl-action.edit:hover  { color: #0d6efd; background: rgba(13,110,253,.1); }
.tbl-action.sign:hover  { color: #0d6efd; background: rgba(13,110,253,.1); }
.tbl-action.dl:hover    { color: #198754; background: rgba(25,135,84,.1); }
.tbl-action.del:hover   { color: #dc3545; background: rgba(220,53,69,.1); }
html.dark-mode .tbl-action,
body.dark-mode .tbl-action { color: rgba(255,255,255,0.4); }

/* ═══ FOOTER TYPOGRAPHY ═══ */
.footer,
.footer-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

/* ═══ FOOTER THEMING ═══ */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  border-radius: 0 !important;
  transition: background 0.5s, border-color 0.3s;
  z-index: 100;
}
html.dark-mode .footer {
  background: #0A0E1A !important;
}

.footer .copyright p {
  color: var(--text-body) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

.footer .copyright p b,
.footer .copyright p strong {
  color: var(--text-heading) !important;
  font-weight: 700;
}

.footer .copyright p a,
.footer-link {
  color: var(--primary-color) !important;
  font-weight: 600;
  transition: color 0.3s;
  text-decoration: none;
}

.footer .copyright p a:hover,
.footer-link:hover {
  color: var(--primary-light) !important;
  text-decoration: none;
}

.footer-social li a {
  color: var(--text-muted) !important;
  transition: color 0.3s;
}

.footer-social li a:hover {
  color: var(--primary-color) !important;
}

/* ═══ THEME OVERRIDES ═══ */
/* Override hardcoded backgrounds from style.css */
.stat-widget-1 {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  transition: all 0.3s;
}

.stat-widget-1:hover {
  border-color: var(--card-hover-border) !important;
  background: var(--card-hover-bg) !important;
}

.stat-widget-1 h6,
.stat-widget-1 p {
  color: var(--text-body) !important;
}

.stat-widget-1 h3 {
  color: var(--text-heading) !important;
}

.stat-widget-1 p {
  border-top-color: var(--border-light) !important;
}

/* Ensure all cards use theme variables */
.card,
.card-body,
.widget,
.widget-stat {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-body);
}

/* Table theming */
.table {
  color: var(--text-body);
}

.table thead th {
  color: var(--text-heading);
  background: var(--bg-surface);
  border-color: var(--border-light);
}

.table tbody tr {
  border-color: var(--border-light);
}

.table tbody tr:hover {
  background: var(--card-hover-bg);
}

/* Modal theming */
.modal-content {
  background: var(--card-bg) !important;
  border-color: var(--card-border);
  color: var(--text-body);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.modal-header {
  border-color: var(--border-light);
}

.modal-footer {
  border-color: var(--border-light);
}

.modal-title {
  color: var(--text-heading);
}

/* Form theming */
.form-control,
.form-select {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-body) !important;
}

 
/* Dropdown theming */
.dropdown-menu {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.dropdown-item {
  color: var(--text-body);
}

.dropdown-item:hover {
  background: var(--card-hover-bg);
  color: var(--text-heading);
}

/* Badge theming - only for non-colored badges */
.badge:not([class*='bg-']) {
  background: var(--card-hover-bg);
  border: 1px solid var(--border-light);
  color: var(--text-body);
}

/* Progress bar theming */
.progress {
  background: var(--bg-surface);
}

/* List group theming */
.list-group-item {
  background: var(--card-bg);
  border-color: var(--border-light);
  color: var(--text-body);
}

.list-group-item:hover {
  background: var(--card-hover-bg);
}


/* ═══ TEXT CONTENT THEMING ═══ */
/* Ensure all text content respects theme colors */
.card strong,
.card b {
  color: var(--text-heading);
}

.card p,
.card span,
.card div {
  color: var(--text-body);
}

.card small,
.card .small,
.text-muted {
  color: var(--text-muted) !important;
}

/* Ensure table content uses theme colors */
.table td,
.table th {
  color: var(--text-body) !important;
}

.table thead th {
  color: var(--text-heading) !important;
}

.table strong,
.table b {
  color: var(--text-heading) !important;
}

/* Link colors */
a:not(.btn) {
  color: var(--primary-color);
}

a:not(.btn):hover {
  color: var(--primary-light);
}

.card a:not(.btn) {
  color: var(--primary-color);
}

.card a:not(.btn):hover {
  color: var(--primary-light);
}

/* ═══ PAGINATION — Bootstrap .links() ═══ */
.pagination {
  font-family: 'DM Sans', sans-serif;
  gap: 4px;
  margin: 0;
  /* strip Bootstrap's connected-pill border collapse */
  --bs-pagination-border-radius: 6px;
}

/* Remove Bootstrap's list border so only page-link border shows */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 6px !important;
}

.page-link {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1.4;
  /* prevent Bootstrap margin collapse that causes double borders */
  margin-left: 0 !important;
}

.page-link:hover {
  background: var(--overlay-soft) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.page-link:focus {
  box-shadow: none !important;
  outline: none;
}

.page-item.active .page-link {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 600;
}

.page-item.disabled .page-link {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-subtle) !important;
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ PAGINATION — DataTables ═══ */
/* DataTables Bootstrap 5 renders: <li class="paginate_button page-item"> <a class="page-link">
   Strip all visual styles off the <li> container — let .page-link carry the border/bg */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0.75rem;
  font-family: 'DM Sans', sans-serif;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Target the actual <a class="page-link"> inside each paginate button */
.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
  font-size: 0.8rem !important;
  font-weight: 500;
  min-width: 32px;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link:hover {
  background: var(--overlay-soft) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover .page-link {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-subtle) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--text-muted) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-body);
  font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-body) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-body) !important;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(244, 163, 64, 0.15) !important;
  outline: none;
}

/* ═══ FILE UPLOAD - DARK MODE SUPPORT ═══ */
.upload-area {
  background: var(--card-bg) !important;
  border-color: var(--border-light) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-area::before {
  background: linear-gradient(90deg, transparent, var(--overlay-soft), transparent) !important;
}

.upload-area:hover {
  border-color: var(--primary-color) !important;
  background: var(--card-hover-bg) !important;
  box-shadow: 0 10px 30px var(--glow-color) !important;
}

.upload-area.dragover {
  border-color: var(--primary-color) !important;
  background: var(--overlay-soft) !important;
}

.upload-area.uploading {
  border-color: #28a745 !important;
  background: rgba(40, 167, 69, 0.1) !important;
}

.upload-icon {
  color: var(--primary-color) !important;
  filter: drop-shadow(0 4px 6px var(--glow-color)) !important;
}

.upload-area:hover .upload-icon {
  color: var(--primary-dark) !important;
}

.upload-content h5,
.upload-content p {
  color: var(--text-body) !important;
}

.upload-content p.text-muted {
  color: var(--text-muted) !important;
}

.file-item:hover {
  background-color: var(--card-hover-bg) !important;
}

.upload-progress {
  background: var(--card-bg) !important;
  border-color: var(--primary-color) !important;
}

.dark-mode .upload-progress {
  box-shadow: 0 8px 25px rgba(244, 163, 64, 0.25) !important;
}

/* ═══ PROCESSING OPTIONS - ENHANCED STYLING ═══ */
.processing-option {
  border: 2px solid var(--border-light) !important;
  background: var(--card-bg) !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.processing-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--overlay-soft), transparent);
  transition: left 0.5s;
}

.processing-option:hover::before {
  left: 100%;
}

.processing-option:hover {
  border-color: var(--primary-color) !important;
  background: var(--card-hover-bg) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--glow-color);
}

.processing-option.checked {
  border-color: var(--primary-color) !important;
  background: var(--overlay-soft) !important;
}

.processing-option .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
  border: 2px solid var(--border-light);
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.processing-option .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.processing-option .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 163, 64, 0.18);
}

.processing-option .form-check-label {
  cursor: pointer;
  width: 100%;
  color: var(--text-body) !important;
}

.processing-option .form-check-label strong {
  color: var(--text-heading) !important;
  font-weight: 600;
}

.processing-option .small {
  color: var(--text-muted) !important;
}

/* Badge styles for processing options */
.badge.bg-success-soft {
  background-color: rgba(40, 167, 69, 0.15) !important;
  color: #28a745 !important;
}

.badge.bg-warning-soft {
  background-color: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
}

.dark-mode .badge.bg-warning-soft {
  color: #ffdb4d !important;
}

.badge.bg-primary-soft {
  background-color: rgba(244, 163, 64, 0.18) !important;
  color: var(--primary-color) !important;
}

.badge.bg-info-soft {
  background-color: rgba(23, 162, 184, 0.15) !important;
  color: #17a2b8 !important;
}

/* Remove file button dark mode */
.remove-file:hover {
  background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Table in selected files */
.table {
  color: var(--text-body) !important;
}

.table thead th {
  color: var(--text-heading) !important;
  border-color: var(--border-light) !important;
}

.table tbody td {
  border-color: var(--border-subtle) !important;
}

.dark-mode .table-responsive::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode .table-responsive::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

.dark-mode .table-responsive::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

.dark-mode .table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--text-subtle);
}

/* ═══════════════════════════════════════════════════════
   AUTH PAGES — DARK MODE (login & register)
   Uses html.dark-mode for maximum cascade priority.
   This block is the definitive source of truth for auth
   page dark mode; it lives here so it is guaranteed to
   load inside <head> via sience-custom.css.
   ═══════════════════════════════════════════════════════ */

/* Override Bootstrap's --bs-body-bg so form-control
   elements also get the dark background value */
html.dark-mode {
  --bs-body-bg: #141921;
  --bs-body-color: #cbd5e1;
  --bs-border-color: rgba(255, 255, 255, 0.12);
}

/* Auth page outer wrapper */
html.dark-mode .auth-page {
  background: #0A0E1A !important;
}

/* The glass card container */
html.dark-mode .auth-card {
  background: rgba(14, 20, 27, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Right-side form panel — explicitly hardcoded (not var) */
html.dark-mode .auth-form-side {
  background: #141921 !important;
  color: #e2e8f0 !important;
}

/* All intermediate containers must be transparent */
html.dark-mode .stepper-content,
html.dark-mode .step-panel,
html.dark-mode .auth-form {
  background: transparent !important;
}

/* Form controls */
html.dark-mode .auth-form .form-control,
html.dark-mode .auth-form .form-select,
html.dark-mode .auth-form .input-group-text {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

html.dark-mode .auth-form .form-control::placeholder {
  color: #64748b !important;
}

html.dark-mode .auth-form .form-control:focus,
html.dark-mode .auth-form .form-select:focus {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #F4A340 !important;
  box-shadow: 0 0 0 3px rgba(244, 163, 64, 0.25) !important;
}

/* Dropdowns inside select */
html.dark-mode .auth-form .form-select option {
  background: #1e293b;
  color: #f1f5f9;
}

/* Form labels & text */
html.dark-mode .auth-form .form-label {
  color: #e2e8f0 !important;
}

html.dark-mode .auth-form small.form-text,
html.dark-mode .auth-form .form-text {
  color: #64748b !important;
}

/* Checkboxes */
html.dark-mode .auth-form .form-check-input {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .auth-form .form-check-input:checked {
  background-color: #F4A340 !important;
  border-color: #F4A340 !important;
}

html.dark-mode .auth-form .form-check-label {
  color: #cbd5e1 !important;
}

/* Step navigation buttons */
html.dark-mode .btn-prev {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

html.dark-mode .btn-prev:hover {
  background: rgba(30, 41, 59, 0.95) !important;
}

/* Stepper circles */
html.dark-mode .stepper-circle {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #94a3b8 !important;
}

html.dark-mode .stepper-item.active .stepper-circle {
  background: #F4A340 !important;
  border-color: #F4A340 !important;
  color: #fff !important;
}

html.dark-mode .stepper-item.completed .stepper-circle {
  background: #f5b563 !important;
  border-color: #f5b563 !important;
  color: #fff !important;
}

html.dark-mode .stepper-label {
  color: #64748b !important;
}

html.dark-mode .stepper-item.active .stepper-label {
  color: #F4A340 !important;
}

html.dark-mode .stepper-item.completed .stepper-label {
  color: #cbd5e1 !important;
}

html.dark-mode .stepper-wrapper::before {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Auth form header */
html.dark-mode .auth-form-header h2 {
  color: #e8ebf0 !important;
}

html.dark-mode .auth-form-header p {
  color: #718096 !important;
}

/* Validation error feedback */
html.dark-mode .auth-form .invalid-feedback,
html.dark-mode .auth-form .text-danger {
  color: #fca5a5 !important;
}

html.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border-left-color: #ef4444 !important;
}

/* INSEE success banner */
html.dark-mode #insee-banner > div {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  border-left-color: #22c55e !important;
}

html.dark-mode #insee-banner strong {
  color: #86efac !important;
}

html.dark-mode #insee-company-name {
  color: #e2e8f0 !important;
}

html.dark-mode #insee-company-address,
html.dark-mode #insee-company-extra {
  color: #94a3b8 !important;
}

/* INSEE error banner */
html.dark-mode #insee-error-banner > div {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  border-left-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* Password toggle button */
html.dark-mode .toggle-password {
  color: #64748b !important;
}

html.dark-mode .toggle-password:hover {
  color: #F4A340 !important;
}

/* Auth brand side border divider */
html.dark-mode .auth-brand-side {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ═══ MOBILE RESPONSIVE LAYOUT ═══ */
@media only screen and (max-width: 767px) {

  /* Header: stretch full width above sidebar */
  .header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }

  .header-content {
    padding: 0 12px !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  .header-left {
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
  }

  .header-left .brand-logo img {
    width: 60px !important;
  }

  .header-left .search {
    display: none !important;
  }

  .header-right {
    gap: 0.75rem !important;
    flex-shrink: 0;
  }

  /* Sidebar: bottom tab bar */
  .sidebar {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    border-right: none !important;
    border-top: 1px solid var(--border-light);
    z-index: 999;
  }

  .sidebar .menu {
    margin-top: 0 !important;
    padding: 0 !important;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .sidebar .menu ul {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .sidebar .menu ul li {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    flex: 1;
    height: 100%;
  }

  .sidebar .menu ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    height: 100%;
  }

  .sidebar .menu ul li .bi,
  .sidebar .menu ul li i {
    font-size: 20px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Hide text labels in mobile bottom bar */
  .sidebar .nav-text {
    display: none !important;
  }

  /* Content body: full width, space for top header + bottom nav */
  .content-body,
  .dashboard .content-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 72px !important;
  }

  /* main-wrapper top spacing matches header height */
  #main-wrapper {
    margin-top: 70px !important;
  }

  /* Footer sits above bottom nav */
  .footer {
    margin-bottom: 56px !important;
    position: relative;
    z-index: 1;
  }

  /* Container full width on small screens */
  .content-body .container {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ═══ DARK MODE — SAPIN THEME (matches logo) ═══════════════════
   Override Bootstrap's navy dark vars + all components to sapin
   ══════════════════════════════════════════════════════════════ */

/* Re-map Bootstrap dark CSS variables to sapin palette */
html.dark-mode,
html.dark-mode body {
  --bs-body-bg: #0A0E1A !important;
  --bs-body-bg-rgb: 10, 14, 26 !important;
  --bs-body-color: #BDD4C8 !important;
  --bs-body-color-rgb: 189, 212, 200 !important;
  --bs-secondary-bg: #141921 !important;
  --bs-secondary-bg-rgb: 20, 25, 33 !important;
  --bs-tertiary-bg: #11151d !important;
  --bs-tertiary-bg-rgb: 17, 21, 29 !important;
  --bs-border-color: rgba(244,163,64,0.15) !important;
  --bs-border-color-translucent: rgba(244,163,64,0.10) !important;
  --bs-emphasis-color: #F5F0E8 !important;
  --bs-link-color: #F4A340 !important;
  --bs-link-hover-color: #e8942e !important;
  /* Dropdowns */
  --bs-dropdown-bg: #141921 !important;
  --bs-dropdown-border-color: rgba(244,163,64,0.2) !important;
  --bs-dropdown-color: #BDD4C8 !important;
  --bs-dropdown-link-color: #BDD4C8 !important;
  --bs-dropdown-link-hover-bg: rgba(244,163,64,0.1) !important;
  --bs-dropdown-link-hover-color: #F4A340 !important;
  --bs-dropdown-link-active-bg: #F4A340 !important;
  --bs-dropdown-link-active-color: #0A0E1A !important;
  /* Modals */
  --bs-modal-bg: #141921 !important;
  --bs-modal-header-border-color: rgba(244,163,64,0.2) !important;
  --bs-modal-footer-border-color: rgba(244,163,64,0.2) !important;
  /* Cards */
  --bs-card-bg: #141921 !important;
  --bs-card-border-color: rgba(244,163,64,0.15) !important;
  --bs-card-cap-bg: rgba(20,25,33,0.8) !important;
  /* Tables */
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(244,163,64,0.04) !important;
  --bs-table-hover-bg: rgba(244,163,64,0.07) !important;
  --bs-table-border-color: rgba(244,163,64,0.12) !important;
  --bs-table-color: #BDD4C8 !important;
  /* Forms */
  --bs-input-bg: #11151d !important;
  --bs-form-control-bg: #11151d !important;
  /* Popover/Tooltip */
  --bs-popover-bg: #141921 !important;
  --bs-popover-border-color: rgba(244,163,64,0.2) !important;
  --bs-tooltip-bg: #141921 !important;
  /* List group */
  --bs-list-group-bg: #141921 !important;
  --bs-list-group-border-color: rgba(244,163,64,0.15) !important;
  --bs-list-group-action-hover-bg: rgba(244,163,64,0.08) !important;
  --bs-list-group-action-active-bg: rgba(244,163,64,0.12) !important;
}

/* Body & layout backgrounds — solid navy base on the root, transparent wrappers
   so the single fixed ambient layer (body::after) shows through. */
html.dark-mode {
  background: #0A0E1A;
}
html.dark-mode body,
html.dark-mode .content-body,
html.dark-mode .dashboard,
html.dark-mode #main-wrapper {
  background: transparent !important;
  color: #BDD4C8 !important;
}

/* Ambient depth — navy base + sapin & orange glows (the three brand colors).
   One fixed, non-interactive layer behind all content. Does not affect layout. */
html.dark-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 12% -5%, rgba(244,163,64,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 5%, rgba(18,42,32,0.95) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 115%, rgba(18,42,32,0.7) 0%, transparent 60%),
    #0A0E1A;
}

/* ── Light mode: soft tinted canvas + brand glows (no more flat white) ── */
html:not(.dark-mode) {
  background: #EEF1F7;
}
html:not(.dark-mode) body,
html:not(.dark-mode) .content-body,
html:not(.dark-mode) .dashboard,
html:not(.dark-mode) #main-wrapper {
  background: transparent !important;
}
html:not(.dark-mode) body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 10% -8%, rgba(244,163,64,0.14) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 92% 4%, rgba(61,122,90,0.12) 0%, transparent 52%),
    radial-gradient(ellipse 100% 65% at 55% 118%, rgba(42,107,124,0.09) 0%, transparent 60%),
    #EEF1F7;
}
/* Cards pop against the tinted canvas with a soft brand-tinted elevation */
html:not(.dark-mode) .card,
html:not(.dark-mode) .stat-card {
  box-shadow: 0 1px 2px rgba(18,42,32,0.04), 0 12px 30px rgba(18,42,32,0.07) !important;
}

/* Header / Navbar */
html.dark-mode .header,
html.dark-mode .navbar {
  background: rgba(13,31,23,0.95) !important;
  border-bottom-color: rgba(244,163,64,0.2) !important;
}

/* Sidebar */
html.dark-mode .sidebar,
html.dark-mode .sidebar-inner {
  background: #0d1f17 !important;
  border-right-color: rgba(244,163,64,0.15) !important;
}

/* Cards */
html.dark-mode .card {
  background: #141921 !important;
  color: rgb(226, 232, 240) !important;
  border-color: rgba(244,163,64,0.12) !important;
}
html.dark-mode .card-header,
html.dark-mode .card-footer {
  background: rgba(20,25,33,0.7) !important;
  border-color: rgba(244,163,64,0.12) !important;
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
  background: #141921 !important;
  border-color: rgba(244,163,64,0.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}
html.dark-mode .dropdown-item {
  color: #BDD4C8 !important;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background: rgba(244,163,64,0.1) !important;
  color: #F4A340 !important;
}
html.dark-mode .dropdown-divider {
  border-color: rgba(244,163,64,0.15) !important;
}

/* Modals */
html.dark-mode .modal-content {
  background: #141921 !important;
  border-color: rgba(244,163,64,0.2) !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: rgba(244,163,64,0.15) !important;
}
html.dark-mode .modal-backdrop {
  background: rgba(0,0,0,0.7) !important;
}

/* Form controls */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text {
  background: #11151d !important;
  border-color: rgba(244,163,64,0.2) !important;
  color: #F5F0E8 !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  border-color: rgba(244,163,64,0.5) !important;
  box-shadow: 0 0 0 3px rgba(244,163,64,0.15) !important;
}
html.dark-mode .form-control::placeholder {
  color: #7A9E8E !important;
}

/* Tables */
html.dark-mode .table {
  color: #BDD4C8 !important;
  border-color: rgba(244,163,64,0.1) !important;
}
html.dark-mode .table td,
html.dark-mode .table th {
  border-color: rgba(244,163,64,0.1) !important;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(244,163,64,0.04) !important;
  color: #BDD4C8 !important;
}
html.dark-mode .table-hover > tbody > tr:hover > * {
  background: rgba(244,163,64,0.07) !important;
  color: #F5F0E8 !important;
}
html.dark-mode .table-light,
html.dark-mode .table-light th,
html.dark-mode .table-light td {
  background: rgba(244,163,64,0.06) !important;
  color: #F5F0E8 !important;
  border-color: rgba(244,163,64,0.15) !important;
}

/* List groups */
html.dark-mode .list-group-item {
  background: #141921 !important;
  border-color: rgba(244,163,64,0.12) !important;
  color: #BDD4C8 !important;
}

/* Offcanvas / Nav tabs / Pills */
html.dark-mode .offcanvas {
  background: #141921 !important;
  border-color: rgba(244,163,64,0.2) !important;
}
html.dark-mode .nav-tabs {
  border-bottom-color: rgba(244,163,64,0.2) !important;
}
html.dark-mode .nav-tabs .nav-link {
  color: #7A9E8E !important;
}
html.dark-mode .nav-tabs .nav-link.active,
html.dark-mode .nav-tabs .nav-link:hover {
  background: rgba(244,163,64,0.08) !important;
  border-color: rgba(244,163,64,0.2) rgba(244,163,64,0.2) transparent !important;
  color: #F4A340 !important;
}

/* Table action icon hover (was Bootstrap blue/green) */
html.dark-mode .tbl-action.view:hover  { color: #F4A340 !important; background: rgba(244,163,64,0.1) !important; }
html.dark-mode .tbl-action.edit:hover  { color: #f5b563 !important; background: rgba(245,181,99,0.1) !important; }
html.dark-mode .tbl-action.sign:hover  { color: #f5b563 !important; background: rgba(245,181,99,0.1) !important; }
html.dark-mode .tbl-action.dl:hover    { color: #BDD4C8 !important; background: rgba(189,212,200,0.1) !important; }

/* Alerts in dark mode */
html.dark-mode .alert-info {
  background: rgba(244,163,64,0.08) !important;
  border-color: rgba(244,163,64,0.25) !important;
  color: #f5b563 !important;
}
html.dark-mode .alert-success {
  background: rgba(18,42,32,0.6) !important;
  border-color: rgba(244,163,64,0.2) !important;
  color: #BDD4C8 !important;
}
html.dark-mode .alert-warning {
  background: rgba(244,163,64,0.1) !important;
  border-color: rgba(244,163,64,0.3) !important;
  color: #F4A340 !important;
}

/* Pagination */
html.dark-mode .page-item .page-link {
  background: #141921 !important;
  border-color: rgba(244,163,64,0.2) !important;
  color: #BDD4C8 !important;
}
html.dark-mode .page-item.active .page-link {
  background: #F4A340 !important;
  border-color: #F4A340 !important;
  color: #0A0E1A !important;
}
html.dark-mode .page-item:not(.disabled) .page-link:hover {
  background: rgba(244,163,64,0.12) !important;
  color: #F4A340 !important;
}

/* Headings and text */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .card-title, html.dark-mode .page-title {
  color: #F5F0E8 !important;
}
html.dark-mode .text-muted {
  color: #7A9E8E !important;
}