/* ============================================================
   LABO NEDJMA — GOV CLEAN STYLE v4.0
   Inspired by Algerian Government Official Portals
   ============================================================ */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  /* Primary Palette — Professional Blue Edition (Matched to Logo) */
  --green:        #0056b3; /* Primary Corporate Blue */
  --green-dark:   #003d80;
  --green-light:  #3399ff;
  --green-bg:     rgba(0, 86, 179, 0.12);
  --green-border: rgba(0, 86, 179, 0.3);

  /* Accent Colors — Refined */
  --teal:         #00a8e8;
  --teal-bg:      rgba(0, 168, 232, 0.1);
  --olive:        #64748b; /* Slate for a more corporate feel */
  --olive-bg:     rgba(100, 116, 139, 0.1);
  --red:          #e63946;
  --red-bg:       rgba(230, 57, 70, 0.1);
  --blue:         #007bff;
  --blue-bg:      rgba(0, 123, 255, 0.1);
  --purple:       #6f42c1;

  /* Backgrounds — Minimal Light Theme */
  --bg-main:      #F4F6F9; /* Flat light background */
  --bg-card:      #ffffff; /* Pure White card background */
  --bg-hover:     #f1f5f9; /* Slate Light Hover */

  /* Typography — Professional Neutral */
  --text-dark:    #0f172a;
  --text-main:    #334155;
  --text-muted:   #64748b; /* Slate Muted */
  --text-light:   #94a3b8;

  /* Borders — Minimal */
  --border:       #e2e8f0;
  --border-light: #f1f5f9;
  --border-card:  #e2e8f0;

  /* Sizing */
  --navbar-height:  125px;
  --gov-bar-height: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;

  /* Shadows — Extremely clean enterprise style */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Transitions & Motion Design Tokens v6.0.6 */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 180ms;
  --motion-duration-modal: 220ms;
  --motion-scale-hover: 1.015;
  --motion-scale-press: 0.97;
  --motion-translate-y: translateY(-4px);
  --transition: all var(--motion-duration-normal) var(--motion-ease-out);

  /* Font */
  --font-body:  'Poppins', 'Tajawal', sans-serif;
}

/* ===== DARK MODE ===== */
html.dark-mode {
  --bg-main:      #03070d; /* Ultra Deep Midnight */
  --bg-card:      #0a1018; /* Deep Obsidian Blue */
  --bg-hover:     #121b26;
  --text-dark:    #eef2f7;
  --text-main:    #d1dceb;
  --text-muted:   #7a91ad;
  --text-light:   #4e6580;
  --border:       rgba(51, 153, 255, 0.15); /* Blue Border */
  --border-light: rgba(51, 153, 255, 0.08);
  --border-card:  rgba(255, 255, 255, 0.03);
  --shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-md:    0 8px 30px rgba(0, 0, 0, 0.7);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 0;
  position: relative;
}

/* ===== GLOBAL STATIC EMAIL & TECH WATERMARK BACKGROUND ===== */
.global-email-watermark-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.watermark-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.institutional-banner,
.main-navbar,
.page-content,
.mobile-bottom-nav,
.login-overlay,
.modal-overlay,
.modal {
  position: relative;
  z-index: 1;
}

/* ===== GLOBAL BACKGROUND DECOR ===== */
body::before {
  display: none !important;
}

.app-bg-decor,
.bg-blob,
.dev-banner-glow,
.side-accent-glow,
.ai-robot-glow {
  display: none !important;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4; /* Ultra Intensity */
  animation: blobFloat 20s infinite alternate ease-in-out;
}

.bg-blob-1 {
  width: 500px;
  height: 500px;
  background: var(--green-light);
  top: -100px;
  right: -100px;
}

.bg-blob-2 {
  width: 400px;
  height: 400px;
  background: var(--blue);
  bottom: -50px;
  left: -100px;
  animation-delay: -5s;
}

.bg-blob-3 {
  width: 300px;
  height: 300px;
  background: var(--purple);
  top: 40%;
  left: 20%;
  opacity: 0.3; /* Ultra Intensity */
  animation-delay: -10s;
}

@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 80px) scale(1.1); }
}

html.dark-mode .bg-blob {
  opacity: 0.3; /* Ultra Intensity in Dark Mode */
  filter: blur(120px);
}

html.dark-mode body::before {
  opacity: 0.2;
}

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-main) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  transition: opacity 0.8s ease, transform 0.8s ease;
  overflow: hidden;
}

html.dark-mode .splash-screen {
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-main) 100%);
}

.splash-bg-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.splash-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-screen.fade-out {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

.splash-green-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--green), var(--green-light), var(--green));
  background-size: 200% 100%;
  animation: barSlide 2s linear infinite;
  z-index: 2;
}

@keyframes barSlide {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px;
}

.splash-logo-wrap {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid var(--green-border);
  box-shadow: 0 8px 30px rgba(27, 122, 75, 0.15);
  animation: splashLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.splash-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.splash-title-wrap {
  text-align: center;
  animation: fadeUp 0.7s ease 0.3s both;
}

.splash-main-title {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--text-muted);
}

.splash-main-title span {
  font-weight: 900;
  color: var(--green);
}

.splash-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  letter-spacing: 1px;
  margin-top: 6px;
}

.splash-loader-wrap {
  width: 300px;
  animation: fadeUp 0.6s ease 0.6s both;
}

.splash-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(27, 122, 75, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.splash-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  border-radius: 10px;
  transition: width 0.3s ease;
}

.splash-loader-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-light);
}

.splash-progress-pct {
  font-weight: 700;
  color: var(--green);
}

.splash-footer-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-light);
  animation: fadeUp 0.5s ease 0.9s both;
}

.splash-version-badge {
  background: var(--green-bg);
  border: 1.5px solid var(--green-border);
  color: var(--green);
  padding: 3px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1px;
}

.splash-dot-sep { color: var(--border); }

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

/* ============================================================
   GOV TOP BANNER
   ============================================================ */
/* Gov banner element is removed — kept for backward compat only */
.gov-banner { display: none !important; }
.gov-banner-inner, .gov-text-fr, .gov-flag, .gov-divider { display: none !important; }

/* ============================================================
   INSTITUTIONAL BANNER - desktop top strip
   ============================================================ */
.institutional-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  height: var(--gov-bar-height);
  padding: 10px 32px;
  background-color: #0047cc;
  background-image: linear-gradient(90deg,
    #001f6e 0%,
    #0047cc 30%,
    #1a6be0 50%,
    #be123c 75%,
    #9f1239 100%);
  border-bottom: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 3px 20px rgba(0, 71, 204, 0.5), 0 1px 0 rgba(255,255,255,0.1) inset;
  overflow: visible !important;
  z-index: 10020;
}

.institutional-banner.hide {
  display: flex;
}

/* Shimmer pattern overlay */
.institutional-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,0.06) 18px,
    rgba(255,255,255,0.06) 36px
  );
  pointer-events: none;
}

.institutional-banner > * {
  position: relative;
  z-index: 1;
}

.inst-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* Algerian Logo */
.inst-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 46px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.95);
}

.inst-flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.flag-stripe {
  display: none;
}

.flag-green  { background: #006233; }
.flag-white  { background: #ffffff; }

.flag-crescent {
  font-size: 0.9rem;
  color: #d21034;
  line-height: 1;
}

.inst-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inst-republic {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.4px;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.inst-company {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

.inst-company i { font-size: 0.6rem; }

.inst-banner-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.inst-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.inst-badge i { font-size: 0.62rem; }

.inst-badge-year {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
}

/* Mobile: hide banner — no space on small screens */
@media (max-width: 768px) {
  .institutional-banner {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .inst-banner-right { display: none; }
  .inst-republic { font-size: 0.6rem; }
}

/* GOV BANNER REMOVED — institutional-banner used instead */

/* ============================================================
   MAIN NAVBAR
   ============================================================ */
.main-navbar {
  position: sticky;
  top: 0;
  left: 0; right: 0;
  height: var(--navbar-height);
  background: linear-gradient(135deg,
    #d8e7fa 0%,
    #dff0fc 25%,
    #d2f4e6 55%,
    #e4def8 80%,
    #d6e9fa 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1.5px solid rgba(0, 86, 179, 0.18);
  z-index: 10000;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 50, 120, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

html.dark-mode .main-navbar {
  background: linear-gradient(135deg,
    rgba(15, 30, 60, 0.95) 0%,
    rgba(12, 38, 68, 0.93) 30%,
    rgba(10, 44, 48, 0.93) 65%,
    rgba(28, 22, 58, 0.95) 100%
  ) !important;
  border-bottom-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .main-navbar { background: #fff !important; }
    html.dark-mode .main-navbar { background: #0a1423 !important; }
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 24px;
}

/* Brand */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

.brand-logo-ring {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--green-border);
  box-shadow: 0 2px 10px rgba(27, 122, 75, 0.15);
}

.brand-logo-ring img { width: 100%; height: 100%; object-fit: contain; }

.brand-name {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.brand-name strong {
  font-weight: 900;
  color: var(--green);
}

/* Nav Links - The second tier bar */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  margin: 10px auto 0;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(215, 235, 255, 0.85) 30%,
    rgba(206, 245, 233, 0.85) 65%,
    rgba(230, 224, 255, 0.88) 100%
  );
  border: 1.5px solid rgba(0, 86, 179, 0.22);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 5px 16px;
  order: 3;
  box-shadow: 0 3px 14px rgba(0, 60, 140, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: var(--transition);
}

.navbar-links:hover {
  border-color: rgba(0, 86, 179, 0.35);
  box-shadow: 0 6px 22px rgba(0, 86, 179, 0.12), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

html.dark-mode .navbar-links {
  background: linear-gradient(135deg,
    rgba(30, 41, 59, 0.7) 0%,
    rgba(15, 30, 56, 0.6) 50%,
    rgba(16, 40, 44, 0.6) 100%
  ) !important;
  border-color: rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.nav-link i { font-size: 0.85rem; }

.nav-link:hover {
  background: var(--green-bg);
  color: var(--green);
}

.nav-link.active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 86, 179, 0.4);
}

/* Navbar Actions */
.navbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  order: 2 !important;
  flex-wrap: nowrap !important;
}

.nav-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 2px solid var(--green-border); /* Stronger border */
  border-radius: 12px;
  padding: 8px 18px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm); /* Subtle shadow for card feel */
  min-width: 260px; /* Wider search bar */
}

.nav-search-wrap:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.nav-search-wrap:focus-within {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.15), var(--shadow-md);
}

html.dark-mode .nav-search-wrap:focus-within {
  background: var(--bg-hover);
  box-shadow: 0 0 0 4px rgba(51, 153, 255, 0.1), var(--shadow-md);
}

.nav-search-wrap i { 
  color: var(--green); /* Corporate color for icon */
  font-size: 0.95rem; 
}

.nav-search-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  width: 100%;
}

.nav-search-wrap input::placeholder { color: var(--text-light); opacity: 0.6; font-weight: 400; }
html.dark-mode .nav-search-wrap input::placeholder { color: var(--text-muted); }

.nav-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}

.nav-icon-btn:hover {
  background: var(--green);
  color: white;
  border-color: var(--green);
  transform: translateY(-1px);
}

/* Auth */
.btn-login-gov {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  transition: var(--transition);
  font-family: var(--font-body);
  box-shadow: 0 4px 15px rgba(27, 122, 75, 0.3);
}

.btn-login-gov:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(27, 122, 75, 0.4);
}

@media (max-width: 768px) {
  .btn-login-gov span { display: none; }
  .btn-login-gov { padding: 10px; }
}

.topbar-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1.5px solid rgba(10, 30, 140, 0.16) !important;
  border-radius: 14px !important;
  padding: 4px 10px 4px 4px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}

html.dark-mode .topbar-user {
  background: rgba(30, 41, 59, 0.90) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

.user-avatar-wrap {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
}

.user-initials {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 1.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(10, 30, 140, 0.28) !important;
}

.user-initials i {
  font-size: 1.05rem !important;
  color: #ffffff !important;
}

.user-online-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 9px !important;
  height: 9px !important;
  background: #10b981 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
}

html.dark-mode .user-online-dot {
  border-color: #1e293b !important;
}

.user-info-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.user-name {
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

html.dark-mode .user-name {
  color: #f8fafc !important;
}

.user-role {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #0A1E8C !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

html.dark-mode .user-role {
  color: #38bdf8 !important;
}

.logout-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
  margin-left: 2px !important;
}

.logout-icon:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.logout-icon {
  color: var(--red);
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
}

.logout-icon:hover { transform: scale(1.2) rotate(10deg); }

.hidden { display: none !important; }

.modal {
  display: none;
  position: fixed;
  z-index: 150000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: var(--transition);
}

/* Mobile nav dropdown */
.navbar-links.mobile-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--navbar-height);
  left: 0; right: 0;
  background: var(--bg-card);
  border-bottom: 2px solid var(--border);
  padding: 12px 16px 20px;
  z-index: 8999;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  gap: 6px;
}

html.dark-mode .navbar-links.mobile-open {
  background: #0e1a11;
  border-bottom-color: rgba(0, 86, 179, 0.2);
}

.navbar-links.mobile-open .nav-link {
  padding: 12px 16px;
  border-radius: 10px;
  width: 100%;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  min-height: calc(100vh - var(--navbar-height));
}

.page-section {
  display: none;
}

.page-section.active {
  display: block;
  animation: subtlePageEnter 0.20s cubic-bezier(0.16, 1, 0.3, 1) both;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

@keyframes subtlePageEnter {
  0% {
    opacity: 0.90;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.content-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-main) 100%);
  border-bottom: 2px solid var(--border);
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 60px 24px 80px;
}

html.dark-mode .hero-section {
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-main) 100%);
}

.hero-bg-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin-left: max(40px, calc(50% - 700px + 24px));
  text-align: left;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--green-bg);
  border: 1.5px solid var(--green-border);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  background: var(--green-light);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.6; }
}

.hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 20px;
  direction: ltr;
  text-align: left;
}

html.dark-mode .hero-title { color: #e2f0e7; }

.hero-title-sub {
  color: var(--green);
  display: block;
  font-size: 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  direction: ltr;
  text-align: left;
  letter-spacing: 2px;
}

.hero-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  text-align: left;
  direction: ltr;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-direction: row;
  justify-content: flex-start;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(27, 122, 75, 0.35);
}

.btn-hero-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(27, 122, 75, 0.4);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green-border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-hero-outline:hover {
  background: var(--green-bg);
  border-color: var(--green);
  transform: translateY(-2px);
}

/* Hero Stats Float */
.hero-stats-float {
  position: absolute;
  right: max(40px, calc(50% - 700px + 24px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}

.hero-stat-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: var(--shadow-sm) !important;
  min-width: 180px;
  animation: floatIn 0.8s ease both;
  transition: all var(--motion-duration-normal) var(--motion-ease-out);
}

.hero-stat-badge:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-md) !important;
}

.hb-emerald, .hb-blue, .hb-crimson, .hb-amber,
html.dark-mode .hb-emerald, html.dark-mode .hb-blue, html.dark-mode .hb-crimson, html.dark-mode .hb-amber {
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}
.hb-emerald:hover, .hb-blue:hover, .hb-crimson:hover, .hb-amber:hover,
html.dark-mode .hb-emerald:hover, html.dark-mode .hb-blue:hover, html.dark-mode .hb-crimson:hover, html.dark-mode .hb-amber:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Hero Badge Color Variants */
.hb-emerald { background: #f0fdf4 !important; }
.hb-emerald .hero-stat-icon { background: #dcfce7; color: #166534; }
.hb-emerald .hero-stat-val { color: #166534; }
.hb-emerald { box-shadow: 4px 4px 0px #166534 !important; }

.hb-blue { background: #eff6ff !important; }
.hb-blue .hero-stat-icon { background: #dbeafe; color: #1e40af; }
.hb-blue .hero-stat-val { color: #1e40af; }
.hb-blue { box-shadow: 4px 4px 0px #1e40af !important; }

.hb-crimson { background: #fef2f2 !important; }
.hb-crimson .hero-stat-icon { background: #fee2e2; color: #991b1b; }
.hb-crimson .hero-stat-val { color: #991b1b; }
.hb-crimson { box-shadow: 4px 4px 0px #991b1b !important; }

.hb-amber { background: #fffbeb !important; }
.hb-amber .hero-stat-icon { background: #fef3c7; color: #92400e; }
.hb-amber .hero-stat-val { color: #92400e; }
.hb-amber { box-shadow: 4px 4px 0px #92400e !important; }

/* Dark Mode Variants - Enhanced Visibility */
html.dark-mode .hb-emerald { background: #064e3b !important; border-color: #34d399 !important; box-shadow: 4px 4px 0px #34d399 !important; }
html.dark-mode .hb-emerald .hero-stat-val { color: #ffffff; text-shadow: 0 0 10px rgba(52, 211, 153, 0.3); }
html.dark-mode .hb-emerald .hero-stat-icon { background: rgba(52, 211, 153, 0.2); color: #34d399; }
html.dark-mode .hb-emerald small { color: rgba(255, 255, 255, 0.8) !important; }

html.dark-mode .hb-blue { background: #1e3a8a !important; border-color: #60a5fa !important; box-shadow: 4px 4px 0px #60a5fa !important; }
html.dark-mode .hb-blue .hero-stat-val { color: #ffffff; text-shadow: 0 0 10px rgba(96, 165, 250, 0.3); }
html.dark-mode .hb-blue .hero-stat-icon { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
html.dark-mode .hb-blue small { color: rgba(255, 255, 255, 0.8) !important; }

html.dark-mode .hb-crimson { background: #7f1d1d !important; border-color: #f87171 !important; box-shadow: 4px 4px 0px #f87171 !important; }
html.dark-mode .hb-crimson .hero-stat-val { color: #ffffff; text-shadow: 0 0 10px rgba(248, 113, 113, 0.3); }
html.dark-mode .hb-crimson .hero-stat-icon { background: rgba(248, 113, 113, 0.2); color: #f87171; }
html.dark-mode .hb-crimson small { color: rgba(255, 255, 255, 0.8) !important; }

html.dark-mode .hb-amber { background: #78350f !important; border-color: #fbbf24 !important; box-shadow: 4px 4px 0px #fbbf24 !important; }
html.dark-mode .hb-amber .hero-stat-val { color: #ffffff; text-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
html.dark-mode .hb-amber .hero-stat-icon { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
html.dark-mode .hb-amber small { color: rgba(255, 255, 255, 0.8) !important; }

@keyframes floatIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-stat-icon {
  width: 46px;
  height: 46px;
  background: var(--green-bg);
  color: var(--green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.hero-stat-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-stat-val {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}


html.dark-mode .hero-stat-val { color: #e2f0e7; }

.hero-stat-badge small {
  display: block;
  font-size: 0.68rem;
  color: var(--text-light);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner {
  --banner-a: #155ee8;
  --banner-b: #0f56b3;
  --banner-c: #0ea5e9;
  --banner-rgb: 21, 94, 232;
  width: calc(100% - 48px) !important;
  max-width: 1352px !important;
  margin: 30px auto 0 !important;
  padding: 36px 36px 36px 42px !important;
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--banner-rgb), 0.45) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(var(--banner-rgb), 0.30) 0%, transparent 65%),
    radial-gradient(rgba(var(--banner-rgb), 0.24) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(var(--banner-rgb), 0.08) 0%, rgba(var(--banner-rgb), 0.02) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(248, 250, 252, 0.32) 100%) !important;
  background-size: 100% 100%, 100% 100%, 24px 24px, 100% 100%, 100% 100% !important;
  border: 1.5px solid rgba(var(--banner-rgb), 0.58) !important;
  box-shadow:
    0 24px 48px -15px rgba(var(--banner-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(var(--banner-rgb), 0.14) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  filter: saturate(1.55) brightness(1.02) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.page-banner:hover {
  box-shadow:
    0 28px 56px -12px rgba(var(--banner-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(var(--banner-rgb), 0.18) !important;
}

.page-banner::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 8px !important;
  background: linear-gradient(to bottom, var(--banner-a), var(--banner-c)) !important;
  border-top-left-radius: 24px !important;
  border-bottom-left-radius: 24px !important;
  display: block !important;
  pointer-events: none !important;
  box-shadow: 3px 0 15px rgba(var(--banner-rgb), 0.5) !important;
}

.page-banner::after {
  display: none !important;
}

.page-banner-content {
  max-width: 1400px;
  margin: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-banner-content::after {
  display: none !important;
}

.page-banner h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #0f172a !important;
  font-size: clamp(1.45rem, 2.3vw, 1.95rem) !important;
  font-weight: 850 !important;
  line-height: 1.15;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
}

.page-banner h2 .accent {
  background: linear-gradient(135deg, var(--banner-a) 20%, var(--banner-c) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  display: inline-block;
}

.page-banner h2 > i {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 1.3rem !important;
  background: linear-gradient(135deg, var(--banner-a), var(--banner-c)) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 8px 24px rgba(var(--banner-rgb), 0.32),
    0 0 0 4px rgba(var(--banner-rgb), 0.08) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.page-banner:hover h2 > i {
  transform: translateY(-3px) scale(1.06) rotate(-3deg) !important;
  box-shadow:
    0 12px 28px rgba(var(--banner-rgb), 0.42),
    0 0 0 6px rgba(var(--banner-rgb), 0.14) !important;
}

.page-banner p {
  max-width: 820px;
  margin: 0 0 0 72px !important;
  color: #475569 !important;
  font-size: 0.96rem !important;
  font-weight: 500 !important;
  line-height: 1.55;
  text-shadow: none !important;
  opacity: 0.9;
}

/* Dark mode compatibility */
html.dark-mode .page-banner {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--banner-rgb), 0.55) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(var(--banner-rgb), 0.36) 0%, transparent 65%),
    radial-gradient(rgba(var(--banner-rgb), 0.45) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(var(--banner-rgb), 0.20) 0%, rgba(var(--banner-rgb), 0.04) 100%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.50) 0%, rgba(10, 18, 30, 0.55) 100%) !important;
  background-size: 100% 100%, 100% 100%, 24px 24px, 100% 100%, 100% 100% !important;
  border-color: rgba(var(--banner-rgb), 0.72) !important;
  box-shadow:
    0 20px 50px -15px rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(var(--banner-rgb), 0.42) !important;
}

html.dark-mode .page-banner::before {
  box-shadow: 3px 0 18px rgba(var(--banner-rgb), 0.7) !important;
}

html.dark-mode .page-banner h2 {
  color: #f8fafc !important;
}

html.dark-mode .page-banner h2 .accent {
  background: linear-gradient(135deg, var(--banner-c) 20%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark-mode .page-banner h2 > i {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 8px 24px rgba(var(--banner-rgb), 0.45),
    0 0 0 4px rgba(var(--banner-rgb), 0.18) !important;
}

html.dark-mode .page-banner:hover h2 > i {
  box-shadow:
    0 12px 28px rgba(var(--banner-rgb), 0.55),
    0 0 0 6px rgba(var(--banner-rgb), 0.25) !important;
}

html.dark-mode .page-banner p {
  color: #94a3b8 !important;
}

/* Répertoire — Electric Blue */
#pageDirectory .page-banner {
  --banner-a: #2563eb;
  --banner-b: #1d4ed8;
  --banner-c: #3b82f6;
  --banner-rgb: 37, 99, 235;
  --banner-accent: #38bdf8;
}

/* Unités — Teal Emerald */
#pageStats .page-banner {
  --banner-a: #0d9488;
  --banner-b: #0f766e;
  --banner-c: #14b8a6;
  --banner-rgb: 13, 148, 136;
  --banner-accent: #34d399;
}

/* Ressources — Vivid Indigo-Purple */
#pageTools .page-banner {
  --banner-a: #7c3aed;
  --banner-b: #6d28d9;
  --banner-c: #8b5cf6;
  --banner-rgb: 124, 58, 237;
  --banner-accent: #c084fc;
}

/* Données — Deep Blue-Green */
#pageDatabase .page-banner {
  --banner-a: #0284c7;
  --banner-b: #0369a1;
  --banner-c: #0ea5e9;
  --banner-rgb: 2, 132, 199;
  --banner-accent: #38bdf8;
}

/* Signature — Hot Purple-Pink */
#pageSignature .page-banner {
  --banner-a: #c026d3;
  --banner-b: #a21caf;
  --banner-c: #d946ef;
  --banner-rgb: 192, 38, 211;
  --banner-accent: #f472b6;
}

/* Contact/Support — Cyan-Teal */
#pageContact .page-banner {
  --banner-a: #0891b2;
  --banner-b: #0e7490;
  --banner-c: #06b6d4;
  --banner-rgb: 8, 145, 178;
  --banner-accent: #22d3ee;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columns in one row */
  gap: 12px; /* Smaller gap */
  margin-bottom: 30px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px; /* More compact padding */
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--green-light);
}

.stat-card-icon {
  width: 40px; /* Smaller icons */
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.green-bg  { background: var(--green-bg);  color: var(--green);    }
.teal-bg   { background: var(--teal-bg);   color: var(--teal);     }
.red-bg    { background: var(--red-bg);    color: var(--red);      }
.olive-bg  { background: var(--olive-bg);  color: var(--olive);    }

.stat-card-info { flex: 1; }

.stat-card-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.stat-card-value {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1;
}

html.dark-mode .stat-card-value { color: #e2f0e7; }

/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-light);
  text-transform: uppercase;
}

.section-label-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   MODULE GRID
   ============================================================ */
.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--green);
  opacity: 0;
  transition: var(--transition);
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 0px var(--green);
  border-color: var(--green);
}

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

.module-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.green-icon { background: var(--green-bg); color: var(--green); }
.teal-icon  { background: var(--teal-bg);  color: var(--teal);  }
.olive-icon { background: var(--olive-bg); color: var(--olive); }
.dark-icon  { background: rgba(15, 23, 42, 0.08); color: #334155; }

html.dark-mode .dark-icon { background: rgba(255,255,255,0.06); color: #94a3b8; }

.module-body { flex: 1; }

.module-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--green);
  background: var(--green-bg);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.module-body h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

html.dark-mode .module-body h3 { color: #e2f0e7; }

.module-body p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.module-arrow {
  align-self: flex-end;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--transition);
}

.module-card:hover .module-arrow {
  background: var(--green);
  color: white;
  transform: translateX(4px);
}

/* ============================================================
   DIRECTORY LAYOUT
   ============================================================ */
.directory-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

.dir-sidebar { display: flex; flex-direction: column; gap: 20px; }

.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

html.dark-mode .panel-card {
  background: rgba(10, 20, 30, 0.6) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-color: rgba(51, 153, 255, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.panel-card h4 {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .panel-card h4 { color: #e2f0e7; }

.panel-card h4 i { color: var(--green); }

.filter-list { display: flex; flex-direction: column; gap: 8px; }

.filter-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
  font-family: var(--font-body);
}

.filter-btn:hover {
  background: var(--green-bg);
  border-color: var(--green-border);
}

.filter-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.filter-icon.all     { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.filter-icon.active  { background: var(--green-bg);  color: var(--green);  }
.filter-icon.blocked { background: var(--red-bg);    color: var(--red);    }

.filter-text span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
}

html.dark-mode .filter-text span { color: #c8ddd0; }

.filter-text small {
  font-size: 0.72rem;
  color: var(--text-light);
}

.quick-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.quick-stat-row:last-of-type { border-bottom: none; }
.quick-stat-row strong { font-size: 1rem; font-weight: 800; color: var(--text-dark); }

html.dark-mode .quick-stat-row strong { color: #e2f0e7; }

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

.progress-track {
  height: 6px;
  background: var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  border-radius: 10px;
  transition: width 0.8s ease;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 6px;
}

.recent-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.recent-item:last-child { border-bottom: none; }

.recent-item h4 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.recent-item p {
  font-size: 0.7rem;
  color: var(--text-light);
}

/* ============================================================
   SEARCH HIGHLIGHT — Yellow mark for matched terms
   ============================================================ */
mark.search-highlight {
  background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
  color: #713f12;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.25), 0 1px 2px rgba(202, 138, 4, 0.15);
  animation: highlightPulse 0.55s ease-out;
  -webkit-animation: highlightPulse 0.55s ease-out;
}

@keyframes highlightPulse {
  0%   { background: linear-gradient(120deg, #fde047 0%, #facc15 100%); transform: scale(1.08); }
  60%  { background: linear-gradient(120deg, #fef08a 0%, #fde047 100%); transform: scale(1.02); }
  100% { background: linear-gradient(120deg, #fef08a 0%, #fde047 100%); transform: scale(1); }
}

html.dark-mode mark.search-highlight {
  background: linear-gradient(120deg, rgba(250, 204, 21, 0.35) 0%, rgba(250, 204, 21, 0.55) 100%);
  color: #fef9c3;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4), 0 1px 4px rgba(250, 204, 21, 0.25);
}

/* ============================================================
   TABLE
   ============================================================ */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

html.dark-mode .table-card {
  background: rgba(10, 20, 30, 0.6) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(51, 153, 255, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.table-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.table-header h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

html.dark-mode .table-header h3 { color: #e2f0e7; }
.table-header h3 i { color: var(--green); }

.btn-copy {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--green-border);
  border-radius: 10px;
  background: transparent;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-copy:hover {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.btn-add {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.tool-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tc-blue .tool-btn    { background: #0056b3; }
.tc-emerald .tool-btn { background: var(--green); }
.tc-amber .tool-btn   { background: #f59e0b; }
.tc-crimson .tool-btn { background: #e63946; }

.tool-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-add:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  background: var(--green-bg);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--green-border);
  white-space: nowrap;
}

html.dark-mode .data-table thead th {
  background: rgba(0, 86, 179, 0.2);
  color: var(--green-light);
  border-bottom-color: rgba(51, 153, 255, 0.3);
}

.data-table tbody tr {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-card);
}

.data-table tbody tr:hover {
  background: var(--bg-hover) !important;
  transform: none;
}

html.dark-mode .data-table tbody tr:hover {
  background: rgba(51, 153, 255, 0.08) !important;
}

.data-table td {
  padding: 13px 16px;
  font-size: 0.84rem;
  color: var(--text-main);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
}

.email-cell-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 15px;
  flex-wrap: nowrap;
}

.email-cell-content span {
  flex-grow: 1;
  word-break: break-all;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
}

.unit-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-active, .status-blocked, .status-pending, .status-deactivated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap; /* Forces text to stay in one line */
}

.status-active {
  background: var(--green-bg);
  color: var(--green);
}

.status-blocked {
  background: var(--red-bg);
  color: var(--red);
}

.status-pending {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.status-deactivated {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.status-dot-inline {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-active .status-dot-inline { background: var(--green); }
.status-blocked .status-dot-inline { background: var(--red); }
.status-pending .status-dot-inline { background: #06b6d4; }
.status-deactivated .status-dot-inline { background: #64748b; }

html.dark-mode .status-active {
  background: rgba(0, 255, 133, 0.1);
  color: #00ff85;
}

html.dark-mode .status-pending {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border-color: rgba(6, 182, 212, 0.3);
}

.action-btns { display: flex; gap: 6px; }

.btn-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition);
}

.btn-edit { color: var(--teal); }
.btn-edit:hover { background: var(--teal); color: white; border-color: var(--teal); }

.btn-delete { color: var(--red); }
.btn-delete:hover { background: var(--red); color: white; border-color: var(--red); }

.single-copy-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--green-border);
  background: var(--green-bg);
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition: var(--transition);
  flex-shrink: 0;
}

.single-copy-btn:hover {
  background: var(--green);
  color: white;
}

/* Pagination */
.pagination-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:not([disabled]):hover {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

html.dark-mode .page-btn:not([disabled]):hover {
  background: var(--green);
  box-shadow: 0 0 20px rgba(0, 86, 179, 0.5);
}

.page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.page-info {
  flex: 1;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ============================================================
   UNIT STATS CARDS
   ============================================================ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.unit-stat-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.unit-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.unit-icon-box {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.copy-unit-mini {
  width: 32px; height: 32px;
  border-radius: 8px;
  width: 32px !important;
  height: 32px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid color-mix(in srgb, var(--unit-color, #0284c7) 32%, #ffffff) !important;
  color: var(--unit-color, #0284c7) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease !important;
}

.copy-unit-mini:hover {
  background: var(--unit-color, #0284c7) !important;
  border-color: var(--unit-color, #0284c7) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--unit-color, #0284c7) 40%, transparent) !important;
}

.unit-stat-card .unit-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.70rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  background: #ffffff !important;
  color: var(--unit-color, #0284c7) !important;
  border: 1.5px solid color-mix(in srgb, var(--unit-color, #0284c7) 35%, #ffffff) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.unit-card-title-row {
  margin-bottom: 12px;
}

.unit-card-title {
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.stat-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-main-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid color-mix(in srgb, var(--unit-color, #0284c7) 28%, #ffffff) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(8px);
}

.stat-metric-group {
  display: flex;
  flex-direction: column;
}

.stat-metric-label {
  font-size: 0.65rem;
  font-weight: 850;
  color: color-mix(in srgb, var(--unit-color, #0284c7) 70%, #0f172a 30%);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-val {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1;
}

.stat-metric-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-pill-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 850;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border: 1.5px solid rgba(16, 185, 129, 0.32);
}

.stat-pill-blocked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 850;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1.5px solid rgba(239, 68, 68, 0.28);
}

.unit-progress-container {
  margin-top: 2px;
}

.unit-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.20);
  margin-bottom: 5px;
}

.unit-progress-bg {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid color-mix(in srgb, var(--unit-color, #0284c7) 30%, #ffffff) !important;
  overflow: hidden !important;
  position: relative;
}

.unit-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--unit-color, #0284c7) 0%, color-mix(in srgb, var(--unit-color, #0284c7) 60%, #10b981 40%) 100%) !important;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--unit-color, #0284c7) 45%, transparent) !important;
}

.view-unit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  margin-top: 14px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.view-unit-btn:hover {
  background: #ffffff !important;
  color: var(--unit-color, #0284c7) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
}

.view-unit-btn:hover i,
.view-unit-btn:hover span {
  color: var(--unit-color, #0284c7) !important;
}

.view-unit-btn i {
  transition: transform 0.25s ease;
}

.view-unit-btn:hover i {
  transform: translateX(4px);
}

/* Dark Mode Support for Unit Cards */
html.dark-mode .unit-stat-card {
  background: linear-gradient(175deg, #1e293b 0%, #1e293b 80%, #0f172a 100%) !important;
  border-color: color-mix(in srgb, var(--unit-color, #0284c7) 30%, #334155) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .unit-card-title {
  color: #f8fafc !important;
}

html.dark-mode .stat-main-metric {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark-mode .stat-val {
  color: #ffffff !important;
}

html.dark-mode .copy-unit-mini {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark-mode .unit-progress-bg {
  background: #334155 !important;
}

html.dark-mode .view-unit-btn {
  background: color-mix(in srgb, var(--unit-color, #0284c7) 15%, #1e293b) !important;
  border-color: color-mix(in srgb, var(--unit-color, #0284c7) 35%, #334155) !important;
}

/* ============================================================
   TOOLS GRID
   ============================================================ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

html.dark-mode .tool-card {
  background: rgba(5, 15, 30, 0.7) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(51, 153, 255, 0.2) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

.tc-blue { background: rgba(0, 86, 179, 0.05) !important; border-left: 5px solid #0056b3 !important; }
.tc-blue:hover { border-color: #0056b3; box-shadow: 0 10px 30px rgba(0, 86, 179, 0.2); transform: translateY(-8px); }
.tc-blue .tool-status { color: #0056b3; }

.tc-emerald { background: rgba(0, 86, 179, 0.05) !important; border-left: 5px solid var(--green) !important; }
.tc-emerald:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(0, 86, 179, 0.2); transform: translateY(-8px); }
.tc-emerald .tool-status { color: var(--green); }

.tc-amber { background: rgba(245, 158, 11, 0.03) !important; border-left: 5px solid #f59e0b !important; }
.tc-amber:hover { border-color: #f59e0b; box-shadow: 6px 6px 0px #f59e0b; transform: translateY(-8px); }
.tc-amber .tool-status { color: #f59e0b; }

.tc-crimson { background: rgba(239, 68, 68, 0.04) !important; border-left: 5px solid #ef4444 !important; }
.tc-crimson:hover { border-color: #ef4444; box-shadow: 6px 6px 0px #ef4444; transform: translateY(-8px); }
.tc-crimson .tool-status { color: #ef4444; }

.tc-rose { background: rgba(244, 63, 94, 0.04) !important; border-left: 5px solid #f43f5e !important; }
.tc-rose:hover { border-color: #f43f5e; box-shadow: 6px 6px 0px #f43f5e; transform: translateY(-8px); }
.tc-rose .tool-status { color: #f43f5e; }

.tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-icon-box {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.tool-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 50px;
  text-transform: uppercase;
}

/* Icon Boxes */
.blue-icon    { background: #dbeafe; color: #1e40af; }
.emerald-icon { background: #dcfce7; color: #166534; }
.amber-icon   { background: #fef3c7; color: #92400e; }
.crimson-icon { background: #fee2e2; color: #991b1b; }

/* Badges */
.blue-badge    { background: #eff6ff; color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.1); }
.emerald-badge { background: #f0fdf4; color: #10b981; border: 1px solid rgba(16, 185, 129, 0.1); }
.amber-badge   { background: #fffbeb; color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.1); }
.crimson-badge { background: #fef2f2; color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.1); }

.tool-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
}

html.dark-mode .tool-card h3 { color: #e2f0e7; }

.tool-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.tool-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 600;
}

.tool-status i { font-size: 0.5rem; animation: pulse 2s ease-in-out infinite; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: none;
  border-radius: 9px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.tool-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

/* ============================================================
   DATABASE PAGE
   ============================================================ */
.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  max-width: 1300px;
  margin: 0 auto;
}

.db-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition);
}

html.dark-mode .db-card {
  background: rgba(5, 15, 30, 0.7) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(51, 153, 255, 0.2) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

.db-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.db-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.db-card-header h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
}

html.dark-mode .db-card-header h3 { color: #e2f0e7; }

.db-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.date-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.update-badge {
  padding: 10px 20px;
  background: var(--green-bg);
  border: 2px solid var(--green-border);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 86, 179, 0.2);
}

.edit-date-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--transition);
}

.edit-date-btn:hover {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.btn-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  color: white;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 8px 20px rgba(0, 86, 179, 0.3);
}

.btn-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 86, 179, 0.5);
  filter: brightness(1.1);
}

.system-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sys-info-item {
  background: var(--bg-hover);
  padding: 12px;
  border-radius: 10px;
  border-left: 3px solid var(--green);
}

.sys-info-item strong {
  display: block;
  color: var(--text-dark);
  font-size: 0.82rem;
  margin-bottom: 4px;
}

html.dark-mode .sys-info-item strong { color: #e2f0e7; }

.sys-info-item span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sys-copy {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-light);
  text-align: center;
  font-weight: 600;
}

.archive-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.82rem;
}

.archive-item:last-child { border-bottom: none; }

.archive-text { color: var(--text-main); }

.archive-date {
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.75rem;
}

/* ============================================================
   CONTACT LAYOUT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

/* .contact-form-card ?  inherits from .panel-card */

.panel-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.panel-header h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .panel-header h3 { color: #e2f0e7; }
.panel-header h3 i { color: var(--green); }

.cyber-form { display: flex; flex-direction: column; gap: 18px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { display: flex; flex-direction: column; gap: 7px; }

.form-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon i {
  position: absolute;
  left: 14px;
  color: var(--text-light);
  font-size: 0.85rem;
  pointer-events: none;
}

.input-with-icon input {
  width: 100%;
  padding: 12px 14px 12px 45px !important;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  font-family: var(--font-body);
  font-size: 0.87rem;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
}

.input-with-icon input:focus {
  border-color: var(--green);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(27, 122, 75, 0.1);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  font-family: var(--font-body);
  font-size: 0.87rem;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(27, 122, 75, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-status {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-status.success {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.form-status.error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.contact-info-column { display: flex; flex-direction: column; gap: 20px; }

.mini-info-card h4 {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

html.dark-mode .mini-info-card h4 { color: #e2f0e7; }
.mini-info-card h4 i { color: var(--green); }

.mini-info-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green);
  color: white;
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(27, 122, 75, 0.4);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 99998;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.toast-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
}

.toast-msg {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 14, 0.55);
  backdrop-filter: blur(8px);
  z-index: 150001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gov-bar-height) + 20px) 20px 20px;
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden;
  transition: visibility 0s 0.25s, opacity 0.25s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all !important;
  visibility: visible;
  transition: opacity 0.25s ease;
}

/* Prevent clicks or visibility leak from children of closed modals (like admin-only buttons) */
body.is-admin .modal-overlay:not(.show) *,
body.is-admin .config-modal-overlay:not(.show) *,
.modal-overlay:not(.show) *,
.config-modal-overlay:not(.show) * {
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal-box {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  padding: 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  border: 1.5px solid var(--border-card);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}

.modal-close:hover { background: var(--red); color: white; border-color: var(--red); }

/* Auth Modal */
.auth-box {
  max-width: 440px !important;
  padding: 44px !important;
}

html.dark-mode .auth-box {
  background: #0e1a11 !important;
  border-color: rgba(0, 86, 179, 0.2) !important;
}

.auth-box-header { text-align: center; margin-bottom: 30px; }

.auth-logo {
  width: 80px; height: 80px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--green-border);
  margin: 0 auto 16px;
  box-shadow: var(--shadow-md);
}

.auth-logo img { width: 100%; height: 100%; object-fit: contain; }

.auth-box-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

html.dark-mode .auth-box-header h2 { color: #e2f0e7; }

.auth-box-header p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-error-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--red-bg);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 600;
}

.btn-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(27, 122, 75, 0.35);
  margin-top: 6px;
}

.btn-auth-submit:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

.auth-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.auth-close-btn:hover { background: var(--red); color: white; border-color: var(--red); }

/* Confirm Box */
.confirm-delete-box {
  text-align: center;
  max-width: 420px !important;
}

.confirm-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 20px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
}

.logout-warn-icon { background: var(--green-bg) !important; color: var(--green) !important; }

.confirm-delete-box h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}

html.dark-mode .confirm-delete-box h3 { color: #e2f0e7; }

.confirm-delete-box p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.confirm-actions {
  display: flex;
  gap: 12px;
}

.confirm-actions .btn-secondary {
  flex: 1;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

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

.confirm-actions .btn-primary {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.confirm-actions .btn-primary:hover { background: var(--green-dark); }

.btn-danger {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-danger:hover { background: #b91c1c; }

/* Admin Modal */
.admin-modal-split {
  max-width: 820px !important;
  width: 95% !important;
  padding: 0 !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
  position: relative;
  background: var(--bg-card);
  border-radius: 24px !important;
}

.admin-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.admin-icon-circle {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}

.admin-modal-header h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

html.dark-mode .admin-modal-header h3 { color: #e2f0e7; }

.admin-modal-header p { font-size: 0.82rem; color: var(--text-muted); }

.admin-form-new { display: flex; flex-direction: column; gap: 14px; }

.modal-close-new {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close-new:hover { background: var(--red); color: white; border-color: var(--red); }

.modal-footer {
  display: flex;
  gap: 12px;
  padding-top: 10px;
}

.btn-secondary {
  flex: 1;
  padding: 11px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary:hover { background: var(--green-dark); }

/* Date Input */
.new-date-input-field {
  width: 100%;
  padding: 14px 14px 14px 60px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  letter-spacing: 1px;
  transition: var(--transition);
}

.new-date-input-field:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(27, 122, 75, 0.1);
}

.info-box-date {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--green-bg);
  border-radius: 10px;
  border: 1px solid var(--green-border);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.info-box-date i { color: var(--green); margin-top: 2px; }

/* Glass Modal */
.glass-modal {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-card) !important;
}

.glass-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 20px;
}

.glass-modal .modal-header h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .glass-modal .modal-header h3 { color: #e2f0e7; }
.glass-modal .modal-header h3 i { color: var(--green); }

.close-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.close-btn:hover { background: var(--red); color: white; border-color: var(--red); }

.unit-add-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.unit-add-form input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  font-family: var(--font-body);
  font-size: 0.87rem;
  color: var(--text-main);
  outline: none;
}

.unit-add-form input[type="text"]:focus {
  border-color: var(--green);
}

.unit-add-form input[type="color"] {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 3px;
  cursor: pointer;
}

.btn-add-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: white;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-add-unit:hover { background: var(--green-dark); }

.units-manage-list { display: flex; flex-direction: column; gap: 10px; }

.unit-manage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-hover);
  border-radius: 10px;
  border: 1px solid var(--border-light);
}

.unit-manage-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.unit-manage-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

html.dark-mode .unit-manage-name { color: #c8ddd0; }

.btn-unit-del {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: var(--red-bg);
  color: var(--red);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition);
}

.btn-unit-del:hover { background: var(--red); color: white; border-color: var(--red); }

/* Profile Modal Links */
.modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.modal-avatar {
  position: relative;
  width: 70px; height: 70px;
}

.modal-avatar img {
  width: 70px; height: 70px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid var(--green-border);
}

.avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  border: 2px solid var(--green);
  opacity: 0.3;
}

.modal-title-group h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
}

html.dark-mode .modal-title-group h2 { color: #e2f0e7; }

.modal-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: var(--green-bg);
  color: var(--green);
  border-radius: 50px;
}

.modal-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.mini-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: var(--transition);
  cursor: pointer;
}

.mini-contact-card:hover {
  border-color: var(--green-border);
  background: var(--green-bg);
  transform: translateY(-2px);
}

.mini-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.wa-icon  { background: rgba(37, 211, 102, 0.1); color: #25d366; }
.fb-icon  { background: rgba(24, 119, 242, 0.1);  color: #1877f2; }
.pro-icon { background: var(--green-bg);              color: var(--green);   }
.per-icon { background: rgba(234, 88, 12, 0.1);   color: #ea580c; }

.mini-text span {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

html.dark-mode .mini-text span { color: #c8ddd0; }

.mini-text small {
  font-size: 0.7rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.modal-footer-info {
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Company Modal */
.company-modal-box { max-width: 680px !important; }

.company-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.company-modal-logo {
  height: 70px;
  object-fit: contain;
  border-radius: 12px;
}

.company-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.company-info-card {
  background: var(--bg-hover);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-header-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 0;
}

.red-accent  { background: var(--red);  }
.blue-accent { background: var(--blue); }

.company-info-card h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

html.dark-mode .company-info-card h3 { color: #e2f0e7; }

.info-list { display: flex; flex-direction: column; gap: 8px; }

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.info-item i { color: var(--green); margin-top: 2px; width: 16px; }

.company-modal-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  color: var(--text-light);
  font-size: 0.8rem;
  font-weight: 600;
  font-style: italic;
}

/* Dev Modal */
.futuristic-dev-box { max-width: 600px !important; padding: 0 !important; overflow: hidden; }

/* .dev-modal-content ?  container only */

.dev-banner-hero {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.dev-banner-glow {
  position: absolute;
  top: -50%; right: -20%;
  width: 200px; height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.dev-avatar-showcase {
  position: relative;
  flex-shrink: 0;
}

.dev-avatar-showcase img {
  width: 80px; height: 80px;
  border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.dev-avatar-border {
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.dev-title-block h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
}

.dev-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  display: block;
  margin-bottom: 10px;
}

.dev-stats { display: flex; gap: 12px; flex-wrap: wrap; }

.dev-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

.dev-stat-item i { color: rgba(255, 255, 255, 0.5); }

.dev-body-section { padding: 26px 30px; display: flex; flex-direction: column; gap: 20px; }

.dev-bio-card {
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border-light);
}

.dev-bio-card h4, .dev-skills-section h4 {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

html.dark-mode .dev-bio-card h4, html.dark-mode .dev-skills-section h4 { color: #e2f0e7; }
.dev-bio-card h4 i, .dev-skills-section h4 i { color: var(--green); }

.dev-bio-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; }

.dev-skills-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.skill-pill {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
}

.dev-contact-footer { display: flex; flex-direction: column; gap: 12px; }

.footer-socials { display: flex; gap: 12px; }

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
}

.fb-link { background: rgba(24, 119, 242, 0.1); color: #1877f2; border: 1px solid rgba(24, 119, 242, 0.2); }
.fb-link:hover { background: #1877f2; color: white; }

.wa-link { background: rgba(37, 211, 102, 0.1); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.2); }
.wa-link:hover { background: #25d366; color: white; }

.footer-msg p { font-size: 0.75rem; color: var(--text-light); text-align: center; }

/* Config Modals */
.config-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 14, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 150002; /* Higher than institutional-banner and main modals */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 20px; /* Space for the top banner */
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
  overflow-y: auto;
}

.config-modal-overlay.show {
  opacity: 1;
  pointer-events: all !important;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.config-modal {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid var(--border-card);
  max-height: 90vh;
  overflow-y: auto;
}

.install-modal { max-width: 700px !important; }

.config-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card) !important;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.config-header-left { display: flex; align-items: center; gap: 14px; }

.config-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.config-modal-header h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 2px;
}

html.dark-mode .config-modal-header h2 { color: #e2f0e7; }

.config-modal-header p { font-size: 0.78rem; color: var(--text-muted); }

.config-close-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}

.config-close-btn:hover { background: var(--red); color: white; border-color: var(--red); }

.config-modal-body { padding: 26px; display: flex; flex-direction: column; gap: 24px; }

.config-intro {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-md);
}

.config-intro-icon { color: var(--green); font-size: 1.1rem; flex-shrink: 0; }

.config-intro h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

html.dark-mode .config-intro h4 { color: #e2f0e7; }

.config-intro p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

.config-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.config-server-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.imap-card { border-top: 3px solid var(--green); }
.smtp-card { border-top: 3px solid var(--blue); }

.config-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  align-self: flex-start;
}

.imap-badge { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.smtp-badge { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(37, 99, 235, 0.2); }

.config-server-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

html.dark-mode .config-server-card h3 { color: #e2f0e7; }

.config-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

.config-field { display: flex; flex-direction: column; gap: 6px; }

.config-field label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.config-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  background: var(--bg-hover);
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-light);
  font-family: 'Courier New', monospace;
}

html.dark-mode .config-value { color: #e2f0e7; }

.port-highlight { font-size: 1.2rem; }

.imap-port { color: var(--green) !important; }
.smtp-port { color: var(--blue) !important; }

.encryption-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 7px;
}

.ssl-badge     { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.starttls-badge { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(37, 99, 235, 0.2); }

.copy-config-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: var(--transition);
  flex-shrink: 0;
}

.copy-config-btn:hover { background: var(--green); color: white; border-color: var(--green); }

.tutorial-copy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  width: auto !important;
  min-width: 86px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.28) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.tutorial-copy-action-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.tutorial-copy-action-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.tutorial-copy-action-btn.is-copied {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35) !important;
}

.config-steps h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

html.dark-mode .config-steps h4 { color: #e2f0e7; }
.config-steps h4 i { color: var(--green); }

.config-steps-list { display: flex; flex-direction: column; gap: 12px; }

.config-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-number {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.step-content { display: flex; flex-direction: column; gap: 3px; }

.step-content strong {
  font-size: 0.85rem;
  color: var(--text-dark);
}

html.dark-mode .step-content strong { color: #e2f0e7; }

.step-content span {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.step-content code {
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--green);
  border: 1px solid var(--border-light);
}

.config-note {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-md);
}

.config-note-icon { color: #F59E0B; font-size: 1.1rem; flex-shrink: 0; }

.config-note strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-bottom: 4px;
}

html.dark-mode .config-note strong { color: #e2f0e7; }

.config-note p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; }

/* Platform Sections */
.platform-section { display: flex; flex-direction: column; gap: 20px; }

.platform-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
}

.em-header  { background: var(--green-bg);  border: 1px solid var(--green-border); }
.web-header { background: var(--blue-bg);   border: 1px solid rgba(37, 99, 235, 0.15); }

.platform-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.em-icon  { background: var(--green-bg); color: var(--green); }
.web-icon { background: var(--blue-bg);  color: var(--blue);  }

.platform-header h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 2px;
}

html.dark-mode .platform-header h3 { color: #e2f0e7; }

.platform-subtitle { font-size: 0.78rem; color: var(--text-muted); }

.platform-body { display: flex; flex-direction: column; gap: 18px; }

.platform-screenshot-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.platform-screenshot-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.screenshot-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(10, 20, 14, 0.75);
  color: white;
  padding: 8px 14px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

.platform-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.platform-separator::before,
.platform-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.app-download-section { display: flex; flex-direction: column; gap: 12px; }

.app-download-section h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .app-download-section h4 { color: #e2f0e7; }
.app-download-section h4 i { color: var(--green); }

.download-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.store-btn:hover {
  border-color: var(--green);
  background: var(--green-bg);
  transform: translateY(-2px);
}

.store-btn i { font-size: 1.4rem; }
.store-btn small { display: block; font-size: 0.65rem; color: var(--text-light); }
.store-btn strong { display: block; font-size: 0.88rem; font-weight: 800; color: var(--text-dark); }

html.dark-mode .store-btn strong { color: #e2f0e7; }

.android-btn i { color: #3ddc84; }
.ios-btn i { color: #999; }
.em-windows-btn i { color: #0078d4; }
.em-mac-btn i { color: #555; }

.webmail-url-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.url-card-left { display: flex; align-items: center; gap: 12px; }

.url-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--blue-bg);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.url-card-left label { font-size: 0.7rem; color: var(--text-light); font-weight: 600; display: block; margin-bottom: 3px; }

.webmail-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
}

.webmail-link:hover { text-decoration: underline; }

.webmail-open-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--blue);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
}

.webmail-open-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* App Modal */
.app-header-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.app-header-logo img { width: 100%; height: 100%; object-fit: cover; }

.install-header { background: linear-gradient(135deg, rgba(27,122,75,.06), rgba(27,122,75,.02)); }

.app-intro-banner { padding: 20px; background: var(--bg-hover); border-radius: var(--radius-md); border: 1px solid var(--border); }

.app-intro-left { display: flex; align-items: flex-start; gap: 16px; }

.app-logo-showcase {
  width: 64px; height: 64px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.app-logo-showcase img { width: 100%; height: 100%; object-fit: cover; }

.app-intro-info { flex: 1; }

.app-intro-info h3 { font-size: 1rem; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }

html.dark-mode .app-intro-info h3 { color: #e2f0e7; }

.app-version { font-size: 0.72rem; color: var(--green); font-weight: 600; display: block; margin-bottom: 8px; }

.app-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.app-rating i { color: #f59e0b; font-size: 0.8rem; }
.app-rating span { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; margin-left: 4px; }

.app-intro-info p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }

.app-screenshots-section { display: flex; flex-direction: column; gap: 12px; }

.app-screenshots-section h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .app-screenshots-section h4 { color: #e2f0e7; }
.app-screenshots-section h4 i { color: var(--green); }

.app-screenshots-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.app-screenshot {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.app-screenshot img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.app-screenshot span {
  padding: 6px 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  background: var(--bg-hover);
}

/* Support Modal */
.support-hero {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border-radius: var(--radius-lg);
  padding: 24px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}

.support-hero-bg {
  position: absolute;
  top: -30%; right: -10%;
  width: 180px; height: 180px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.support-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.support-avatar {
  position: relative;
  flex-shrink: 0;
}

.support-avatar img {
  width: 64px; height: 64px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.support-online-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  background: #22c55e;
  border: 2px solid white;
  border-radius: 50%;
}

.support-profile-info h3 { font-size: 1rem; font-weight: 800; color: white; margin-bottom: 4px; }

.support-role { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); display: block; margin-bottom: 8px; }

.support-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.status-dot-online {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.support-bio {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.support-contact-section, .support-services { display: flex; flex-direction: column; gap: 12px; }

.support-contact-section h4, .support-services h4, .config-steps h4, .app-download-section h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark-mode .support-contact-section h4,
html.dark-mode .support-services h4 { color: #e2f0e7; }

.support-contact-section h4 i,
.support-services     h4 i { color: var(--green); }

.support-contact-grid { display: flex; flex-direction: column; gap: 10px; }

.support-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  cursor: pointer;
  transition: var(--transition);
}

.support-contact-card:hover {
  border-color: var(--green-border);
  transform: translateX(4px);
}

.contact-card-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.email-icon-bg     { background: var(--green-bg);                    color: var(--green);    }
.whatsapp-icon-bg  { background: rgba(37, 211, 102, 0.1);            color: #25d366;         }
.phone-icon-bg     { background: rgba(59, 130, 246, 0.1);            color: var(--blue);     }

.contact-card-info { flex: 1; }

.contact-label { display: block; font-size: 0.7rem; color: var(--text-light); font-weight: 600; margin-bottom: 3px; }

.contact-card-info strong { font-size: 0.85rem; color: var(--text-dark); font-weight: 700; }

html.dark-mode .contact-card-info strong { color: #e2f0e7; }

.contact-arrow { color: var(--text-light); font-size: 0.8rem; }

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.service-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 14px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.service-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.service-item strong { font-size: 0.82rem; color: var(--text-dark); }

html.dark-mode .service-item strong { color: #e2f0e7; }

.service-item span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

/* Manage Units Btn */
.btn-manage-units {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid rgba(var(--banner-rgb), 0.45) !important;
  border-radius: 10px;
  background: rgba(var(--banner-rgb), 0.12) !important;
  color: var(--banner-a) !important;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-manage-units:hover {
  background: rgba(var(--banner-rgb), 0.20) !important;
}

html.dark-mode .btn-manage-units {
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

html.dark-mode .btn-manage-units:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 2px solid var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.mob-nav-icon {
  width: 40px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--text-light);
  transition: var(--transition);
}

.mob-nav-label, .mob-nav-search-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.3px;
}

.mob-nav-item.active .mob-nav-icon {
  background: var(--green-bg);
  color: var(--green);
}

.mob-nav-item.active .mob-nav-label { color: var(--green); }

.mob-nav-center-ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(27, 122, 75, 0.4);
  margin-bottom: 2px;
}

.mob-nav-search-label { color: var(--green); font-weight: 700; }

/* Admin only */
.admin-only { display: none; }
body.is-admin .admin-only { display: initial; }
body.is-admin .data-table td.admin-only { display: table-cell; }
body.is-admin .data-table th.admin-only { display: table-cell; }
body.is-admin .module-card.admin-only { display: flex; }

/* ============================================================
   PERFORMANCE LITE & GPU-SAVER: LOW-END PC ENGINE ACCELERATION
   Ensures ultra-smooth 60fps on weak CPUs, low RAM & integrated GPUs
   ============================================================ */

/* 1. Eliminate heavy backdrop-filter (primary GPU readback bottleneck) */
html.performance-lite *,
html.performance-lite *::before,
html.performance-lite *::after,
html.gpu-saver *,
html.gpu-saver *::before,
html.gpu-saver *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Crisp, high-contrast solid & alpha fallbacks for overlays and modals */
html.performance-lite .modal-overlay,
html.performance-lite .config-modal-overlay,
html.performance-lite .confirm-modal-overlay,
html.performance-lite .archive-modal-overlay,
html.performance-lite .import-modal-overlay,
html.performance-lite .tutorials-modal,
html.performance-lite .password-protection-overlay,
html.performance-lite .modal-backdrop,
html.gpu-saver .modal-overlay,
html.gpu-saver .config-modal-overlay,
html.gpu-saver .confirm-modal-overlay,
html.gpu-saver .archive-modal-overlay,
html.gpu-saver .import-modal-overlay,
html.gpu-saver .tutorials-modal,
html.gpu-saver .password-protection-overlay,
html.gpu-saver .modal-backdrop {
  background: rgba(15, 23, 42, 0.85) !important;
}

html.performance-lite .modal-box,
html.performance-lite .modal-content,
html.performance-lite .employee-details-modal,
html.performance-lite .tutorials-modal-content,
html.performance-lite .notes-modal-content,
html.gpu-saver .modal-box,
html.gpu-saver .modal-content,
html.gpu-saver .employee-details-modal,
html.gpu-saver .tutorials-modal-content,
html.gpu-saver .notes-modal-content {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
}

html.performance-lite .main-navbar,
html.performance-lite .header-container,
html.performance-lite .floating-quick-dock,
html.gpu-saver .main-navbar,
html.gpu-saver .header-container,
html.gpu-saver .floating-quick-dock {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

/* 3. Streamline heavy multi-layer box shadows to lightweight single-layer */
html.performance-lite .stat-card,
html.performance-lite .module-card,
html.performance-lite .panel-card,
html.performance-lite .table-card,
html.performance-lite .feature-card,
html.performance-lite .unit-stat-card,
html.performance-lite .db-card,
html.performance-lite .content-section,
html.performance-lite .hero-section,
html.performance-lite .email-card,
html.performance-lite .formation-step-card,
html.performance-lite .tuto-interactive-btn,
html.performance-lite .btn-action,
html.performance-lite .app-card,
html.performance-lite .quick-stat-item,
html.gpu-saver .stat-card,
html.gpu-saver .module-card,
html.gpu-saver .panel-card,
html.gpu-saver .table-card,
html.gpu-saver .feature-card,
html.gpu-saver .unit-stat-card,
html.gpu-saver .db-card,
html.gpu-saver .content-section,
html.gpu-saver .hero-section,
html.gpu-saver .email-card,
html.gpu-saver .formation-step-card,
html.gpu-saver .tuto-interactive-btn,
html.gpu-saver .btn-action,
html.gpu-saver .app-card,
html.gpu-saver .quick-stat-item {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}

html.performance-lite .panel-card:hover,
html.performance-lite .email-card:hover,
html.gpu-saver .panel-card:hover,
html.gpu-saver .email-card:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

/* 4. Disable infinite background and decorative animations */
html.performance-lite .hero-bg-art,
html.gpu-saver .hero-bg-art {
  display: none !important;
}

html.performance-lite .hero-stat-badge,
html.performance-lite .floating-shape,
html.performance-lite .ambient-glow,
html.performance-lite .bg-decor-circle,
html.performance-lite .pulse-badge,
html.performance-lite .pulse-dot,
html.performance-lite .pointage-pulse,
html.performance-lite .banner-pulse,
html.performance-lite .tool-status i,
html.performance-lite .notif-badge,
html.performance-lite .status-dot,
html.performance-lite .db-sync-dot::after,
html.performance-lite .pointage-hero-icon,
html.performance-lite .pointage-empty-orb,
html.performance-lite .pointage-live-badge i,
html.performance-lite .status-bullet,
html.performance-lite .pointage-status-badge,
html.performance-lite [class*="pulse"],
html.performance-lite [class*="shimmer"],
html.performance-lite [class*="floating"],
html.performance-lite [style*="floatOrb"],
html.gpu-saver .hero-stat-badge,
html.gpu-saver .floating-shape,
html.gpu-saver .ambient-glow,
html.gpu-saver .bg-decor-circle,
html.gpu-saver .pulse-badge,
html.gpu-saver .pulse-dot,
html.gpu-saver .pointage-pulse,
html.gpu-saver .banner-pulse,
html.gpu-saver .tool-status i,
html.gpu-saver .notif-badge,
html.gpu-saver .status-dot,
html.gpu-saver .db-sync-dot::after,
html.gpu-saver .pointage-hero-icon,
html.gpu-saver .pointage-empty-orb,
html.gpu-saver .pointage-live-badge i,
html.gpu-saver .status-bullet,
html.gpu-saver .pointage-status-badge,
html.gpu-saver [class*="pulse"],
html.gpu-saver [class*="shimmer"],
html.gpu-saver [class*="floating"],
html.gpu-saver [style*="floatOrb"] {
  animation: none !important;
}

/* 5. Disable heavy SVG/layer filters that thrash GPU on scroll */
html.performance-lite .global-email-watermark-bg,
html.performance-lite img,
html.performance-lite svg,
html.gpu-saver .global-email-watermark-bg,
html.gpu-saver img,
html.gpu-saver svg {
  filter: none !important;
}

/* 6. Instant, smooth scrolling without CPU interpolation latency */
html.performance-lite,
html.performance-lite body,
html.gpu-saver,
html.gpu-saver body {
  scroll-behavior: auto !important;
}

/* 7. DOM Containment for repeating cards to prevent document-wide reflows */
.stat-card,
.module-card,
.unit-stat-card,
.db-card,
.panel-card,
.formation-step-card,
.note-card-modern,
.email-row,
.employee-row {
  contain: layout style paint;
}

/* 8. Tab Paused: Zero GPU when tab is unfocused */
html.tab-paused *,
html.tab-paused *::before,
html.tab-paused *::after {
  animation-play-state: paused !important;
}

/* 9. GPU Saver Button Styling */
#gpuSaverBtn.active-perf {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

/* 10. Ultra-Speed Responsiveness Engine */
html.gpu-saver,
html.performance-lite {
  text-rendering: optimizeSpeed !important;
}

/* Super fast 0.08s transitions for snappy UI clicks and page switches */
html.gpu-saver *,
html.gpu-saver *::before,
html.gpu-saver *::after,
html.performance-lite *,
html.performance-lite *::before,
html.performance-lite *::after {
  transition-duration: 0.08s !important;
  animation-duration: 0.08s !important;
}

/* Eliminate hover 3D transforms & jitter that force CPU/GPU layer recalculations */
html.gpu-saver .stat-card:hover,
html.gpu-saver .module-card:hover,
html.gpu-saver .unit-stat-card:hover,
html.gpu-saver .tool-card:hover,
html.gpu-saver .db-card:hover,
html.gpu-saver .service-card:hover,
html.gpu-saver .btn-action:hover,
html.performance-lite .stat-card:hover,
html.performance-lite .module-card:hover,
html.performance-lite .unit-stat-card:hover,
html.performance-lite .tool-card:hover,
html.performance-lite .db-card:hover,
html.performance-lite .service-card:hover,
html.performance-lite .btn-action:hover {
  transform: none !important;
}

/* Off-screen rendering optimization for heavy tables & directories */
html.gpu-saver .email-table-container,
html.gpu-saver .directory-grid,
html.gpu-saver .pointage-table-container,
html.performance-lite .email-table-container,
html.performance-lite .directory-grid,
html.performance-lite .pointage-table-container {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1250px) {
  .hero-content { margin-left: 40px; margin-right: 40px; text-align: left; max-width: 550px; }
  .hero-section { justify-content: flex-start; min-height: 400px; }
  .hero-stats-float { right: 40px; }
  
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .directory-layout {
    grid-template-columns: 1fr;
  }
  .dir-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 800px) {
  .navbar-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-search-wrap { display: none; }

  .hero-section {
    flex-direction: column;
    padding: 40px 24px 40px;
    min-height: auto;
  }

  .hero-content {
    margin: 0;
    max-width: 100%;
    text-align: center;
    direction: ltr;
  }

  .hero-title { text-align: center; direction: ltr; font-size: 2.4rem; }
  .hero-title-sub { text-align: center; }
  .hero-desc { text-align: center; direction: ltr; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }

  .hero-stats-float {
    position: relative;
    right: auto; top: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
  }

  .hero-stat-badge { min-width: 140px; flex: 1; }

  .directory-layout { grid-template-columns: 1fr; }
  .dir-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  .contact-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .company-modal-grid { grid-template-columns: 1fr; }

  .module-grid { grid-template-columns: 1fr 1fr; }
  .mobile-bottom-nav { display: flex; }
  body { padding-bottom: 80px; }
}

@media (max-width: 600px) {
  .gov-banner { height: auto; padding: 6px 12px; }
  .gov-banner-inner { flex-direction: column; gap: 2px; justify-content: center; text-align: center; }
  .gov-text-fr { font-size: 0.65rem; text-align: center; line-height: 1.3; }
  .gov-divider { display: none; }
  .main-navbar { top: 46px; }

  .navbar-container { padding: 0 16px; }

  .brand-name { font-size: 0.95rem; }

  .hero-title { font-size: 1.9rem; }
  .hero-title-sub { font-size: 1.6rem; }

  .stats-row { grid-template-columns: 1fr 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .db-grid { grid-template-columns: 1fr; }

  .config-cards-row { grid-template-columns: 1fr; }
  .modal-links-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .app-screenshots-gallery { grid-template-columns: 1fr 1fr; }

  .dir-sidebar { grid-template-columns: 1fr; }

  .content-section { padding: 20px 16px 50px; }
  .page-banner { padding: 24px 16px; }
  .page-banner h2 { font-size: 1.15rem; }
}

/* ============================================================
   DARK MODE ADJUSTMENTS
   ============================================================ */
html.dark-mode .hero-section {
  background-image: none;
}

html.dark-mode .stat-card,
html.dark-mode .module-card,
html.dark-mode .tool-card,
html.dark-mode .db-card,
html.dark-mode .panel-card,
html.dark-mode .table-card {
  background: #111c15;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .filter-btn,
html.dark-mode .nav-search-wrap,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-main);
}

html.dark-mode .data-table thead th {
  background: rgba(27, 122, 75, 0.12);
}

html.dark-mode .data-table tbody tr:hover {
  background: #162119;
}

html.dark-mode .data-table td {
  color: #c8ddd0;
}

html.dark-mode .page-btn {
  background: #111c15;
  border-color: rgba(27, 122, 75, 0.2);
  color: #7fa890;
}

html.dark-mode .unit-stat-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

html.dark-mode .modal-box,
html.dark-mode .config-modal {
  background: #0e1a11;
  border-color: rgba(27, 122, 75, 0.2);
}

html.dark-mode .config-modal-header {
  background: #0e1a11;
}

html.dark-mode .config-step strong,
html.dark-mode .config-intro h4 {
  color: #e2f0e7;
}

html.dark-mode .support-hero {
  background: linear-gradient(135deg, #145c38, #0d3d24);
}

html.dark-mode .store-btn {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.2);
  color: #c8ddd0;
}

html.dark-mode .webmail-url-card {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .platform-screenshot-card {
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .app-intro-banner {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .unit-manage-item {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .mini-contact-card {
  border-color: rgba(27, 122, 75, 0.2);
}

html.dark-mode .company-info-card {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .config-note {
  background: rgba(251, 191, 36, 0.04);
  border-color: rgba(251, 191, 36, 0.1);
}

html.dark-mode .dev-bio-card {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .mobile-bottom-nav {
  background: #0e1a11;
  border-top-color: rgba(27, 122, 75, 0.2);
}

html.dark-mode .recent-item h4 { color: var(--green-light); }

html.dark-mode .config-value {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .config-field label { color: #7fa890; }

html.dark-mode .service-item {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .support-contact-card {
  background: #162119;
  border-color: rgba(27, 122, 75, 0.15);
}

html.dark-mode .sys-info-item {
  background: #162119;
}

/* ============================================================
   ARCHIVE LOG
   ============================================================ */
#archiveLog { margin-top: 8px; }

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
html.performance-lite * {
  animation-duration: 0.3s !important;
  transition-duration: 0.15s !important;
}

/* ============================================================
   COLORED STAT CARDS ?  Professional Gradient Style
   ============================================================ */

.stat-card.stat-green {
  background: linear-gradient(135deg, #1B7A4B 0%, #145c38 100%);
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card.stat-green .stat-card-label { color: rgba(255,255,255,0.85); }
.stat-card.stat-green .stat-card-value { color: #ffffff; }
.stat-card.stat-green .stat-card-icon  { background: rgba(255,255,255,0.18); color: white; border-radius: 14px; }
.stat-card.stat-green:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }

.stat-card.stat-blue {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card.stat-blue .stat-card-label { color: rgba(255,255,255,0.85); }
.stat-card.stat-blue .stat-card-value { color: #ffffff; }
.stat-card.stat-blue .stat-card-icon  { background: rgba(255,255,255,0.18); color: white; border-radius: 14px; }
.stat-card.stat-blue:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }

.stat-card.stat-red {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card.stat-red .stat-card-label { color: rgba(255,255,255,0.85); }
.stat-card.stat-red .stat-card-value { color: #ffffff; }
.stat-card.stat-red .stat-card-icon  { background: rgba(255,255,255,0.18); color: white; border-radius: 14px; }
.stat-card.stat-red:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }

.stat-card.stat-purple {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card.stat-purple .stat-card-label { color: rgba(255,255,255,0.85); }
.stat-card.stat-purple .stat-card-value { color: #ffffff; }
.stat-card.stat-purple .stat-card-icon  { background: rgba(255,255,255,0.18); color: white; border-radius: 14px; }
.stat-card.stat-purple:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }

.stat-card.stat-amber {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important; /* Back to Cyan */
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card.stat-amber .stat-card-label { color: rgba(255,255,255,0.95) !important; }
.stat-card.stat-amber .stat-card-value { color: #ffffff !important; }
.stat-card.stat-amber .stat-card-icon  { background: rgba(255,255,255,0.22) !important; color: white !important; }
.stat-card.stat-amber:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }

html.dark-mode .stat-card.stat-amber {
  background: #0a1a23 !important;
  border-color: #0891b2 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ============================================================
   EXECUTIVE GLASS PRISM MODULE CARDS (ACCÈS RAPIDE)
   ============================================================ */

.module-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch;
}

/* ============================================================
   ACCÈS RAPIDE CARDS - Full Vibrant Gradient Luxury Edition
   ============================================================ */

.module-card {
  --card-accent: #059669;
  --card-accent-rgb: 5, 150, 105;
  --card-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --card-tag-bg: rgba(255, 255, 255, 0.20);
  --card-accent-ink: #ffffff;
  --card-border: rgba(255, 255, 255, 0.30);
  
  position: relative !important;
  min-height: 290px;
  padding: 26px 24px 22px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: 16px !important;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.30s ease, border-color 0.30s ease !important;
}

/* Individual Color Tokens & Full Vibrant Gradient Backgrounds */
.module-card.mc-green {
  --card-accent: #10b981;
  --card-accent-rgb: 16, 185, 129;
  --card-accent-dark: #047857;
  --card-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background:
    radial-gradient(circle at 12% 16%, rgba(110, 231, 183, 0.35), transparent 42%),
    radial-gradient(circle at 88% 84%, rgba(6, 78, 59, 0.45), transparent 48%),
    linear-gradient(140deg, #059669 0%, #047857 48%, #064e3b 100%) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    0 18px 44px -10px rgba(5, 150, 105, 0.48),
    0 6px 18px rgba(6, 78, 59, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

.module-card.mc-blue {
  --card-accent: #38bdf8;
  --card-accent-rgb: 56, 189, 248;
  --card-accent-dark: #0369a1;
  --card-gradient: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  background:
    radial-gradient(circle at 12% 16%, rgba(125, 211, 252, 0.35), transparent 42%),
    radial-gradient(circle at 88% 84%, rgba(30, 58, 138, 0.45), transparent 48%),
    linear-gradient(140deg, #0284c7 0%, #0369a1 48%, #075985 100%) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    0 18px 44px -10px rgba(2, 132, 199, 0.48),
    0 6px 18px rgba(12, 74, 110, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

.module-card.mc-orange {
  --card-accent: #fb923c;
  --card-accent-rgb: 251, 146, 60;
  --card-accent-dark: #c2410c;
  --card-gradient: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  background:
    radial-gradient(circle at 12% 16%, rgba(253, 186, 116, 0.35), transparent 42%),
    radial-gradient(circle at 88% 84%, rgba(154, 52, 18, 0.45), transparent 48%),
    linear-gradient(140deg, #ea580c 0%, #c2410c 48%, #9a3412 100%) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    0 18px 44px -10px rgba(234, 88, 12, 0.48),
    0 6px 18px rgba(154, 52, 18, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

.module-card.mc-purple {
  --card-accent: #c084fc;
  --card-accent-rgb: 192, 132, 252;
  --card-accent-dark: #6d28d9;
  --card-gradient: linear-gradient(135deg, #c084fc 0%, #7c3aed 100%);
  background:
    radial-gradient(circle at 12% 16%, rgba(216, 180, 254, 0.35), transparent 42%),
    radial-gradient(circle at 88% 84%, rgba(76, 29, 149, 0.45), transparent 48%),
    linear-gradient(140deg, #7c3aed 0%, #6d28d9 48%, #4c1d95 100%) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    0 18px 44px -10px rgba(124, 58, 237, 0.48),
    0 6px 18px rgba(76, 29, 149, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

/* Ambient Corner Aura */
.module-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: all 0.35s ease;
}

.module-card > * {
  position: relative;
  z-index: 1;
}

/* Hover States */
.module-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
}

.module-card.mc-green:hover {
  box-shadow:
    0 26px 56px -8px rgba(5, 150, 105, 0.65),
    0 8px 24px rgba(6, 78, 59, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

.module-card.mc-blue:hover {
  box-shadow:
    0 26px 56px -8px rgba(2, 132, 199, 0.65),
    0 8px 24px rgba(12, 74, 110, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

.module-card.mc-orange:hover {
  box-shadow:
    0 26px 56px -8px rgba(234, 88, 12, 0.65),
    0 8px 24px rgba(154, 52, 18, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

.module-card.mc-purple:hover {
  box-shadow:
    0 26px 56px -8px rgba(124, 58, 237, 0.65),
    0 8px 24px rgba(76, 29, 149, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

.module-card:hover::after {
  transform: scale(1.4);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
}

.module-card:active {
  transform: translateY(-2px) scale(0.99) !important;
}

/* Header: Icon & Tag */
.module-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.module-icon-colored {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.30s ease, background 0.30s ease !important;
}

.module-card:hover .module-icon-colored {
  transform: scale(1.10) rotate(-4deg) !important;
  background: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

.module-tag-colored {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Body: Title & Text */
.module-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin-top: 10px !important;
}

.module-card .module-body h3 {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s ease !important;
}

.module-card:hover .module-body h3 {
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

.module-card .module-body p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

/* Discreet Background Watermark Illustration */
.module-illustration {
  position: absolute !important;
  right: 12px !important;
  bottom: 8px !important;
  color: #ffffff !important;
  opacity: 0.12 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transition: transform 0.32s ease, opacity 0.32s ease !important;
}

.module-illustration i:first-child {
  font-size: 4.8rem !important;
}

.module-illustration i:last-child {
  display: none !important;
}

.module-card:hover .module-illustration {
  opacity: 0.22 !important;
  transform: scale(1.08) rotate(3deg) !important;
}

/* Action Button */
.module-arrow-colored {
  align-self: flex-start !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: 6px !important;
}

.module-card:hover .module-arrow-colored {
  background: #ffffff !important;
  color: var(--card-accent-dark, #0f172a) !important;
  border-color: #ffffff !important;
  transform: translateX(4px) scale(1.10) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Dark Mode Support */
html.dark-mode .module-card.mc-green {
  background:
    radial-gradient(circle at 12% 16%, rgba(110, 231, 183, 0.22), transparent 42%),
    linear-gradient(140deg, #064e3b 0%, #065f46 50%, #022c22 100%) !important;
}
html.dark-mode .module-card.mc-blue {
  background:
    radial-gradient(circle at 12% 16%, rgba(125, 211, 252, 0.22), transparent 42%),
    linear-gradient(140deg, #075985 0%, #0369a1 50%, #082f49 100%) !important;
}
html.dark-mode .module-card.mc-orange {
  background:
    radial-gradient(circle at 12% 16%, rgba(253, 186, 116, 0.22), transparent 42%),
    linear-gradient(140deg, #9a3412 0%, #c2410c 50%, #431407 100%) !important;
}
html.dark-mode .module-card.mc-purple {
  background:
    radial-gradient(circle at 12% 16%, rgba(216, 180, 254, 0.22), transparent 42%),
    linear-gradient(140deg, #581c87 0%, #6d28d9 50%, #2e1065 100%) !important;
}

html.dark-mode .module-card .module-body h3 {
  color: #ffffff !important;
}

html.dark-mode .module-card .module-body p {
  color: rgba(255, 255, 255, 0.90) !important;
}

html.dark-mode .module-card .module-tag-colored {
  color: #ffffff !important;
}

/* ============================================================
   INTERNAL CARDS - Premium Colored System
   ============================================================ */
.unit-stat-card,
.tool-card,
.db-card {
  border-radius: 24px !important;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  transition: transform 0.34s cubic-bezier(.2,.8,.2,1), box-shadow 0.34s ease, border-color 0.34s ease !important;
}

.unit-stat-card::before,
.tool-card::before,
.db-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.unit-stat-card > *,
.tool-card > *,
.db-card > * {
  position: relative;
  z-index: 1;
}

.unit-stat-card {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--unit-color) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--unit-color) 68%, #111827 32%) 68%, #111827 145%) !important;
  border: 2px solid color-mix(in srgb, var(--unit-color) 78%, #ffffff 22%) !important;
  border-top: 2px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--unit-color) 78%, #111827 22%),
    0 22px 48px rgba(15, 23, 42, 0.16),
    0 12px 28px color-mix(in srgb, var(--unit-color) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.unit-stat-card::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.55), transparent 44%) top left / 100% 4px no-repeat,
    radial-gradient(circle at 16% 8%, rgba(255,255,255,0.24), transparent 31%),
    radial-gradient(circle at 86% 88%, rgba(255,255,255,0.13), transparent 35%);
}

.unit-stat-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(255,255,255,0.82) !important;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--unit-color) 82%, #111827 18%),
    0 32px 72px rgba(15, 23, 42, 0.22),
    0 18px 38px color-mix(in srgb, var(--unit-color) 42%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

.unit-icon-box,
.copy-unit-mini {
  border-radius: 15px !important;
  box-shadow:
    0 12px 26px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.58) !important;
}


.tool-card {
  --tool-accent: #155ee8;
  --tool-accent-rgb: 21, 94, 232;
  --tool-soft: #dbe8ff;
  position: relative;
  min-height: 280px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.90) 55%, rgba(var(--tool-accent-rgb),0.18) 100%),
    radial-gradient(circle at 13% 10%, rgba(var(--tool-accent-rgb),0.24), transparent 36%),
    linear-gradient(180deg, var(--tool-soft), #ffffff 52%) !important;
  border: 2px solid rgba(var(--tool-accent-rgb),0.72) !important;
  border-left-width: 2px !important;
  box-shadow:
    0 4px 0 var(--tool-accent),
    0 22px 48px rgba(15,23,42,0.12),
    0 10px 26px rgba(var(--tool-accent-rgb),0.22),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  min-height: 295px;
}

.tc-blue { --tool-accent: #155ee8; --tool-accent-rgb: 21, 94, 232; --tool-soft: #dbe8ff; }
.tc-emerald { --tool-accent: #00a86b; --tool-accent-rgb: 0, 168, 107; --tool-soft: #d8f7e8; }
.tc-amber { --tool-accent: #f59e0b; --tool-accent-rgb: 245, 158, 11; --tool-soft: #fff0c7; }
.tc-crimson { --tool-accent: #ef3e4a; --tool-accent-rgb: 239, 62, 74; --tool-soft: #ffe0e3; }
.tc-purple { --tool-accent: #8b35f6; --tool-accent-rgb: 139, 53, 246; --tool-soft: #eadcff; }

.tool-card::before {
  background:
    linear-gradient(90deg, var(--tool-accent), rgba(var(--tool-accent-rgb),0.48) 38%, transparent 76%) top left / 100% 4px no-repeat,
    radial-gradient(circle at 88% 86%, rgba(var(--tool-accent-rgb),0.18), transparent 34%);
}

.tool-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--tool-accent) !important;
  box-shadow:
    0 6px 0 var(--tool-accent),
    0 32px 72px rgba(15,23,42,0.17),
    0 18px 40px rgba(var(--tool-accent-rgb),0.32),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.tool-icon-box {
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(var(--tool-accent-rgb),1), rgba(var(--tool-accent-rgb),0.72)) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 32px rgba(var(--tool-accent-rgb),0.36),
    inset 0 1px 0 rgba(255,255,255,0.38) !important;
}

.tool-badge {
  background: rgba(var(--tool-accent-rgb),0.12) !important;
  border: 1px solid rgba(var(--tool-accent-rgb),0.36) !important;
  color: color-mix(in srgb, var(--tool-accent) 76%, #111827 24%) !important;
}

.tool-card h3 { color: color-mix(in srgb, var(--tool-accent) 72%, #111827 28%) !important; }
.tool-card p { color: #475569 !important; }
.tool-card-footer { border-top-color: rgba(var(--tool-accent-rgb),0.18) !important; }
.tool-status { color: var(--tool-accent) !important; }

.tool-illustration {
  position: absolute;
  right: 16px;
  bottom: 58px;
  width: 118px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.12;
  color: var(--tool-accent);
  filter: saturate(1.1);
  transform: rotate(-8deg);
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: 0;
}

.tool-illustration i:first-child {
  font-size: 4.9rem;
}

.tool-illustration i:last-child {
  position: absolute;
  right: 4px;
  bottom: 2px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(var(--tool-accent-rgb),0.16);
  font-size: 1.35rem;
}

.tool-illustration img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(var(--tool-accent-rgb),0.24);
}

.tool-illustration-logo {
  opacity: 0.18;
  transform: rotate(-6deg);
}

.tool-card:hover .tool-illustration {
  opacity: 0.20;
  transform: translate(-4px, -3px) rotate(-4deg) scale(1.04);
}

.tool-btn {
  background: linear-gradient(135deg, var(--tool-accent), color-mix(in srgb, var(--tool-accent) 72%, #111827 28%)) !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 24px rgba(var(--tool-accent-rgb),0.25) !important;
}

.tool-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(var(--tool-accent-rgb),0.36) !important;
}

.db-card {
  --db-accent: #155ee8;
  --db-accent-rgb: 21, 94, 232;
  --db-soft: #dbe8ff;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.90) 55%, rgba(var(--db-accent-rgb),0.16) 100%),
    radial-gradient(circle at 13% 10%, rgba(var(--db-accent-rgb),0.22), transparent 36%),
    linear-gradient(180deg, var(--db-soft), #ffffff 52%) !important;
  border: 2px solid rgba(var(--db-accent-rgb),0.70) !important;
  box-shadow:
    0 4px 0 var(--db-accent),
    0 22px 48px rgba(15,23,42,0.12),
    0 10px 26px rgba(var(--db-accent-rgb),0.20),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  min-height: 315px;
}

.db-card:nth-child(1) { --db-accent: #155ee8; --db-accent-rgb: 21, 94, 232; --db-soft: #dbe8ff; }
.db-card:nth-child(2) { --db-accent: #ef3e4a; --db-accent-rgb: 239, 62, 74; --db-soft: #ffe0e3; }
.db-card:nth-child(3) { --db-accent: #0056b3; --db-accent-rgb: 0, 86, 179; --db-soft: #d7e9ff; }
.db-card:nth-child(4) { --db-accent: #64748b; --db-accent-rgb: 100, 116, 139; --db-soft: #e8edf3; }

.db-card::before {
  background:
    linear-gradient(90deg, var(--db-accent), rgba(var(--db-accent-rgb),0.48) 38%, transparent 76%) top left / 100% 4px no-repeat,
    radial-gradient(circle at 88% 86%, rgba(var(--db-accent-rgb),0.18), transparent 34%);
}

.db-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--db-accent) !important;
  box-shadow:
    0 6px 0 var(--db-accent),
    0 32px 72px rgba(15,23,42,0.17),
    0 18px 40px rgba(var(--db-accent-rgb),0.28),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.db-icon {
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(var(--db-accent-rgb),1), rgba(var(--db-accent-rgb),0.72)) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 32px rgba(var(--db-accent-rgb),0.32),
    inset 0 1px 0 rgba(255,255,255,0.38) !important;
}

.db-card-header h3 { color: color-mix(in srgb, var(--db-accent) 70%, #111827 30%) !important; }
.db-card p { color: #475569 !important; }

.update-badge {
  background: rgba(var(--db-accent-rgb),0.12) !important;
  border-color: rgba(var(--db-accent-rgb),0.38) !important;
  color: color-mix(in srgb, var(--db-accent) 80%, #111827 20%) !important;
}

.sys-info-item {
  background: rgba(var(--db-accent-rgb),0.08) !important;
  border-left-color: var(--db-accent) !important;
}

#pageDatabase .panel-card {
  --db-accent: #155ee8;
  --db-accent-rgb: 21, 94, 232;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 62%, rgba(var(--db-accent-rgb),0.10) 100%),
    radial-gradient(circle at 10% 0%, rgba(var(--db-accent-rgb),0.16), transparent 34%) !important;
  border: 2px solid rgba(var(--db-accent-rgb),0.54) !important;
  border-radius: 24px !important;
  box-shadow:
    0 4px 0 var(--db-accent),
    0 22px 48px rgba(15,23,42,0.12),
    0 10px 26px rgba(var(--db-accent-rgb),0.16),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}


/* ============================================================
   EM CLIENT CONFIG BOX DARK MODE FIX
   ============================================================ */
.em-config-outer {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: 20px;
}

.em-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

.em-config-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: var(--transition);
}

.em-config-card:hover {
    border-color: var(--green-border) !important;
    box-shadow: var(--shadow-sm);
}

.em-config-card ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-main);
}

.em-config-card li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-light);
}

.em-config-card li:last-child {
    border-bottom: none;
}

.em-config-card strong {
    color: var(--text-muted);
}

.em-config-card code {
    background: var(--green-bg) !important;
    color: var(--green) !important;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
}

html.dark-mode .em-config-card code {
    background: rgba(51, 153, 255, 0.15) !important;
    color: #60a5fa !important;
}

.em-config-card .sec-val {
    color: #ea580c;
    font-weight: 600;
}

html.dark-mode .em-config-card .sec-val {
    color: #fb923c;
}

/* Admin Modal Split — Premium v4.0 */
.admin-modal-split {
  max-width: 820px !important;
  width: 95% !important;
  padding: 0 !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
  position: relative;
  background: var(--bg-card);
  border-radius: 24px !important;
}

.modal-split-container {
  display: flex;
  min-height: 520px;
}

.modal-side-accent {
  width: 320px;
  background: linear-gradient(165deg, #1e1b4b 0%, #312e81 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  flex-shrink: 0;
}

.side-accent-glow {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  filter: blur(40px);
}

.side-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}

.side-icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 25px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.side-content h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.side-content p {
  font-size: 0.9rem;
  opacity: 0.7;
  line-height: 1.5;
}

.modal-form-area {
  flex: 1;
  background: var(--bg-card);
  padding: 45px;
  display: flex;
  flex-direction: column;
}

.modern-admin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modern-admin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.modern-admin-form .form-group label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.modern-admin-form input, 
.modern-admin-form select {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

html.dark-mode .modern-admin-form input,
html.dark-mode .modern-admin-form select {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.modern-admin-form input:focus, 
.modern-admin-form select:focus {
  border-color: #6366f1;
  background: white;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-modern-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.btn-modern-cancel {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

html.dark-mode .btn-modern-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.btn-modern-submit {
  flex: 2;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #4f46e5;
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
  transition: all 0.2s;
}

.btn-modern-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px rgba(79, 70, 229, 0.4);
  background: #4338ca;
}

.modal-close-modern {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

html.dark-mode .modal-close-modern {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-close-modern:hover {
  background: #ef4444;
  color: white;
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .modal-split-container { flex-direction: column; }
  .modal-side-accent { width: 100%; padding: 30px; }
  .modern-admin-form .form-row { grid-template-columns: 1fr; }
}


/* Dropdown Fix for Dark Mode */
html.dark-mode .modern-admin-form option {
  background: #1e293b !important;
  color: white !important;
}


/* Units Management Modal Split */
.unit-side-accent {
  background: linear-gradient(165deg, #064e3b 0%, #065f46 100%) !important;
}

.unit-add-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.unit-add-row input[type="text"] {
 flex: 1;
}

.color-picker-wrapper {
 width: 45px;
 height: 45px;
 border-radius: 12px;
 overflow: hidden;
 border: 1.5px solid #e2e8f0;
 position: relative;
 flex-shrink: 0;
}

.color-picker-wrapper input[type="color"] {
 position: absolute;
 top: -10px;
 left: -10px;
 width: 150%;
 height: 150%;
 cursor: pointer;
 border: none;
}

.modern-units-scroll-list {
 max-height: 380px;
 overflow-y: auto;
 padding-right: 8px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

/* Custom Scrollbar for Units List */
.modern-units-scroll-list::-webkit-scrollbar { width: 6px; }
.modern-units-scroll-list::-webkit-scrollbar-track { background: transparent; }
.modern-units-scroll-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

.modern-unit-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 18px;
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 transition: all 0.2s ease;
}

html.dark-mode .modern-unit-item {
 background: rgba(255, 255, 255, 0.03);
 border-color: rgba(255, 255, 255, 0.08);
}

.modern-unit-item:hover {
 transform: translateX(5px);
 border-color: #6366f1;
 background: white;
}

html.dark-mode .modern-unit-item:hover {
 background: rgba(255, 255, 255, 0.05);
}

.unit-info-flex {
 display: flex;
 align-items: center;
 gap: 14px;
}

.unit-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 box-shadow: 0 0 8px currentColor;
}

.unit-name-text {
 font-weight: 700;
 font-size: 0.95rem;
 color: var(--text-dark);
}

html.dark-mode .unit-name-text { color: white; }

.btn-delete-unit {
 width: 36px;
 height: 36px;
 border-radius: 10px;
 border: none;
 background: #fee2e2;
 color: #ef4444;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
}

.btn-delete-unit:hover {
 background: #ef4444;
 color: white;
 transform: scale(1.1);
}




/* Date Update Modal Split */
.date-side-accent {
  background: linear-gradient(165deg, #1e3a8a 0%, #1e40af 100%) !important;
}

.input-with-icon-modern {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon-modern i {
  position: absolute;
  left: 16px;
  color: #3b82f6;
  font-size: 1.1rem;
}

.input-with-icon-modern input,
.modern-admin-form .input-with-icon-modern input[type="text"] {
  padding-left: 48px !important;
  width: 100%;
}

.modern-info-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #eff6ff;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  margin: 15px 0;
}

html.dark-mode .modern-info-box {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.15);
}

.modern-info-box i {
  color: #3b82f6;
  font-size: 1rem;
  margin-top: 2px;
}

.modern-info-box p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #1e40af;
}

html.dark-mode .modern-info-box p {
  color: #93c5fd;
}


/* Floating Top Bar Animation */
.top-bar {
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.top-bar.hide {
  transform: translateY(-100%);
}
/* ============================================================ */
/* PREMIUM SERVICE SELECTION MODAL V2.0 */
/* ============================================================ */
.service-selection-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    max-width: 800px !important;
    padding: 25px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.service-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.service-card {
    background: white;
    border-radius: 18px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all var(--motion-duration-normal) var(--motion-ease-out);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

/* Base Hover */
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

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

/* Card Icons */
.service-icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 22px;
    transition: all 0.4s;
    position: relative;
}

/* Specific Card Themes */
.card-request { --accent: #3b82f6; }
.card-correction { --accent: #8b5cf6; }
.card-deactivation { --accent: #ef4444; }

.service-card.card-request .service-icon-wrapper { background: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
.service-card.card-correction .service-icon-wrapper { background: #8b5cf6; color: white; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3); }
.service-card.card-deactivation .service-icon-wrapper { background: #ef4444; color: white; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); }

.service-card:hover .service-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: var(--accent);
    color: white;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.service-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -0.4px;
}

.service-card p {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Floating Badge - IMPROVED SPACING */
.service-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0,0,0,0.06);
    color: #64748b;
    z-index: 5;
    pointer-events: none;
    border: 1px solid rgba(0,0,0,0.03);
}

.service-card:hover .service-badge {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .service-selection-content {
        padding: 30px 20px !important;
        margin: 15px !important;
    }
    .service-selection-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .service-card {
        padding: 30px 20px;
    }
}

/* ============================================================ */
/* DARK MODE SUPPORT FOR SERVICE MODAL */
/* ============================================================ */
html.dark-mode .service-selection-content {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

html.dark-mode .service-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 3px 3px 0px #0f172a;
}

html.dark-mode .service-card:hover {
    background: #334155;
    box-shadow: 6px 6px 0px #0f172a;
    border-color: var(--accent);
}

html.dark-mode .service-card h3 {
    color: #f1f5f9;
}

html.dark-mode .service-card p {
    color: #94a3b8;
}

html.dark-mode .service-selection-content h2 {
    color: white;
}

html.dark-mode .service-selection-content p {
    color: rgba(255, 255, 255, 0.6);
}

/* Clickable Stats Cards */
.hero-badge {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hero-badge:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

.hero-badge:active {
  transform: translateY(-2px) scale(0.98);
}

.hero-badge::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.hero-badge:hover::after {
 left: 100%;
}


/* Signature Generator Styles */
.signature-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 25px;
  align-items: start;
}

@media (max-width: 1100px) {
  .signature-layout { grid-template-columns: 1fr; }
}

.signature-form-panel .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group.full-width { grid-column: span 2; }

.sig-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.btn-sig-copy {
  flex: 2;
  background: linear-gradient(135deg, #0A1E8C, #1d4ed8);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(10, 30, 140, 0.25);
}

.btn-sig-copy:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 30, 140, 0.4);
}

.btn-sig-download {
  flex: 2;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-sig-download:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.btn-sig-reset {
  flex: 1;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sig-reset:hover {
  background: #e2e8f0;
  color: #475569;
}

.signature-preview-panel {
  position: sticky;
  top: 100px;
}

.preview-container {
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  margin-bottom: 20px;
}

html.dark-mode .preview-container {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.1);
}

.sig-preview-box {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.preview-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 0.85rem;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 10px;
  border: 1px solid #e0f2fe;
}

html.dark-mode .preview-note {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
}


/* Signature Success Modal Styles */
.modal-mini {
  max-width: 450px !important;
  border-radius: 24px !important;
  overflow: hidden;
}

.success-accent {
  height: 8px;
  background: linear-gradient(90deg, #10b981, #34d399);
}

.central-body {
  text-align: center;
  padding: 40px 30px !important;
}

.success-icon-wrapper {
  font-size: 4rem;
  color: #10b981;
  margin-bottom: 20px;
  animation: scaleUpSuccess 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleUpSuccess {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-info-box {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  padding: 15px;
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #166534;
  font-size: 0.9rem;
}

html.dark-mode .modal-info-box {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}

.btn-confirm-success {
  width: 100%;
  background: #0A1E8C;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.btn-confirm-success:hover {
  background: #081666;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(10, 30, 140, 0.2);
}


/* Indigo Tool Card (Signature) */
.tc-indigo { background: rgba(79, 70, 229, 0.04) !important; border-left: 5px solid #4f46e5 !important; }
.tc-indigo:hover { border-color: #4f46e5; box-shadow: 6px 6px 0px #4f46e5; transform: translateY(-8px); }
.tc-indigo .tool-status { color: #4f46e5; }
.indigo-icon { background: #e0e7ff; color: #4338ca; }
.indigo-badge { background: #eef2ff; color: #4f46e5; border: 1px solid rgba(79, 70, 229, 0.1); }


/* Purple Tool Card (Signature - More Vibrant) */
.tc-purple { background: rgba(147, 51, 234, 0.04) !important; border-left: 5px solid #9333ea !important; }
.tc-purple:hover { border-color: #9333ea; box-shadow: 6px 6px 0px #9333ea; transform: translateY(-8px); }
.tc-purple .tool-status { color: #9333ea; }
.purple-icon { background: #f3e8ff; color: #7e22ce; }
.purple-badge { background: #faf5ff; color: #9333ea; border: 1px solid rgba(147, 51, 234, 0.1); }

/* Custom watermark styling for the Signature Card to prevent cropping */
.tc-purple .tool-illustration {
  width: 160px !important;
  height: 60px !important;
  right: 12px !important;
  bottom: 64px !important;
  opacity: 0.18 !important;
}
.tc-purple:hover .tool-illustration {
  opacity: 0.24 !important;
}
.tc-purple .tool-illustration img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Teal Tool Card (Webmail) */
.tc-teal { background: rgba(13, 148, 136, 0.04) !important; border-left: 5px solid #0d9488 !important; }
.tc-teal:hover { border-color: #0d9488; box-shadow: 6px 6px 0px #0d9488; transform: translateY(-8px); }
.tc-teal .tool-status { color: #0d9488; }
.teal-icon { background: #ccfbf1; color: #0f766e; }
.teal-badge { background: #f0fdfa; color: #0d9488; border: 1px solid rgba(13, 148, 136, 0.1); }

/* Rose Tool Card (Videos & Tutorials) */
.tc-rose { background: rgba(244, 63, 94, 0.04) !important; border-left: 5px solid #f43f5e !important; }
.rose-icon { background: #ffe4e6; color: #be123c; }
.rose-badge { background: #fff1f2; color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.1); }


/* Tool Specific Buttons */
.tc-blue .tool-btn { background: #0056b3; }
.tc-blue .tool-btn:hover { background: #004494; box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3); }

.tc-emerald .tool-btn { background: #10b981; }
.tc-emerald .tool-btn:hover { background: #059669; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.tc-amber .tool-btn:hover { background: #d97706; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }

.tc-crimson .tool-btn { background: #ef4444; }
.tc-crimson .tool-btn:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }

.tc-purple .tool-btn { background: #9333ea; }
.tc-purple .tool-btn:hover { background: #7e22ce; box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3); }

.tc-indigo .tool-btn { background: #4f46e5; }
.tc-indigo .tool-btn:hover { background: #4338ca; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }

.tc-teal .tool-btn { background: #0d9488; }
.tc-teal .tool-btn:hover { background: #0f766e; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); }

.tc-rose .tool-btn { background: #f43f5e; }
.tc-rose .tool-btn:hover { background: #e11d48; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3); }


.success-modal-content {
  text-align: center;
  padding: 40px !important;
  max-width: 450px !important;
  border-radius: 24px !important;
  border: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  margin: 0 !important; /* Ensure it stays centered by flexbox */
  background: white !important;
}

.success-modal-content h2 {
  color: #0A1E8C;
  font-weight: 800;
  margin-bottom: 10px;
}

.success-modal-content p {
  color: #475569;
  font-size: 1rem;
  margin-bottom: 20px;
}


/* ============================================================
   NOTIFICATION SYSTEM STYLES
   ============================================================ */
.notif-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: -10px;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    animation: slideDownFade 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.notif-dropdown.show { display: flex; }

.notif-header {
    padding: 18px 20px;
    background: rgba(10, 30, 140, 0.03);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-header h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0A1E8C;
}

.mark-read-all {
    font-size: 0.75rem;
    color: #6366f1;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.mark-read-all:hover { text-decoration: underline; color: #4338ca; }

.notif-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.notif-item {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

html.dark-mode .notif-item { background: rgba(255,255,255,0.03); }

.notif-item:hover { transform: translateX(5px); background: #f1f5f9; }
html.dark-mode .notif-item:hover { background: rgba(255,255,255,0.06); }

.notif-item.priority-info     { border-left-color: #3b82f6; }
.notif-item.priority-warning  { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.02); }
.notif-item.priority-critical { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.02); }

.notif-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: block;
}

.notif-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
    display: block;
}

.notif-time {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
}

.notif-empty i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.3; }
.notif-empty p { font-size: 0.85rem; font-weight: 600; }

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


/* Broadcast Specific Styles */
.broadcast-accent { background: linear-gradient(165deg, #4c1d95 0%, #5b21b6 100%) !important; }
.purple-bg { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.btn-broadcast {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}
.btn-broadcast:hover {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}


/* Critical Banner Styles */
.critical-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ef4444;
    color: white;
    z-index: 12000;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    animation: slideDownBanner 0.5s ease;
}

.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
}

.banner-content span {
    font-weight: 700;
    font-size: 0.9rem;
}

.close-banner {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    transition: all 0.2s;
}

.close-banner:hover { background: rgba(255, 255, 255, 0.4); transform: scale(1.1); }

@keyframes slideDownBanner {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}


/* Fix Notification wrapper in Navbar */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notif-wrapper .nav-icon-btn {
    position: relative;
}

.notif-dropdown {
    top: calc(100% + 20px) !important;
    right: 0 !important;
}


/* Adjust Badge Position */
.notif-badge {
    top: 5px !important;
    right: 5px !important;
    border-color: white !important;
}
html.dark-mode .notif-badge {
    border-color: #1e293b !important;
}


/* Responsive Fixes for Split Modals */
.admin-modal-split {
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-split-container {
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

/* Custom scrollbar for better look */
.modal-split-container::-webkit-scrollbar { width: 6px; }
.modal-split-container::-webkit-scrollbar-track { background: transparent; }
.modal-split-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

@media (max-width: 768px) {
    .modal-split-container {
        flex-direction: column;
    }
    .modal-side-accent {
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
        min-height: auto !important;
    }
    .modal-form-area {
        padding: 25px 20px !important;
    }
    .admin-modal-header h2 {
        font-size: 1.4rem !important;
    }
    .notif-detail-content {
        font-size: 0.9rem !important;
        padding: 15px !important;
    }
}


.admin-notif-list {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}
.admin-notif-list::-webkit-scrollbar { width: 4px; }
.admin-notif-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }


/* Fix for Split Modal height mismatch */
.modal-split-container {
    display: flex;
    align-items: stretch; /* Force both sides to have the same height */
    min-height: 520px;
}

.modal-side-accent {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ensure the scroll works on the form area instead of the whole container for better UI */
@media (min-width: 769px) {
    .modal-form-area {
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-split-container {
        overflow: hidden;
    }
}


/* Global Show Class for all Modals */
.modal.show, .modal-overlay.show, .config-modal-overlay.show {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: all !important;
}


/* Force Delete Confirmation to be on top of everything */
#deleteConfirmModal, #deleteSuccessModal {
    z-index: 160000 !important;
}


/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1.5px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 30, 60, 0.1);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: stretch;
}

html.dark-mode .mobile-bottom-nav {
  background: rgba(10, 16, 24, 0.95);
  border-top-color: rgba(51, 153, 255, 0.15);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-light);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mob-nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.25s ease;
}

.mob-nav-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
}

.mob-nav-item.active .mob-nav-icon {
  background: var(--green-bg);
  color: var(--green);
  transform: scale(1.1);
}

.mob-nav-item.active .mob-nav-label {
  color: var(--green);
  font-weight: 800;
}

.mob-nav-item:not(.mob-nav-center-btn):hover .mob-nav-icon {
  background: var(--bg-hover);
  color: var(--green);
}

/* Center search button */
.mob-nav-center-btn {
  flex: 0 0 56px;
  margin: -14px 6px 0;
}

.mob-nav-center-ring {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 86, 179, 0.45);
  transition: all 0.3s ease;
  border: 3px solid var(--bg-card);
}

html.dark-mode .mob-nav-center-ring {
  border-color: var(--bg-main);
}

.mob-nav-center-btn:hover .mob-nav-center-ring {
  background: var(--green-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 86, 179, 0.55);
}

.mob-nav-search-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--green);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  :root {
    --navbar-height: 110px;
  }

  .navbar-container {
    padding: 6px 16px;
  }

  .nav-search-wrap {
    min-width: 180px;
  }

  .navbar-links {
    gap: 6px;
    padding: 5px 12px;
  }

  .nav-link {
    padding: 7px 10px;
    font-size: 0.78rem;
    gap: 5px;
  }

  .hero-title { font-size: 2.6rem; }
  .hero-title-sub { font-size: 2rem; }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .directory-layout {
    grid-template-columns: 240px 1fr;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --navbar-height: 60px;
    --gov-bar-height: 0px; /* removed */
  }

  /* ── Body — overridden by Critical Mobile Fix block at end of file ── */
  body {
    padding-top: var(--navbar-height);
    padding-bottom: 75px;
  }

  /* ── Navbar — fully opaque on mobile so content doesn't bleed through ── */
  .main-navbar {
    height: var(--navbar-height) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 12px rgba(0, 30, 60, 0.12);
  }

  html.dark-mode .main-navbar {
    background: rgba(10, 16, 24, 0.99) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  }

  .navbar-container {
    flex-wrap: nowrap;
    padding: 0 14px;
    height: 100%;
    align-content: center;
  }

  /* Hide secondary nav links row — replaced by bottom nav */
  .navbar-links {
    display: none !important;
  }

  .navbar-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: calc(var(--gov-bar-height) + var(--navbar-height));
    left: 0;
    right: 0;
    bottom: 70px;
    overflow-y: auto;
    background: var(--bg-card);
    border-bottom: none;
    padding: 16px;
    z-index: 10500;
    gap: 6px;
    animation: slideDownFade 0.25s ease;
  }

  html.dark-mode .navbar-links.mobile-open {
    background: #0a1018;
  }

  .navbar-links.mobile-open .nav-link {
    padding: 14px 16px;
    font-size: 0.92rem;
    border-radius: 12px;
    border: 1px solid var(--border);
  }

  /* Hide search bar and extra action buttons */
  .nav-search-wrap {
    display: none;
  }

  .navbar-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  /* Show hamburger */
  .nav-hamburger {
    display: flex !important;
  }

  /* Show bottom nav */
  .mobile-bottom-nav {
    display: flex !important;
  }

  /* Navbar brand compact */
  .brand-logo-ring {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .brand-name {
    font-size: 0.9rem;
    letter-spacing: 0;
  }

  /* ── Login Button — icon only on mobile ── */
  .btn-login-gov span {
    display: none;
  }

  .btn-login-gov {
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 86, 179, 0.3);
  }

  .btn-login-gov i {
    font-size: 1rem;
  }

  /* ── User info — compact ── */
  .user-info-text {
    display: none;
  }

  .topbar-user {
    gap: 6px;
  }

  /* Hide refresh button on mobile */
  .nav-icon-btn[onclick*="reload"] {
    display: none;
  }

  /* Nav icon buttons smaller */
  .nav-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  /* ── Hero Section ── */
  .hero-section {
    flex-direction: column;
    min-height: auto;
    padding: 20px 16px 24px;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    margin-left: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-title {
    font-size: 1.9rem;
    text-align: center;
    direction: ltr;
  }

  .hero-title-sub {
    font-size: 1.5rem;
    text-align: center;
  }

  .hero-desc {
    text-align: center;
    font-size: 0.88rem;
    max-width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    gap: 10px;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
  }

  /* Hero stats float → 3-col grid + full-width date row */
  .hero-stats-float {
    position: static;
    transform: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    overflow: visible;
    width: 100%;
    gap: 10px;
    padding: 14px 0 4px;
    margin-top: 16px;
  }

  .hero-stats-float .hero-stat-badge:nth-child(4) {
    grid-column: 1 / -1;
  }

  .hero-stat-badge {
    min-width: 0;
    flex-shrink: unset;
    padding: 10px 12px;
    gap: 10px;
  }

  .hero-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .hero-stat-val { font-size: 1.1rem; }


  /* ── Content Section ── */
  .content-section {
    padding: 20px 14px 40px;
  }

  /* ── Stat Cards ── */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .stat-card {
    padding: 16px 14px;
    gap: 10px;
    border-radius: var(--radius-md);
  }

  .stat-card-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    border-radius: 10px;
  }

  .stat-card-value { font-size: 1.6rem; }
  .stat-card-label { font-size: 0.58rem; }

  /* ── Module Grid ── */
  .module-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .module-card {
    padding: 16px;
    gap: 10px;
    border-radius: var(--radius-md);
  }

  /* ── Directory Layout ── */
  .directory-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dir-sidebar {
    order: 2;
  }

  .dir-main {
    order: 1;
  }

  /* Horizontal filter buttons on mobile */
  .filter-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-list::-webkit-scrollbar { display: none; }

  .filter-btn {
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    padding: 10px 8px;
    gap: 6px;
    text-align: center;
    flex-shrink: 0;
  }

  .filter-text small { display: none; }

  /* Table scrolls horizontally */
  .table-card {
    border-radius: var(--radius-md);
  }

  .table-header {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .table-header h3 { font-size: 0.82rem; }

  .btn-copy, .btn-add {
    font-size: 0.72rem;
    padding: 7px 12px;
  }

  .data-table thead th {
    padding: 10px 12px;
    font-size: 0.6rem;
  }

  .data-table td {
    padding: 10px 12px;
    font-size: 0.78rem;
  }



  .pagination-container {
    padding: 12px 14px;
    gap: 8px;
  }

  .page-btn {
    padding: 7px 12px;
    font-size: 0.76rem;
  }

  /* ── Units Grid ── */
  .units-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Tools Grid ── */
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── DB Grid ── */
  .db-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Signature Layout ── */
  .signature-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ── Contact Layout ── */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ── Form Grid ── */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Page Banner ── */
  .page-banner {
    padding: 22px 14px;
  }

  .page-banner h2 {
    font-size: 1.1rem;
  }

  /* ── Panel Cards ── */
  .panel-card {
    padding: 16px;
    border-radius: var(--radius-md);
  }

  /* ── Modals ── */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-box {
    padding: 24px 20px;
    border-radius: var(--radius-xl);
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }

  /* Specific Fixes for Developer & Company Modals on Mobile */
  .dev-modal .modal-box, 
  .company-modal-box {
    align-self: center !important;
    border-radius: var(--radius-2xl) !important;
    max-height: 85vh;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .dev-banner-hero {
    flex-direction: column;
    text-align: center;
    padding: 25px 15px;
    gap: 15px;
  }

  .dev-avatar-showcase img {
    width: 70px;
    height: 70px;
  }

  .dev-stats {
    justify-content: center;
  }

  .dev-modal .modal-close {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .dev-body-section {
    padding: 20px 15px;
  }

  .footer-socials {
    flex-direction: column;
  }

  .company-modal-box {
    padding: 20px 15px !important;
  }

  .company-modal-grid {
    gap: 12px;
  }

  .company-info-card {
    padding: 15px;
  }

  .auth-box {
    padding: 28px 20px !important;
    max-width: 100% !important;
    border-radius: var(--radius-xl) !important;
  }

  /* ── Toast ── */
  .toast {
    bottom: 80px;
    width: calc(100% - 28px);
    max-width: 380px;
  }

  /* ── Manage Units button on Stats page ── */
  .btn-manage-units {
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  /* ── Archive panel ── */
  .archive-item {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* ── Notif Dropdown ── */
  .notif-dropdown {
    width: 300px !important;
    right: -60px !important;
  }

  /* ── Section label ── */
  .section-label {
    font-size: 0.65rem;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .module-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-title { font-size: 1.65rem; }
  .hero-title-sub { font-size: 1.35rem; }
  .hero-badge { font-size: 0.62rem; }

  .navbar-actions {
    gap: 5px;
  }

  /* Hide broadcast button on very small screens */
  .nav-icon-btn.admin-only[onclick*="Broadcast"] {
    display: none;
  }

  .brand-name { display: none; }
  .brand-system-name { display: none; }
  .brand-text-wrap { display: none; }

  .stat-card-value { font-size: 1.45rem; }



  .page-banner h2 { font-size: 1rem; }
  .page-banner p { font-size: 0.75rem; }

  .gov-banner {
    display: none;
  }

  /* body padding handled by the Critical Mobile Fix block at end of file */

  /* Shrink login button — icon only */
  .btn-login-gov span {
    display: none;
  }

  .btn-login-gov {
    padding: 9px 12px;
    border-radius: 8px;
  }

  /* Hide refresh button */
  .nav-icon-btn[onclick*="reload"] {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE — TINY MOBILE (≤ 375px)
   ============================================================ */
@media (max-width: 375px) {
  :root {
    --navbar-height: 54px;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px;
    gap: 8px;
  }

  .stat-card-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .stat-card-value { font-size: 1.3rem; }

  .hero-title { font-size: 1.5rem; }
  .hero-title-sub { font-size: 1.2rem; }

  .content-section {
    padding: 16px 10px 36px;
  }

  .hero-stat-badge {
    min-width: 115px;
    padding: 8px 10px;
  }

  .mob-nav-label { font-size: 0.55rem; }
  .mob-nav-center-ring {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

/* ============================================================
   LANDSCAPE PHONE FIX
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding: 24px 16px 16px;
  }

  .hero-title { font-size: 1.6rem; }
  .hero-title-sub { font-size: 1.3rem; }

  .hero-stats-float {
    margin-top: 14px;
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   CRITICAL FIX — MOBILE SCROLL BLEED THROUGH
   ============================================================ */
@media (max-width: 768px) {
  /* Navbar — fully opaque, no glassmorphism */
  .main-navbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  html.dark-mode .main-navbar {
    background: #0a1018 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
  }
}

/* On very small screens: navbar starts at top=0 */
@media (max-width: 480px) {
  .main-navbar {
    top: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.dark-mode .main-navbar {
    background: #0a1018 !important;
  }

  body {
    padding-top: var(--navbar-height, 60px) !important;
  }
}

/* ============================================================
   GPU COMPOSITING FIX — Prevents flash during fast scroll
   ============================================================ */
.main-navbar {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure page content scrolls below the fixed headers correctly */
@media (max-width: 768px) {
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* Disable smooth scroll during fast swipe */
  }

  /* NOTE: translateZ and isolation REMOVED — they caused white-gap clipping.
     GPU compositing is handled only on .main-navbar via the Critical Fix block. */
}

/* ============================================================
   MOBILE SAFE AREA FIX - remove top gap on notched phones
   ============================================================ */
@media (max-width: 768px) {
  body {
    padding-top: calc(var(--navbar-height) + var(--safe-top)) !important;
    padding-bottom: 75px;
  }

  .main-navbar {
    position: fixed;
    top: 0 !important;
    height: calc(var(--navbar-height) + var(--safe-top)) !important;
    padding-top: var(--safe-top);
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  html.dark-mode .main-navbar {
    background: #0a1018 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
  }

  .navbar-container {
    height: var(--navbar-height) !important;
    align-content: center;
  }

  .navbar-links.mobile-open {
    top: calc(var(--navbar-height) + var(--safe-top)) !important;
  }
}

/* ============================================================
   MOBILE INTERACTION FIXES - search, menu, email cards
   ============================================================ */
@media (max-width: 768px) {
  .nav-hamburger {
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    border-radius: 10px;
    z-index: 13001;
  }

  .nav-hamburger.is-open {
    background: var(--green-bg);
  }

  .nav-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .nav-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar-links.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--navbar-height) + var(--safe-top) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - var(--navbar-height) - var(--safe-top) - 96px) !important;
    margin: 0 !important;
    padding: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 45px rgba(0, 30, 60, 0.18) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 13000 !important;
  }

  html.dark-mode .navbar-links.mobile-open {
    background: #0a1018 !important;
  }

  .navbar-links.mobile-open .nav-link {
    display: flex !important;
    width: 100% !important;
    min-height: 46px;
    padding: 12px 14px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    color: var(--text-main) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .navbar-links.mobile-open .nav-link i {
    width: 22px;
    color: var(--green);
    text-align: center;
  }

  .navbar-links.mobile-open .nav-link.active {
    background: var(--green) !important;
    color: #ffffff !important;
    border-color: var(--green) !important;
  }

  .navbar-links.mobile-open .nav-link.active i {
    color: #ffffff;
  }

  /* Old mobile-search-open rules removed — replaced by Spotlight Search Modal */

  .table-container {
    overflow-x: auto !important;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody tr {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
  }

  .data-table td,
  .data-table td:nth-child(2),
  .data-table td:nth-child(4) {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.82rem !important;
    text-align: right;
  }

  .data-table td:last-child {
    border-bottom: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    min-width: 74px;
    color: var(--text-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: left;
    text-transform: uppercase;
  }

  body:not(.is-admin) .data-table td.admin-only {
    display: none !important;
  }

  .email-cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: calc(100% - 86px);
  }

  .email-cell-content span {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  .pagination-container {
    flex-wrap: wrap;
  }

  .dir-sidebar .filter-list {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    gap: 10px !important;
    width: 100% !important;
    scrollbar-width: auto !important;
  }

  .dir-sidebar .filter-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    text-align: left !important;
    flex-shrink: 1 !important;
  }

  .dir-sidebar .filter-icon {
    width: 38px;
    height: 38px;
  }

  .dir-sidebar .filter-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .dir-sidebar .filter-text span {
    white-space: normal;
    line-height: 1.25;
  }

  .dir-sidebar .filter-text small {
    display: block !important;
    margin-top: 2px;
    line-height: 1.25;
  }

  /* .email-mobile-card styled in mobile.css */

  .email-mobile-card td {
    display: block !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
  }

  .email-mobile-card td::before {
    display: none;
  }

  .email-mobile-card td[data-label="No"] {
    order: 1;
    align-self: center;
    color: var(--text-light) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
  }

  .email-mobile-card td[data-label="No"]::before {
    content: "#";
    display: inline;
    margin-right: 2px;
  }

  .email-mobile-card td[data-label="Unite"] {
    order: 2;
    align-self: center;
    justify-self: start;
  }

  .email-mobile-card td[data-label="Unite"] .unit-badge {
    padding: 3px 9px;
    font-size: 0.66rem;
  }

  .email-mobile-card td[data-label="Nom"] {
    order: 4;
    grid-column: 1 / -1;
    color: var(--text-dark);
    font-size: 0.95rem !important;
    font-weight: 900;
    line-height: 1.2;
  }

  .email-mobile-card td[data-label="Nom"] strong {
    overflow-wrap: anywhere;
  }

  .email-mobile-card td[data-label="Nom"] strong:empty::after {
    content: "-";
    color: var(--text-light);
  }

  .email-mobile-card td[data-label="Poste"] {
    order: 5;
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.74rem !important;
    line-height: 1.25;
    margin-top: -2px;
  }

  .email-mobile-card td[data-label="Email"] {
    order: 6;
    grid-column: 1 / -1;
    padding: 8px 10px !important;
    background: rgba(0, 86, 179, 0.06);
    border: 1px solid rgba(0, 86, 179, 0.12) !important;
    border-radius: 10px;
    color: var(--green) !important;
    font-size: 0.78rem !important;
  }

  .email-mobile-card .email-cell-content {
    max-width: 100%;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .email-mobile-card .email-cell-content span {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
  }

  .email-mobile-card .single-copy-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
  }

  .email-mobile-card td[data-label="Statut"] {
    order: 3;
    grid-column: auto;
    display: flex !important;
    align-self: center;
    justify-content: flex-end;
  }

  .email-mobile-card td[data-label="Statut"] .status-active,
  .email-mobile-card td[data-label="Statut"] .status-blocked,
  .email-mobile-card td[data-label="Statut"] .status-pending {
    padding: 3px 9px;
    font-size: 0.68rem;
  }

  .status-pending {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
  }

  .email-mobile-card td[data-label="Actions"] {
    order: 7;
    grid-column: 1 / -1;
  }
}

/* ============================================================
   MOBILE AUTH MODAL FIX - compact login sheet
   ============================================================ */
@media (max-width: 768px) {
  .auth-modal.modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--navbar-height) + var(--safe-top) + 10px) 12px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
  }

  .auth-modal .auth-box {
    width: min(100%, 420px) !important;
    max-height: calc(100vh - var(--navbar-height) - var(--safe-top) - 112px) !important;
    margin: 0 !important;
    padding: 22px 20px 18px !important;
    border-radius: 18px !important;
    overflow-y: auto;
  }

  .auth-modal .auth-box-header {
    margin-bottom: 18px !important;
  }

  .auth-modal .auth-logo {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .auth-modal .auth-box-header h2 {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }

  .auth-modal .auth-box-header p {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .auth-modal .auth-form {
    gap: 12px;
  }

  .auth-modal .form-group {
    gap: 6px;
  }

  .auth-modal .form-group label {
    font-size: 0.68rem;
  }

  .auth-modal .input-with-icon input {
    min-height: 44px;
    padding: 10px 12px 10px 40px !important;
    font-size: 0.86rem;
  }

  .auth-modal .input-with-icon i {
    left: 13px;
    font-size: 0.8rem;
  }

  .auth-modal .btn-auth-submit {
    min-height: 46px;
    padding: 12px 18px;
    margin-top: 2px;
    font-size: 0.9rem;
  }

  .auth-modal .auth-close-btn {
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 380px) {
  .auth-modal .auth-logo {
    width: 54px;
    height: 54px;
  }

  .auth-modal .auth-box {
    padding: 18px 16px 16px !important;
  }
}

/* ============================================================
   MOBILE RESOURCE MODALS FIX - tools and support sheets
   ============================================================ */
@media (max-width: 768px) {
  .config-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--navbar-height) + var(--safe-top) + 10px) 12px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }

  .config-modal-overlay .config-modal {
    width: min(100%, 460px) !important;
    max-width: 100% !important;
    max-height: calc(100vh - var(--navbar-height) - var(--safe-top) - 112px) !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .config-modal-overlay .config-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    padding: 14px 18px !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    background: var(--bg-card) !important;
  }

  .config-modal-overlay .config-header-left {
    min-width: 0;
    gap: 12px;
  }

  .config-modal-overlay .config-header-icon,
  .config-modal-overlay .app-header-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    flex: 0 0 44px !important;
  }

  .config-modal-overlay .config-modal-header h2 {
    font-size: 0.98rem !important;
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
  }

  .config-modal-overlay .config-modal-header p {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .config-modal-overlay .config-close-btn {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .config-modal-overlay .config-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 18px !important;
    -webkit-overflow-scrolling: touch;
  }

  .config-modal-overlay .config-step,
  .config-modal-overlay .platform-section,
  .config-modal-overlay .app-intro-banner,
  .config-modal-overlay .support-hero,
  .config-modal-overlay .contact-method,
  .config-modal-overlay .expertise-item {
    border-radius: 14px !important;
  }

  .config-modal-overlay .store-buttons,
  .config-modal-overlay .download-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .config-modal-overlay img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 380px) {
  .config-modal-overlay .config-modal-header {
    padding: 12px 14px !important;
  }

  .config-modal-overlay .config-modal-body {
    padding: 15px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   CRITICAL MOBILE FIX v5.1 — RESOLVES ALL LAYOUT FRACTURES
   Fixes: padding conflicts, hero overflow, rendering artifacts
   ============================================================ */

/* ── Safety Net: main-wrapper must NEVER stay hidden on mobile ── */
/* This fires after a 3-second CSS animation delay as a fallback */
@media (max-width: 768px) {
  .main-wrapper {
    animation: ensureVisible 0s 3s forwards;
  }

  @keyframes ensureVisible {
    to {
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
}

/* ── Step 1: Disable GPU hacks on content — they cause clipping ── */
@media (max-width: 768px) {
  .page-content,
  .hero-section,
  .content-section,
  .page-section {
    -webkit-transform: none !important;
    transform: none !important;
    isolation: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    will-change: auto !important;
  }
}

/* ── Step 2: Unified body padding — one source of truth ── */
@media (max-width: 768px) {
  :root {
    --navbar-height: 60px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* CHROME FIX: overflow-x:hidden on <html> breaks position:fixed in Chrome/Blink.
     Apply ONLY to body. Never to html. Firefox is unaffected but Chrome breaks. */
  html {
    overflow-x: clip !important; /* 'clip' does NOT create a new containing block for fixed elements */
  }

  body {
    overflow-x: hidden !important;
    /* Do NOT add max-width here — it interferes with fixed children in Chrome */
    padding-top: calc(var(--navbar-height) + var(--safe-top)) !important;
    padding-bottom: calc(72px + var(--safe-bottom)) !important;
  }
}

/* ── Step 3: Navbar — fixed, solid, no glass on mobile ── */
@media (max-width: 768px) {
  .main-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--navbar-height) + var(--safe-top)) !important;
    padding-top: var(--safe-top) !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
    box-shadow: 0 1px 0 rgba(0, 86, 179, 0.12), 0 2px 8px rgba(0, 30, 60, 0.08) !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  html.dark-mode .main-navbar {
    background: #0a1018 !important;
    box-shadow: 0 1px 0 rgba(51, 153, 255, 0.15), 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  }

  .navbar-container {
    height: var(--navbar-height) !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
  }
}

/* ── Step 4: Hero section — prevent overflow causing white gaps ── */
@media (max-width: 768px) {
  .hero-section {
    overflow: visible !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .hero-bg-art {
    overflow: hidden !important;
  }

  /* Grid layout: 3 badges on first row, date badge full-width on second row */
  .hero-stats-float {
    position: static !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 14px 0 6px !important;
    margin-top: 16px !important;
    flex-direction: unset !important;
  }

  /* First 3 badges: one per column */
  .hero-stats-float .hero-stat-badge:nth-child(1),
  .hero-stats-float .hero-stat-badge:nth-child(2),
  .hero-stats-float .hero-stat-badge:nth-child(3) {
    flex-shrink: unset !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 4th badge (date — amber): spans all 3 columns */
  .hero-stats-float .hero-stat-badge:nth-child(4) {
    grid-column: 1 / -1 !important;
    flex-shrink: unset !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .hero-stat-badge {
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .hero-stat-badge:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

/* ── Step 5: Page sections — prevent clipping ── */
@media (max-width: 768px) {
  .page-section.active {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .page-content {
    overflow: visible !important;
    min-height: calc(100vh - var(--navbar-height) - var(--safe-top)) !important;
  }

  .content-section {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Step 6: Stats cards — no gap fracture ── */
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .stat-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
}

/* ── Step 7: Blob animations — disable on mobile (performance) ── */
@media (max-width: 768px) {
  .bg-blob {
    animation: none !important;
    filter: blur(60px) !important;
    opacity: 0.15 !important;
  }

  .hero-badge-dot {
    animation: none !important;
  }

  /* Disable page transition animation on mobile */
  .page-section {
    animation: none !important;
  }
}

/* ── Step 8: Mobile bottom nav — always visible and above safe area ── */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 0 0 max(6px, env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 62px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1.5px solid rgba(0, 86, 179, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 30, 60, 0.08) !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.dark-mode .mobile-bottom-nav {
    background: #0a1018 !important;
    border-top-color: rgba(51, 153, 255, 0.12) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  /* Center search button elevated ring */
  .mob-nav-center-btn {
    margin-top: -14px !important;
  }

  .mob-nav-center-ring {
    background: var(--green, #0056b3) !important;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.45) !important;
  }
}

/* ============================================================
   CHROME MOBILE FINAL FIX — position:fixed + compositing
   Chrome/Blink unique behaviors:
   - overflow:hidden on <html> breaks position:fixed (FIXED above)
   - backdrop-filter on fixed elements creates new stacking contexts
   - filter/transform on any ancestor clips fixed descendants
   ============================================================ */
@media (max-width: 768px) {

  /* Remove backdrop-filter from all fixed elements — Chrome compositing bug */
  .main-navbar,
  .mobile-bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Ensure proper fixed positioning for Chrome */
  .main-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }

  /* Disable background blobs on mobile — reduce GPU compositing layers in Chrome */
  .app-bg-decor {
    display: none !important;
  }
}

/* ============================================================
   AI ROBOT ILLUSTRATION — Hero Section (Static)
   ============================================================ */

.ai-robot-wrap {
  position: absolute;
  right: max(40px, calc(50% - 700px + 24px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 440px;
  z-index: 5;
  /* NO animation — static image */
}

/* glow removed — static mode */
.ai-robot-glow { display: none; }

.ai-robot-svg {
  width: 420px;
  height: auto;
  position: relative;
  z-index: 1;
}

/* All individual element animations removed — static mode */
.robot-antenna-pulse,
.robot-eye,
.robot-ear-glow,
.robot-mouth-bar,
.robot-chest-anim,
.robot-led-green,
.robot-led-blue,
.robot-led-orange,
.particle-1,
.particle-2,
.particle-3,
.particle-4 {
  animation: none !important;
}

/* Speech bubble removed — robot is static */

/* --- Dernière Mise à Jour Badge (under robot) --- */
.robot-date-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fffbeb;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px;
  padding: 11px 18px;
  box-shadow: var(--shadow-sm);
  min-width: 200px;
  margin-top: 10px;
  transition: all var(--motion-duration-normal) var(--motion-ease-out);
}

.robot-date-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.robot-date-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.robot-date-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.robot-date-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #92400e;
  text-transform: uppercase;
}

.robot-date-value {
  font-size: 1rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 0.5px;
}

html.dark-mode .robot-date-badge {
  background: #451a03;
  border-color: #fbbf24;
  box-shadow: 4px 4px 0px #fbbf24;
}
html.dark-mode .robot-date-icon {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
html.dark-mode .robot-date-label { color: #fcd34d; }
html.dark-mode .robot-date-value { color: #fde68a; }

@media (max-width: 768px) {
  .ai-robot-svg { display: none !important; }
}




/* --- Clean Cache Elements --- */
.btn-clean-mini {
  background: #fbbf24;
  border: none;
  color: #92400e;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-left: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
html.dark-mode .btn-clean-mini {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.btn-clean-mini:hover {
  background: #f59e0b;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}



.cache-action-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.btn-clean-cache {
  background: #ef4444;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transition: all 0.25s ease;
}
.btn-clean-cache:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
}

.cache-note {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 10px;
  border: 1px dashed #fbbf24;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #92400e;
}
html.dark-mode .cache-note {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.05);
}
.cache-note i {
  font-size: 1rem;
  margin-top: 2px;
  color: #fbbf24;
}

.amber-bg {
  background: #fef3c7;
  color: #92400e;
}
html.dark-mode .amber-bg {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
} 
@media (max-width: 768px) {
  .btn-clean-mini { width: 38px; height: 38px; font-size: 1rem; }
} 

/* =============================================
   PREMIUM REQUEST MODAL — Compact Edition
   ============================================= */
.request-modal-content {
    max-width: 800px !important;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 20px !important;
}

html.dark-mode .request-modal-content {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.05);
}

.request-form {
    padding: 30px 40px;
}

.request-form-grid {
    display: grid;
    grid-template-columns: 1fr 340px; /* Increased from 300px to allow full email visibility */
    gap: 30px;
    margin-bottom: 20px;
}

/* Header Tweaks */
.request-modal-content .modal-header {
    padding: 20px 30px;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0 !important;
}

.request-modal-content .modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

html.dark-mode .request-modal-content .modal-header {
    background: #1e293b;
    border-color: #334155;
}

.request-modal-content .modal-title-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.request-modal-content h2 {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.request-modal-content p {
    font-size: 0.8rem;
}

.close-modal {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.close-modal:hover {
    background: #fee2e2;
    color: #ef4444;
    transform: rotate(90deg);
}

html.dark-mode .close-modal {
    background: #1e293b;
    color: #94a3b8;
}

/* Form Fields */
.request-form-main .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.request-form .form-group {
    margin-bottom: 15px;
}

.request-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html.dark-mode .request-form label {
    color: #94a3b8;
}

.request-form input,
.request-form select {
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark-mode .request-form input,
html.dark-mode .request-form select {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.request-form input:focus,
.request-form select:focus {
    background: #fff;
    border-color: #06b6d4;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
    outline: none;
    transform: translateY(-1px);
}

html.dark-mode .request-form input:focus,
html.dark-mode .request-form select:focus {
    background: #0f172a;
    border-color: #22d3ee;
}

/* Preview Card Compact */
.preview-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

html.dark-mode .preview-box {
    background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%);
    border-color: #075985;
}

.preview-header {
    font-size: 0.65rem;
    font-weight: 900;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

html.dark-mode .preview-header {
    color: #7dd3fc;
}

.generated-email-wrap {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(186, 230, 253, 0.5);
    margin-bottom: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

html.dark-mode .generated-email-wrap {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.05);
}

#generatedEmailDisplay {
    font-size: 0.9rem; /* Reduced to ensure full visibility */
    font-weight: 900;
    background: linear-gradient(90deg, #0284c7, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    display: block;
    width: 100%;
}
#generatedEmailDisplay::-webkit-scrollbar { display: none; }

.email-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #06b6d4;
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4);
}

.preview-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.4;
    text-align: left;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

html.dark-mode .preview-note {
    background: rgba(0, 0, 0, 0.2);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.05);
}

/* Submit Section */
.request-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    gap: 20px;
}

html.dark-mode .request-form-footer {
    border-color: #1e293b;
}

.arabic-disclaimer {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    color: #94a3b8;
    direction: ltr;
    text-align: left;
    line-height: 1.5;
    flex: 1;
    max-width: 440px;
    opacity: 0.9;
}

.btn-request-submit {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
}

.btn-request-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.45);
    filter: brightness(1.1);
}

.btn-request-submit i {
    font-size: 1.15rem;
}

@keyframes pulse-cyan {
    0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(6, 182, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

.pulse-amber {
    animation: pulse-cyan 2s infinite;
}

#rejectRequestModal {
    z-index: 200000 !important;
}

/* Responsive Request Modal */
@media (max-width: 850px) {
    .request-modal-content {
        max-width: 95% !important;
        margin: 10px auto;
        border-radius: 16px !important;
    }
    .request-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .request-form {
        padding: 20px;
    }
    .request-form-main .form-row {
        grid-template-columns: 1fr;
    }
    .request-modal-content .modal-header {
        padding: 15px 20px;
    }
    .request-form input,
    .request-form select {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
    }
    .email-preview-card {
        padding: 15px !important;
    }
}

/* --- Request Management Card & List --- */
.highlight-bg {
  background: #ecfeff;
  color: #0891b2;
}
html.dark-mode .highlight-bg {
  background: rgba(8, 145, 178, 0.2);
  color: #22d3ee;
}

.request-stat-badge {
  margin: 15px 0;
  background: #f1f5f9;
  padding: 8px 15px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  border: 1px solid #e2e8f0;
}
html.dark-mode .request-stat-badge {
  background: #0f172a;
  border-color: #1e293b;
  color: #94a3b8;
}
#pendingRequestsCount {
  background: #06b6d4;
  color: white;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.btn-manage-requests {
  background: white;
  color: #0891b2;
  border: 2px solid #0891b2;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-manage-requests:hover {
  background: #ecfeff;
  transform: translateY(-2px);
}
html.dark-mode .btn-manage-requests {
  background: transparent;
  color: #22d3ee;
  border-color: #22d3ee;
}

/* ============================================================
   EXECUTIVE REQUESTS MODAL (Demandes Emails)
   ============================================================ */
.requests-side-accent {
  background: linear-gradient(165deg, #091740 0%, #0d2870 45%, #1d4ed8 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.requests-side-accent::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.requests-side-accent::after {
  content: '' !important;
  position: absolute !important;
  bottom: -50px !important;
  left: -50px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.requests-side-accent .side-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.side-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #e0e7ff !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 16px !important;
  backdrop-filter: blur(8px) !important;
}

.requests-side-accent .side-icon-wrapper {
  width: 66px !important;
  height: 66px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.9rem !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 16px !important;
  backdrop-filter: blur(12px) !important;
}

.requests-side-accent h3 {
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.3px !important;
}

.requests-side-accent p {
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.45 !important;
  margin: 0 0 20px 0 !important;
  max-width: 230px !important;
}

.side-bullets-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.side-bullets-list div {
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.side-bullets-list i {
  color: #38bdf8 !important;
  font-size: 0.82rem !important;
}

/* ============================================================
   POINTAGE REQUESTS MODAL SIDE ACCENT (Accès Pointage RH)
   ============================================================ */
.pointage-side-accent {
  background: linear-gradient(165deg, #064e3b 0%, #047857 45%, #059669 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 280px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 34px 24px 24px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
}

.pointage-side-accent::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.pointage-side-accent::after {
  content: '' !important;
  position: absolute !important;
  bottom: -50px !important;
  left: -50px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.20) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.pointage-side-accent .side-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.pointage-side-accent .side-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.3px !important;
  margin: 0 auto 16px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.pointage-side-accent .side-icon-wrapper {
  width: 66px !important;
  height: 66px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.9rem !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  margin: 0 auto 16px !important;
  backdrop-filter: blur(12px) !important;
}

.pointage-side-accent h3 {
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.3px !important;
}

.pointage-side-accent p {
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.45 !important;
  margin: 0 0 20px 0 !important;
  max-width: 230px !important;
}

.pointage-side-accent .side-bullets-list i {
  color: #34d399 !important;
}

.pointage-side-accent .side-footer-note {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.badge-count-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: rgba(10, 30, 140, 0.08) !important;
  color: #0A1E8C !important;
  border: 1px solid rgba(10, 30, 140, 0.18) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html.dark-mode .badge-count-pill {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

.requests-table-wrapper {
  max-height: 440px !important;
  overflow-y: auto !important;
  padding: 4px 2px !important;
  border: none !important;
}

/* Empty State Card */
.empty-requests-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 45px 25px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  margin: 4px 0 !important;
}

html.dark-mode .empty-requests-card {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: #334155 !important;
}

.empty-requests-icon-ring {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25)) !important;
  border: 2px solid rgba(16, 185, 129, 0.35) !important;
  color: #059669 !important;
  font-size: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.18) !important;
}

html.dark-mode .empty-requests-icon-ring {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3)) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
}

.empty-requests-title {
  font-size: 1.15rem !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.2px !important;
}

html.dark-mode .empty-requests-title {
  color: #f8fafc !important;
}

.empty-requests-text {
  font-size: 0.88rem !important;
  color: #64748b !important;
  max-width: 360px !important;
  line-height: 1.5 !important;
  margin: 0 0 16px 0 !important;
}

html.dark-mode .empty-requests-text {
  color: #94a3b8 !important;
}

.empty-requests-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
}

html.dark-mode .empty-requests-tag {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

/* Individual Request Item Cards */
.req-list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  cursor: pointer !important;
}

.req-list-item:hover {
  transform: translateY(-2px) !important;
  border-color: #0A1E8C !important;
  box-shadow: 0 8px 20px rgba(10, 30, 140, 0.08) !important;
  background: #f8fafc !important;
}

html.dark-mode .req-list-item {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .req-list-item:hover {
  border-color: #38bdf8 !important;
  background: #24324a !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.btn-req-details {
  background: linear-gradient(135deg, #0A1E8C, #1e40af) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-weight: 750 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 3px 10px rgba(10, 30, 140, 0.22) !important;
}

.btn-req-details:hover {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(10, 30, 140, 0.35) !important;
}

.loading-requests {
  padding: 40px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-weight: 600 !important;
}

/* ============================================================
   REQUEST DETAILS MODAL REFINEMENTS
   ============================================================ */
.req-modal-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.req-modal-close:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) !important;
}

.req-detail-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.req-detail-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

html.dark-mode .req-detail-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.req-detail-card label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

html.dark-mode .req-detail-card label {
  color: #94a3b8 !important;
}

.req-detail-val {
  font-size: 0.95rem !important;
  color: #0f172a !important;
  word-break: break-word !important;
}

html.dark-mode .req-detail-val {
  color: #f8fafc !important;
}

.req-detail-email-card {
  background: linear-gradient(135deg, rgba(10, 30, 140, 0.04) 0%, rgba(37, 99, 235, 0.08) 100%) !important;
  border: 1.5px solid rgba(10, 30, 140, 0.2) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

html.dark-mode .req-detail-email-card {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

.req-generated-email {
  font-size: 1.05rem !important;
  font-weight: 850 !important;
  color: #0A1E8C !important;
  word-break: break-all !important;
  letter-spacing: -0.1px !important;
}

html.dark-mode .req-generated-email {
  color: #38bdf8 !important;
}

.btn-copy-mini {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0A1E8C !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.78rem !important;
  transition: all 0.15s ease !important;
}

.btn-copy-mini:hover {
  background: #0A1E8C !important;
  color: #ffffff !important;
  border-color: #0A1E8C !important;
  transform: scale(1.05) !important;
}

html.dark-mode .btn-copy-mini {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

.req-details-timestamp {
  font-size: 0.78rem !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 18px !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

html.dark-mode .req-details-timestamp {
  color: #94a3b8 !important;
  border-top-color: #334155 !important;
}

.req-btn-cancel {
  margin: 0 !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 0.86rem !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.req-btn-cancel:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html.dark-mode .req-btn-cancel {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

.req-btn-reject {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
  margin: 0 !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.req-btn-reject:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.38) !important;
}

.req-btn-approve {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.req-btn-approve:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
}

.show-more-wrapper {
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
}

.btn-show-more-req {
    background: transparent;
    color: #0891b2;
    border: 2px solid #0891b2;
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-show-more-req:hover {
    background: #0891b2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}


/* ============================================================
   SERVICE SELECTION MODAL
   ============================================================ */
.service-selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.selection-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.selection-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity: 0;
  transition: var(--transition);
}

.selection-card:hover {
  transform: translateY(-8px);
  border-color: var(--green);
  box-shadow: var(--shadow-lg);
  background: var(--green-bg);
}

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

.selection-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: var(--green-bg);
  color: var(--green);
  transition: var(--transition);
}

.selection-card:hover .selection-icon {
  background: var(--green);
  color: white;
  transform: scale(1.1);
}

.selection-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.selection-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.selection-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--green);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-5px);
  transition: var(--transition);
}

.selection-card:hover .selection-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile responsive for selection grid */
@media (max-width: 768px) {
  .service-selection-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .selection-card {
    flex-direction: row;
    padding: 20px;
    text-align: left;
    align-items: center;
  }
  .selection-icon {
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    flex-shrink: 0;
  }
}

/* Final internal-card premium overrides */
.tc-blue { --tool-accent: #155ee8; --tool-accent-rgb: 21, 94, 232; --tool-soft: #dbe8ff; }
.tc-indigo { --tool-accent: #4f46e5; --tool-accent-rgb: 79, 70, 229; --tool-soft: #e0e7ff; }
.tc-teal { --tool-accent: #0d9488; --tool-accent-rgb: 13, 148, 136; --tool-soft: #ccfbf1; }
.tc-rose { --tool-accent: #f43f5e; --tool-accent-rgb: 244, 63, 94; --tool-soft: #ffe4e6; }

.tool-card[class*="tc-"] {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.90) 55%, rgba(var(--tool-accent-rgb),0.18) 100%),
    radial-gradient(circle at 13% 10%, rgba(var(--tool-accent-rgb),0.24), transparent 36%),
    linear-gradient(180deg, var(--tool-soft), #ffffff 52%) !important;
  border: 2px solid rgba(var(--tool-accent-rgb),0.72) !important;
  border-left-width: 2px !important;
  box-shadow:
    0 4px 0 var(--tool-accent),
    0 22px 48px rgba(15,23,42,0.12),
    0 10px 26px rgba(var(--tool-accent-rgb),0.22),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.tool-card[class*="tc-"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--tool-accent) !important;
  box-shadow:
    0 6px 0 var(--tool-accent),
    0 32px 72px rgba(15,23,42,0.17),
    0 18px 40px rgba(var(--tool-accent-rgb),0.32),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.tool-card[class*="tc-"] .tool-icon-box {
  background: linear-gradient(145deg, rgba(var(--tool-accent-rgb),1), rgba(var(--tool-accent-rgb),0.72)) !important;
  color: #ffffff !important;
}

.tool-card[class*="tc-"] .tool-badge {
  background: rgba(var(--tool-accent-rgb),0.12) !important;
  border-color: rgba(var(--tool-accent-rgb),0.36) !important;
  color: color-mix(in srgb, var(--tool-accent) 76%, #111827 24%) !important;
}

.tool-card[class*="tc-"] .tool-btn {
  background: linear-gradient(135deg, var(--tool-accent), color-mix(in srgb, var(--tool-accent) 72%, #111827 28%)) !important;
}

/* Homepage hero premium redesign */
.hero-section {
  min-height: 510px !important;
  padding: 58px 24px 78px !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(21, 94, 232, 0.18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(0, 168, 107, 0.14), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(245, 158, 11, 0.16), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 45%, #f7fffb 100%) !important;
  border-bottom: 1px solid rgba(21, 94, 232, 0.16) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.78);
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 20px 24px 24px;
  border: 1px solid rgba(21, 94, 232, 0.10);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.34)),
    radial-gradient(circle at 100% 0%, rgba(21,94,232,0.14), transparent 32%);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.82);
  pointer-events: none;
  z-index: 0;
}

.hero-bg-art {
  opacity: 0.72;
  mix-blend-mode: multiply;
}

.hero-content {
  padding: 30px 34px !important;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.95) 48%, rgba(229,241,255,0.90) 100%),
    radial-gradient(circle at 8% 12%, rgba(21,94,232,0.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(0,168,107,0.12), transparent 30%) !important;
  border: 2px solid rgba(21,94,232,0.24);
  box-shadow:
    0 4px 0 rgba(21,94,232,0.62),
    0 26px 62px rgba(15, 23, 42, 0.14),
    0 12px 34px rgba(21, 94, 232, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  overflow: hidden;
}

.hero-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, #155ee8, rgba(21,94,232,0.38) 44%, transparent 78%) top left / 100% 5px no-repeat,
    radial-gradient(circle at 92% 18%, rgba(21,94,232,0.13), transparent 26%),
    linear-gradient(rgba(21,94,232,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,94,232,0.045) 1px, transparent 1px);
  background-size:
    100% 5px,
    auto,
    28px 28px,
    28px 28px;
  opacity: 0.95;
}

.hero-content::after {
  content: '';
  position: absolute;
  right: -64px;
  bottom: -72px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(21,94,232,0.16), rgba(21,94,232,0.05) 48%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-content > * {
  position: relative;
  z-index: 1;
}

.hero-email-decor {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.88;
}

.decor-mail-card,
.decor-mail-icon,
.decor-at,
.decor-route,
.decor-envelope-outline,
.decor-mail-hub,
.decor-mini-signal,
.decor-center-chip,
.decor-sync-ring {
  position: absolute;
  pointer-events: none;
}

.decor-mail-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  padding: 11px 14px;
  border-radius: 18px;
  color: #155ee8;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(226,240,255,0.34)),
    radial-gradient(circle at 0% 0%, rgba(21,94,232,0.16), transparent 48%);
  border: 1px solid rgba(21,94,232,0.17);
  box-shadow:
    0 16px 32px rgba(21,94,232,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.decor-mail-card i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f7df4, #0ea5e9);
  box-shadow: 0 10px 20px rgba(21,94,232,0.18);
}

.decor-mail-card b {
  color: #1e3a8a;
  font-size: 0.72rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.decor-mail-card-1 {
  right: 260px;
  top: 150px;
  transform: rotate(-4deg);
  opacity: 0.34;
}

.decor-mail-card-2 {
  right: 118px;
  bottom: 130px;
  min-width: 108px;
  transform: rotate(5deg);
  opacity: 0.42;
}

.decor-mail-card-3 {
  left: 430px;
  bottom: 50px;
  min-width: 130px;
  transform: rotate(-7deg);
  opacity: 0.24;
}

.decor-at {
  right: 350px;
  bottom: 28px;
  font-size: 9.5rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(21,94,232,0.07);
  text-shadow: 0 18px 36px rgba(21,94,232,0.08);
}

.decor-mail-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: rgba(21,94,232,0.38);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(219,234,254,0.34));
  border: 1px solid rgba(21,94,232,0.13);
  box-shadow: 0 18px 32px rgba(21,94,232,0.08);
}

.decor-mail-icon i {
  font-size: 1.35rem;
}

.decor-mail-icon-1 {
  left: 46%;
  top: 66%;
  opacity: 0.42;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.decor-mail-icon-2 {
  right: 460px;
  top: 84px;
  transform: rotate(8deg);
}

.decor-route {
  width: 240px;
  height: 88px;
  border: 2px dashed rgba(21,94,232,0.12);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 80px 0 0;
}

.decor-route::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(14,165,233,0.42);
  box-shadow: 0 0 0 8px rgba(14,165,233,0.08);
}

.decor-route-1 {
  right: 288px;
  top: 206px;
  transform: rotate(9deg);
}

.decor-route-2 {
  left: 500px;
  top: 112px;
  transform: rotate(-14deg);
  opacity: 0.72;
}

.decor-envelope-outline {
  left: 48%;
  top: 48%;
  width: 270px;
  height: 164px;
  border-radius: 22px;
  transform: translate(-50%, -50%) rotate(-5deg);
  opacity: 0.24;
  border: 2px solid rgba(21,94,232,0.22);
  background:
    linear-gradient(31deg, transparent 49%, rgba(21,94,232,0.18) 50%, transparent 51%),
    linear-gradient(149deg, transparent 49%, rgba(21,94,232,0.18) 50%, transparent 51%),
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(219,234,254,0.22));
  box-shadow:
    0 24px 48px rgba(21,94,232,0.08),
    inset 0 1px 0 rgba(255,255,255,0.64);
}

.decor-envelope-outline::before,
.decor-envelope-outline::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(14,165,233,0.32);
  box-shadow: 0 0 0 9px rgba(14,165,233,0.08);
}

.decor-envelope-outline::before {
  width: 10px;
  height: 10px;
  left: 28px;
  top: 26px;
}

.decor-envelope-outline::after {
  width: 8px;
  height: 8px;
  right: 34px;
  bottom: 30px;
}

.decor-mail-hub {
  left: 50%;
  top: 48%;
  width: 176px;
  min-height: 64px;
  transform: translate(-50%, -50%) rotate(-3deg);
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  opacity: 0.56;
  color: #155ee8;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(226,240,255,0.40)),
    radial-gradient(circle at 0% 0%, rgba(14,165,233,0.18), transparent 46%);
  border: 1px solid rgba(21,94,232,0.20);
  box-shadow:
    0 18px 36px rgba(21,94,232,0.08),
    inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.decor-mail-hub i {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #155ee8, #06b6d4);
  box-shadow: 0 12px 22px rgba(21,94,232,0.20);
}

.decor-mail-hub b {
  color: #143b8f;
  font-size: 0.76rem;
  line-height: 1.1;
  white-space: nowrap;
}

.decor-mail-hub small {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.decor-mail-hub::after {
  content: '';
  position: absolute;
  right: -54px;
  top: 50%;
  width: 52px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(21,94,232,0.34), transparent);
}

.decor-mini-signal {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #155ee8;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(219,234,254,0.34)),
    radial-gradient(circle at 20% 15%, rgba(14,165,233,0.22), transparent 42%);
  border: 1px solid rgba(21,94,232,0.16);
  box-shadow:
    0 16px 30px rgba(21,94,232,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0.36;
}

.decor-mini-signal i {
  font-size: 1rem;
}

.decor-mini-signal::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 22px;
  border: 1px dashed rgba(21,94,232,0.18);
}

.decor-mini-signal-top {
  left: 51%;
  top: 23%;
  transform: rotate(7deg);
}

.decor-mini-signal-bottom {
  left: 48.5%;
  top: 67%;
  transform: rotate(-8deg);
}

.decor-center-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #155ee8;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.70), rgba(226,240,255,0.42));
  border: 1px solid rgba(21,94,232,0.18);
  box-shadow:
    0 14px 28px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.74);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0.34;
}

.decor-center-chip i {
  color: #0ea5e9;
  font-size: 0.95rem;
}

.decor-center-chip b {
  color: #1e3a8a;
  font-size: 0.66rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.decor-center-chip-1 {
  left: 46%;
  top: 38%;
  transform: translateX(-50%) rotate(-3deg);
}

.decor-center-chip-2 {
  left: 47%;
  bottom: 16%;
  transform: translateX(-50%) rotate(4deg);
}

.decor-sync-ring {
  left: 58%;
  bottom: 8%;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  opacity: 0.20;
  border: 16px solid rgba(21,94,232,0.10);
  box-shadow:
    inset 0 0 0 2px rgba(21,94,232,0.13),
    0 0 0 18px rgba(14,165,233,0.04);
}

.decor-sync-ring::before {
  content: '@';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(21,94,232,0.28);
  font-size: 3.4rem;
  font-weight: 900;
}

@media (max-width: 768px) {
  .hero-email-decor {
    display: none !important;
  }
}

.hero-badge {
  background: rgba(21, 94, 232, 0.12) !important;
  border: 1px solid rgba(21, 94, 232, 0.34) !important;
  color: #155ee8 !important;
  box-shadow: 0 8px 22px rgba(21, 94, 232, 0.12);
}

.hero-badge-dot {
  background: #38bdf8 !important;
  box-shadow: 0 0 0 5px rgba(56,189,248,0.18);
}

.hero-title {
  color: #04140d !important;
  letter-spacing: -1px;
  text-shadow: none !important;
}

.hero-title-sub {
  color: #155ee8 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #155ee8 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,0.85);
}

.hero-desc {
  color: #334155 !important;
  font-weight: 600;
}

.btn-hero-primary {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #155ee8 0%, #004ea8 100%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 14px 30px rgba(21, 94, 232, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 18px 38px rgba(21, 94, 232, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.38) !important;
}

.btn-hero-outline {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.72) !important;
  color: #155ee8 !important;
  border: 2px solid rgba(21, 94, 232, 0.34) !important;
  box-shadow:
    0 10px 24px rgba(21, 94, 232, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.76);
}

.btn-hero-outline:hover {
  background: rgba(21,94,232,0.10) !important;
  border-color: #155ee8 !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.ai-robot-wrap {
  filter: drop-shadow(0 28px 34px rgba(15, 23, 42, 0.22));
}

.ai-robot-glow {
  background:
    radial-gradient(circle, rgba(21,94,232,0.20), transparent 62%) !important;
}

.robot-date-badge {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.99), rgba(255,247,237,0.94)),
    radial-gradient(circle at 0% 0%, rgba(245,158,11,0.24), transparent 42%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: 18px !important;
  box-shadow:
    0 4px 0 #92400e,
    0 18px 38px rgba(146,64,14,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.robot-date-badge:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 6px 0 #92400e,
    0 24px 48px rgba(146,64,14,0.24),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.robot-date-icon,
.btn-clean-mini {
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 22px rgba(245,158,11,0.28),
    inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

.robot-date-badge .btn-clean-mini {
  background: linear-gradient(145deg, #ff4d5f, #dc2626) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px rgba(220,38,38,0.34),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

.robot-date-badge .btn-clean-mini:hover {
  background: linear-gradient(145deg, #ef4444, #b91c1c) !important;
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 14px 30px rgba(185,28,28,0.42),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

.robot-date-label,
.robot-date-value {
  color: #7c2d12 !important;
}

.hero-content .hero-title {
  color: #04140d !important;
  -webkit-text-fill-color: #04140d !important;
}

.hero-content .hero-title-sub {
  color: #155ee8 !important;
  -webkit-text-fill-color: #155ee8 !important;
  opacity: 1 !important;
}

.hero-content .hero-desc {
  color: #334155 !important;
}

/* Expanded enterprise hero card */
@media (min-width: 1024px) {
  .hero-section {
    padding: 52px 24px 64px !important;
  }

  .hero-content {
    width: min(1320px, calc(100% - 80px)) !important;
    max-width: 1320px !important;
    min-height: 392px;
    margin: 0 auto !important;
    display: grid;
    grid-template-columns: minmax(430px, 0.88fr) minmax(430px, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 56px;
    align-items: center;
    padding: 34px 46px !important;
  }

  .hero-content .hero-badge {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .hero-content .hero-title {
    grid-column: 1;
    grid-row: 2;
    max-width: 600px;
  }

  .hero-content .hero-desc {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 620px;
  }

  .hero-content .hero-actions {
    grid-column: 1;
    grid-row: 5;
  }

  .hero-card-brand {
    grid-column: 2;
    grid-row: 1 / 2;
    justify-self: end;
    align-self: start;
    width: min(430px, 100%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.82), rgba(239,247,255,0.66)),
      radial-gradient(circle at 0% 0%, rgba(21,94,232,0.12), transparent 42%);
    border: 1px solid rgba(21,94,232,0.18);
    box-shadow:
      0 18px 36px rgba(15,23,42,0.08),
      inset 0 1px 0 rgba(255,255,255,0.88);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
  }

  .hero-card-brand-logo {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid rgba(21,94,232,0.20);
    box-shadow:
      0 14px 28px rgba(21,94,232,0.18),
      inset 0 1px 0 rgba(255,255,255,0.94);
    overflow: hidden;
  }

  .hero-card-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero-card-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hero-card-brand-text span {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0;
  }

  .hero-card-brand-text small {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .hero-card-details {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    align-self: end;
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
  }

  .hero-detail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(21,94,232,0.15);
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
  }

  .hero-detail-item i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #155ee8, #008f8c);
    box-shadow: 0 10px 20px rgba(21,94,232,0.20);
  }

  .hero-flow-panel {
    position: absolute;
    left: 50.5%;
    top: 50%;
    z-index: 2;
    width: 190px;
    transform: translate(-50%, -48%);
    padding: 16px;
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.70), rgba(239,247,255,0.42)),
      radial-gradient(circle at 50% 0%, rgba(21,94,232,0.14), transparent 44%);
    border: 1px solid rgba(21,94,232,0.18);
    box-shadow:
      0 18px 42px rgba(15,23,42,0.08),
      inset 0 1px 0 rgba(255,255,255,0.86);
    backdrop-filter: blur(16px) saturate(1.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.16);
  }

  .hero-flow-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #155ee8;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    margin-bottom: 14px;
  }

  .hero-flow-title i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #155ee8, #008f8c);
    box-shadow: 0 10px 18px rgba(21,94,232,0.18);
  }

  .hero-flow-steps {
    position: relative;
    display: grid;
    gap: 10px;
  }

  .hero-flow-steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(21,94,232,0.28), rgba(0,168,107,0.26));
  }

  .hero-flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(21,94,232,0.12);
    color: #334155;
    font-size: 0.70rem;
    font-weight: 850;
  }

  .hero-flow-step i {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #155ee8;
    background: rgba(21,94,232,0.10);
  }

  .hero-status-strip {
    position: absolute;
    left: 24%;
    top: 36px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.72), rgba(239,247,255,0.46));
    border: 1px solid rgba(21,94,232,0.16);
    box-shadow:
      0 14px 30px rgba(15,23,42,0.06),
      inset 0 1px 0 rgba(255,255,255,0.88);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
  }

  .hero-status-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
  }

  .hero-status-strip i {
    color: #155ee8;
    font-size: 0.78rem;
  }

  .ai-robot-wrap {
    right: max(120px, calc(50% - 560px));
    top: 55%;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .hero-flow-panel {
    display: none;
  }

  .hero-status-strip {
    display: none;
  }
}

/* Directory page premium redesign */
#pageDirectory .panel-card,
#pageDirectory .table-card {
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.92) 60%, rgba(21,94,232,0.10) 100%),
    radial-gradient(circle at 8% 0%, rgba(21,94,232,0.16), transparent 34%) !important;
  border: 2px solid rgba(21,94,232,0.42) !important;
  box-shadow:
    0 4px 0 #155ee8,
    0 24px 56px rgba(15,23,42,0.12),
    0 12px 30px rgba(21,94,232,0.14),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
  overflow: hidden;
}

#pageDirectory .panel-card {
  position: relative;
}

#pageDirectory .panel-card::before,
#pageDirectory .table-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #155ee8, rgba(21,94,232,0.36) 42%, transparent 78%) top left / 100% 4px no-repeat,
    radial-gradient(circle at 92% 12%, rgba(0,168,107,0.10), transparent 28%);
  z-index: 0;
}

#pageDirectory .panel-card > *,
#pageDirectory .table-card > * {
  position: relative;
  z-index: 1;
}

#pageDirectory .panel-card h4,
#pageDirectory .table-header h3 {
  color: #0f2f66 !important;
  font-size: 0.9rem;
}

#pageDirectory .panel-card h4 i,
#pageDirectory .table-header h3 i {
  color: #155ee8 !important;
}

#pageDirectory .filter-btn {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(21,94,232,0.16) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.04);
}

#pageDirectory .filter-btn:hover {
  background: rgba(21,94,232,0.09) !important;
  border-color: rgba(21,94,232,0.42) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(21,94,232,0.12);
}

#pageDirectory .filter-icon {
  border-radius: 14px !important;
}

#pageDirectory .filter-icon.all {
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1) !important;
  color: #334155 !important;
}

#pageDirectory .filter-icon.active {
  background: linear-gradient(145deg, #2563eb, #155ee8) !important;
  color: #ffffff !important;
}

#pageDirectory .filter-icon.blocked {
  background: linear-gradient(145deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
}

#pageDirectory .quick-stat-row {
  padding: 11px 0 !important;
  border-bottom-color: rgba(21,94,232,0.10) !important;
}

#pageDirectory .quick-stat-row strong {
  font-size: 1.08rem !important;
}

#pageDirectory .progress-track {
  height: 8px !important;
  background: rgba(21,94,232,0.10) !important;
}

#pageDirectory .progress-fill {
  background: linear-gradient(90deg, #155ee8, #22c55e) !important;
  box-shadow: 0 0 18px rgba(21,94,232,0.28);
}

#pageDirectory .table-card {
  position: relative;
}

#pageDirectory .table-header {
  padding: 22px 26px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(234,244,255,0.78)) !important;
  border-bottom: 1px solid rgba(21,94,232,0.18) !important;
}

#pageDirectory .btn-copy,
#pageDirectory .btn-add {
  border-radius: 14px !important;
  font-weight: 800 !important;
}

#pageDirectory .btn-copy {
  background: rgba(21,94,232,0.10) !important;
  border: 1px solid rgba(21,94,232,0.34) !important;
  color: #155ee8 !important;
  box-shadow: 0 10px 22px rgba(21,94,232,0.10);
}

#pageDirectory .btn-copy:hover {
  background: #155ee8 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

#pageDirectory .btn-copy:disabled {
  background: rgba(148, 163, 184, 0.1) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

#pageDirectory .data-table input[type="checkbox"] {
  cursor: pointer;
  accent-color: #155ee8;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  vertical-align: middle;
}

#pageDirectory .data-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#pageDirectory .data-table tbody tr.selected-row {
  background: rgba(21, 94, 232, 0.08) !important;
  box-shadow: inset 4px 0 0 #155ee8 !important;
}

html.dark-mode #pageDirectory .data-table tbody tr.selected-row {
  background: rgba(21, 94, 232, 0.15) !important;
  box-shadow: inset 4px 0 0 #3b82f6 !important;
}

#pageDirectory .btn-add {
  background: linear-gradient(135deg, #00a86b, #008f5d) !important;
  box-shadow: 0 10px 24px rgba(0,168,107,0.24);
}

#pageDirectory .data-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#pageDirectory .data-table thead th {
  background: linear-gradient(135deg, #dbeafe, #eaf4ff) !important;
  color: #0f56b3 !important;
  border-bottom: 2px solid rgba(21,94,232,0.34) !important;
  padding: 15px 16px !important;
}

#pageDirectory .data-table tbody tr {
  background: rgba(255,255,255,0.76) !important;
}

#pageDirectory .data-table tbody tr:nth-child(even) {
  background: rgba(248,251,255,0.90) !important;
}

#pageDirectory .data-table tbody tr:hover {
  background: rgba(21,94,232,0.07) !important;
  box-shadow: inset 4px 0 0 #155ee8;
}

#pageDirectory .data-table td {
  border-bottom-color: rgba(15,23,42,0.07) !important;
  color: #1f2f28 !important;
  font-weight: 600;
  padding: 15px 16px !important;
}

#pageDirectory .unit-badge {
  border-radius: 999px !important;
  font-weight: 850 !important;
  border-width: 1px !important;
}

#pageDirectory .status-active,
#pageDirectory .status-blocked,
#pageDirectory .status-pending,
#pageDirectory .status-deactivated {
  border-radius: 999px !important;
  font-weight: 850 !important;
  border: 1px solid currentColor;
}

#pageDirectory .status-active {
  background: rgba(21,94,232,0.10) !important;
  color: #155ee8 !important;
}

#pageDirectory .status-blocked {
  background: rgba(239,68,68,0.10) !important;
  color: #dc2626 !important;
}

#pageDirectory .status-pending {
  background: rgba(6,182,212,0.12) !important;
  color: #0891b2 !important;
}

#pageDirectory .status-deactivated {
  background: rgba(100, 116, 139, 0.10) !important;
  color: #64748b !important;
}

#pageDirectory .single-copy-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: rgba(21,94,232,0.12) !important;
  border-color: rgba(21,94,232,0.32) !important;
  color: #155ee8 !important;
}

#pageDirectory .single-copy-btn:hover {
  background: #155ee8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Tool detail modals - professional landscape layout */
@media (min-width: 900px) {
  #configModal .config-modal,
  #installModal .config-modal,
  #desktopModal .config-modal,
  #supportModal .config-modal,
  #thunderbirdModal .config-modal,
  #office2021Modal .config-modal,
  #webmailModal .config-modal {
    position: relative !important;
    width: min(1180px, calc(100vw - 64px)) !important;
    max-width: 1180px !important;
    max-height: min(760px, calc(100vh - 80px)) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.99), rgba(247,251,255,0.96)),
      radial-gradient(circle at 0% 0%, rgba(21,94,232,0.12), transparent 35%),
      radial-gradient(circle at 100% 12%, rgba(0,168,107,0.10), transparent 32%) !important;
    border: 2px solid rgba(21,94,232,0.24) !important;
    box-shadow:
      0 5px 0 #155ee8,
      0 36px 90px rgba(2, 8, 23, 0.32),
      0 20px 46px rgba(21,94,232,0.16),
      inset 0 1px 0 rgba(255,255,255,0.95) !important;
  }

  /* Override border/background gradient for webmail modal itself */
  #webmailModal .config-modal {
    border: 2px solid rgba(13, 148, 136, 0.24) !important;
    box-shadow:
      0 5px 0 #0d9488,
      0 36px 90px rgba(2, 8, 23, 0.32),
      0 20px 46px rgba(13, 148, 136, 0.16),
      inset 0 1px 0 rgba(255,255,255,0.95) !important;
  }

  #configModal .config-modal::before,
  #installModal .config-modal::before,
  #desktopModal .config-modal::before,
  #supportModal .config-modal::before,
  #thunderbirdModal .config-modal::before,
  #office2021Modal .config-modal::before,
  #webmailModal .config-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  #configModal .config-modal::before,
  #installModal .config-modal::before,
  #desktopModal .config-modal::before,
  #supportModal .config-modal::before,
  #thunderbirdModal .config-modal::before,
  #office2021Modal .config-modal::before {
    background:
      linear-gradient(90deg, #155ee8, rgba(21,94,232,0.42) 40%, transparent 78%) top left / 100% 5px no-repeat,
      linear-gradient(rgba(21,94,232,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(21,94,232,0.035) 1px, transparent 1px);
    background-size: 100% 5px, 30px 30px, 30px 30px;
  }

  #webmailModal .config-modal::before {
    background:
      linear-gradient(90deg, #0d9488, rgba(13, 148, 136, 0.42) 40%, transparent 78%) top left / 100% 5px no-repeat,
      linear-gradient(rgba(13, 148, 136, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 148, 136, 0.035) 1px, transparent 1px) !important;
    background-size: 100% 5px, 30px 30px, 30px 30px !important;
  }

  #configModal .config-modal > *,
  #installModal .config-modal > *,
  #desktopModal .config-modal > *,
  #supportModal .config-modal > *,
  #thunderbirdModal .config-modal > *,
  #office2021Modal .config-modal > *,
  #webmailModal .config-modal > * {
    position: relative;
    z-index: 1;
  }

  #configModal .config-modal-header,
  #installModal .config-modal-header,
  #desktopModal .config-modal-header,
  #supportModal .config-modal-header,
  #thunderbirdModal .config-modal-header,
  #office2021Modal .config-modal-header,
  #webmailModal .config-modal-header {
    position: relative !important;
    top: auto !important;
    padding: 22px 28px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,0.06) !important;
  }

  #configModal .config-modal-header,
  #installModal .config-modal-header,
  #desktopModal .config-modal-header,
  #supportModal .config-modal-header,
  #thunderbirdModal .config-modal-header,
  #office2021Modal .config-modal-header {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.96), rgba(231,241,255,0.82)) !important;
    border-bottom: 1px solid rgba(21,94,232,0.16) !important;
  }

  #webmailModal .config-modal-header {
    background:
      linear-gradient(135deg, rgba(255,255,255,0.96), rgba(204,251,241,0.82)) !important;
    border-bottom: 1px solid rgba(13, 148, 136, 0.16) !important;
  }

  #configModal .config-header-icon,
  #desktopModal .config-header-icon,
  #supportModal .config-header-icon,
  #thunderbirdModal .config-header-icon,
  #office2021Modal .config-header-icon,
  #installModal .app-header-logo,
  #webmailModal .config-header-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }

  #configModal .config-header-icon,
  #desktopModal .config-header-icon,
  #supportModal .config-header-icon,
  #thunderbirdModal .config-header-icon,
  #office2021Modal .config-header-icon,
  #installModal .app-header-logo {
    background: linear-gradient(145deg, #155ee8, #004ea8) !important;
    color: #ffffff !important;
    box-shadow:
      0 14px 28px rgba(21,94,232,0.30),
      inset 0 1px 0 rgba(255,255,255,0.34) !important;
  }

  #webmailModal .config-header-icon {
    background: rgba(13, 148, 136, 0.1) !important;
    color: #0d9488 !important;
    box-shadow:
      0 14px 28px rgba(13, 148, 136, 0.15),
      inset 0 1px 0 rgba(255,255,255,0.34) !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #installModal .app-header-logo img {
    border-radius: 16px;
  }

  #configModal .config-modal-header h2,
  #installModal .config-modal-header h2,
  #desktopModal .config-modal-header h2,
  #supportModal .config-modal-header h2,
  #thunderbirdModal .config-modal-header h2,
  #office2021Modal .config-modal-header h2,
  #webmailModal .config-modal-header h2 {
    font-size: 1.12rem !important;
    color: #0f172a !important;
  }

  #configModal .config-modal-header p,
  #installModal .config-modal-header p,
  #desktopModal .config-modal-header p,
  #supportModal .config-modal-header p,
  #thunderbirdModal .config-modal-header p,
  #office2021Modal .config-modal-header p,
  #webmailModal .config-modal-header p {
    color: #475569 !important;
    font-weight: 500;
  }

  #configModal .config-close-btn,
  #installModal .config-close-btn,
  #desktopModal .config-close-btn,
  #supportModal .config-close-btn,
  #thunderbirdModal .config-close-btn,
  #office2021Modal .config-close-btn,
  #webmailModal .config-close-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    color: #334155 !important;
  }

  #configModal .config-close-btn,
  #installModal .config-close-btn,
  #desktopModal .config-close-btn,
  #supportModal .config-close-btn,
  #thunderbirdModal .config-close-btn,
  #office2021Modal .config-close-btn {
    background: rgba(21,94,232,0.08) !important;
    border-color: rgba(21,94,232,0.20) !important;
  }

  #webmailModal .config-close-btn {
    background: rgba(13, 148, 136, 0.08) !important;
    border: 1px solid rgba(13, 148, 136, 0.20) !important;
  }

  #configModal .config-close-btn:hover,
  #installModal .config-close-btn:hover,
  #desktopModal .config-close-btn:hover,
  #supportModal .config-close-btn:hover,
  #thunderbirdModal .config-close-btn:hover,
  #office2021Modal .config-close-btn:hover,
  #webmailModal .config-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
  }

  #configModal .config-modal-body,
  #installModal .config-modal-body,
  #desktopModal .config-modal-body,
  #supportModal .config-modal-body,
  #thunderbirdModal .config-modal-body,
  #office2021Modal .config-modal-body,
  #webmailModal .config-modal-body {
    max-height: calc(min(760px, calc(100vh - 80px)) - 99px);
    overflow-y: auto;
    padding: 28px !important;
  }

  #configModal .config-modal-body,
  #installModal .config-modal-body,
  #desktopModal .config-modal-body,
  #thunderbirdModal .config-modal-body {
    display: grid !important;
    grid-template-columns: minmax(450px, 1.05fr) minmax(360px, 0.95fr);
    grid-template-areas:
      "intro steps"
      "servers steps"
      "servers note";
    gap: 22px !important;
    align-items: start;
  }

  /* Dedicated Office 2021 Modal Layout (Full width intro banner + 2 column body) */
  #office2021Modal .config-modal-body {
    display: grid !important;
    grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr) !important;
    grid-template-areas:
      "intro intro"
      "servers steps"
      "servers note" !important;
    gap: 20px !important;
    align-items: start;
  }

  #configModal .config-intro, #thunderbirdModal .config-intro { grid-area: intro; }
  #configModal .config-cards-row, #thunderbirdModal .config-cards-row { grid-area: servers; }
  #configModal .config-steps, #thunderbirdModal .config-steps { grid-area: steps; }
  #configModal .config-note, #thunderbirdModal .config-note { grid-area: note; }

  #office2021Modal .config-intro { grid-area: intro !important; }
  #office2021Modal .config-cards-row { grid-area: servers !important; }
  #office2021Modal .config-steps { grid-area: steps !important; }
  #office2021Modal .config-note { grid-area: note !important; margin-top: 0 !important; }

  #configModal .config-cards-row,
  #thunderbirdModal .config-cards-row,
  #office2021Modal .config-cards-row {
    gap: 18px !important;
  }

  #configModal .config-server-card,
  #configModal .config-intro,
  #configModal .config-steps,
  #configModal .config-note,
  #thunderbirdModal .config-server-card,
  #thunderbirdModal .config-intro,
  #thunderbirdModal .config-steps,
  #thunderbirdModal .config-note,
  #desktopModal .config-intro,
  #desktopModal .config-steps,
  #desktopModal .config-note,
  #desktopModal .platform-screenshot-card,
  #desktopModal .app-download-section,
  #webmailModal .config-intro,
  #webmailModal .config-steps,
  #webmailModal .config-note,
  #webmailModal .platform-screenshot-card,
  #webmailModal .webmail-url-card,
  #installModal .app-intro-banner,
  #installModal .app-download-section,
  #installModal .config-steps,
  #installModal .app-screenshots-section,
  #installModal .config-note {
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,251,255,0.84)) !important;
    border: 1px solid rgba(21,94,232,0.16) !important;
    box-shadow:
      0 14px 34px rgba(15,23,42,0.07),
      inset 0 1px 0 rgba(255,255,255,0.9) !important;
  }

  #configModal .config-intro,
  #configModal .config-steps,
  #configModal .config-note,
  #thunderbirdModal .config-intro,
  #thunderbirdModal .config-steps,
  #thunderbirdModal .config-note,
  #desktopModal .config-intro,
  #desktopModal .config-steps,
  #desktopModal .config-note,
  #desktopModal .app-download-section,
  #webmailModal .config-intro,
  #webmailModal .config-steps,
  #webmailModal .config-note,
  #webmailModal .webmail-url-card,
  #installModal .app-download-section,
  #installModal .config-steps,
  #installModal .app-screenshots-section,
  #installModal .config-note {
    padding: 20px !important;
  }

  #configModal .config-server-card,
  #thunderbirdModal .config-server-card {
    padding: 22px !important;
  }

  #configModal .imap-card,
  #thunderbirdModal .imap-card {
    border-top: 5px solid #00a86b !important;
  }

  #configModal .smtp-card,
  #thunderbirdModal .smtp-card {
    border-top: 5px solid #155ee8 !important;
  }

  #installModal .config-modal-body {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1fr) minmax(300px, 0.9fr);
    grid-template-areas:
      "intro steps shots"
      "download steps shots"
      "note steps shots";
    gap: 22px !important;
    align-items: start;
  }

  #installModal .app-intro-banner { grid-area: intro; padding: 22px !important; }
  #installModal .app-download-section { grid-area: download; }
  #installModal .config-steps { grid-area: steps; }
  #installModal .app-screenshots-section { grid-area: shots; }
  #installModal .config-note { grid-area: note; }

  #installModal .download-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #installModal .app-screenshots-gallery {
    grid-template-columns: 1fr !important;
    max-height: 530px;
    overflow-y: auto;
    padding-right: 4px;
  }

  #installModal .app-screenshot img {
    height: 180px !important;
  }

  #desktopModal .config-modal-body,
  #webmailModal .config-modal-body {
    display: grid !important;
    grid-template-columns: minmax(450px, 1.05fr) minmax(360px, 0.95fr);
    grid-template-areas:
      "intro steps"
      "screenshot steps"
      "download steps"
      "note note";
    gap: 22px !important;
    align-items: start;
  }

  #desktopModal .config-intro, #webmailModal .config-intro { grid-area: intro; }
  #desktopModal .platform-screenshot-card, #webmailModal .platform-screenshot-card { grid-area: screenshot; }
  #desktopModal .app-download-section, #webmailModal .webmail-url-card { grid-area: download; }
  #desktopModal .config-steps, #webmailModal .config-steps { grid-area: steps; }
  #desktopModal .config-note, #webmailModal .config-note { grid-area: note; }

  #desktopModal .platform-screenshot-card img,
  #webmailModal .platform-screenshot-card img {
    height: 170px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  #desktopModal .platform-body {
    gap: 16px !important;
  }

  #desktopModal .config-steps-list,
  #webmailModal .config-steps-list,
  #configModal .config-steps-list,
  #installModal .config-steps-list {
    gap: 14px !important;
  }

  #desktopModal .config-step,
  #configModal .config-step,
  #installModal .config-step {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(21,94,232,0.045);
    border: 1px solid rgba(21,94,232,0.08);
  }

  #webmailModal .config-step {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(13, 148, 136, 0.045) !important;
    border: 1px solid rgba(13, 148, 136, 0.08) !important;
  }

  #desktopModal .step-number,
  #configModal .step-number,
  #installModal .step-number {
    border-radius: 10px !important;
    background: linear-gradient(135deg, #155ee8, #004ea8) !important;
    box-shadow: 0 8px 16px rgba(21,94,232,0.22);
  }

  #webmailModal .step-number {
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    box-shadow: 0 8px 16px rgba(13, 148, 136, 0.22) !important;
  }

  #webmailModal .config-intro,
  #webmailModal .config-steps,
  #webmailModal .config-note,
  #webmailModal .platform-screenshot-card,
  #webmailModal .webmail-url-card {
    border: 1px solid rgba(13, 148, 136, 0.16) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(240,253,250,0.84)) !important;
  }

  #desktopModal .store-btn,
  #webmailModal .store-btn,
  #installModal .store-btn {
    border-radius: 16px !important;
    border-color: rgba(21,94,232,0.18) !important;
    background: rgba(255,255,255,0.72) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  }

  #desktopModal .store-btn:hover,
  #installModal .store-btn:hover {
    border-color: #155ee8 !important;
    background: rgba(21,94,232,0.08) !important;
  }

  #supportModal .config-modal {
    box-shadow:
      0 5px 0 #00a86b,
      0 36px 90px rgba(2, 8, 23, 0.32),
      0 20px 46px rgba(0,168,107,0.16),
      inset 0 1px 0 rgba(255,255,255,0.95) !important;
  }

  #supportModal .config-modal::before {
    background:
      linear-gradient(90deg, #00a86b, rgba(0,168,107,0.42) 40%, transparent 78%) top left / 100% 5px no-repeat,
      linear-gradient(rgba(0,168,107,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,168,107,0.035) 1px, transparent 1px);
    background-size: 100% 5px, 30px 30px, 30px 30px;
  }

  #supportModal .config-header-icon {
    background: linear-gradient(145deg, #00a86b, #008f5d) !important;
    box-shadow:
      0 14px 28px rgba(0,168,107,0.30),
      inset 0 1px 0 rgba(255,255,255,0.34) !important;
  }

  #supportModal .config-modal-body {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1fr);
    grid-template-areas:
      "hero contacts"
      "hero expertise"
      "note faq";
    gap: 22px !important;
    align-items: start;
  }

  #supportModal .support-hero { grid-area: hero; }
  #supportModal .support-contact-section { grid-area: contacts; }
  #supportModal .support-services { grid-area: expertise; }
  #supportModal .config-steps { grid-area: faq; }
  #supportModal .config-note { grid-area: note; }

  #supportModal .support-hero,
  #supportModal .support-contact-section,
  #supportModal .support-services,
  #supportModal .config-steps,
  #supportModal .config-note {
    border-radius: 22px !important;
    box-shadow:
      0 14px 34px rgba(15,23,42,0.07),
      inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  #supportModal .support-hero {
    min-height: 100%;
    margin-bottom: 0 !important;
    padding: 28px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 34%),
      linear-gradient(145deg, #155ee8 0%, #0f56b3 46%, #008f5d 130%) !important;
    border: 1px solid rgba(255,255,255,0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #supportModal .support-profile-card {
    align-items: flex-start;
  }

  #supportModal .support-avatar img {
    width: 86px !important;
    height: 86px !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
  }

  #supportModal .support-profile-info h3 {
    font-size: 1.15rem !important;
  }

  #supportModal .support-contact-section,
  #supportModal .support-services,
  #supportModal .config-steps,
  #supportModal .config-note {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,251,255,0.84)) !important;
    border: 1px solid rgba(0,168,107,0.16) !important;
    padding: 20px !important;
  }

  #supportModal .support-contact-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #supportModal .support-contact-section h4 {
    grid-column: 1 / -1;
  }

  #supportModal .support-contact-card {
    border-radius: 18px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(0,168,107,0.16) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,0.06);
    min-height: 92px;
  }

  #supportModal .support-contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,168,107,0.38) !important;
    box-shadow: 0 16px 30px rgba(0,168,107,0.14);
  }

  #supportModal .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #supportModal .service-item {
    border-radius: 18px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(21,94,232,0.12) !important;
    min-height: 116px;
  }

  #supportModal .config-step {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,168,107,0.045);
    border: 1px solid rgba(0,168,107,0.08);
  }

  #supportModal .step-number {
    border-radius: 10px !important;
    background: linear-gradient(135deg, #00a86b, #008f5d) !important;
    box-shadow: 0 8px 16px rgba(0,168,107,0.22);
  }

  /* Dark mode overrides for webmail modal on desktop */
  html.dark-mode #webmailModal .config-modal {
    background: #0e1a17 !important;
    border-color: rgba(13, 148, 136, 0.3) !important;
    box-shadow:
      0 5px 0 #0d9488,
      0 36px 90px rgba(2, 8, 23, 0.52),
      0 20px 46px rgba(13, 148, 136, 0.16),
      inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }

  html.dark-mode #webmailModal .config-modal-header {
    background: #0e1a17 !important;
    border-bottom-color: rgba(13, 148, 136, 0.2) !important;
  }

  html.dark-mode #webmailModal .config-intro,
  html.dark-mode #webmailModal .config-steps,
  html.dark-mode #webmailModal .config-note,
  html.dark-mode #webmailModal .platform-screenshot-card,
  html.dark-mode #webmailModal .webmail-url-card {
    background: #11221e !important;
    border-color: rgba(13, 148, 136, 0.18) !important;
  }

  html.dark-mode #webmailModal .config-step {
    background: rgba(13, 148, 136, 0.08) !important;
    border-color: rgba(13, 148, 136, 0.15) !important;
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  #supportModal .config-modal-body {
    gap: 16px !important;
    padding: 22px !important;
  }

  #supportModal .support-hero,
  #supportModal .support-contact-section,
  #supportModal .support-services,
  #supportModal .config-steps,
  #supportModal .config-note {
    padding: 16px !important;
  }

  #supportModal .support-avatar img {
    width: 64px !important;
    height: 64px !important;
  }

  #supportModal .support-contact-card {
    min-height: 88px !important;
  }

  #supportModal .service-item {
    min-height: 84px !important;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  #supportModal .config-modal-body {
    grid-template-columns: minmax(320px, 0.85fr) minmax(460px, 1.15fr) !important;
  }

  #supportModal .support-contact-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #supportModal .support-contact-card.email-card {
    grid-column: 1 / -1;
  }
}

/* Developer modal premium redesign */
#devModal .futuristic-dev-box {
  width: min(720px, calc(100vw - 48px)) !important;
  max-width: 720px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.99), rgba(247,251,255,0.95)),
    radial-gradient(circle at 0% 0%, rgba(21,94,232,0.12), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(0,168,107,0.10), transparent 32%) !important;
  border: 2px solid rgba(21,94,232,0.24) !important;
  box-shadow:
    0 5px 0 #155ee8,
    0 34px 86px rgba(2,8,23,0.30),
    0 18px 44px rgba(21,94,232,0.16),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  position: relative;
}

#devModal .futuristic-dev-box::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #155ee8, rgba(21,94,232,0.36) 45%, transparent 78%) top left / 100% 5px no-repeat,
    linear-gradient(rgba(21,94,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,94,232,0.035) 1px, transparent 1px);
  background-size: 100% 5px, 30px 30px, 30px 30px;
  z-index: 0;
}

#devModal .dev-modal-content {
  position: relative;
  z-index: 1;
}

#devModal .modal-close {
  position: absolute !important;
  z-index: 3 !important;
  top: 18px !important;
  right: 18px !important;
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
}

#devModal .modal-close:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

#devModal .dev-banner-hero {
  padding: 32px !important;
  min-height: 170px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,0.16), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(34,197,94,0.18), transparent 30%),
    linear-gradient(145deg, #155ee8 0%, #0f56b3 54%, #008f5d 150%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

#devModal .dev-banner-glow {
  background:
    radial-gradient(circle, rgba(255,255,255,0.16), transparent 64%) !important;
  width: 260px !important;
  height: 260px !important;
}

#devModal .dev-avatar-showcase img {
  width: 92px !important;
  height: 92px !important;
  border-radius: 24px !important;
  border: 3px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,0.20);
}

#devModal .dev-avatar-border {
  border-radius: 28px !important;
  border-color: rgba(255,255,255,0.28) !important;
}

#devModal .dev-title-block h2 {
  font-size: 1.55rem !important;
  letter-spacing: -0.3px;
}

#devModal .dev-tagline {
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500;
}

#devModal .dev-stat-item {
  background: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 12px !important;
  font-weight: 700;
}

#devModal .dev-stat-item i {
  color: #bfdbfe !important;
}

#devModal .dev-body-section {
  padding: 28px 32px 26px !important;
  gap: 22px !important;
}

#devModal .dev-bio-card {
  border-radius: 22px !important;
  padding: 20px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(239,248,255,0.82)),
    radial-gradient(circle at 100% 0%, rgba(21,94,232,0.10), transparent 34%) !important;
  border: 1px solid rgba(21,94,232,0.18) !important;
  box-shadow:
    0 14px 34px rgba(15,23,42,0.07),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

#devModal .dev-bio-card h4,
#devModal .dev-skills-section h4 {
  color: #0f2f66 !important;
  font-size: 0.9rem !important;
}

#devModal .dev-bio-card h4 i,
#devModal .dev-skills-section h4 i {
  color: #155ee8 !important;
}

#devModal .dev-bio-card p {
  color: #475569 !important;
  font-weight: 500;
  font-size: 0.9rem !important;
}

#devModal .dev-skills-pills {
  gap: 10px !important;
}

#devModal .skill-pill {
  border-radius: 999px !important;
  padding: 8px 14px !important;
  background: rgba(21,94,232,0.10) !important;
  border: 1px solid rgba(21,94,232,0.30) !important;
  color: #155ee8 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(21,94,232,0.08);
}

#devModal .footer-socials {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
}

#devModal .social-link {
  justify-content: center;
  border-radius: 16px !important;
  padding: 13px 18px !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.07);
}

#devModal .fb-link {
  background: rgba(24,119,242,0.10) !important;
  border-color: rgba(24,119,242,0.28) !important;
}

#devModal .wa-link {
  background: rgba(37,211,102,0.12) !important;
  border-color: rgba(37,211,102,0.30) !important;
}

#devModal .footer-msg p {
  color: #64748b !important;
  font-weight: 600;
}

/* Company modal premium redesign */
#companyModal .company-modal-box {
  width: min(760px, calc(100vw - 48px)) !important;
  max-width: 760px !important;
  border-radius: 30px !important;
  padding: 34px 36px 28px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid rgba(21,94,232,0.22) !important;
  box-shadow:
    0 5px 0 #155ee8,
    0 34px 86px rgba(2,8,23,0.30),
    0 18px 44px rgba(21,94,232,0.14),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  overflow: hidden;
  position: relative;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#companyModal .company-modal-box::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #ef4444, #155ee8 42%, transparent 78%) top left / 100% 5px no-repeat,
    linear-gradient(rgba(21,94,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,94,232,0.035) 1px, transparent 1px);
  background-size: 100% 5px, 30px 30px, 30px 30px;
  z-index: 0;
}

#companyModal .company-modal-box > * {
  position: relative;
  z-index: 1;
}

#companyModal .modal-close {
  top: 18px !important;
  right: 18px !important;
  border-radius: 14px !important;
  background: rgba(21,94,232,0.08) !important;
  border-color: rgba(21,94,232,0.20) !important;
  color: #334155 !important;
}

#companyModal .modal-close:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

#companyModal .company-modal-header {
  justify-content: center !important;
  margin-bottom: 28px !important;
}

#companyModal .company-modal-logo {
  height: 82px !important;
  padding: 10px 18px;
  background: #ffffff;
  border-radius: 18px !important;
  border: 1px solid rgba(21,94,232,0.18);
  box-shadow:
    0 16px 34px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

#companyModal .company-modal-grid {
  gap: 22px !important;
}

#companyModal .company-info-card {
  border-radius: 24px !important;
  padding: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(248,251,255,0.84)),
    radial-gradient(circle at 100% 0%, rgba(21,94,232,0.08), transparent 34%) !important;
  border: 1px solid rgba(21,94,232,0.16) !important;
  box-shadow:
    0 16px 36px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

#companyModal .company-info-card:first-child {
  border-color: rgba(239,68,68,0.20) !important;
}

#companyModal .company-info-card:last-child {
  border-color: rgba(21,94,232,0.22) !important;
}

#companyModal .card-header-accent {
  height: 5px !important;
}

#companyModal .company-info-card h3 {
  color: #142033 !important;
  font-size: 1rem !important;
  padding-top: 12px !important;
}

#companyModal .company-info-card h3 i {
  color: #155ee8 !important;
}

#companyModal .company-info-card:first-child h3 i {
  color: #ef4444 !important;
}

#companyModal .info-list {
  gap: 11px !important;
}

#companyModal .info-item {
  color: #475569 !important;
  font-weight: 500;
  line-height: 1.45;
}

#companyModal .info-item i {
  color: #155ee8 !important;
  background: rgba(21,94,232,0.08);
  width: 28px !important;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -3px !important;
  flex: 0 0 28px;
}

#companyModal .company-info-card:first-child .info-item i {
  color: #ef4444 !important;
  background: rgba(239,68,68,0.08);
}

#companyModal .company-info-card a[href*="facebook"] {
  border-radius: 999px !important;
  background: rgba(24,119,242,0.12) !important;
  border: 1px solid rgba(24,119,242,0.26);
  box-shadow: 0 10px 22px rgba(24,119,242,0.10);
}

#companyModal .company-modal-footer {
  margin-top: 8px;
  padding-top: 20px !important;
  border-top: 1px solid rgba(21,94,232,0.14) !important;
}

#companyModal .company-modal-footer p {
  color: #64748b !important;
  font-size: 0.9rem;
  font-weight: 800;
}

/* Premium top command header */
:root {
  --navbar-height: 118px;
  --gov-bar-height: 50px;
}

.institutional-banner {
  height: var(--gov-bar-height) !important;
  padding: 8px 34px !important;
  position: relative !important;
  background-color: #0056b3 !important;
  background-image: linear-gradient(90deg, #003d80 0%, #0056b3 50%, #be123c 100%) !important;
  border-top: none !important;
  border-bottom: 3px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  filter: none !important;
  animation: none !important;
}

.institutional-banner::before {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.03) 20px,
    rgba(255,255,255,0.03) 40px
  ) !important;
  animation: none !important;
}

.institutional-banner::after {
  display: none !important;
}

.inst-flag {
  width: 48px !important;
  height: 32px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

.inst-republic {
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

.inst-company {
  color: rgba(255,255,255,0.82) !important;
  font-weight: 600 !important;
}

.inst-badge {
  padding: 7px 15px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.main-navbar {
  height: var(--navbar-height) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,251,255,0.92)),
    radial-gradient(circle at 8% 0%, rgba(21,94,232,0.10), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(225,29,72,0.06), transparent 34%) !important;
  border-bottom: 1px solid rgba(21,94,232,0.12) !important;
  box-shadow:
    0 16px 38px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.main-navbar::before {
  content: '';
  position: absolute;
  inset: 10px 22px 12px;
  border-radius: 24px;
  border: none !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.18));
  box-shadow: none !important;
  pointer-events: none;
}

.navbar-container {
  position: relative;
  z-index: 1;
  max-width: 1420px !important;
  padding: 8px 26px 10px !important;
  row-gap: 8px;
}

.navbar-brand {
  flex: 0 0 auto !important;
}

.brand-logo-ring {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  border-color: rgba(21,94,232,0.26) !important;
  box-shadow:
    0 12px 26px rgba(21,94,232,0.16),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.brand-name {
  font-size: 1.18rem !important;
  color: #475569 !important;
  letter-spacing: 0.2px !important;
}

.brand-name strong {
  color: #155ee8 !important;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.brand-system-name {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

html.dark-mode .brand-system-name {
  color: #7a91ad;
}

.navbar-actions {
  gap: 10px !important;
  flex: 1 1 auto !important;
}

.nav-search-wrap {
  min-width: 140px;
  max-width: 250px;
  width: 220px;
  height: 42px;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.84) !important;
  border: 1.5px solid rgba(21,94,232,0.24) !important;
  box-shadow:
    0 10px 24px rgba(15,23,42,0.07),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.nav-search-wrap:hover,
.nav-search-wrap:focus-within {
  border-color: #155ee8 !important;
  box-shadow:
    0 0 0 4px rgba(21,94,232,0.10),
    0 14px 30px rgba(21,94,232,0.12) !important;
}

.nav-search-wrap i {
  color: #155ee8 !important;
}

.nav-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(21,94,232,0.16) !important;
  color: #475569 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}

.nav-icon-btn:hover {
  background: rgba(21,94,232,0.10) !important;
  color: #155ee8 !important;
  border-color: rgba(21,94,232,0.30) !important;
  transform: translateY(-2px) !important;
}

.btn-login-gov {
  height: 44px;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #155ee8, #004ea8) !important;
  box-shadow:
    0 14px 28px rgba(21,94,232,0.28),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

.btn-login-gov:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 34px rgba(21,94,232,0.36),
    inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

.navbar-links {
  width: auto !important;
  max-width: calc(100% - 80px) !important;
  margin: 2px auto 0 !important;
  padding: 7px 14px !important;
  gap: 6px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(21,94,232,0.18) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.navbar-links:hover {
  border-color: rgba(21,94,232,0.30) !important;
  box-shadow:
    0 16px 34px rgba(21,94,232,0.10),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.nav-link {
  padding: 9px 15px !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  color: #526459 !important;
}

.nav-link:hover {
  background: rgba(21,94,232,0.08) !important;
  color: #155ee8 !important;
}

.nav-link.active {
  background: linear-gradient(135deg, #155ee8, #004ea8) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 22px rgba(21,94,232,0.30),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* Dashboard KPI cards premium finish */
.stats-row {
  gap: 16px !important;
  margin-top: -2px !important;
  margin-bottom: 26px !important;
}

.stat-card {
  min-height: 78px;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.18), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 32%);
}

.stat-card > * {
  position: relative;
  z-index: 1;
}

.stat-card.stat-green,
.stat-card.stat-blue,
.stat-card.stat-red,
.stat-card.stat-amber,
.stat-card.stat-purple {
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow:
    0 4px 0 rgba(15,23,42,0.28),
    0 18px 34px rgba(15,23,42,0.13),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.stat-card.stat-green {
  background: linear-gradient(135deg, #197543 0%, #0f5a32 100%) !important;
}

.stat-card.stat-blue {
  background: linear-gradient(135deg, #3167ef 0%, #174bd2 100%) !important;
}

.stat-card.stat-red {
  background: linear-gradient(135deg, #dc2632 0%, #a9141d 100%) !important;
}

.stat-card.stat-amber {
  background: linear-gradient(135deg, #20a7bd 0%, #0f7d93 100%) !important;
}

.stat-card.stat-purple {
  background: linear-gradient(135deg, #8238ee 0%, #5f20c8 100%) !important;
}

.stat-card.stat-green:hover,
.stat-card.stat-blue:hover,
.stat-card.stat-red:hover,
.stat-card.stat-amber:hover,
.stat-card.stat-purple:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow:
    0 6px 0 rgba(15,23,42,0.30),
    0 24px 44px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.stat-card-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 10px 20px rgba(15,23,42,0.12);
}

.stat-card-label {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.60rem !important;
  font-weight: 850 !important;
}

.stat-card-value {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  letter-spacing: -0.4px;
}

/* Support modal refined landscape layout */
@media (min-width: 900px) {
  #supportModal .config-modal-body {
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr) !important;
    grid-template-areas:
      "hero contacts"
      "expertise faq"
      "note note" !important;
    align-items: stretch !important;
  }

  #supportModal .support-hero {
    min-height: auto !important;
    justify-content: flex-start !important;
    padding: 24px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 36%),
      radial-gradient(circle at 0% 100%, rgba(34,197,94,0.18), transparent 34%),
      linear-gradient(145deg, #155ee8 0%, #0f56b3 54%, #008f5d 150%) !important;
  }

  #supportModal .support-profile-card {
    align-items: center !important;
    margin-bottom: 18px !important;
  }

  #supportModal .support-avatar img {
    width: 74px !important;
    height: 74px !important;
    border-radius: 18px !important;
  }

  #supportModal .support-bio {
    color: rgba(255,255,255,0.88) !important;
    font-weight: 500;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    padding: 14px;
  }

  #supportModal .support-contact-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  #supportModal .support-contact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.85fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #supportModal .support-contact-card {
    min-height: 104px !important;
    padding: 15px !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #supportModal .contact-card-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  #supportModal .contact-card-info {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #supportModal .contact-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #supportModal .contact-card-info strong {
    font-size: 0.8rem !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  #supportModal .contact-arrow {
    flex: 0 0 auto !important;
  }

  #supportModal .support-services,
  #supportModal .config-steps {
    min-height: 0 !important;
  }

  #supportModal .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #supportModal .service-item {
    min-height: 98px !important;
    padding: 14px !important;
  }

  #supportModal .config-steps-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #supportModal .config-step {
    padding: 11px 12px !important;
  }

  #supportModal .config-note {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    background:
      linear-gradient(135deg, rgba(255,251,235,0.96), rgba(255,255,255,0.88)) !important;
    border-color: rgba(245,158,11,0.28) !important;
  }
}

/* Premium system background refresh */
body {
  background:
    radial-gradient(circle at 6% 24%, rgba(86, 156, 255, 0.20), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(0, 168, 107, 0.16), transparent 30%),
    radial-gradient(circle at 76% 82%, rgba(251, 191, 36, 0.13), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #eef7ff 38%, #f8fffb 72%, #f6fbff 100%) !important;
}

body::before {
  background:
    linear-gradient(rgba(21, 94, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 232, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.70), transparent 46%) !important;
  background-size: 34px 34px, 34px 34px, 100% 100% !important;
  opacity: 0.82 !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 20%, rgba(21,94,232,0.065) 20% 21%, transparent 21% 62%, rgba(0,168,107,0.055) 62% 63%, transparent 63%),
    radial-gradient(ellipse at 38% 48%, rgba(255,255,255,0.78), transparent 52%);
  opacity: 0.92;
}

.app-bg-decor {
  background:
    radial-gradient(circle at 0% 44%, rgba(21, 94, 232, 0.12), transparent 30%),
    radial-gradient(circle at 100% 34%, rgba(0, 168, 107, 0.10), transparent 28%),
    radial-gradient(circle at 52% 100%, rgba(147, 51, 234, 0.08), transparent 34%);
}

.bg-blob {
  opacity: 0.18 !important;
  filter: blur(110px) saturate(1.15) !important;
}

.bg-blob-1 {
  background: #5aa7ff !important;
}

.bg-blob-2 {
  background: #30d49a !important;
}

.bg-blob-3 {
  background: #f6c65b !important;
}

.page-content {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 36%, rgba(255,255,255,0.18));
}

html.dark-mode body {
  background:
    radial-gradient(circle at 6% 24%, rgba(21, 94, 232, 0.20), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(0, 168, 107, 0.12), transparent 30%),
    radial-gradient(circle at 76% 82%, rgba(99, 102, 241, 0.12), transparent 32%),
    linear-gradient(180deg, #06111f 0%, #081727 46%, #071612 100%) !important;
}

html.dark-mode body::before {
  background:
    linear-gradient(rgba(125, 170, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 170, 255, 0.045) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  opacity: 0.34 !important;
}

/* Dark mode removed: keep any stale theme toggle hidden */
#themeToggle {
  display: none !important;
}

/* Professional services modal premium redesign */
#serviceSelectionModal .service-selection-content {
  position: relative !important;
  width: min(900px, calc(100vw - 36px)) !important;
  max-width: 900px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(148,178,224,0.55) !important;
  box-shadow:
    0 30px 80px rgba(15,23,42,0.24),
    0 1px 0 rgba(255,255,255,0.95) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#serviceSelectionModal .service-selection-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(21,94,232,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,94,232,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.72), transparent 86%);
}

#serviceSelectionModal .service-selection-content > * {
  position: relative;
  z-index: 1;
}

#serviceSelectionModal .modal-header {
  margin: 0 0 22px !important;
  padding: 6px 2px 18px !important;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

#serviceSelectionModal .modal-header > div:first-child > div:first-child {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #155ee8, #06b6d4) !important;
  box-shadow:
    0 16px 30px rgba(21,94,232,0.24),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

#serviceSelectionModal .modal-header h2 {
  color: #0f1f33 !important;
  font-size: 1.38rem !important;
}

#serviceSelectionModal .modal-header p {
  color: #64748b !important;
  font-weight: 650 !important;
  opacity: 1 !important;
}

#serviceSelectionModal .close-modal {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(239,246,255,0.86) !important;
  border: 1px solid rgba(96,165,250,0.34) !important;
  color: #475569 !important;
  font-size: 1.25rem !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.07);
}

#serviceSelectionModal .close-modal:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

#serviceSelectionModal .service-selection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 0 !important;
}

#serviceSelectionModal .service-card {
  min-height: 236px;
  align-items: flex-start !important;
  justify-content: space-between;
  text-align: left !important;
  padding: 22px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(var(--service-rgb),0.36) !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.96), rgba(255,255,255,0.72)),
    radial-gradient(circle at 100% 0%, rgba(var(--service-rgb),0.20), transparent 42%),
    linear-gradient(180deg, rgba(var(--service-rgb),0.06), rgba(var(--service-rgb),0.13)) !important;
  box-shadow:
    0 5px 0 rgba(var(--service-rgb),0.86),
    0 20px 46px rgba(var(--service-rgb),0.16),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
  overflow: hidden;
}

#serviceSelectionModal .service-card::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 128px;
  height: 128px;
  opacity: 0.11;
  background: var(--service-illustration);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-7deg);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#serviceSelectionModal .service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.34), transparent 44%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

#serviceSelectionModal .service-card:hover {
  transform: translateY(-7px) scale(1.025) !important;
  border-color: rgba(var(--service-rgb),0.70) !important;
  box-shadow:
    0 7px 0 rgba(var(--service-rgb),0.95),
    0 30px 58px rgba(var(--service-rgb),0.24),
    inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

#serviceSelectionModal .service-card:hover::before {
  opacity: 0.18;
  transform: rotate(-3deg) scale(1.08);
}

#serviceSelectionModal .service-card:active {
  transform: translateY(-2px) scale(0.985) !important;
  box-shadow:
    0 3px 0 rgba(var(--service-rgb),0.90),
    0 18px 34px rgba(var(--service-rgb),0.20) !important;
}

#serviceSelectionModal .card-request {
  --service-accent: #155ee8;
  --service-rgb: 21,94,232;
  --service-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23155ee8' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='38' cy='32' r='16'/%3E%3Cpath d='M14 78c5-16 16-24 30-24s25 8 30 24'/%3E%3Cpath d='M70 22v24M58 34h24'/%3E%3C/g%3E%3C/svg%3E");
}

#serviceSelectionModal .card-correction {
  --service-accent: #7c3aed;
  --service-rgb: 124,58,237;
  --service-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%237c3aed' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='30' r='15'/%3E%3Cpath d='M12 76c5-15 16-23 30-23'/%3E%3Cpath d='M55 72l9-2 20-20-7-7-20 20-2 9z'/%3E%3Cpath d='M72 38l8 8'/%3E%3C/g%3E%3C/svg%3E");
}

#serviceSelectionModal .card-deactivation {
  --service-accent: #dc2626;
  --service-rgb: 220,38,38;
  --service-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23dc2626' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='39' cy='32' r='15'/%3E%3Cpath d='M14 78c5-15 16-23 30-23 7 0 13 2 18 6'/%3E%3Cpath d='M64 58l20 20M84 58L64 78'/%3E%3Cpath d='M15 14l66 66'/%3E%3C/g%3E%3C/svg%3E");
}

#serviceSelectionModal .service-icon-wrapper {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 22px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(var(--service-rgb),0.96), rgba(var(--service-rgb),0.78)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 30px rgba(var(--service-rgb),0.32),
    inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

#serviceSelectionModal .service-card:hover .service-icon-wrapper {
  transform: translateY(-2px) rotate(-3deg) scale(1.08) !important;
}

#serviceSelectionModal .service-badge {
  top: 20px !important;
  right: 20px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(var(--service-rgb),0.10) !important;
  border: 1px solid rgba(var(--service-rgb),0.26) !important;
  color: var(--service-accent) !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.6px !important;
}

#serviceSelectionModal .service-card h3 {
  max-width: 190px;
  margin: 0 0 8px !important;
  color: #142033 !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px !important;
  line-height: 1.18 !important;
}

#serviceSelectionModal .service-card p {
  margin: 0 !important;
  color: #516178 !important;
  font-size: 0.82rem !important;
  line-height: 1.48 !important;
  font-weight: 600 !important;
}

#serviceSelectionModal .service-card-arrow {
  width: 38px;
  height: 38px;
  margin-top: 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--service-accent);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(var(--service-rgb),0.24);
  box-shadow: 0 12px 22px rgba(var(--service-rgb),0.12);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

#serviceSelectionModal .service-card:hover .service-card-arrow {
  transform: translateX(6px);
  background: var(--service-accent);
  color: #ffffff;
}

@media (max-width: 820px) {
  #serviceSelectionModal .service-selection-content {
    width: min(460px, calc(100vw - 24px)) !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }

  #serviceSelectionModal .modal-header {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #serviceSelectionModal .service-selection-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #serviceSelectionModal .service-card {
    min-height: 172px;
    padding: 18px !important;
  }
}

/* More vivid system background */
body {
  background:
    radial-gradient(circle at 0% 30%, rgba(37, 99, 235, 0.34), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(139, 92, 246, 0.21), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(16, 185, 129, 0.27), transparent 30%),
    radial-gradient(circle at 72% 76%, rgba(245, 158, 11, 0.25), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #eaf4ff 36%, #f7fff9 72%, #fffaf0 100%) !important;
}

body::before {
  background:
    linear-gradient(rgba(21, 94, 232, 0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 232, 0.050) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.78), transparent 48%),
    linear-gradient(135deg, rgba(37,99,235,0.08), transparent 30%, rgba(16,185,129,0.06) 64%, transparent 82%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  opacity: 0.94 !important;
}

body::after {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(37,99,235,0.115) 18% 19%, transparent 19% 58%, rgba(16,185,129,0.090) 58% 59%, transparent 59%),
    radial-gradient(ellipse at 38% 44%, rgba(255,255,255,0.84), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(245,158,11,0.16), transparent 38%) !important;
  opacity: 1 !important;
}


.bg-blob {
  opacity: 0.24 !important;
}

.page-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.22)),
    radial-gradient(circle at 8% 74%, rgba(37,99,235,0.07), transparent 24%),
    radial-gradient(circle at 92% 58%, rgba(16,185,129,0.06), transparent 26%) !important;
}

/* Distinct institutional top bar color - Modern Prestigious Harmonious Blend */
.institutional-banner {
  background:
    radial-gradient(circle at 12% 50%, rgba(2, 132, 199, 0.30), transparent 45%),
    radial-gradient(circle at 88% 50%, rgba(225, 29, 72, 0.38), transparent 45%),
    linear-gradient(98deg, #071a36 0%, #0d2f66 22%, #1e40af 48%, #0369a1 68%, #e11d48 88%, #be123c 100%) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 22px rgba(7, 26, 54, 0.28) !important;
}

.institutional-banner::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent),
    repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255, 255, 255, 0.035) 16px, rgba(255, 255, 255, 0.035) 32px) !important;
}

.inst-republic {
  color: #ffffff !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.30) !important;
}

.inst-company {
  color: rgba(226, 232, 240, 0.88) !important;
}

.inst-badge {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(251,191,36,0.28) !important;
}

/* Professional request/correction/deactivation modals redesign */
#requestModal {
  --req-accent: #06a6d4;
  --req-accent-2: #155ee8;
  --req-rgb: 6,166,212;
}

#correctionModal {
  --req-accent: #7c3aed;
  --req-accent-2: #a855f7;
  --req-rgb: 124,58,237;
}

#deactivationModal {
  --req-accent: #dc2626;
  --req-accent-2: #f43f5e;
  --req-rgb: 220,38,38;
}

#requestModal,
#correctionModal,
#deactivationModal {
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--req-rgb),0.18), transparent 34%),
    rgba(15, 23, 42, 0.42) !important;
}

#requestModal .request-modal-content,
#correctionModal .request-modal-content,
#deactivationModal .request-modal-content {
  position: relative;
  width: min(980px, calc(100vw - 36px)) !important;
  max-width: 980px !important;
  border-radius: 30px !important;
  overflow: hidden;
  max-height: min(780px, calc(100vh - 48px)) !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,255,0.94)),
    radial-gradient(circle at 8% 6%, rgba(var(--req-rgb),0.13), transparent 36%),
    radial-gradient(circle at 94% 18%, rgba(21,94,232,0.09), transparent 34%) !important;
  border: 1px solid rgba(var(--req-rgb),0.28) !important;
  box-shadow:
    0 32px 86px rgba(15,23,42,0.28),
    0 7px 0 rgba(var(--req-rgb),0.78),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

#requestModal .request-modal-content::before,
#correctionModal .request-modal-content::before,
#deactivationModal .request-modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--req-rgb),0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--req-rgb),0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.60), transparent 92%);
}

#requestModal .request-modal-content > *,
#correctionModal .request-modal-content > *,
#deactivationModal .request-modal-content > * {
  position: relative;
  z-index: 1;
}

#requestModal .request-modal-content .modal-header,
#correctionModal .request-modal-content .modal-header,
#deactivationModal .request-modal-content .modal-header {
  min-height: 112px;
  padding: 24px 32px !important;
  border-bottom: 1px solid rgba(255,255,255,0.22) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(135deg, var(--req-accent-2), var(--req-accent)) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.18);
}

#requestModal .modal-title-wrap,
#correctionModal .modal-title-wrap,
#deactivationModal .modal-title-wrap {
  gap: 16px !important;
}

#requestModal .request-modal-content .modal-title-icon,
#correctionModal .request-modal-content .modal-title-icon,
#deactivationModal .request-modal-content .modal-title-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 16px 30px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

#requestModal .request-modal-content h2,
#correctionModal .request-modal-content h2,
#deactivationModal .request-modal-content h2 {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 1.48rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.5px !important;
}

#requestModal .request-modal-content .modal-header p,
#correctionModal .request-modal-content .modal-header p,
#deactivationModal .request-modal-content .modal-header p {
  color: rgba(255,255,255,0.90) !important;
  font-size: 0.88rem !important;
  font-weight: 650 !important;
}

#requestModal .close-modal,
#correctionModal .close-modal,
#deactivationModal .close-modal {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(15,23,42,0.14);
}

#requestModal .close-modal:hover,
#correctionModal .close-modal:hover,
#deactivationModal .close-modal:hover {
  background: rgba(255,255,255,0.94) !important;
  color: var(--req-accent) !important;
  transform: rotate(90deg) scale(1.05);
}

#requestModal .request-form,
#correctionModal .request-form,
#deactivationModal .request-form {
  padding: 34px 40px 32px !important;
  overflow-y: auto !important;
}

#requestModal .request-form-grid,
#correctionModal .request-form-grid,
#deactivationModal .request-form-grid {
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 26px !important;
  margin-bottom: 24px !important;
}

#requestModal .request-form-main,
#correctionModal .request-form-main,
#deactivationModal .request-form-main,
#requestModal .request-form-preview,
#correctionModal .request-form-preview,
#deactivationModal .request-form-preview {
  border-radius: 24px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(var(--req-rgb),0.18);
  box-shadow:
    0 18px 44px rgba(15,23,42,0.07),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

#requestModal .request-form-main,
#correctionModal .request-form-main,
#deactivationModal .request-form-main {
  padding: 22px;
}

#requestModal .request-form-preview,
#correctionModal .request-form-preview,
#deactivationModal .request-form-preview {
  padding: 18px;
  display: flex;
  align-items: stretch;
}

#requestModal .request-form label,
#correctionModal .request-form label,
#deactivationModal .request-form label {
  color: #334155 !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.55px !important;
}

#requestModal .request-form label i,
#correctionModal .request-form label i,
#deactivationModal .request-form label i {
  color: var(--req-accent) !important;
}

#requestModal .request-form input,
#requestModal .request-form select,
#requestModal .request-form textarea,
#correctionModal .request-form input,
#correctionModal .request-form select,
#correctionModal .request-form textarea,
#deactivationModal .request-form input,
#deactivationModal .request-form select,
#deactivationModal .request-form textarea {
  min-height: 50px;
  padding: 13px 16px !important;
  border-radius: 15px !important;
  border: 1.5px solid rgba(var(--req-rgb),0.18) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.86)) !important;
  color: #172033 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 10px 24px rgba(15,23,42,0.04);
}

#requestModal .request-form textarea,
#correctionModal .request-form textarea,
#deactivationModal .request-form textarea {
  min-height: 108px !important;
  resize: vertical;
}

#requestModal .request-form input:focus,
#requestModal .request-form select:focus,
#requestModal .request-form textarea:focus,
#correctionModal .request-form input:focus,
#correctionModal .request-form select:focus,
#correctionModal .request-form textarea:focus,
#deactivationModal .request-form input:focus,
#deactivationModal .request-form select:focus,
#deactivationModal .request-form textarea:focus {
  border-color: rgba(var(--req-rgb),0.68) !important;
  box-shadow:
    0 0 0 4px rgba(var(--req-rgb),0.12),
    0 14px 28px rgba(var(--req-rgb),0.12) !important;
  transform: translateY(-1px);
}

#requestModal .preview-box,
#correctionModal .preview-box,
#deactivationModal .preview-box {
  width: 100%;
  min-height: 100%;
  padding: 24px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(var(--req-rgb),0.30) !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.94), rgba(255,255,255,0.68)),
    radial-gradient(circle at 100% 0%, rgba(var(--req-rgb),0.22), transparent 44%),
    linear-gradient(180deg, rgba(var(--req-rgb),0.06), rgba(var(--req-rgb),0.12)) !important;
  box-shadow:
    0 5px 0 rgba(var(--req-rgb),0.66),
    0 20px 38px rgba(var(--req-rgb),0.13),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  overflow: hidden;
}

#requestModal .preview-box::after,
#correctionModal .preview-box::after,
#deactivationModal .preview-box::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 150px;
  height: 150px;
  border-radius: 42px;
  background: rgba(var(--req-rgb),0.09);
  transform: rotate(12deg);
}

#requestModal .preview-header,
#correctionModal .preview-header,
#deactivationModal .preview-header {
  display: inline-flex;
  align-self: center;
  margin: 0 auto 18px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(var(--req-rgb),0.12) !important;
  color: var(--req-accent) !important;
  border: 1px solid rgba(var(--req-rgb),0.18);
  letter-spacing: 1.3px !important;
}

#requestModal .generated-email-wrap {
  padding: 18px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(var(--req-rgb),0.20) !important;
  box-shadow:
    0 16px 30px rgba(var(--req-rgb),0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

#requestModal #generatedEmailDisplay {
  background: linear-gradient(90deg, var(--req-accent-2), var(--req-accent));
  -webkit-background-clip: text;
  background-clip: text;
}

#requestModal .email-badge {
  background: linear-gradient(135deg, var(--req-accent-2), var(--req-accent)) !important;
  box-shadow: 0 10px 20px rgba(var(--req-rgb),0.24) !important;
}

#requestModal .preview-note,
#correctionModal .preview-box > div:not(.preview-header),
#deactivationModal .preview-box > div:not(.preview-header) {
  position: relative;
  z-index: 1;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(var(--req-rgb),0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

#correctionModal .preview-box > div:not(.preview-header),
#deactivationModal .preview-box > div:not(.preview-header) {
  color: #475569 !important;
}

#requestModal .request-form-footer,
#correctionModal .request-form-footer,
#deactivationModal .request-form-footer {
  padding: 22px 4px 0 !important;
  border-top: 1px solid rgba(var(--req-rgb),0.16) !important;
}

#requestModal .arabic-disclaimer,
#correctionModal .arabic-disclaimer,
#deactivationModal .arabic-disclaimer {
  color: #718096 !important;
  font-weight: 650 !important;
}

#requestModal .btn-request-submit,
#correctionModal .btn-request-submit,
#deactivationModal .btn-request-submit {
  min-width: 288px;
  justify-content: center;
  padding: 15px 28px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--req-accent-2), var(--req-accent)) !important;
  box-shadow:
    0 16px 32px rgba(var(--req-rgb),0.30),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

#requestModal .btn-request-submit:hover,
#correctionModal .btn-request-submit:hover,
#deactivationModal .btn-request-submit:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow:
    0 22px 40px rgba(var(--req-rgb),0.38),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

/* Notifications center premium redesign */
.notif-wrapper {
  position: relative;
}

.notif-wrapper .nav-icon-btn {
  border-color: rgba(21,94,232,0.20) !important;
}

.notif-wrapper .nav-icon-btn:hover,
.notif-wrapper .nav-icon-btn[aria-expanded="true"] {
  background: linear-gradient(145deg, #eef6ff, #ffffff) !important;
  box-shadow: 0 14px 28px rgba(21,94,232,0.14) !important;
}

.notif-badge {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  top: -4px !important;
  right: -4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ff4d5f, #dc2626) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 18px rgba(220,38,38,0.34) !important;
}

.notif-dropdown {
  width: 380px !important;
  right: -18px !important;
  top: calc(100% + 18px) !important;
  padding: 12px !important;
  border-radius: 26px !important;
  overflow: visible !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(240,247,255,0.94)),
    radial-gradient(circle at 8% 0%, rgba(21,94,232,0.13), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(45,212,191,0.10), transparent 32%) !important;
  border: 1px solid rgba(148,178,224,0.58) !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,0.22),
    0 7px 0 rgba(21,94,232,0.16),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
}

.notif-dropdown::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 36px;
  width: 18px;
  height: 18px;
  border-left: 1px solid rgba(148,178,224,0.45);
  border-top: 1px solid rgba(148,178,224,0.45);
  background: rgba(255,255,255,0.96);
  transform: rotate(45deg);
  border-radius: 5px 0 0;
}

.notif-dropdown::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(21,94,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,94,232,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 90%);
}

.notif-dropdown > * {
  position: relative;
  z-index: 1;
}

.notif-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 12px 16px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(148,163,184,0.16) !important;
  gap: 8px !important;
}

.notif-header h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  flex: 1 1 0;
  color: #10235a !important;
  font-size: 0.94rem !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: -0.25px;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.notif-header h3::before {
  content: "\f0e0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  box-sizing: border-box;
  margin-right: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.96rem;
  color: #ffffff;
  background:
    linear-gradient(145deg, #155ee8, #06b6d4),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.42), transparent 28%);
  box-shadow:
    0 12px 24px rgba(21,94,232,0.22),
    inset 0 1px 0 rgba(255,255,255,0.34);
  vertical-align: middle;
}

.mark-read-all {
  flex: 0 0 auto;
  max-width: 76px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(21,94,232,0.08);
  color: #155ee8 !important;
  border: 1px solid rgba(21,94,232,0.14);
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mark-read-all:hover {
  background: #155ee8 !important;
  color: #ffffff !important;
}

.notif-list {
  max-height: 430px !important;
  padding: 12px 2px 2px !important;
  display: grid;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(21,94,232,0.32) transparent;
}

.notif-list::-webkit-scrollbar {
  width: 6px;
}

.notif-list::-webkit-scrollbar-thumb {
  background: rgba(21,94,232,0.28);
  border-radius: 999px;
}

.notif-item {
  --notif-accent: #155ee8;
  --notif-rgb: 21,94,232;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  min-height: 118px;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--notif-rgb),0.18) !important;
  border-left: 0 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74)),
    radial-gradient(circle at 100% 0%, rgba(var(--notif-rgb),0.14), transparent 42%),
    linear-gradient(180deg, rgba(var(--notif-rgb),0.04), rgba(var(--notif-rgb),0.08)) !important;
  box-shadow:
    0 4px 0 rgba(var(--notif-rgb),0.56),
    0 16px 34px rgba(var(--notif-rgb),0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.notif-item.priority-info {
  --notif-accent: #155ee8;
  --notif-rgb: 21,94,232;
}

.notif-item.priority-warning {
  --notif-accent: #f59e0b;
  --notif-rgb: 245,158,11;
}

.notif-item.priority-critical {
  --notif-accent: #dc2626;
  --notif-rgb: 220,38,38;
}

.notif-item.read {
  opacity: 0.68;
  filter: saturate(0.82);
}

.notif-item:hover {
  transform: translateY(-3px) scale(1.01) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,1), rgba(255,255,255,0.82)),
    radial-gradient(circle at 100% 0%, rgba(var(--notif-rgb),0.20), transparent 42%) !important;
  box-shadow:
    0 6px 0 rgba(var(--notif-rgb),0.72),
    0 24px 44px rgba(var(--notif-rgb),0.18),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

.notif-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(145deg, var(--notif-accent), rgba(var(--notif-rgb),0.76));
  box-shadow:
    0 12px 24px rgba(var(--notif-rgb),0.28),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

.notif-body {
  min-width: 0;
}

.notif-title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.notif-title {
  color: #13251d !important;
  font-size: 0.92rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.notif-time {
  color: var(--notif-accent) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
}

.notif-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  color: #526173 !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

.notif-empty {
  margin: 8px 0 0;
  padding: 34px 20px !important;
  border-radius: 20px;
  background: rgba(255,255,255,0.62);
  border: 1px dashed rgba(21,94,232,0.22);
}

.notif-empty i {
  color: #155ee8;
  opacity: 0.34 !important;
}

#notifDetailModal {
  --notif-detail-accent: #155ee8;
  --notif-detail-rgb: 21, 94, 232;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--notif-detail-rgb), 0.18), transparent 34%),
    rgba(15, 23, 42, 0.55) !important;
  overflow-y: auto !important;
  padding: 24px 16px !important;
  align-items: center !important;
  justify-content: center !important;
}

#notifDetailModal.notif-priority-warning {
  --notif-detail-accent: #f59e0b;
  --notif-detail-rgb: 245, 158, 11;
}

#notifDetailModal.notif-priority-critical {
  --notif-detail-accent: #dc2626;
  --notif-detail-rgb: 220, 38, 38;
}

#notifDetailModal .admin-modal-split {
  width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important;
  max-height: min(88vh, 700px) !important;
  height: auto !important;
  margin: auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95)),
    radial-gradient(circle at 92% 0%, rgba(var(--notif-detail-rgb), 0.12), transparent 32%) !important;
  border: 1px solid rgba(var(--notif-detail-rgb), 0.26) !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.28),
    0 6px 0 rgba(var(--notif-detail-rgb), 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#notifDetailModal .modal-split-container {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#notifDetailModal #notifDetailAccent {
  width: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.20), transparent 36%),
    linear-gradient(165deg, rgba(var(--notif-detail-rgb), 0.98), rgba(var(--notif-detail-rgb), 0.74)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.20);
}

#notifDetailModal #notifDetailAccent .side-content {
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

#notifDetailModal #notifDetailIconBox {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

#notifDetailModal #notifPriorityLabel {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#notifDetailModal .modal-form-area {
  padding: 34px 38px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background:
    linear-gradient(rgba(var(--notif-detail-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--notif-detail-rgb), 0.035) 1px, transparent 1px),
    transparent;
  background-size: 28px 28px;
}

#notifDetailModal .admin-modal-header {
  padding-right: 50px;
  flex-shrink: 0 !important;
  margin-bottom: 18px !important;
  text-align: left !important;
}

#notifDetailModal #notifDetailTitle {
  color: #0f172a !important;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
  margin: 0 0 8px 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

#notifDetailModal #notifDetailDate {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

#notifDetailModal .notif-detail-content {
  flex: 1 1 auto !important;
  min-height: 100px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 24px 26px !important;
  border-radius: 20px !important;
  color: #334155 !important;
  font-size: 0.98rem !important;
  line-height: 1.8 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  border: 1.5px solid rgba(var(--notif-detail-rgb), 0.22) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.90)),
    radial-gradient(circle at 100% 0%, rgba(var(--notif-detail-rgb), 0.08), transparent 42%) !important;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--notif-detail-rgb), 0.4) transparent !important;
}

#notifDetailModal .notif-detail-content::-webkit-scrollbar {
  width: 6px !important;
}

#notifDetailModal .notif-detail-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 10px !important;
  margin: 6px 0 !important;
}

#notifDetailModal .notif-detail-content::-webkit-scrollbar-thumb {
  background: rgba(var(--notif-detail-rgb), 0.35) !important;
  border-radius: 10px !important;
}

#notifDetailModal .notif-detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--notif-detail-rgb), 0.65) !important;
}

#notifDetailModal .notif-detail-actions {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

#notifDetailModal .modal-close-modern {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(var(--notif-detail-rgb), 0.10) !important;
  color: var(--notif-detail-accent) !important;
  border: 1px solid rgba(var(--notif-detail-rgb), 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 5 !important;
}

#notifDetailModal .modal-close-modern:hover {
  background: var(--notif-detail-accent) !important;
  color: #ffffff !important;
  transform: rotate(90deg);
}

#notifDetailModal .btn-confirm-success {
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 36px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--notif-detail-accent), rgba(var(--notif-detail-rgb), 0.82)) !important;
  box-shadow:
    0 12px 24px rgba(var(--notif-detail-rgb), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#notifDetailModal .btn-confirm-success:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(var(--notif-detail-rgb), 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 820px) {
  .notif-dropdown {
    width: min(360px, calc(100vw - 22px)) !important;
    right: -72px !important;
  }

  #notifDetailModal {
    padding: 12px !important;
  }

  #notifDetailModal .admin-modal-split {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 22px !important;
  }

  #notifDetailModal .modal-split-container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    overflow-y: auto !important;
  }

  #notifDetailModal #notifDetailAccent {
    min-height: auto !important;
    padding: 18px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  }

  #notifDetailModal #notifDetailAccent .side-content {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  #notifDetailModal #notifDetailIconBox {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.15rem !important;
  }

  #notifDetailModal #notifDetailAccent h3 {
    font-size: 1rem !important;
    margin: 0 !important;
  }

  #notifDetailModal .modal-form-area {
    padding: 20px 18px 18px !important;
    overflow: visible !important;
  }

  #notifDetailModal .admin-modal-header {
    padding-right: 42px !important;
    margin-bottom: 14px !important;
  }

  #notifDetailModal #notifDetailTitle {
    font-size: 1.25rem !important;
  }

  #notifDetailModal .notif-detail-content {
    max-height: 280px !important;
    padding: 18px !important;
    font-size: 0.92rem !important;
    border-radius: 16px !important;
  }

  #notifDetailModal .notif-detail-actions {
    margin-top: 16px !important;
  }

  #notifDetailModal .btn-confirm-success {
    width: 100% !important;
    padding: 12px !important;
  }
}

@media (max-width: 900px) {
  #requestModal .request-modal-content,
  #correctionModal .request-modal-content,
  #deactivationModal .request-modal-content {
    width: min(560px, calc(100vw - 22px)) !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  #requestModal .request-form,
  #correctionModal .request-form,
  #deactivationModal .request-form {
    padding: 20px !important;
  }

  #requestModal .request-form-grid,
  #correctionModal .request-form-grid,
  #deactivationModal .request-form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #requestModal .request-form-footer,
  #correctionModal .request-form-footer,
  #deactivationModal .request-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #requestModal .btn-request-submit,
  #correctionModal .btn-request-submit,
  #deactivationModal .btn-request-submit {
    width: 100%;
    min-width: 0;
  }
}

/* Hero cleanup: remove the workflow card from the banner. */
.hero-flow-panel {
  display: none !important;
}

.hero-status-strip {
  display: none !important;
}

.hero-content .hero-badge {
  width: min(575px, 100%) !important;
  min-height: 32px !important;
  justify-content: flex-start !important;
  padding: 8px 16px !important;
  gap: 8px !important;
}

.hero-badge-text {
  display: block;
  min-width: 0;
  font-size: 0.66rem;
  letter-spacing: 0.35px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero medium-window fix: keeps the banner clean when desktop Chrome is resized. */
@media (min-width: 769px) and (max-width: 1180px) {
  .hero-section {
    min-height: auto !important;
    padding: 30px 24px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    overflow: hidden !important;
  }

  .hero-section::before {
    inset: 14px 18px 18px !important;
    border-radius: 28px !important;
  }

  .hero-content {
    width: min(720px, calc(100% - 26px)) !important;
    max-width: 720px !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 42px 46px !important;
    display: block !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .hero-email-decor {
    opacity: 0.34;
  }

  .decor-mail-card-1,
  .decor-mail-card-2,
  .decor-route-1,
  .decor-center-chip,
  .decor-sync-ring {
    display: none;
  }

  .decor-envelope-outline {
    left: 62%;
    top: 62%;
    width: 190px;
    height: 116px;
    opacity: 0.16;
  }

  .decor-mail-card-3 {
    left: auto;
    right: 28px;
    bottom: 28px;
  }

  .decor-at {
    right: 22px;
    bottom: 12px;
    font-size: 7rem;
  }

  .hero-card-brand,
  .hero-card-details,
  .hero-status-strip {
    display: none !important;
  }

  .hero-content .hero-badge {
    margin-bottom: 22px !important;
  }

  .hero-content .hero-title {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 5vw, 3.25rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
    letter-spacing: 0 !important;
  }

  .hero-content .hero-title-sub {
    font-size: clamp(2rem, 4.4vw, 2.7rem) !important;
  }

  .hero-content .hero-desc {
    max-width: 620px !important;
    margin-bottom: 28px !important;
  }

  .hero-content .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .hero-content .btn-hero-primary,
  .hero-content .btn-hero-outline {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .ai-robot-wrap {
    position: static !important;
    transform: none !important;
    width: min(620px, calc(100% - 26px)) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    filter: none !important;
  }
  
  .ai-robot-svg {
    display: block !important;
  }

  .ai-robot-svg {
    width: clamp(150px, 22vw, 210px) !important;
    max-width: 36% !important;
    flex: 0 0 auto !important;
  }

  .robot-date-badge {
    width: min(320px, 100%) !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 769px) and (max-width: 860px) {
  .hero-content {
    padding: 34px 30px !important;
  }

  .hero-content .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .ai-robot-svg {
    display: block !important;
    width: 160px !important;
  }

  .robot-date-badge {
    width: min(360px, calc(100vw - 54px)) !important;
  }
}

/* Directory medium-window fix: avoid squeezed sidebar cards and broken email columns. */
@media (min-width: 769px) and (max-width: 1180px) {
  #pageDirectory .content-section {
    padding: 24px 24px 54px !important;
  }

  #pageDirectory .directory-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  #pageDirectory .dir-sidebar {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.15fr) minmax(220px, 0.85fr) !important;
    gap: 16px !important;
    order: 1 !important;
  }

  #pageDirectory .dir-main {
    min-width: 0 !important;
    order: 2 !important;
  }

  #pageDirectory .dir-sidebar .panel-card {
    min-width: 0 !important;
    padding: 18px !important;
  }

  #pageDirectory .dir-sidebar .panel-card:nth-child(3) {
    display: none !important;
  }

  #pageDirectory .dir-sidebar .filter-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #pageDirectory .dir-sidebar .filter-btn {
    min-width: 0 !important;
    height: 100% !important;
    padding: 12px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #pageDirectory .dir-sidebar .filter-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  #pageDirectory .dir-sidebar .filter-text {
    min-width: 0 !important;
  }

  #pageDirectory .dir-sidebar .filter-text span {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.2 !important;
  }

  #pageDirectory .dir-sidebar .filter-text small {
    display: none !important;
  }

  #pageDirectory .quick-stat-row {
    padding: 8px 0 !important;
  }

  #pageDirectory .table-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageDirectory .table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #pageDirectory .data-table {
    min-width: 920px !important;
    table-layout: fixed !important;
  }

  body.is-admin #pageDirectory .data-table {
    min-width: 1040px !important;
  }

  #pageDirectory .data-table th:nth-child(1),
  #pageDirectory .data-table td:nth-child(1) {
    width: 44px !important;
  }

  #pageDirectory .data-table th:nth-child(2),
  #pageDirectory .data-table td:nth-child(2) {
    width: 54px !important;
  }

  #pageDirectory .data-table th:nth-child(3),
  #pageDirectory .data-table td:nth-child(3) {
    width: 124px !important;
  }

  #pageDirectory .data-table th:nth-child(4),
  #pageDirectory .data-table td:nth-child(4) {
    width: 190px !important;
  }

  #pageDirectory .data-table th:nth-child(5),
  #pageDirectory .data-table td:nth-child(5) {
    width: 170px !important;
  }

  #pageDirectory .data-table th:nth-child(6),
  #pageDirectory .data-table td:nth-child(6) {
    width: 260px !important;
  }

  #pageDirectory .data-table th:nth-child(7),
  #pageDirectory .data-table td:nth-child(7) {
    width: 120px !important;
  }

  #pageDirectory .data-table th:nth-child(8),
  #pageDirectory .data-table td:nth-child(8) {
    width: 112px !important;
  }

  #pageDirectory .email-cell-content {
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  #pageDirectory .email-cell-content span {
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Dashboard KPI cards: Unified Executive Rounded Pill Capsule Bar - Royal Blue Edition */
.stats-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(1254px, calc(100% - 48px)) !important;
  margin: 8px auto 26px !important;
  padding: 12px 16px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.25), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(129, 140, 248, 0.22), transparent 45%),
    linear-gradient(135deg, #092c68 0%, #0d47a1 35%, #155ee8 75%, #1d4ed8 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 20px 48px -10px rgba(13, 71, 161, 0.45),
    0 8px 24px rgba(9, 44, 104, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative;
  z-index: 4;
}

.hero-section + .content-section > .stats-row { margin: 22px auto 26px !important; }

.stat-card {
  --stat-accent: #38bdf8;
  --stat-accent-rgb: 56, 189, 248;
  --stat-gradient: linear-gradient(135deg, #38bdf8, #0284c7);
  
  position: relative !important;
  min-height: 68px !important;
  padding: 10px 16px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stat-card::before {
  display: none !important;
}

/* Individual Color Tokens */
.stat-card.stat-green {
  --stat-accent: #22c55e;
  --stat-accent-rgb: 34, 197, 94;
  --stat-gradient: linear-gradient(135deg, #22c55e, #15803d);
}

.stat-card.stat-blue {
  --stat-accent: #38bdf8;
  --stat-accent-rgb: 56, 189, 248;
  --stat-gradient: linear-gradient(135deg, #38bdf8, #0284c7);
}

.stat-card.stat-red {
  --stat-accent: #fb7185;
  --stat-accent-rgb: 251, 113, 133;
  --stat-gradient: linear-gradient(135deg, #fb7185, #e11d48);
}

.stat-card.stat-amber {
  --stat-accent: #2dd4bf;
  --stat-accent-rgb: 45, 212, 191;
  --stat-gradient: linear-gradient(135deg, #2dd4bf, #0d9488);
}

.stat-card.stat-purple {
  --stat-accent: #c084fc;
  --stat-accent-rgb: 192, 132, 252;
  --stat-gradient: linear-gradient(135deg, #c084fc, #7c3aed);
}

.stats-row .stat-card.stat-green,
.stats-row .stat-card.stat-blue,
.stats-row .stat-card.stat-red,
.stats-row .stat-card.stat-amber,
.stats-row .stat-card.stat-purple {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.stats-row .stat-card:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 16px 32px -6px rgba(0, 0, 0, 0.30),
    0 6px 14px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.stat-card-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 15px !important;
  background: var(--stat-gradient) !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
}

.stats-row .stat-card.stat-green .stat-card-icon,
.stats-row .stat-card.stat-blue .stat-card-icon,
.stats-row .stat-card.stat-red .stat-card-icon,
.stats-row .stat-card.stat-amber .stat-card-icon,
.stats-row .stat-card.stat-purple .stat-card-icon {
  background: var(--stat-gradient) !important;
  color: #ffffff !important;
  border-radius: 15px !important;
}

.stats-row .stat-card:hover .stat-card-icon {
  transform: scale(1.10) rotate(-4deg) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

.stat-card-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.stat-card-label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.stat-card-value {
  color: #ffffff !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
}

.stats-row .stat-card.stat-green .stat-card-label,
.stats-row .stat-card.stat-blue .stat-card-label,
.stats-row .stat-card.stat-red .stat-card-label,
.stats-row .stat-card.stat-amber .stat-card-label,
.stats-row .stat-card.stat-purple .stat-card-label {
  color: rgba(255, 255, 255, 0.85) !important;
}

.stat-card.stat-green .stat-card-value,
.stat-card.stat-blue .stat-card-value,
.stat-card.stat-red .stat-card-value,
.stat-card.stat-amber .stat-card-value,
.stat-card.stat-purple .stat-card-value {
  color: #ffffff !important;
}

html.dark-mode .stats-row {
  background:
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.18), transparent 42%),
    linear-gradient(135deg, #06193d 0%, #0b2f6d 45%, #0f3e91 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

html.dark-mode .stat-card {
  border-right-color: rgba(148,163,184,0.16) !important;
}

html.dark-mode .stat-card-label {
  color: #9fb4d5 !important;
}

html.dark-mode .stat-card-value {
  color: #eef6ff !important;
}

/* Navbar uses the same soft full-color language as the KPI strip. */
.main-navbar {
  background:
    linear-gradient(115deg, rgba(232,253,245,0.97) 0%, rgba(214,238,255,0.98) 38%, rgba(240,226,255,0.97) 74%, rgba(255,242,224,0.95) 100%),
    radial-gradient(circle at 10% 0%, rgba(25,117,67,0.24), transparent 30%),
    radial-gradient(circle at 52% 0%, rgba(37,99,235,0.24), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(130,56,238,0.22), transparent 30%) !important;
  border-bottom-color: rgba(93,140,218,0.34) !important;
  box-shadow:
    0 16px 38px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.main-navbar::before {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.54), rgba(255,255,255,0.20)),
    linear-gradient(90deg, rgba(21,94,232,0.08), rgba(16,185,129,0.08), rgba(139,92,246,0.08)) !important;
}

.navbar-links {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.80), rgba(248,251,255,0.58)),
    radial-gradient(circle at 10% 20%, rgba(25,117,67,0.16), transparent 32%),
    radial-gradient(circle at 50% 0%, rgba(21,94,232,0.13), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(130,56,238,0.16), transparent 32%) !important;
  border-color: rgba(93,140,218,0.32) !important;
}

.nav-search-wrap,
.nav-icon-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(243,248,255,0.66)),
    radial-gradient(circle at 0% 0%, rgba(21,94,232,0.10), transparent 36%) !important;
  border-color: rgba(93,140,218,0.30) !important;
}

html.dark-mode .main-navbar {
  background:
    linear-gradient(115deg, rgba(8,31,24,0.96), rgba(10,28,52,0.96) 46%, rgba(32,18,64,0.94) 100%) !important;
  border-bottom-color: rgba(96,165,250,0.18) !important;
}

html.dark-mode .navbar-links,
html.dark-mode .nav-search-wrap,
html.dark-mode .nav-icon-btn {
  background: rgba(15,23,42,0.58) !important;
  border-color: rgba(96,165,250,0.18) !important;
}

/* Lift quick access cards slightly closer to the KPI strip. */
.hero-section + .content-section .section-title {
  margin-top: -36px !important;
}

.hero-section + .content-section .module-grid {
  margin-top: -10px !important;
}

/* Final admin visibility guard: later navbar/button rules use !important. */
body:not(.is-admin) .admin-only {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-admin .nav-icon-btn.admin-only,
body.is-admin button.admin-only,
body.is-admin .btn-add.admin-only,
body.is-admin .btn-manage-units.admin-only,
body.is-admin .edit-date-btn.admin-only {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-admin div.admin-only {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-admin .data-table td.admin-only,
body.is-admin .data-table th.admin-only {
  display: table-cell !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.offline-mode-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200001;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 30px rgba(15,23,42,0.28);
  font-size: 0.78rem;
  font-weight: 800;
}

.offline-mode-badge i {
  color: #f59e0b;
}

.employee-row {
  cursor: pointer;
}

.employee-name-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.employee-phone-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.employee-phone-line i {
  color: #2563eb;
}

.optional-label,
.field-hint {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.field-hint {
  margin-top: 3px;
  line-height: 1.35;
}

.employee-details-overlay.show {
  display: flex !important;
}

.employee-details-overlay {
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 20% 12%, rgba(37,99,235,0.20), transparent 34%),
    radial-gradient(circle at 88% 30%, rgba(16,185,129,0.16), transparent 32%),
    rgba(15,23,42,0.48) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.employee-details-modal {
  position: relative;
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  border-radius: 26px;
  background: var(--bg-card) !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border);
  box-shadow:
    0 34px 88px rgba(15,23,42,0.28),
    inset 0 1px 0 rgba(255,255,255,0.92);
  padding: 28px;
  animation: employeeModalIn 0.22s ease both;
}

@keyframes employeeModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.employee-details-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.74);
  color: #334155;
  cursor: pointer;
}

.employee-details-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 10px 52px 22px 4px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}

.employee-avatar-orb {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #155ee8, #0ea5e9);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 18px 38px rgba(37,99,235,0.28);
}

.employee-directory-label {
  display: inline-flex;
  margin-bottom: 7px;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.employee-title-block h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1.08;
  font-weight: 950;
}

.employee-title-block p {
  margin: 7px 0 0;
  color: #64748b;
  font-weight: 700;
}

.employee-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 950;
  border: 1px solid rgba(37,99,235,0.25);
  background: rgba(37,99,235,0.08);
  color: #155ee8;
}

.employee-status-pill.is-active {
  background: rgba(16,185,129,0.12);
  color: #047857;
  border-color: rgba(16,185,129,0.28);
}

.employee-status-pill.is-blocked {
  background: rgba(239,68,68,0.12);
  color: #dc2626;
  border-color: rgba(239,68,68,0.30);
}

.employee-status-pill.is-pending {
  background: rgba(245,158,11,0.12);
  color: #b45309;
  border-color: rgba(245,158,11,0.30);
}

.employee-status-pill.is-deactivated {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.30);
}

.employee-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 0;
}

.employee-info-item {
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg-card) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.employee-info-item span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.employee-info-item span i {
  color: #2563eb;
}

.employee-info-item strong {
  display: block;
  min-width: 0;
  color: #142033;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.employee-info-item .employee-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  color: #142033 !important;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 950;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.employee-info-item .employee-phone-link span {
  color: #142033 !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

.employee-info-item .employee-phone-link.is-clickable {
  color: #142033 !important;
  cursor: pointer;
}

.employee-info-item .employee-phone-link i {
  color: #25d366;
  font-size: 1.12rem;
}

.employee-info-item .employee-phone-link.is-clickable:hover {
  color: #0f172a !important;
  background: rgba(16,185,129,0.10);
  box-shadow: 0 0 0 6px rgba(16,185,129,0.10);
}

.employee-info-item .muted-value,
.muted-value {
  color: #94a3b8 !important;
  font-style: italic;
}

.employee-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.employee-quick-actions button,
.employee-quick-actions a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 12px;
  border: none !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.15) !important;
  transition: all 0.22s cubic-bezier(.2,.8,.2,1) !important;
}

.employee-quick-actions button::before,
.employee-quick-actions a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.40) 45%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.employee-quick-actions button i,
.employee-quick-actions a i {
  position: relative;
  z-index: 1;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.employee-quick-actions button:hover:not(:disabled),
.employee-quick-actions a:hover {
  transform: translateY(-2.5px) scale(1.025);
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%) !important;
  box-shadow: 0 8px 18px rgba(29, 78, 216, 0.22) !important;
  color: #ffffff !important;
}

.employee-quick-actions button:hover:not(:disabled)::before,
.employee-quick-actions a:hover::before {
  transform: translateX(130%);
}

.employee-quick-actions button:hover:not(:disabled) i,
.employee-quick-actions a:hover i {
  transform: translateY(-1px) scale(1.12) rotate(-4deg);
}

.employee-quick-actions button:active:not(:disabled),
.employee-quick-actions a:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 3px 6px rgba(29, 78, 216, 0.12) !important;
}

.employee-quick-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Copier Téléphone (Indigo Accent) */
.employee-quick-actions #copyEmployeePhoneBtn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.15) !important;
}

.employee-quick-actions #copyEmployeePhoneBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22) !important;
  color: #ffffff !important;
}

/* Primary WhatsApp Accent */
.employee-quick-actions .employee-whatsapp-btn {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(18, 140, 126, 0.20) !important;
}

.employee-quick-actions .employee-whatsapp-btn:hover {
  background: linear-gradient(135deg, #128c7e 0%, #075e54 100%) !important;
  box-shadow: 0 8px 18px rgba(18, 140, 126, 0.32) !important;
  color: #ffffff !important;
}

/* Primary Call Accent */
.employee-quick-actions .employee-call-btn {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.20) !important;
}

.employee-quick-actions .employee-call-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #064e3b 100%) !important;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.32) !important;
  color: #ffffff !important;
}

/* Admin Modifier (Edit) Accent */
.employee-quick-actions button.admin-only:not(.employee-danger) {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.20) !important;
}

.employee-quick-actions button.admin-only:not(.employee-danger):hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.22) !important;
  color: #ffffff !important;
}

/* Danger (Delete) Accent */
.employee-quick-actions .employee-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.20) !important;
}

.employee-quick-actions .employee-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22) !important;
  color: #ffffff !important;
}

#copyToast.toast,
#copyNotification {
  z-index: 300000 !important;
}

#copyToast.toast {
  bottom: 26px !important;
  box-shadow:
    0 22px 48px rgba(15,23,42,0.30),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

html.dark-mode .employee-details-modal {
  background: var(--bg-card) !important;
  background-color: #0a1018 !important;
  border-color: rgba(96,165,250,0.20);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark-mode .employee-title-block h2,
html.dark-mode .employee-info-item strong {
  color: #eef6ff;
}

html.dark-mode .employee-info-item,
html.dark-mode .employee-details-close {
  background: var(--bg-hover) !important;
  background-color: rgba(15,23,42,0.85) !important;
  border-color: rgba(96,165,250,0.16);
}

@media (max-width: 720px) {
  .employee-details-modal {
    padding: 20px;
    border-radius: 22px;
  }

  .employee-details-hero {
    grid-template-columns: 1fr;
    padding-right: 48px;
  }

  .employee-avatar-orb {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .employee-status-pill {
    width: fit-content;
  }

  .employee-details-grid {
    grid-template-columns: 1fr;
  }

  .employee-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Compact dashboard hero: smaller first screen, faster access to quick modules. */
@media (min-width: 1024px) {
  #pageDashboard .hero-section {
    min-height: 372px !important;
    padding: 24px 24px 58px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  #pageDashboard .hero-section::before {
    display: none !important;
    content: none !important;
  }

  #pageDashboard .hero-bg-art {
    opacity: 0.34 !important;
  }

  #pageDashboard .hero-content {
    width: min(1130px, calc(100% - 92px)) !important;
    max-width: 1130px !important;
    min-height: 286px !important;
    margin: 0 auto !important;
    padding: 24px 34px !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(420px, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 34px !important;
    row-gap: 8px !important;
    align-items: center !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(21, 94, 232, 0.15) !important;
    box-shadow:
      0 3px 0 rgba(21, 94, 232, 0.54),
      0 20px 48px rgba(15, 23, 42, 0.14),
      0 10px 28px rgba(21, 94, 232, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  }

  #pageDashboard .hero-content::before {
    background:
      linear-gradient(90deg, #155ee8, rgba(21,94,232,0.30) 42%, transparent 76%) top left / 100% 4px no-repeat,
      radial-gradient(circle at 88% 18%, rgba(21,94,232,0.12), transparent 25%),
      linear-gradient(rgba(21,94,232,0.038) 1px, transparent 1px),
      linear-gradient(90deg, rgba(21,94,232,0.038) 1px, transparent 1px) !important;
    background-size: 100% 4px, auto, 26px 26px, 26px 26px !important;
  }

  #pageDashboard .hero-content .hero-badge {
    width: min(430px, 100%) !important;
    min-height: 28px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #pageDashboard .hero-badge-text {
    font-size: 0.58rem !important;
    letter-spacing: 0.25px !important;
  }

  #pageDashboard .hero-content .hero-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 430px !important;
    margin: 6px 0 0 !important;
    font-size: clamp(2.2rem, 3vw, 3.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  #pageDashboard .hero-content .hero-title-sub {
    font-size: clamp(1.75rem, 2.35vw, 2.5rem) !important;
  }

  #pageDashboard .hero-content .hero-desc {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 470px !important;
    margin: 4px 0 0 !important;
    font-size: 0.90rem !important;
    line-height: 1.45 !important;
  }

  #pageDashboard .hero-content .hero-actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: flex !important;
    gap: 12px !important;
    margin: 10px 0 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #pageDashboard .hero-content .btn-hero-primary,
  #pageDashboard .hero-content .btn-hero-outline {
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  #pageDashboard .hero-card-details,
  #pageDashboard .hero-flow-panel,
  #pageDashboard .hero-status-strip,
  #pageDashboard .decor-mail-card,
  #pageDashboard .decor-route,
  #pageDashboard .decor-center-chip {
    display: none !important;
  }

  #pageDashboard .hero-card-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: min(360px, 100%) !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    align-self: start !important;
    justify-self: end !important;
  }

  #pageDashboard .hero-card-brand-logo {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
    border-radius: 14px !important;
  }

  #pageDashboard .hero-card-brand-text span {
    font-size: 0.98rem !important;
  }

  #pageDashboard .hero-card-brand-text small {
    font-size: 0.70rem !important;
  }

  #pageDashboard .decor-envelope-outline {
    left: 53% !important;
    top: 48% !important;
    width: 230px !important;
    height: 132px !important;
    opacity: 0.14 !important;
  }

  #pageDashboard .decor-mail-hub {
    left: 53% !important;
    top: 47% !important;
    opacity: 0.62 !important;
    transform: translate(-50%, -50%) rotate(-3deg) !important;
  }

  #pageDashboard .decor-mini-signal-top {
    left: 53.5% !important;
    top: 24% !important;
    opacity: 0.38 !important;
  }

  #pageDashboard .decor-mini-signal-bottom {
    left: 50.5% !important;
    top: 66% !important;
    opacity: 0.32 !important;
  }

  #pageDashboard .decor-at {
    right: 27% !important;
    bottom: 4px !important;
    font-size: 6.4rem !important;
    opacity: 0.45 !important;
  }

  #pageDashboard .decor-mail-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  #pageDashboard .decor-mail-icon-1 {
    left: 48% !important;
    top: 70% !important;
    opacity: 0.20 !important;
  }

  #pageDashboard .decor-mail-icon-2 {
    right: 28% !important;
    top: 28% !important;
    opacity: 0.26 !important;
  }

  #pageDashboard .ai-robot-wrap {
    width: 420px !important;
    right: max(92px, calc(50% - 565px + 58px)) !important;
    top: 48% !important;
    transform: translateY(-44%) !important;
    gap: 7px !important;
    filter: drop-shadow(0 18px 24px rgba(15,23,42,0.18)) !important;
  }

  #pageDashboard .ai-robot-wrap::before {
    content: '';
    position: absolute;
    left: 73%;
    top: 154px;
    width: 168px;
    height: 46px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at center, rgba(255,255,255,0.88) 0%, rgba(219,234,254,0.70) 34%, rgba(96,165,250,0.28) 58%, transparent 72%),
      repeating-radial-gradient(ellipse at center, rgba(37,99,235,0.34) 0 2px, transparent 3px 16px);
    box-shadow:
      0 18px 34px rgba(37,99,235,0.20),
      inset 0 2px 0 rgba(255,255,255,0.86);
    opacity: 0.92;
  }

  #pageDashboard .ai-robot-wrap::after {
    content: '';
    position: absolute;
    left: 73%;
    top: 169px;
    width: 134px;
    height: 20px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
      linear-gradient(180deg, rgba(96,165,250,0.40), rgba(21,94,232,0.18)),
      radial-gradient(ellipse at center, rgba(255,255,255,0.62), transparent 62%);
    border: 1px solid rgba(96,165,250,0.36);
    box-shadow:
      0 10px 22px rgba(21,94,232,0.20),
      inset 0 1px 0 rgba(255,255,255,0.82);
    opacity: 0.88;
  }

  #pageDashboard .ai-robot-svg {
    width: 326px !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #pageDashboard .robot-date-badge {
    position: relative !important;
    z-index: 2 !important;
    min-width: 214px !important;
    width: auto !important;
    margin-top: -8px !important;
    padding: 8px 12px !important;
    gap: 9px !important;
    border-radius: 14px !important;
    box-shadow:
      0 3px 0 #92400e,
      0 14px 26px rgba(146,64,14,0.15),
      inset 0 1px 0 rgba(255,255,255,0.9) !important;
  }

  #pageDashboard .robot-date-icon,
  #pageDashboard .robot-date-badge .btn-clean-mini {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  #pageDashboard .robot-date-label {
    font-size: 0.55rem !important;
  }

  #pageDashboard .robot-date-value {
    font-size: 0.92rem !important;
  }

  #pageDashboard .hero-section + .content-section > .stats-row { margin: 20px auto 24px !important; }

  #pageDashboard .stats-row {
    padding: 12px 18px !important;
    border-radius: 24px !important;
  }

  #pageDashboard .stat-card {
    min-height: 64px !important;
    padding: 8px 16px !important;
  }

  #pageDashboard .stat-card-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 15px !important;
  }

  #pageDashboard .stat-card-value {
    font-size: 1.55rem !important;
  }

  #pageDashboard .hero-section + .content-section .section-title {
    margin-top: -18px !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  #pageDashboard .hero-section {
    min-height: auto !important;
    padding: 22px 18px 44px !important;
  }

  #pageDashboard .hero-content {
    width: min(720px, calc(100% - 24px)) !important;
    padding: 30px 34px !important;
  }

  #pageDashboard .hero-card-details,
  #pageDashboard .hero-card-brand,
  #pageDashboard .hero-email-decor {
    display: none !important;
  }

  #pageDashboard .hero-content .hero-title {
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
  }

  #pageDashboard .hero-content .hero-title-sub {
    font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  }

  #pageDashboard .hero-content .hero-actions {
    margin-top: 18px !important;
  }
}

@media (max-width: 768px) {
  #pageDashboard .hero-section {
    min-height: auto !important;
    padding: 20px 14px 34px !important;
  }

  #pageDashboard .hero-section::before {
    inset: 10px 10px 18px !important;
    border-radius: 22px !important;
  }

  #pageDashboard .hero-content {
    width: min(100%, calc(100vw - 24px)) !important;
    padding: 28px 22px !important;
    border-radius: 22px !important;
  }

  #pageDashboard .hero-content .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.06 !important;
  }

  #pageDashboard .hero-content .hero-title-sub {
    font-size: 1.45rem !important;
  }

  #pageDashboard .hero-content .hero-desc {
    font-size: 0.86rem !important;
    margin-bottom: 18px !important;
  }

  #pageDashboard .hero-card-details,
  #pageDashboard .hero-card-brand,
  #pageDashboard .decor-mail-hub,
  #pageDashboard .decor-mini-signal {
    display: none !important;
  }

  #pageDashboard .hero-section + .content-section > .stats-row { margin: 20px auto 24px !important; }
}

/* Dashboard hero medium-width fix: prevent robot/date/actions from colliding when the window is resized. */
@media (min-width: 1024px) and (max-width: 1280px) {
  #pageDashboard .hero-section {
    min-height: auto !important;
    padding: 22px 18px 34px !important;
    overflow: hidden !important;
  }

  #pageDashboard .hero-content {
    width: min(980px, calc(100% - 52px)) !important;
    max-width: 980px !important;
    min-height: 240px !important;
    padding: 22px 28px !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(260px, 0.72fr) !important;
    column-gap: 24px !important;
  }

  #pageDashboard .hero-content .hero-title {
    font-size: clamp(2.05rem, 3.2vw, 2.65rem) !important;
    max-width: 410px !important;
  }

  #pageDashboard .hero-content .hero-title-sub {
    font-size: clamp(1.65rem, 2.6vw, 2.1rem) !important;
  }

  #pageDashboard .hero-content .hero-desc {
    max-width: 430px !important;
    font-size: 0.86rem !important;
  }

  #pageDashboard .hero-content .hero-actions {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    gap: 10px !important;
  }

  #pageDashboard .hero-content .btn-hero-primary,
  #pageDashboard .hero-content .btn-hero-outline {
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
  }

  #pageDashboard .hero-card-brand {
    width: min(320px, 100%) !important;
    padding: 10px 12px !important;
  }

  #pageDashboard .ai-robot-wrap {
    display: flex !important;
    transform: translateY(-44%) scale(0.65) !important;
    right: max(46px, calc(50% - 490px + 24px)) !important;
  }

  #pageDashboard .hero-section + .content-section > .stats-row { margin: 20px auto 24px !important; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  #pageDashboard .hero-section {
    padding: 22px 18px 36px !important;
    overflow: visible !important;
  }

  #pageDashboard .hero-content {
    width: min(760px, calc(100% - 32px)) !important;
    max-width: 760px !important;
    min-height: auto !important;
    padding: 30px 34px !important;
  }

  #pageDashboard .hero-content .hero-actions {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }

  #pageDashboard .hero-content .btn-hero-primary,
  #pageDashboard .hero-content .btn-hero-outline {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #pageDashboard .ai-robot-wrap {
    display: flex !important;
    position: static !important;
    transform: none !important;
    margin: 24px auto 0 !important;
    width: min(580px, calc(100% - 26px)) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #pageDashboard .ai-robot-svg {
    width: clamp(140px, 20vw, 180px) !important;
    max-width: 32% !important;
    display: block !important;
  }

  #pageDashboard .hero-section + .content-section > .stats-row { margin: 20px auto 24px !important; }
}

/* Dashboard hero text alignment polish. */
@media (min-width: 1024px) {
  #pageDashboard .hero-content .hero-badge {
    width: min(455px, 100%) !important;
    min-height: 34px !important;
    padding: 8px 15px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.92), rgba(235,244,255,0.84)),
      radial-gradient(circle at 0% 50%, rgba(56,189,248,0.18), transparent 34%) !important;
    border: 1.5px solid rgba(21,94,232,0.32) !important;
    box-shadow:
      0 10px 22px rgba(21,94,232,0.10),
      inset 0 1px 0 rgba(255,255,255,0.92) !important;
    transform: translateY(-12px);
  }

  #pageDashboard .hero-content .hero-badge::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.72);
    pointer-events: none;
  }

  #pageDashboard .hero-badge-dot {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }

  #pageDashboard .hero-badge-text {
    color: #155ee8 !important;
    font-size: 0.59rem !important;
    font-weight: 900 !important;
  }

  #pageDashboard .hero-content .hero-title {
    transform: translateY(-22px);
    margin-top: 0 !important;
  }

  #pageDashboard .hero-content .hero-title-sub {
    display: inline-block;
    transform: translateY(-4px);
  }
}

/* ============================================================
   FRONT-END PERFORMANCE OPTIMIZATION LAYER
   Keeps the visual system intact while reducing GPU compositing,
   repeated paint work, and hidden-tab animation cost.
   ============================================================ */
html.render-optimized {
  --shadow-sm: 0 1px 4px rgba(0, 30, 60, 0.045);
  --shadow-md: 0 6px 16px rgba(0, 30, 60, 0.07);
  --shadow-lg: 0 12px 28px rgba(0, 30, 60, 0.10);
  --shadow-xl: 0 18px 42px rgba(0, 30, 60, 0.12);
  --transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

html.render-optimized body::before {
  opacity: 0.32 !important;
  will-change: auto !important;
}

html.render-optimized body::after {
  opacity: 0.42 !important;
  will-change: auto !important;
}

html.render-optimized .app-bg-decor {
  contain: strict;
  opacity: 0.72;
}

html.render-optimized .bg-blob {
  animation: none !important;
  filter: blur(34px) !important;
  opacity: 0.075 !important;
  transform: none !important;
  will-change: auto !important;
}

html.render-optimized.dark-mode .bg-blob {
  filter: blur(40px) !important;
  opacity: 0.09 !important;
}

html.render-optimized .main-navbar,
html.render-optimized .navbar-links,
html.render-optimized .inst-badge,
html.render-optimized .mobile-bottom-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

html.render-optimized .main-navbar {
  background: rgba(255,255,255,0.98) !important;
  transform: none !important;
}

html.render-optimized.dark-mode .main-navbar {
  background: rgba(10,16,24,0.98) !important;
}

html.render-optimized .navbar-links {
  background: rgba(255,255,255,0.78) !important;
}

html.render-optimized .modal-box,
html.render-optimized .modal-content,
html.render-optimized .config-modal,
html.render-optimized .service-selection-content,
html.render-optimized .employee-details-card,
html.render-optimized .employee-details-modal,
html.render-optimized .employee-info-item,
html.render-optimized #serviceSelectionModal .service-selection-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg-card) !important;
  background-color: #ffffff !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}

html.render-optimized.dark-mode .modal-box,
html.render-optimized.dark-mode .modal-content,
html.render-optimized.dark-mode .config-modal,
html.render-optimized.dark-mode .service-selection-content,
html.render-optimized.dark-mode .employee-details-card,
html.render-optimized.dark-mode .employee-details-modal,
html.render-optimized.dark-mode .employee-info-item {
  background: var(--bg-card) !important;
  background-color: #0a1018 !important;
}

html.render-optimized .splash-screen {
  contain: strict;
  transition: opacity 0.28s ease !important;
}

html.render-optimized .splash-bg-art {
  opacity: 0.38;
  contain: paint;
}

html.render-optimized .splash-svg filter,
html.render-optimized .splash-svg [filter] {
  filter: none !important;
}

html.render-optimized .splash-green-bar {
  animation: none !important;
  background-size: 100% 100% !important;
}

html.render-optimized .splash-logo-wrap,
html.render-optimized .splash-title-wrap,
html.render-optimized .splash-loader-wrap,
html.render-optimized .splash-footer-tag {
  animation-duration: 0.24s !important;
  animation-timing-function: ease-out !important;
}

html.render-optimized .page-section.active {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

html.render-optimized .page-section:not(.active),
html.render-optimized .page-section:not(.active) * {
  animation-play-state: paused !important;
}

html.render-optimized .unit-progress-fill,
html.render-optimized .ai-robot-glow,
html.render-optimized .dev-banner-glow,
html.render-optimized .side-accent-glow {
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

html.render-optimized .stat-card:hover,
html.render-optimized .module-card:hover,
html.render-optimized .tool-card:hover,
html.render-optimized .unit-stat-card:hover,
html.render-optimized .service-card:hover,
html.render-optimized .employee-action-btn:hover {
  transition-duration: 0.16s !important;
}

html.effects-paused *,
html.effects-paused *::before,
html.effects-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.render-optimized *,
  html.render-optimized *::before,
  html.render-optimized *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  html.render-optimized .app-bg-decor,
  html.render-optimized .bg-blob,
  html.render-optimized .splash-bg-art {
    display: none !important;
  }

  html.render-optimized .page-section.active {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

@media (min-width: 1024px) {
  #pageDashboard .hero-content .hero-desc {
    transform: translateY(-10px);
    margin-top: 0 !important;
  }

  #pageDashboard .hero-content .hero-actions {
    transform: translateY(-4px);
  }
}

/* ============================================================
   GPU SAVER HARD OVERRIDE
   Final desktop override for Intel Iris Xe / integrated GPUs.
   ============================================================ */
html.render-optimized.gpu-saver,
html.render-optimized.gpu-saver body {
  scroll-behavior: auto !important;
}

html.render-optimized.gpu-saver body::before,
html.render-optimized.gpu-saver body::after,
html.render-optimized.gpu-saver .app-bg-decor,
html.render-optimized.gpu-saver .bg-blob,
html.render-optimized.gpu-saver .hero-bg-art,
html.render-optimized.gpu-saver .splash-bg-art,
html.render-optimized.gpu-saver .ai-robot-glow,
html.render-optimized.gpu-saver .dev-banner-glow,
html.render-optimized.gpu-saver .side-accent-glow {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

html.render-optimized.gpu-saver *,
html.render-optimized.gpu-saver *::before,
html.render-optimized.gpu-saver *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
  transition-property: color, background-color, border-color, opacity, transform !important;
  will-change: auto !important;
}

html.render-optimized.gpu-saver .splash-green-bar,
html.render-optimized.gpu-saver .hero-badge-dot,
html.render-optimized.gpu-saver .tool-status i,
html.render-optimized.gpu-saver .pulse-amber,
html.render-optimized.gpu-saver .notif-badge {
  animation: none !important;
}

html.render-optimized.gpu-saver .main-navbar,
html.render-optimized.gpu-saver .navbar-links,
html.render-optimized.gpu-saver .mobile-bottom-nav,
html.render-optimized.gpu-saver .notif-dropdown,
html.render-optimized.gpu-saver .modal-box,
html.render-optimized.gpu-saver .modal-content,
html.render-optimized.gpu-saver .config-modal,
html.render-optimized.gpu-saver .service-selection-content,
html.render-optimized.gpu-saver #serviceSelectionModal .service-selection-content,
html.render-optimized.gpu-saver .employee-details-card {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}

html.render-optimized.gpu-saver .tool-card,
html.render-optimized.gpu-saver .db-card,
html.render-optimized.gpu-saver .panel-card,
html.render-optimized.gpu-saver .table-card,
html.render-optimized.gpu-saver .unit-stat-card,
html.render-optimized.gpu-saver .service-card,
html.render-optimized.gpu-saver .notif-item,
html.render-optimized.gpu-saver .request-modal-content {
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.06) !important;
}

html.render-optimized.gpu-saver .page-section {
  animation: none !important;
}

html.render-optimized.gpu-saver .page-section.active {
  content-visibility: visible;
  contain: layout paint style;
  animation: pageFadeInSimple 0.2s ease-out both !important;
  will-change: opacity !important;
}

/* Dashboard background: remove the horizontal overlay band so the page background stays continuous. */
.page-content,
#pageDashboard,
#pageDashboard .hero-section,
#pageDashboard .hero-section + .content-section {
  background: transparent !important;
}

#pageDashboard .hero-section {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#pageDashboard .hero-section::before,
#pageDashboard .hero-section::after {
  display: none !important;
  content: none !important;
}

/* Lightweight system background: dark colored gradient with blurred texture. */
html {
  background: #05070c !important;
}

body {
  background:
    radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.22), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.18), transparent 45%),
    linear-gradient(180deg, #090c15 0%, #04060a 100%) !important;
}

.app-bg-decor {
  display: block !important;
  position: fixed !important;
  inset: -10px !important;
  z-index: -9999 !important;
  background-image: url("assets/system-background.png?v=5.5.79") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  filter: blur(8px) !important;
  transform: scale(1.02) !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
}

body::before,
body::after,
.bg-blob {
  display: none !important;
  content: none !important;
}

/* =============================================
   إخ٠اء جميع أزرار الإغلاق (X) ٠ي النوا٠ذ
   الإغلاق يتم ٠قط بالنقر خارج النا٠ذة
   ============================================= */
/* Close buttons display override removed to allow X close button in all modals */

/* =====================================================
   MOBILE HERO FIX — ????? ????? ??? hero ??? ????????
   ????? ??? transparent !important
   ===================================================== */
@media screen and (max-width: 768px) {
  #pageDashboard .hero-section,
  .hero-section,
  #pageDashboard .hero-section + .content-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #pageDashboard .hero-section::before,
  #pageDashboard .hero-section::after {
    display: none !important;
    content: none !important;
  }

  /* ?????? ????? */
  .hero-section .hero-title,
  .hero-section .hero-title *,
  #pageDashboard .hero-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  }

  .hero-section .hero-title-sub,
  .hero-section .hero-title-sub *,
  #pageDashboard .hero-title-sub {
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
  }

  .hero-section .hero-desc,
  #pageDashboard .hero-desc {
    color: rgba(255,255,255,0.88) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
  }

  .hero-section .hero-badge,
  .hero-section .hero-status-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.35) !important;
  }

  /* ??? ?? ????? ??? */
  .btn-hero-primary {
    background: #ffffff !important;
    color: #1a56db !important;
    -webkit-text-fill-color: #1a56db !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.20) !important;
    width: 100% !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .btn-hero-primary i,
  .btn-hero-primary * {
    color: #1a56db !important;
    -webkit-text-fill-color: #1a56db !important;
  }

  /* ??? ?? ????? ??? */
  .btn-hero-outline {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    width: 100% !important;
    padding: 13px 20px !important;
    border-radius: 14px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .btn-hero-outline i,
  .btn-hero-outline * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* ??? ????? ?????? ?????? ??? */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
    grid-template-columns: unset !important;
  }
}

/* =====================================================
   MOBILE FIXES:
   1. ????? ???? ?? ???? page-banner
   2. ????? overflow ?? ??????
   ===================================================== */
@media screen and (max-width: 768px) {

  /* ??? ????? ???? ?????? ???? ?????? ??? */
  .page-banner {
    box-shadow: none !important;
    border-bottom: none !important;
    border: none !important;
    margin-bottom: 0 !important;
  }

  .page-banner::before,
  .page-banner::after,
  .page-banner-content::after,
  .page-banner-content::before {
    display: none !important;
    content: none !important;
  }

  /* ??? ????? overflow — ?? ???? ??? ???? ?????? ??? */
  html,
  body,
  .app-wrapper,
  .main-content,
  .page-section,
  .page-section.active {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ????? ?? ???? ?????? ?????? ?????? */
  .hero-section::before,
  .hero-section::after {
    display: none !important;
    content: none !important;
  }

  /* Stats section: ?? overflow */
  .stats-row,
  .content-section {
    overflow-x: hidden !important;
  }

  /* ????? ?? ???? ???? ?? ?????? ?? ?????? */
  [class*="decor"],
  [class*="blob"],
  [class*="bg-art"],
  [class*="wave"],
  .hero-bg-art,
  .hero-side-panel,
  .hero-visual {
    display: none !important;
  }
}

/* ??? CRITICAL OVERFLOW FIX — ??? ?? ????? ???? ?? ??? ?????? ??? */
@media screen and (max-width: 768px) {
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }

  .app-wrapper,
  .main-content,
  #pageDirectory,
  #pageDashboard,
  #pageStats,
  #pageTools,
  #pageDatabase,
  #pageContact {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ????? ??? sidebar ?? ???????? ???? ???? */
  .dir-sidebar,
  .panel-card.sidebar-panel,
  [class*="sidebar"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ??? ?? ???? ::after ?? ::before ???? ???? ??? viewport */
  .stats-row::after,
  .stats-row::before,
  .content-section::after,
  .content-section::before,
  .directory-layout::after,
  .directory-layout::before {
    display: none !important;
    content: none !important;
  }

  /* directory layout: ???? ???? */
  .directory-layout {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
}

/* =====================================================
   FIX 1: ????? ???? ?????? ?? page-banner ??? ????????
   FIX 2: ????? overflow ?? stats ??? ???????? (???? 3)
   ===================================================== */
@media screen and (max-width: 768px) {

  /* ??? FIX 1: ????? ???? ?? banner ? hero ??? */
  .page-banner::before,
  .page-banner::after,
  .section-banner::before,
  .section-banner::after,
  .hero-section::before,
  .hero-section::after,
  #pageDashboard .hero-section::before,
  #pageDashboard .hero-section::after {
    display: none !important;
    content: none !important;
  }

  .page-banner-content::after {
    display: none !important;
    content: none !important;
  }

  /* ??? FIX 2: ????? overflow ?? stats section ??? */
  .content-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .stats-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .stat-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ????? ?????? ???? ?? ??? overflow */
  .page-section,
  .page-section.active {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   FIX FINAL: ?????? Répertoire ?? ?????? ??????
   ===================================================== */
@media screen and (max-width: 768px) {

  #pageDirectory,
  #pageDirectory .content-section,
  #pageDirectory .table-card,
  #pageDirectory .data-table-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #pageDirectory .data-table,
  #pageDirectory .data-table tbody,
  #pageDirectory .data-table tbody tr {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #pageDirectory .data-table td {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #pageDirectory .email-cell-content,
  #pageDirectory .email-cell-content span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =====================================================
   FIX CRITICAL: ????? min-width ?????? ??? ????????
   ???? ???? ?????? ???? 920px+ ??? ????? ?????
   ===================================================== */
@media screen and (max-width: 768px) {

  #pageDirectory .data-table,
  body.is-admin #pageDirectory .data-table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  #pageDirectory .data-table th,
  #pageDirectory .data-table td {
    width: auto !important;
    min-width: 0 !important;
  }

  #pageDirectory .data-table-wrap {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   PREMIUM MODAL CLOSE BUTTONS (X) STYLING
   ===================================================== */
.modal-close,
.modal-close-modern,
.modal-close-new,
.auth-close-btn,
.config-close-btn,
.employee-details-close,
.close-modal {
  display: flex !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #334155 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10000 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.modal-close:hover,
.modal-close-modern:hover,
.modal-close-new:hover,
.auth-close-btn:hover,
.config-close-btn:hover,
.employee-details-close:hover,
.close-modal:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: scale(1.06) rotate(90deg) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28) !important;
}

/* Dark mode compatibility */
html.dark-mode .modal-close,
html.dark-mode .modal-close-modern,
html.dark-mode .modal-close-new,
html.dark-mode .auth-close-btn,
html.dark-mode .config-close-btn,
html.dark-mode .employee-details-close,
html.dark-mode .close-modal {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(96, 165, 250, 0.18) !important;
  color: #f1f5f9 !important;
}

html.dark-mode .modal-close:hover,
html.dark-mode .modal-close-modern:hover,
html.dark-mode .modal-close-new:hover,
html.dark-mode .auth-close-btn:hover,
html.dark-mode .config-close-btn:hover,
html.dark-mode .employee-details-close:hover,
html.dark-mode .close-modal:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}


/* ============================================================
   CUSTOM BACKGROUND IMAGE — Labo Nedjma v5.5.79
   ============================================================ */

/* Override body background with custom image */
body {
  background-image: url('assets/custom-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
}

/* Remove the dot pattern overlay to keep image clean */
body::before {
  display: none !important;
}

/* Make blobs invisible so image shows cleanly */
.app-bg-decor {
  display: none !important;
}

/* Ensure navbar and cards stay readable on top of image */
.main-navbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
}

html.dark-mode .main-navbar {
  background: rgba(5, 15, 30, 0.85) !important;
}

/* Page sections background — glass effect on top of image */
.page-section {
  background: transparent !important;
}

/* Splash screen — also show the image */
.splash-screen {
  background: var(--bg-main) !important;
  background-image: none !important;
}

/* ============================================================
   LIGHTWEIGHT TRANSITION ANIMATIONS v6.0.6
   All animations use ONLY opacity + transform (GPU composited)
   to avoid triggering layout/paint and save device resources.
   ============================================================ */

/* --- View Transition API Disabled on Root (Prevents Full-Page Ghosting & White Flash) --- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}

/* --- Page Banner (Light Subtle Motion, Zero Flash) --- */
.page-section.active .page-banner {
  animation: subtleBannerEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

@keyframes subtleBannerEnter {
  0% {
    opacity: 0.92;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Content Section (Solid, Instant, Zero Flash) --- */
.page-section.active .content-section {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* --- Cards on Active Pages (Solid, Crisp, No Stagger Blanking) --- */
.page-section.active .stat-card,
.page-section.active .module-card,
.page-section.active .tool-card,
.page-section.active .unit-stat-card,
.page-section.active .db-card,
.page-section.active .panel-card,
.page-section.active .table-card,
.page-section.active .service-card {
  opacity: 1 !important;
  animation: none !important;
}

/* --- Nav Link Active Indicator Smooth Transition --- */
.nav-link {
  transition: color var(--motion-duration-fast) var(--motion-ease-out),
              background var(--motion-duration-fast) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-out) !important;
}

/* --- Modal Box Enhanced Entry --- */
.modal-overlay {
  transition: opacity var(--motion-duration-modal) var(--motion-ease-out) !important;
}

.modal-overlay.show .modal-box,
.modal.show .modal-content,
.modal.show .modal-content.admin-modal-split,
.modal-overlay.show .employee-details-modal {
  animation: modalSlideIn var(--motion-duration-modal) var(--motion-ease-out) both;
}

@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Notification Dropdown Slide In --- */
.notif-dropdown {
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-out) !important;
  transform-origin: top right;
}

.notif-dropdown:not(.show) {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
}

.notif-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Hover Micro-Animations for Cards --- */
.stat-card,
.module-card,
.tool-card,
.unit-stat-card {
  transition: transform var(--motion-duration-normal) var(--motion-ease-out),
              box-shadow var(--motion-duration-normal) var(--motion-ease-out),
              border-color var(--motion-duration-normal) var(--motion-ease-out) !important;
}

.tool-card:hover,
.unit-stat-card:hover {
  transform: var(--motion-translate-y) scale(var(--motion-scale-hover)) !important;
}

/* --- Interactive Elements Hover and Press Feedback --- */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-login-gov,
.btn-action,
.btn-modern-submit,
.mob-nav-item,
.btn-req-details,
.btn-show-more-req {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out),
              background var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out),
              opacity var(--motion-duration-fast) var(--motion-ease-out) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-login-gov:hover,
.btn-action:hover,
.btn-modern-submit:hover,
.btn-req-details:hover,
.btn-show-more-req:hover {
  opacity: 0.92;
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-login-gov:active,
.btn-action:active,
.btn-modern-submit:active,
.mob-nav-item:active,
.nav-link:active,
.btn-req-details:active,
.btn-show-more-req:active {
  transform: scale(var(--motion-scale-press)) !important;
}

/* Save Success Feedback Button State */
.btn-modern-submit.saved-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  transform: scale(1) !important;
}

/* --- Mobile Bottom Nav Item Tap --- */
.mob-nav-item {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out), color var(--motion-duration-fast) var(--motion-ease-out) !important;
}

.mob-nav-item.active i {
  transition: transform var(--motion-duration-modal) var(--motion-ease-out) !important;
}

/* --- Splash Screen Fade Out Enhancement --- */
.splash-screen {
  transition: opacity 0.3s var(--motion-ease-out), transform 0.3s var(--motion-ease-out) !important;
}

.splash-screen.splash-hidden {
  opacity: 0 !important;
  transform: scale(1.01) !important;
}

/* --- Hero Section Content Reveal --- */
.page-section.active .hero-section {
  animation: heroReveal var(--motion-duration-normal) var(--motion-ease-out) both;
}

@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Table Rows Subtle Fade --- */
.page-section.active .email-row {
  animation: rowFadeIn var(--motion-duration-normal) var(--motion-ease-out) both;
}

.page-section.active .email-row:nth-child(n+2) { animation-delay: 0.01s; }
.page-section.active .email-row:nth-child(n+4) { animation-delay: 0.02s; }
.page-section.active .email-row:nth-child(n+6) { animation-delay: 0.03s; }

@keyframes rowFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* --- Skeleton Loading & Shimmer Animation --- */
.skeleton-item {
  pointer-events: none;
}

.skeleton-shimmer {
  background: #e2e8f0;
  position: relative;
  overflow: hidden;
}

html.dark-mode .skeleton-shimmer {
  background: #1e293b;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer-anim 1.5s infinite linear;
}

html.dark-mode .skeleton-shimmer::after {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(15, 23, 42, 0) 100%
  );
}

@keyframes shimmer-anim {
  100% {
    transform: translateX(100%);
  }
}

/* Disable Shimmer Animation on Performance Lite, Reduced Motion or when Document is Hidden */
html.performance-lite .skeleton-shimmer::after,
html.effects-paused .skeleton-shimmer::after,
html.effects-paused *,
html.effects-paused *::before,
html.effects-paused *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   GPU-SAVER / Performance Lite: Reduce animations to simple fades
   ============================================================ */
html.render-optimized.gpu-saver .page-section.active .page-banner,
html.render-optimized.gpu-saver .page-section.active .tool-card,
html.render-optimized.gpu-saver .page-section.active .unit-stat-card,
html.render-optimized.gpu-saver .page-section.active .db-card,
html.render-optimized.gpu-saver .page-section.active .panel-card,
html.render-optimized.gpu-saver .page-section.active .table-card,
html.render-optimized.gpu-saver .page-section.active .service-card,
html.render-optimized.gpu-saver .page-section.active .content-section,
html.render-optimized.gpu-saver .page-section.active .hero-section,
html.render-optimized.gpu-saver .page-section.active .email-row,
html.performance-lite .page-section.active .page-banner,
html.performance-lite .page-section.active .tool-card,
html.performance-lite .page-section.active .unit-stat-card,
html.performance-lite .page-section.active .db-card,
html.performance-lite .page-section.active .panel-card,
html.performance-lite .page-section.active .table-card,
html.performance-lite .page-section.active .service-card,
html.performance-lite .page-section.active .content-section,
html.performance-lite .page-section.active .hero-section,
html.performance-lite .page-section.active .email-row {
  animation: pageFadeInSimple 0.12s ease-out both !important;
  animation-delay: 0s !important;
}

html.render-optimized.gpu-saver .modal-overlay.show .modal-box,
html.performance-lite .modal-overlay.show .modal-box,
html.performance-lite .modal.show .modal-content,
html.performance-lite .modal-overlay.show .employee-details-modal {
  animation: pageFadeInSimple 0.12s ease-out both !important;
}

html.performance-lite .skeleton-shimmer::after {
  animation: none !important;
  display: none !important;
}

/* ============================================================
   PREFERS-REDUCED-MOTION: Respect user OS accessibility setting
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-section.active,
  .page-section.active .page-banner,
  .page-section.active .stat-card,
  .page-section.active .module-card,
  .page-section.active .tool-card,
  .page-section.active .unit-stat-card,
  .page-section.active .content-section,
  .page-section.active .hero-section,
  .page-section.active .email-row,
  .modal-overlay.show .modal-box,
  .modal.show .modal-content,
  .modal-overlay.show .employee-details-modal,
  .splash-screen,
  .skeleton-shimmer::after {
    animation: none !important;
    transition: none !important;
  }

  .nav-link,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-login-gov,
  .btn-action,
  .btn-modern-submit,
  .mob-nav-item,
  .btn-req-details,
  .btn-show-more-req {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   MOTION LITE: Adaptive performance mode (FPS < 35 detected)
   ============================================================ */
html.motion-lite {
  /* Shorten motion timings */
  --motion-duration-fast: 60ms;
  --motion-duration-normal: 100ms;
  --motion-duration-modal: 120ms;
}

/* Disable card translation / scaling hover effects */
html.motion-lite .tool-card:hover,
html.motion-lite .unit-stat-card:hover,
html.motion-lite .service-card:hover,
html.motion-lite .hero-stat-badge:hover,
html.motion-lite .robot-date-badge:hover {
  transform: none !important;
}

/* Convert all complex animations to simple quick fade-ins */
html.motion-lite .page-section.active .page-banner,
html.motion-lite .page-section.active .tool-card,
html.motion-lite .page-section.active .unit-stat-card,
html.motion-lite .page-section.active .db-card,
html.motion-lite .page-section.active .panel-card,
html.motion-lite .page-section.active .table-card,
html.motion-lite .page-section.active .service-card,
html.motion-lite .page-section.active .content-section,
html.motion-lite .page-section.active .hero-section,
html.motion-lite .page-section.active .email-row,
html.motion-lite .modal-overlay.show .modal-box,
html.motion-lite .modal.show .modal-content,
html.motion-lite .modal-overlay.show .employee-details-modal {
  animation: pageFadeInSimple 0.12s ease-out both !important;
  animation-delay: 0s !important;
}

/* Disable shimmer effect */
html.motion-lite .skeleton-shimmer::after {
  animation: none !important;
  display: none !important;
}

/* ============================================================
   DATABASE SYNC STATUS INDICATOR (Highly Optimized, GPU Accelerated)
   ============================================================ */
.db-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.95) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease !important;
}

.db-sync-status:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important;
}

.db-sync-status.syncing {
  border-color: rgba(59, 130, 246, 0.45) !important;
}

.db-sync-status.synced {
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.db-sync-status.offline {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

.db-sync-status.syncing .db-sync-dot {
  color: #3b82f6 !important;
}
.db-sync-status.synced .db-sync-dot {
  color: #10b981 !important;
}
.db-sync-status.offline .db-sync-dot {
  color: #ef4444 !important;
}

/* GPU Accelerated LED Pulse Dot */
.db-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  position: relative;
  display: inline-block;
}

.db-sync-dot::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
  will-change: transform, opacity;
  transform: scale(1);
}

/* Trigger pulse-ring animation on pseudo element using transform/opacity (0% CPU) */
.db-sync-status.syncing .db-sync-dot::after {
  animation: pulse-ring-gpu 1.2s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
}

.db-sync-status.synced .db-sync-dot::after {
  animation: pulse-ring-gpu 2.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
}

.db-sync-status.offline .db-sync-dot::after {
  animation: pulse-ring-gpu 2.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Sync Spin Icon (Only spins when actively syncing) */
@keyframes spin-gpu {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.db-sync-status.syncing i {
  animation: spin-gpu 1s infinite linear;
  will-change: transform;
}

@keyframes pulse-ring-gpu {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Hide the popover on mobile to prevent layout distortion */
@media (max-width: 768px) {
  .db-sync-popover {
    display: none !important;
  }
}

/* Database Sync Popover */
.db-sync-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 230px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  cursor: default;
}

html.dark-mode .db-sync-popover {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.db-sync-popover.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Popover Content */
.db-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

html.dark-mode .db-popover-header {
  color: #3b82f6;
}

.db-popover-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-popover-info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.info-label {
  color: var(--text-muted);
  opacity: 0.8;
  padding-top: 1px;
}

.info-value {
  color: var(--text-main);
  font-weight: 600;
  text-align: right;
  line-height: 1.3;
}

.db-popover-footer {
  margin-top: 12px;
}

.db-popover-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green-bg);
  color: var(--green);
  border: 1.5px solid rgba(0, 168, 89, 0.15);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

html.dark-mode .db-popover-btn {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.15);
}

.db-popover-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

html.dark-mode .db-popover-btn:hover {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.db-popover-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   UI/UX IMPROVEMENTS & MODERNIZATION OVERRIDES (v6.0.6)
   ============================================================ */

/* Page Transitions */
.page-section {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: none !important;
}

.page-section.active {
  display: block !important;
  animation: pageFadeSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes pageFadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards, Panels & Modules */
.stat-card,
.tool-card,
.panel-card,
.table-card,
.db-card,
.service-card {
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 
    0 10px 25px -4px rgba(15, 23, 42, 0.06), 
    0 4px 12px -2px rgba(15, 23, 42, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  background: var(--card-bg, #ffffff) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.unit-stat-card {
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark-mode .stat-card,
html.dark-mode .tool-card,
html.dark-mode .panel-card,
html.dark-mode .table-card,
html.dark-mode .db-card,
html.dark-mode .service-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 12px 30px -4px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background: #1e293b !important;
}

html.dark-mode .unit-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Light Hover effects */
.stat-card:hover,
.module-card:hover,
.tool-card:hover,
.unit-stat-card:hover,
.panel-card:hover,
.db-card:hover,
.service-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 
    0 20px 35px -6px rgba(15, 23, 42, 0.10), 
    0 6px 16px -4px rgba(15, 23, 42, 0.05) !important;
}

html.dark-mode .tool-card:hover,
html.dark-mode .unit-stat-card:hover,
html.dark-mode .panel-card:hover,
html.dark-mode .db-card:hover,
html.dark-mode .service-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    0 20px 40px -6px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Tables & Rows */
.table-card {
  overflow: hidden !important;
}

.data-table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  width: 100% !important;
}

.data-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--bg-header, #f8fafc) !important;
  box-shadow: 0 1px 0 var(--border, rgba(0,0,0,0.08)) !important;
  padding: 14px 16px !important;
  font-weight: 700 !important;
  color: var(--text-muted, #64748b) !important;
}

html.dark-mode .data-table thead th {
  background: #1e293b !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.data-table tbody tr {
  background: var(--card-bg, #ffffff) !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.data-table tbody tr td {
  padding: 16px !important;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.05)) !important;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.05)) !important;
}

.data-table tbody tr td:first-child {
  border-left: 1px solid var(--border, rgba(0, 0, 0, 0.05)) !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.data-table tbody tr td:last-child {
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.05)) !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

html.dark-mode .data-table tbody tr td {
  border-color: rgba(255,255,255,0.05) !important;
}

/* Row Hover & Active Click Highlights */
.data-table tbody tr:hover {
  background: var(--primary-light-bg, #f0f7ff) !important;
}

html.dark-mode .data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

.data-table tbody tr.active-row,
.data-table tbody tr:active {
  background: var(--primary-light-bg-active, #e0f2fe) !important;
  transform: scale(0.995) !important;
}

html.dark-mode .data-table tbody tr.active-row,
html.dark-mode .data-table tbody tr:active {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Modals Overlay & Box */
.modal-overlay {
  backdrop-filter: blur(6px) !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.modal-overlay.show .modal-box {
  animation: modalCorporateFadeIn 0.2s cubic-bezier(0.25, 1, 0.5, 1) both !important;
}

@keyframes modalCorporateFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-box {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

html.dark-mode .modal-box {
  background: #0f172a !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.modal-split-container {
  display: flex !important;
}

.modal-form-area {
  padding: 32px !important;
}

.modal-box h3 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em !important;
}

/* Unified Buttons Styling */
.btn-modern-submit,
.btn-primary,
.btn-add,
.btn-copy,
.btn-secondary,
.btn-modern-cancel,
.btn-danger,
.btn-danger-confirm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  border: 1px solid transparent !important;
  outline: none !important;
}

/* Transform click-down feedback */
.btn-modern-submit:active,
.btn-primary:active,
.btn-add:active,
.btn-copy:active,
.btn-secondary:active,
.btn-modern-cancel:active,
.btn-danger:active {
  transform: scale(0.96) !important;
}

/* Primary buttons */
.btn-modern-submit,
.btn-primary,
.btn-add {
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) !important;
}

.btn-modern-submit:hover,
.btn-primary:hover,
.btn-add:hover {
  background: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Copy Actions Button */
.btn-copy {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

.btn-copy:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Secondary & Cancel Buttons */
.btn-secondary,
.btn-modern-cancel {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.btn-secondary:hover,
.btn-modern-cancel:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

html.dark-mode .btn-secondary,
html.dark-mode .btn-modern-cancel {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-modern-cancel:hover {
  background: #475569 !important;
}

/* Danger / Delete button */
.btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Form inputs and state visual cues */
.modern-admin-form .form-group label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--text-muted, #64748b) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.modern-admin-form input[type="text"],
.modern-admin-form input[type="email"],
.modern-admin-form input[type="tel"],
.modern-admin-form select {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  background: var(--input-bg, #ffffff) !important;
  color: var(--text-main, #0f172a) !important;
  font-size: 0.85rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
}

html.dark-mode .modern-admin-form input[type="text"],
html.dark-mode .modern-admin-form input[type="email"],
html.dark-mode .modern-admin-form input[type="tel"],
html.dark-mode .modern-admin-form select {
  border: 1px solid #475569 !important;
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* Focus and Invalid states */
.modern-admin-form input:focus,
.modern-admin-form select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.modern-admin-form input:invalid:focus,
.modern-admin-form input.invalid-field {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Unified Toast Notifications */
#copyNotification {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28) !important;
  padding: 12px 24px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.01em !important;
  z-index: 300000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#copyNotification::before {
  content: "\f058" !important; /* fa-check-circle */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  font-size: 1rem !important;
}

/* Empty state design system */
#emailList tr td[colspan="7"] {
  text-align: center;
  padding: 60px 20px !important;
  color: #64748b !important;
}

#emailList tr td[colspan="7"]::before {
  content: "\f07c"; /* folder-open */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  font-size: 2.8rem;
  color: #3b82f6;
  opacity: 0.4;
  margin-bottom: 12px;
}

.notif-empty {
  text-align: center;
  padding: 40px 20px !important;
  color: #64748b !important;
}

.notif-empty i {
  font-size: 2.8rem !important;
  color: #94a3b8 !important;
  opacity: 0.4 !important;
  margin-bottom: 12px !important;
}

.loading-requests {
  text-align: center;
  padding: 50px 20px !important;
  color: #64748b !important;
  background: var(--card-bg, #ffffff) !important;
  border: 1px dashed var(--border, rgba(0,0,0,0.1)) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}



#adminAnnouncementsContainer p {
  text-align: center;
  padding: 30px 20px !important;
  color: #64748b !important;
  background: rgba(0,0,0,0.02) !important;
  border-radius: 8px !important;
  border: 1px dashed var(--border, rgba(0,0,0,0.08)) !important;
}

html.dark-mode #adminAnnouncementsContainer p {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ============================================================
   SYSTEM BACKGROUND SIMPLIFICATION (v6.0.6)
   ============================================================ */

/* Modern Enterprise clean static background with soft waves, geometric shapes, and a subtle grid pattern */
html,
body {
  background-color: #f1f5f9 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1440 900' preserveAspectRatio='none'><defs><linearGradient id='bgGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23f1f5f9'/><stop offset='100%25' stop-color='%23e2e8f0'/></linearGradient><radialGradient id='gradBlue' cx='80%25' cy='20%25' r='60%25'><stop offset='0%25' stop-color='%233b82f6' stop-opacity='0.55'/><stop offset='100%25' stop-color='%233b82f6' stop-opacity='0'/></radialGradient><radialGradient id='gradTeal' cx='20%25' cy='80%25' r='50%25'><stop offset='0%25' stop-color='%230ea5e9' stop-opacity='0.48'/><stop offset='100%25' stop-color='%230ea5e9' stop-opacity='0'/></radialGradient><radialGradient id='gradPurple' cx='15%25' cy='15%25' r='45%25'><stop offset='0%25' stop-color='%238b5cf6' stop-opacity='0.42'/><stop offset='100%25' stop-color='%238b5cf6' stop-opacity='0'/></radialGradient><radialGradient id='gradGreen' cx='90%25' cy='90%25' r='40%25'><stop offset='0%25' stop-color='%2310b981' stop-opacity='0.35'/><stop offset='100%25' stop-color='%2310b981' stop-opacity='0'/></radialGradient><pattern id='grid' width='96' height='96' patternUnits='userSpaceOnUse'><path d='M 96 0 L 0 0 0 96' fill='none' stroke='%2394a3b8' stroke-width='0.5' opacity='0.03'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23bgGrad)'/><rect width='100%25' height='100%25' fill='url(%23gradBlue)'/><rect width='100%25' height='100%25' fill='url(%23gradTeal)'/><rect width='100%25' height='100%25' fill='url(%23gradPurple)'/><rect width='100%25' height='100%25' fill='url(%23gradGreen)'/><rect width='100%25' height='100%25' fill='url(%23grid)'/><path d='M-100,80 Q400,-20 900,100 T1900,20' fill='none' stroke='%233b82f6' stroke-width='0.5' opacity='0.04'/><path d='M-100,680 Q600,520 1100,740 T1900,600' fill='none' stroke='%230ea5e9' stroke-width='0.5' opacity='0.03'/><circle cx='120' cy='250' r='10' fill='none' stroke='%233b82f6' stroke-width='0.5' opacity='0.04'/><circle cx='1250' cy='380' r='15' fill='none' stroke='%230ea5e9' stroke-width='0.5' opacity='0.03'/></svg>") !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Dark mode compatibility: Deep professional dark blue-gray with subtle vector waves and shapes */
html.dark-mode,
html.dark-mode body {
  background-color: #0b0f19 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1440 900' preserveAspectRatio='none'><defs><linearGradient id='bgGradDark' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%230b0f19'/><stop offset='100%25' stop-color='%2305070c'/></linearGradient><radialGradient id='gradBlueDark' cx='80%25' cy='20%25' r='60%25'><stop offset='0%25' stop-color='%231d4ed8' stop-opacity='0.60'/><stop offset='100%25' stop-color='%231d4ed8' stop-opacity='0'/></radialGradient><radialGradient id='gradTealDark' cx='20%25' cy='80%25' r='50%25'><stop offset='0%25' stop-color='%230369a1' stop-opacity='0.52'/><stop offset='100%25' stop-color='%230369a1' stop-opacity='0'/></radialGradient><radialGradient id='gradPurpleDark' cx='15%25' cy='15%25' r='45%25'><stop offset='0%25' stop-color='%236d28d9' stop-opacity='0.45'/><stop offset='100%25' stop-color='%236d28d9' stop-opacity='0'/></radialGradient><radialGradient id='gradGreenDark' cx='90%25' cy='90%25' r='40%25'><stop offset='0%25' stop-color='%23047857' stop-opacity='0.35'/><stop offset='100%25' stop-color='%23047857' stop-opacity='0'/></radialGradient><pattern id='gridDark' width='96' height='96' patternUnits='userSpaceOnUse'><path d='M 96 0 L 0 0 0 96' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.03'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23bgGradDark)'/><rect width='100%25' height='100%25' fill='url(%23gradBlueDark)'/><rect width='100%25' height='100%25' fill='url(%23gradTealDark)'/><rect width='100%25' height='100%25' fill='url(%23gradPurpleDark)'/><rect width='100%25' height='100%25' fill='url(%23gradGreenDark)'/><rect width='100%25' height='100%25' fill='url(%23gridDark)'/><path d='M-100,80 Q400,-20 900,100 T1900,20' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.04'/><path d='M-100,680 Q600,520 1100,740 T1900,600' fill='none' stroke='%230284c7' stroke-width='0.5' opacity='0.03'/></svg>") !important;
  background-size: 100% 100% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Hide all background decorative grids, dot arrays, and glowing vector graphics */
body::before,
body::after,
html::before,
html::after,
.app-bg-decor,
.bg-blob,
.hero-bg-art,
.splash-bg-art,
.ai-robot-glow,
.dev-banner-glow,
.side-accent-glow {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Ensure all page-level content containers render on top of the gray background */
.page-content,
#pageDashboard,
.page-section,
#pageDashboard .hero-section::before,
#pageDashboard .hero-section::after {
  background: transparent !important;
  background-image: none !important;
}

/* Increase color intensity and opacity of page banners to make them stand out vibrant on the gray background */
.page-banner {
  background: 
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(var(--banner-rgb), 0.45) 0%, transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(135deg, var(--banner-a) 0%, var(--banner-b) 100%) !important;
  background-size: 100% 100%, 100% 100%, 20px 20px, 100% 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 
    0 20px 45px -12px rgba(var(--banner-rgb), 0.32), 
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.page-banner:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 
    0 24px 50px -10px rgba(var(--banner-rgb), 0.38), 
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

/* Ensure the banner header text is white and has high legibility */
.page-banner h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Make the accent text fit the intense background (either white or a soft translucent white) */
.page-banner h2 .accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Make the icon inside the header card highly visible as a high-contrast accent */
.page-banner h2 > i {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.page-banner:hover h2 > i {
  transform: translateY(-2px) scale(1.08) rotate(-4deg) !important;
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

/* Adjust the description text to be light and highly readable */
.page-banner p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Style banner action buttons to match the vibrant background */
.page-banner .btn-manage-units {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.page-banner .btn-manage-units:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

html.dark-mode .page-banner {
  background: 
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(var(--banner-rgb), 0.25) 0%, transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.2px),
    linear-gradient(135deg, rgba(var(--banner-rgb), 0.5) 0%, rgba(var(--banner-rgb), 0.25) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 20px 45px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

/* Style ACCÈS RAPIDE section labels for high contrast on the new gray background */
.section-label {
  color: #334155 !important; /* Solid Slate-700 for clear legibility in light mode */
}

.section-label-line {
  background: rgba(51, 65, 85, 0.22) !important; /* Standout divider line in light mode */
}

/* Dark mode compatibility */
html.dark-mode .section-label {
  color: #f1f5f9 !important; /* Light Slate for dark mode contrast */
}

html.dark-mode .section-label-line {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Decorative Background Graphics for Page Banners (Centered Inline SVGs) */
.page-banner-decor {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-30%, -50%) !important;
  width: 400px !important;
  height: 120px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  color: #ffffff !important;
  opacity: 0.22 !important;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.page-banner:hover .page-banner-decor {
  transform: translate(-30%, -52%) scale(1.08) rotate(1.5deg) !important;
  opacity: 0.35 !important;
}

.banner-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Ensure banner content stays on top of the decorative layer */
.page-banner-content {
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   ACCÈS SÉCURISÉ - INTERFACE DE CONNEXION UNIFIÉE ET SCINDÉE (SPLIT SCREEN)
   ========================================================================== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #060e22;
  background-image: 
    radial-gradient(circle at 85% 20%, rgba(10, 30, 140, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(14, 165, 233, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(10, 30, 140, 0.20) 0%, transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(135deg, #070e24 0%, #030813 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 45px 45px, 45px 45px, 100% 100%;
  z-index: 99990;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
  overflow-y: auto;
}

.login-overlay.hidden,
html.app-init-unlocked .login-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(1.02) !important;
  display: none !important;
}

html.app-init-locked #pageContent,
html.app-init-locked #mainNavbar,
html.app-init-locked #institutionalBanner,
body.app-locked #pageContent,
body.app-locked #mainNavbar,
body.app-locked #institutionalBanner {
  display: none !important;
}

.login-container {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* Left Side: Info Banner */
.login-side-info {
  flex: 1.2;
  border-right: 1px solid rgba(56, 189, 248, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  background: transparent;
}

.login-info-content {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.system-hero-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.system-logo-large {
  width: 75px;
  height: 75px;
  background: linear-gradient(135deg, rgba(10, 30, 140, 0.4) 0%, rgba(14, 165, 233, 0.2) 100%);
  border-radius: 22px;
  padding: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(10, 30, 140, 0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.system-logo-large:hover {
  transform: scale(1.06) rotate(2deg);
}

.system-logo-large img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.system-hero-info h1 {
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: 2.3rem;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.system-desc {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

.system-features-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  gap: 15px;
  text-align: left;
  transition: all 0.3s ease;
}

.feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, rgba(10, 30, 140, 0.35) 0%, rgba(14, 165, 233, 0.15) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(10, 30, 140, 0.25);
  transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
  background: linear-gradient(135deg, rgba(10, 30, 140, 0.5) 0%, rgba(14, 165, 233, 0.25) 100%);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

.feature-text h4 {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px 0;
}

.feature-text p {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
}

.login-info-footer {
  font-size: 0.75rem;
  color: #64748b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  text-align: left;
}

/* Right Side: Login Form */
.login-side-form {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  box-sizing: border-box;
  background: transparent;
  position: relative;
}

.login-logo-mobile {
  display: none;
}

.login-card {
  background: rgba(10, 24, 58, 0.65);
  border: 1.5px solid rgba(56, 189, 248, 0.22);
  border-radius: 28px;
  width: 100%;
  max-width: 410px;
  padding: 45px 35px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(10, 30, 140, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.login-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.7),
    0 0 45px rgba(10, 30, 140, 0.45);
}

.login-header {
  text-align: center;
  margin-bottom: 25px;
}

.login-title {
  font-family: 'Tajawal', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: #fff;
  margin: 0 0 5px 0;
}

.login-title span {
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.login-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
}

/* Tabs */
.login-tabs {
  display: flex;
  background: rgba(7, 16, 40, 0.7);
  border-radius: 16px;
  padding: 5px;
  margin-bottom: 30px;
  border: 1px solid rgba(56, 189, 248, 0.15);
}

.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 11px;
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.login-tab.active {
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 50%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(10, 30, 140, 0.5);
}

/* Tab Contents */
.login-tab-content {
  display: none;
  animation: tabFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.pin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 30, 140, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: 0.5px;
}

.admin-badge {
  background: rgba(167, 139, 250, 0.15) !important;
  color: #c084fc !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

.pin-error {
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 20px;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Form Unified Input Layout */
.form-group-unified {
  margin-bottom: 22px;
  text-align: left;
}

.form-group-unified label {
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.login-input-wrapper i.prefix-icon {
  position: absolute;
  left: 16px;
  color: #64748b;
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.login-input-wrapper input {
  width: 100%;
  background: rgba(7, 16, 40, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  padding: 13px 16px 13px 46px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.login-input-wrapper input:focus {
  border-color: #38bdf8;
  background: rgba(10, 24, 58, 0.9);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
  outline: none;
}

.login-input-wrapper input:focus + i.prefix-icon {
  color: #38bdf8;
}

.toggle-password-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color 0.2s ease;
}

.toggle-password-btn:hover {
  color: #38bdf8;
}

.btn-unified-login {
  width: 100%;
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 50%, #2563eb 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-family: 'Tajawal', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 22px rgba(10, 30, 140, 0.45);
}

.btn-unified-login:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 8px 28px rgba(10, 30, 140, 0.6);
  background: linear-gradient(135deg, #0d24a8 0%, #2563eb 100%);
}

.btn-unified-login:active {
  transform: translateY(0);
}

/* Responsiveness for Split Screen */
@media (max-width: 992px) {
  .login-side-info {
    display: none !important;
  }
  .login-container {
    justify-content: center;
    align-items: center;
  }
  .login-side-form {
    flex: 1 !important;
    max-width: 450px;
    padding: 20px !important;
  }
  .login-logo-mobile {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-logo-mobile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Change Pin Modal Specifics */
.change-pin-modal {
  max-width: 820px !important;
}

.form-actions-modern {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-modern-save {
  background: #8b5cf6 !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.btn-modern-save:hover {
  background: #7c3aed !important;
}

.purple-bg {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
}

/* ============================================================
   RESPONSIVENESS & SCREEN SHRINK FIX (Premium Update)
   ============================================================ */
@media (min-width: 769px) {
  /* Allow navbar to grow dynamically when contents wrap */
  .main-navbar {
    height: auto !important;
    padding-bottom: 8px !important;
  }
  .navbar-container {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* Allow second tier links to wrap cleanly on narrower desktops */
  .navbar-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }
}

/* Adjust institutional banner on tablet to save space */
@media (max-width: 1024px) and (min-width: 769px) {
  .institutional-banner {
    padding: 8px 16px !important;
    gap: 10px !important;
  }
  .inst-republic {
    font-size: 0.7rem !important;
  }
  .inst-company {
    font-size: 0.6rem !important;
  }
  .inst-badge {
    padding: 5px 10px !important;
    font-size: 0.62rem !important;
  }
  .inst-badge-year {
    display: none !important;
  }
}

/* Hide brand subtitle and system text on tablets to free up horizontal space */
@media (max-width: 1100px) and (min-width: 769px) {
  .brand-system-name {
    display: none !important;
  }
}

/* Hide user profile text (keep only avatar) on medium screens to prevent first row wrapping */
@media (max-width: 1024px) and (min-width: 769px) {
  .user-info-text {
    display: none !important;
  }
  .topbar-user {
    gap: 6px !important;
  }
}

/* Stack the robot below the hero content on screens up to 1300px to prevent overlap */
@media (min-width: 1024px) and (max-width: 1300px) {
  #pageDashboard .hero-content {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    text-align: center !important;
  }
  #pageDashboard .hero-content .hero-badge {
    margin: 0 auto !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #pageDashboard .hero-content .hero-title {
    margin: 10px auto 0 !important;
    max-width: 100% !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #pageDashboard .hero-content .hero-desc {
    margin: 10px auto 0 !important;
    max-width: 100% !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #pageDashboard .hero-content .hero-actions {
    justify-content: center !important;
    margin-top: 15px !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  /* Hide secondary brand and details elements to prevent grid splitting and preserve space */
  #pageDashboard .hero-card-brand,
  #pageDashboard .hero-card-details,
  #pageDashboard .hero-email-decor,
  #pageDashboard .decor-envelope-outline {
    display: none !important;
  }
  #pageDashboard .ai-robot-wrap {
    display: flex !important;
    position: static !important;
    transform: none !important;
    margin: 20px auto 0 !important;
    width: min(580px, calc(100% - 26px)) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #pageDashboard .ai-robot-svg {
    width: 180px !important;
    max-width: 32% !important;
    display: block !important;
  }
}

/* Align the blue shadow target circle under the robot's feet */
#pageDashboard .ai-robot-wrap::before,
#pageDashboard .ai-robot-wrap::after {
  left: 54% !important;
}

/* =====================================================================
   DASHBOARD HERO — Email workspace redesign
   A deliberately image-free composition: Labo Nedjma identity only.
   ===================================================================== */
#pageDashboard .hero-section.hero-section-redesign {
  position: relative !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 24px clamp(20px, 5vw, 76px) 8px !important;
  overflow: hidden !important;
  isolation: isolate;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#pageDashboard .hero-section.hero-section-redesign::before,
#pageDashboard .hero-section.hero-section-redesign::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

#pageDashboard .hero-section.hero-section-redesign::before {
  z-index: -1 !important;
  opacity: 0.34 !important;
  background-image:
    linear-gradient(rgba(203, 213, 225, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 213, 225, 0.12) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,0.36), transparent 94%) !important;
}

#pageDashboard .hero-section.hero-section-redesign::after {
  z-index: -1 !important;
  inset: auto auto -175px 54% !important;
  width: 480px !important;
  height: 480px !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 48px rgba(125, 211, 252, 0.035),
    0 0 0 96px rgba(45, 212, 191, 0.025) !important;
}

#pageDashboard .hero-section-redesign .hero-bg-art,
#pageDashboard .hero-section-redesign .hero-content,
#pageDashboard .hero-section-redesign .ai-robot-wrap {
  display: none !important;
}

#pageDashboard .hero-section-redesign .hero-redesign {
  position: relative !important;
  z-index: 2 !important;
  width: min(1210px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(310px, 0.94fr) minmax(420px, 0.82fr) !important;
  align-items: center !important;
  gap: clamp(40px, 7vw, 100px) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-copy {
  max-width: 590px !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  margin-top: 24px !important;
  padding: 4px 6px 4px 14px !important;
  border: 1px solid rgba(2, 132, 199, 0.32) !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.90) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
  user-select: none !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-eyebrow:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(2, 132, 199, 0.55) !important;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.22), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

#pageDashboard .hero-section-redesign .hero-live-dot {
  position: relative !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 10px rgba(16, 185, 129, 0.75) !important;
  animation: heroPulseGlow 2.5s infinite ease-in-out !important;
}

@keyframes heroPulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 8px rgba(16, 185, 129, 0.75);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12), 0 0 14px rgba(16, 185, 129, 0.95);
  }
}

#pageDashboard .hero-section-redesign .hero-eyebrow-title,
#pageDashboard .hero-section-redesign .hero-redesign-eyebrow > span:nth-child(2) {
  color: #075985 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-eyebrow-divider {
  width: 1px !important;
  height: 14px !important;
  background: rgba(2, 132, 199, 0.30) !important;
  margin: 0 2px !important;
}

#pageDashboard .hero-section-redesign .hero-eyebrow-brand,
#pageDashboard .hero-section-redesign .hero-redesign-eyebrow > span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: 0.67rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-eyebrow:hover .hero-eyebrow-brand,
#pageDashboard .hero-section-redesign .hero-redesign-eyebrow:hover > span:last-child {
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.02) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-title {
  margin: 22px 0 16px !important;
  color: #0f172a !important;
  font-size: clamp(2.6rem, 4.3vw, 4.1rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-title span {
  display: inline-block !important;
  background: linear-gradient(135deg, #0284c7 0%, #0056b3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-description {
  max-width: 530px !important;
  margin: 0 !important;
  padding-left: 16px !important;
  border-left: 3px solid #0284c7 !important;
  color: #475569 !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-primary,
#pageDashboard .hero-section-redesign .hero-redesign-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 49px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0056b3 100%) !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 10px 24px rgba(0, 86, 179, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-primary i {
  transition: transform 0.2s ease !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-secondary {
  color: #1e293b !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 30px rgba(0, 86, 179, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-primary:hover i {
  transform: translateX(4px) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0056b3 !important;
  transform: translateY(-3px) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-assurance {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-assurance span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-assurance i {
  color: #0284c7 !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-assurance .hero-version-pill {
  font-weight: 700 !important;
}

/* Mobile: Elongate version badge to span full width below the two feature badges */
@media (max-width: 768px) {
  #pageDashboard .hero-section-redesign .hero-redesign-assurance {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 18px auto 0 !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-assurance span:not(.hero-version-pill) {
    flex: 1 1 auto !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    font-size: 0.76rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-assurance .hero-version-pill {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 6px 16px !important;
    margin-top: 2px !important;
    font-weight: 750 !important;
  }
}

#pageDashboard .hero-section-redesign .hero-redesign-console {
  position: relative !important;
  width: min(420px, 100%) !important;
  justify-self: end !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid rgba(0, 86, 179, 0.16) !important;
  box-shadow:
    0 20px 45px -10px rgba(0, 86, 179, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-console:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 86, 179, 0.32) !important;
  box-shadow:
    0 24px 50px -10px rgba(0, 86, 179, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-console::before {
  content: '' !important;
  position: absolute !important;
  right: -50px !important;
  top: -50px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
  filter: blur(20px) !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-console::after {
  content: '' !important;
  position: absolute !important;
  left: -40px !important;
  bottom: -40px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
  filter: blur(20px) !important;
}

#pageDashboard .hero-section-redesign .hero-console-header,
#pageDashboard .hero-section-redesign .hero-console-focus,
#pageDashboard .hero-section-redesign .hero-console-metrics,
#pageDashboard .hero-section-redesign .hero-console-footer {
  position: relative !important;
  z-index: 1 !important;
}

#pageDashboard .hero-section-redesign .hero-console-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#pageDashboard .hero-section-redesign .hero-console-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#pageDashboard .hero-section-redesign .hero-console-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0056b3, #0284c7) !important;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-size: 1rem !important;
}

#pageDashboard .hero-section-redesign .hero-console-brand span:last-child {
  display: grid !important;
  gap: 1px !important;
}

#pageDashboard .hero-section-redesign .hero-console-brand strong {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

#pageDashboard .hero-section-redesign .hero-console-brand small {
  color: #64748b !important;
  background: none !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
}

#pageDashboard .hero-section-redesign .hero-console-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
  border-radius: 999px !important;
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#pageDashboard .hero-section-redesign .hero-console-status > span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px #10b981 !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 96px !important;
  margin-top: 14px !important;
  padding: 13px 15px !important;
  border: 1.5px solid rgba(191, 219, 254, 0.8) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(240, 253, 250, 0.8) 100%) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.06) !important;
  transition: all 0.25s ease !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
  transform: translateY(-3px) !important;
}

#pageDashboard .hero-section-redesign .hero-console-orb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7, #0056b3) !important;
  box-shadow: 0 6px 18px rgba(0, 86, 179, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-size: 1.3rem !important;
}

#pageDashboard .hero-section-redesign .hero-console-kicker {
  display: inline-block !important;
  margin-bottom: 5px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  font-size: 0.63rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus p {
  margin: 3px 0 0 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

#pageDashboard .hero-section-redesign .hero-console-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

#pageDashboard .hero-section-redesign .hero-console-metric {
  position: relative !important;
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 12px 9px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 15px !important;
  background: #f8fafc !important;
}

#pageDashboard .hero-section-redesign .hero-console-metric span,
#pageDashboard .hero-section-redesign .hero-console-metric strong {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

#pageDashboard .hero-section-redesign .hero-console-metric span {
  color: #64748b !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
}

#pageDashboard .hero-section-redesign .hero-console-metric strong {
  margin-top: 6px !important;
  color: #0f172a !important;
  font-size: 1.36rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
}

#pageDashboard .hero-section-redesign .hero-console-metric i {
  position: absolute !important;
  right: 8px !important;
  bottom: 9px !important;
  color: rgba(2, 132, 199, 0.15) !important;
  font-size: 1.3rem !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer span {
  color: #64748b !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer span i {
  margin-right: 4px !important;
  color: #0284c7 !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer strong {
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pageDashboard .hero-section-redesign .hero-console-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 35px !important;
  border: 1px solid rgba(0, 86, 179, 0.20) !important;
  border-radius: 11px !important;
  color: #0056b3 !important;
  background: rgba(0, 86, 179, 0.08) !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease !important;
}

#pageDashboard .hero-section-redesign .hero-console-refresh:hover {
  background: rgba(0, 86, 179, 0.16) !important;
  transform: rotate(30deg) !important;
}

@media (max-width: 1060px) {
  #pageDashboard .hero-section.hero-section-redesign {
    min-height: 0 !important;
    padding: 32px 30px 56px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign {
    grid-template-columns: 1fr !important;
    gap: 31px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-copy {
    max-width: 660px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-actions,
  #pageDashboard .hero-section-redesign .hero-redesign-assurance {
    justify-content: center !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-console {
    justify-self: center !important;
  }
}

/* Dashboard seam: the hero begins directly after the navigation area. */
.main-navbar {
  margin-bottom: 0 !important;
}

.main-navbar + .page-content,
#pageDashboard.page-section.active {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Replace the repeated KPI cards in the hero with a direct IT support contact. */
#pageDashboard .hero-section-redesign .hero-support-card {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  margin-top: 12px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
  color: inherit !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(236, 253, 245, 0.95)) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

#pageDashboard .hero-section-redesign .hero-support-card::before {
  content: '' !important;
  position: absolute !important;
  right: -24px !important;
  top: -52px !important;
  width: 156px !important;
  height: 156px !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 26px rgba(16, 185, 129, 0.03) !important;
  pointer-events: none !important;
}

#pageDashboard .hero-section-redesign .hero-support-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

#pageDashboard .hero-section-redesign .hero-support-icon,
#pageDashboard .hero-section-redesign .hero-support-action,
#pageDashboard .hero-section-redesign .hero-support-info {
  position: relative !important;
  z-index: 1 !important;
}

#pageDashboard .hero-section-redesign .hero-support-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-size: 1.15rem !important;
}

#pageDashboard .hero-section-redesign .hero-support-info {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

#pageDashboard .hero-section-redesign .hero-support-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

#pageDashboard .hero-section-redesign .hero-support-role {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #ffffff !important;
  background: #10b981 !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

#pageDashboard .hero-section-redesign .hero-support-role i {
  color: #ffffff !important;
  font-size: 0.45rem !important;
}

#pageDashboard .hero-section-redesign .hero-support-info strong {
  overflow: hidden !important;
  color: #047857 !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pageDashboard .hero-section-redesign .hero-support-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #047857 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}

#pageDashboard .hero-section-redesign .hero-support-phone i {
  color: #10b981 !important;
  font-size: 0.95rem !important;
}

#pageDashboard .hero-section-redesign .hero-support-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-left: auto !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 10px !important;
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease !important;
}

#pageDashboard .hero-section-redesign .hero-support-card:hover .hero-support-action {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  transform: translateX(2px) scale(1.08) !important;
}

/* Flush desktop dashboard: no pale shadow band or rounded edge before the hero. */
@media (min-width: 769px) {
  .main-navbar {
    box-shadow: none !important;
  }

  #pageDashboard.page-section.active {
    margin-top: -22px !important;
  }
}

#pageDashboard,
#pageDashboard .hero-section.hero-section-redesign {
  border-radius: 0 !important;
}

/* Compact desktop/tablet: retain a calm one-line navigation instead of a sparse second row. */
@media (min-width: 769px) and (max-width: 1200px) {
  .main-navbar {
    padding-bottom: 6px !important;
  }

  .main-navbar .navbar-links {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-height: 58px !important;
    margin-top: 5px !important;
    padding: 6px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .main-navbar .navbar-links::-webkit-scrollbar {
    display: none;
  }

  .main-navbar .nav-link {
    flex: 0 0 auto !important;
    min-height: 43px !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
    font-size: 0.83rem !important;
  }
}

/* Use the available medium-width space: copy and console stay side by side above tablet size. */
@media (min-width: 820px) and (max-width: 1200px) {
  #pageDashboard .hero-section.hero-section-redesign {
    min-height: auto !important;
    padding: 20px 24px 8px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign {
    grid-template-columns: minmax(320px, 0.92fr) minmax(390px, 0.84fr) !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 42px) !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-copy {
    max-width: 500px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-title {
    margin-top: 16px !important;
    font-size: clamp(2.35rem, 4.1vw, 3.15rem) !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-description {
    max-width: 470px !important;
    font-size: 0.89rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-actions,
  #pageDashboard .hero-section-redesign .hero-redesign-assurance {
    justify-content: flex-start !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-console {
    width: 100% !important;
    max-width: 375px !important;
    justify-self: end !important;
    padding: 13px !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-focus {
    min-height: 90px !important;
    margin-top: 12px !important;
    padding: 11px 12px !important;
  }

  #pageDashboard .hero-section-redesign .hero-support-card {
    min-height: 66px !important;
    margin-top: 9px !important;
    padding: 9px 11px !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
}

/* Browser zoom and narrow laptop windows: keep the dashboard compact without stacking prematurely. */
@media (min-width: 820px) and (max-width: 960px) {
  #pageDashboard .hero-section.hero-section-redesign {
    min-height: auto !important;
    padding: 16px 20px 6px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign {
    grid-template-columns: minmax(270px, 0.86fr) minmax(320px, 1fr) !important;
    gap: 20px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-title {
    font-size: clamp(2.05rem, 4.6vw, 2.65rem) !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-description {
    font-size: 0.82rem !important;
    line-height: 1.48 !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-actions {
    gap: 8px !important;
    margin-top: 19px !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-primary,
  #pageDashboard .hero-section-redesign .hero-redesign-secondary {
    min-height: 42px !important;
    padding: 0 13px !important;
    font-size: 0.74rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-assurance {
    gap: 10px !important;
    margin-top: 15px !important;
    font-size: 0.65rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-redesign-console {
    max-width: 350px !important;
    padding: 12px !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-header {
    gap: 6px !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-focus {
    gap: 10px !important;
    min-height: 86px !important;
    padding: 10px 11px !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-orb {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 13px !important;
    font-size: 1.15rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-focus strong {
    font-size: 0.93rem !important;
  }

  #pageDashboard .hero-section-redesign .hero-console-focus p {
    font-size: 0.64rem !important;
  }
}


/* =====================================================================
   CLEAN EXECUTIVE LIGHT THEME FOR #pageDashboard
   ===================================================================== */
#pageDashboard {
  background: transparent !important;
  border-radius: 0 !important;
  padding-bottom: 60px !important;
  margin-top: 0 !important;
  min-height: calc(100vh - 60px) !important;
}

#pageDashboard .hero-section.hero-section-redesign {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ACCÈS RAPIDE section title for clean light theme */
#pageDashboard .section-label {
  color: #0056b3 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  margin-top: 36px !important;
  margin-bottom: 24px !important;
  text-shadow: none !important;
}

#pageDashboard .section-label-line {
  background: linear-gradient(90deg, transparent, rgba(0, 86, 179, 0.25), transparent) !important;
}


/* =====================================================================
   MY POINTAGE — COMING SOON MODULE STYLES
   ===================================================================== */
#pagePointage .content-section {
  padding: 30px 20px 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pointage-coming-soon-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}

.pointage-coming-soon-card {
  position: relative;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-2xl, 28px);
  padding: 48px 36px 40px;
  text-align: center;
  box-shadow: 0 20px 40px -15px rgba(0, 86, 179, 0.08), 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.pointage-ambient-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 86, 179, 0.12) 0%, rgba(0, 168, 232, 0.06) 40%, transparent 70%);
  pointer-events: none;
  filter: blur(25px);
}

.pointage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 86, 179, 0.08);
  border: 1px solid rgba(0, 86, 179, 0.2);
  color: #0056b3;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0056b3;
  position: relative;
  display: inline-block;
}

.pulse-indicator::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: rgba(0, 86, 179, 0.4);
  animation: pointagePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pointagePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.pointage-icon-box {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, #0056b3 0%, #00a8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.5rem;
  box-shadow: 0 14px 28px -6px rgba(0, 86, 179, 0.35);
  position: relative;
  animation: pointageFloat 4s ease-in-out infinite alternate;
}

@keyframes pointageFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.pointage-card-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.pointage-headline,
.pointage-arabic-headline {
  font-family: 'Poppins', 'Tajawal', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0056b3 0%, #00a8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.pointage-card-desc {
  font-size: 0.98rem;
  color: var(--text-muted, #64748b);
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.pointage-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.pointage-feature-item {
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-light, #f1f5f9);
  border-radius: var(--radius-lg, 16px);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
}

.pointage-feature-item:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 86, 179, 0.25);
  box-shadow: 0 8px 16px -4px rgba(0, 86, 179, 0.08);
}

.pointage-feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 86, 179, 0.1);
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.pointage-feat-text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-dark, #0f172a);
  margin-bottom: 4px;
}

.pointage-feat-text span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.pointage-footer-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-md, 12px);
  background: rgba(0, 168, 232, 0.06);
  border: 1px dashed rgba(0, 168, 232, 0.3);
  color: var(--text-muted, #475569);
  font-size: 0.86rem;
  font-weight: 500;
}

.pointage-footer-note i {
  color: #00a8e8;
}

/* Dark Mode Overrides for My Pointage */
html.dark-mode .pointage-coming-soon-card {
  background: #111d32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .pointage-ambient-glow {
  background: radial-gradient(circle, rgba(0, 168, 232, 0.2) 0%, rgba(99, 102, 241, 0.1) 45%, transparent 70%) !important;
}

html.dark-mode .pointage-badge {
  background: rgba(0, 168, 232, 0.12) !important;
  border-color: rgba(0, 168, 232, 0.3) !important;
  color: #38bdf8 !important;
}

html.dark-mode .pulse-indicator {
  background: #38bdf8 !important;
}

html.dark-mode .pulse-indicator::after {
  background: rgba(56, 189, 248, 0.5) !important;
}

html.dark-mode .pointage-card-title {
  color: #f1f5f9 !important;
}

html.dark-mode .pointage-headline,
html.dark-mode .pointage-arabic-headline {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark-mode .pointage-card-desc {
  color: #94a3b8 !important;
}

html.dark-mode .pointage-feature-item {
  background: #0d1626 !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .pointage-feat-icon {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

html.dark-mode .pointage-feat-text strong {
  color: #f1f5f9 !important;
}

html.dark-mode .pointage-feat-text span {
  color: #94a3b8 !important;
}

html.dark-mode .pointage-footer-note {
  background: rgba(56, 189, 248, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #cbd5e1 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pointage-coming-soon-card {
    padding: 36px 20px 28px;
    border-radius: 20px;
  }

  .pointage-icon-box {
    width: 76px;
    height: 76px;
    font-size: 2.1rem;
    border-radius: 20px;
  }

  .pointage-card-title {
    font-size: 1.5rem;
  }

  .pointage-arabic-headline {
    font-size: 1.6rem;
  }

  .pointage-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pointage-feature-item {
    flex-direction: row;
    align-items: center;
  }
}

/* =====================================================================
   CARNET D'ADRESSES & GROUPES DE DIFFUSION — MODAL & CARD STYLES
   ===================================================================== */
.address-book-box {
  width: 95%;
  max-width: 960px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-2xl, 28px);
  box-shadow: 0 25px 50px -12px rgba(0, 86, 179, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}

.address-book-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px 18px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  background: linear-gradient(180deg, rgba(0, 86, 179, 0.03) 0%, transparent 100%);
  gap: 16px;
}

.address-book-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.address-book-badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0056b3 0%, #00a8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 8px 18px -4px rgba(0, 86, 179, 0.35);
  flex-shrink: 0;
}

.address-book-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  margin: 0 0 4px;
}

.address-book-header h2 span {
  color: #0056b3;
}

.address-book-header p {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.btn-create-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0056b3 0%, #0080ff 100%);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-create-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
}

/* Page-level Toolbar for #pageCarnet */
.carnet-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  margin-bottom: 24px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  gap: 16px;
  flex-wrap: wrap;
}

.carnet-search-wrap {
  flex: 1;
  min-width: 260px;
  position: relative;
  display: flex;
  align-items: center;
}

.carnet-search-wrap i {
  position: absolute;
  left: 14px;
  color: var(--text-muted, #64748b);
  font-size: 0.9rem;
}

.carnet-search-wrap input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg-hover, #f8fafc);
  font-size: 0.88rem;
  color: var(--text-dark, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.carnet-search-wrap input:focus {
  background: var(--bg-card, #ffffff);
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

.carnet-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-carnet-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0056b3 0%, #0080ff 100%);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
  transition: all 0.2s ease;
}

.btn-carnet-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
}

.btn-carnet-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border, #e2e8f0);
  color: var(--text-dark, #334155);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-carnet-outline:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0056b3;
  border-color: #0056b3;
}

.address-book-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px;
  background: var(--bg-hover, #f8fafc);
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  gap: 16px;
}

.address-search-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.address-search-box i {
  position: absolute;
  left: 14px;
  color: var(--text-muted, #64748b);
  font-size: 0.9rem;
}

.address-search-box input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #ffffff);
  font-size: 0.88rem;
  color: var(--text-dark, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.address-search-box input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

.address-backup-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-backup-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted, #475569);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-backup-action:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0056b3;
  border-color: rgba(0, 86, 179, 0.3);
}

.address-book-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 30px;
}

.address-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

/* ============================================================
   EXECUTIVE UNIT STATS CARDS (CLASSIFICATION PAR UNITÉS)
   ============================================================ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.unit-stat-card {
  position: relative !important;
  border-radius: 22px !important;
  padding: 22px 20px 18px !important;
  background: linear-gradient(155deg, 
    color-mix(in srgb, var(--unit-color, #0284c7) 28%, #ffffff) 0%, 
    color-mix(in srgb, var(--unit-color, #0284c7) 14%, #ffffff) 48%, 
    color-mix(in srgb, var(--unit-color, #0284c7) 34%, #f8fafc) 100%) !important;
  border: 2px solid color-mix(in srgb, var(--unit-color, #0284c7) 50%, #ffffff) !important;
  border-top: 5px solid var(--unit-color, #0284c7) !important;
  box-shadow: 
    0 14px 34px -6px rgba(15, 23, 42, 0.09),
    0 6px 18px -2px color-mix(in srgb, var(--unit-color, #0284c7) 28%, transparent),
    0 3px 0 var(--unit-color, #0284c7),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow: hidden !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #0f172a !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease !important;
}

.unit-stat-card:hover {
  transform: translateY(-7px) !important;
  border-color: var(--unit-color, #0284c7) !important;
  box-shadow: 
    0 24px 48px -8px rgba(15, 23, 42, 0.15),
    0 12px 26px -4px color-mix(in srgb, var(--unit-color, #0284c7) 48%, transparent),
    0 4px 0 var(--unit-color, #0284c7),
    inset 0 1px 0 #ffffff !important;
}

.app-bg-decor {
  background:
    radial-gradient(circle at 0% 42%, rgba(37, 99, 235, 0.23), transparent 32%),
    radial-gradient(circle at 100% 32%, rgba(16, 185, 129, 0.20), transparent 30%),
    radial-gradient(circle at 54% 100%, rgba(139, 92, 246, 0.16), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(245, 158, 11, 0.15), transparent 28%) !important;
}

/* Watermark SVG inside cards */
.unit-card-watermark {
  position: absolute !important;
  right: 4px !important;
  bottom: 12px !important;
  width: 142px !important;
  height: 122px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.90 !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
}

.unit-stat-card:hover .unit-card-watermark {
  transform: scale(1.1) translateY(-4px) !important;
  opacity: 1 !important;
}

.unit-card-ambient-glow {
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--unit-color, #0284c7) 32%, transparent) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.unit-stat-card > *:not(.unit-card-watermark):not(.unit-card-ambient-glow) {
  position: relative !important;
  z-index: 1 !important;
}

.unit-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.unit-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--unit-color, #0284c7) 0%, color-mix(in srgb, var(--unit-color, #0284c7) 75%, #000 25%) 100%) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem !important;
  box-shadow: 0 8px 20px -3px color-mix(in srgb, var(--unit-color, #0284c7) 50%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit-stat-card:hover .unit-icon-box {
  transform: scale(1.06) rotate(-3deg);
}

.unit-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-unit-mini {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

/* Individual Group Card */
.address-group-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-top: 3.5px solid var(--group-color, #0056b3);
  border-radius: var(--radius-lg, 16px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.address-group-card:hover {
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 86, 179, 0.25);
  border-top-color: var(--group-color, #0056b3);
}

.address-group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.group-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.group-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark, #0f172a);
  margin: 0 0 2px;
  line-height: 1.25;
}

.group-card-count {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.group-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-card-ctrl {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e2e8f0);
  background: var(--bg-card, #ffffff);
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.btn-card-ctrl:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0056b3;
  border-color: #0056b3;
}

.btn-card-ctrl.delete:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: #ef4444;
}

.address-group-card-body {
  flex: 1;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  margin-bottom: 16px;
}

.group-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-light, #f1f5f9);
  border-radius: 10px;
  gap: 8px;
  transition: all 0.2s ease;
}

.group-member-item:hover {
  border-color: var(--border, #e2e8f0);
  background: #f1f5f9;
}

.member-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.member-item-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.member-item-details {
  overflow: hidden;
}

.member-item-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-chip-unit {
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(0, 86, 179, 0.08);
  color: #0056b3;
  padding: 1px 6px;
  border-radius: 4px;
}

.member-item-email {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-member-action {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.btn-member-action.copy-single:hover {
  background: rgba(0, 86, 179, 0.1);
  color: #0056b3;
}

.btn-member-action.delete-member:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.group-no-members {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 24px 10px;
  margin: 0;
  font-style: italic;
}

.address-group-card-footer {
  margin-top: auto;
}

.btn-copy-group-emails {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--group-color, #0056b3) 0%, #00a8e8 100%);
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
  transition: all 0.2s ease;
}

.btn-copy-group-emails:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
  filter: brightness(1.05);
}

.btn-copy-group-emails:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Empty State */
.address-book-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-hover, #f8fafc);
  border: 2px dashed var(--border, #e2e8f0);
  border-radius: 20px;
}

.address-book-empty-state .empty-state-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: rgba(0, 86, 179, 0.08);
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
}

.address-book-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  margin-bottom: 6px;
}

.address-book-empty-state p {
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 24px;
}

.empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-create-group-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0056b3;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-load-defaults {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card, #ffffff);
  color: #0056b3;
  border: 1.5px solid #0056b3;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* =====================================================================
   GROUP EDITOR MODAL STYLES
   ==================================================================== */
.group-editor-box {
  width: 95%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-2xl, 28px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 32px 30px !important;
  position: relative;
}

.group-editor-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.group-editor-icon-preview {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 2px solid rgba(0, 86, 179, 0.3);
  background: rgba(0, 86, 179, 0.1);
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.group-editor-header h2 {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
  margin: 0 0 4px;
}

.group-editor-header p {
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.icon-selector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.icon-selector-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg-hover, #f8fafc);
  color: var(--text-dark, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.2s ease;
}

.icon-selector-btn:hover {
  background: var(--bg-card, #ffffff);
  border-color: #0056b3;
  color: #0056b3;
}

.icon-selector-btn.selected {
  background: rgba(0, 86, 179, 0.12);
  border-color: #0056b3;
  color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

.color-palette-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.color-palette-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.color-palette-btn:hover {
  transform: scale(1.15);
}

.color-palette-btn.selected {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25), 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Member Selection Tabs */
.editor-member-tabs {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid var(--border-light, #f1f5f9);
  padding-bottom: 8px;
}

.editor-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-hover, #f8fafc);
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border, #e2e8f0);
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-tab-btn:hover {
  background: #f1f5f9;
  color: #0056b3;
}

.editor-tab-btn.active {
  background: #0056b3;
  color: #ffffff;
  border-color: #0056b3;
  box-shadow: 0 2px 6px rgba(0, 86, 179, 0.25);
}

.editor-picker-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.picker-search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.picker-search-row i {
  position: absolute;
  left: 12px;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
}

.picker-search-row input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: 9px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg-card, #ffffff);
  font-size: 0.85rem;
  color: var(--text-dark, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.picker-search-row input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

/* Unit filter pills */
.picker-units-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.picker-unit-pill {
  white-space: nowrap;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted, #64748b);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.picker-unit-pill:hover {
  background: #e2e8f0;
  color: #0056b3;
}

.picker-unit-pill.active {
  background: rgba(0, 86, 179, 0.12);
  border-color: #0056b3;
  color: #0056b3;
  font-weight: 700;
}

/* Contacts Picker Scrollable List */
.picker-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
  border: 1px solid var(--border-light, #f1f5f9);
  border-radius: 12px;
  background: var(--bg-hover, #f8fafc);
}

.picker-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 10px;
}

.picker-contact-row:hover {
  border-color: #0056b3;
  box-shadow: 0 2px 8px rgba(0, 86, 179, 0.08);
}

.picker-contact-row.is-selected {
  background: rgba(0, 86, 179, 0.04);
  border-color: #0056b3;
}

.picker-contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 86, 179, 0.1);
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.picker-contact-avatar.selected {
  background: #10b981;
  color: #ffffff;
}

.picker-contact-info {
  flex: 1;
  overflow: hidden;
}

.picker-contact-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.picker-contact-name strong {
  font-size: 0.84rem;
  color: var(--text-dark, #0f172a);
}

.picker-contact-unit {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 86, 179, 0.08);
  color: #0056b3;
}

.picker-contact-sub {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-hover, #f8fafc);
  color: var(--text-dark, #334155);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-picker-toggle:hover {
  background: #0056b3;
  color: #ffffff;
  border-color: #0056b3;
}

.btn-picker-toggle.selected {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.picker-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--text-muted, #94a3b8);
}

.picker-empty i {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.picker-empty p {
  font-size: 0.82rem;
  margin: 0;
}

.member-input-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.member-autocomplete-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.member-autocomplete-wrap i {
  position: absolute;
  left: 12px;
  color: var(--text-muted, #64748b);
  font-size: 0.88rem;
}

.member-autocomplete-wrap input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg-hover, #f8fafc);
  font-size: 0.88rem;
  color: var(--text-dark, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.member-autocomplete-wrap input:focus {
  background: var(--bg-card, #ffffff);
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

.btn-add-member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0056b3;
  color: #ffffff;
  border: none;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-member:hover {
  background: #004494;
}

.members-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.btn-clear-members {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-clear-members:hover {
  text-decoration: underline;
}

.editor-members-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-light, #f1f5f9);
}

.editor-member-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  gap: 8px;
}

.chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 86, 179, 0.1);
  color: #0056b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chip-info {
  flex: 1;
  overflow: hidden;
}

.chip-info strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dark, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-info small {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-chip-remove {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.btn-chip-remove:hover {
  background: rgba(239, 68, 68, 0.1);
}

.editor-no-members {
  text-align: center;
  padding: 24px 10px;
  color: var(--text-muted, #94a3b8);
}

.editor-no-members i {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.editor-no-members p {
  font-size: 0.82rem;
  margin: 0;
}

.group-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.btn-save-group {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0056b3 0%, #0080ff 100%);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
  transition: all 0.2s ease;
}

.btn-save-group:hover {
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35);
  transform: translateY(-1px);
}

.btn-cancel-group {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-dark, #334155);
  border: 1px solid var(--border, #e2e8f0);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel-group:hover {
  background: #e2e8f0;
}

/* ====================================================
   WIDE LANDSCAPE GROUP EDITOR MODAL (2-COLUMN LAYOUT)
   ==================================================== */
.group-editor-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
}

.group-editor-wide-box {
  width: 95vw !important;
  max-width: 1060px !important;
  max-height: 90vh !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 22px !important;
  box-shadow: 0 25px 60px -12px rgba(0, 50, 120, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp {
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.group-editor-header {
  padding: 18px 24px 16px !important;
  border-bottom: 1px solid var(--border-light, #f1f5f9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--bg-card, #ffffff) !important;
  flex-shrink: 0 !important;
}

.group-editor-icon-preview {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  background: rgba(0, 86, 179, 0.1) !important;
  color: #0056b3 !important;
  border: 1px solid rgba(0, 86, 179, 0.2) !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.group-editor-title-wrap h2 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0f172a) !important;
  margin: 0 0 2px 0 !important;
}

.group-editor-title-wrap p {
  font-size: 0.8rem !important;
  color: var(--text-muted, #64748b) !important;
  margin: 0 !important;
}

/* 2-Column Grid Form */
.group-editor-form-grid {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 16px !important;
  padding: 16px 22px 14px !important;
  overflow-y: auto !important;
  max-height: calc(90vh - 145px) !important;
  scrollbar-width: thin !important;
}

.editor-col-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.editor-col-right {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 12px !important;
}

.editor-panel-card {
  background: var(--bg-hover, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.editor-panel-card.left-panel {
  height: 100% !important;
}

.editor-panel-card.right-panel {
  height: 100% !important;
}

.editor-section-heading {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted, #64748b) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 2px 0 !important;
}

.editor-panel-card .form-group {
  margin-bottom: 0 !important;
}

.editor-panel-card .form-group label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #334155) !important;
  margin-bottom: 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.editor-panel-card .form-group input[type="text"] {
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-dark, #0f172a) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.editor-panel-card .form-group input[type="text"]:focus {
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12) !important;
}

/* Compact Icon Grid */
.icon-selector-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}

.icon-selector-btn {
  width: 100% !important;
  aspect-ratio: 1 !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-dark, #334155) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: all 0.15s ease !important;
}

.icon-selector-btn:hover {
  background: var(--bg-hover, #f1f5f9) !important;
  border-color: #0056b3 !important;
  color: #0056b3 !important;
}

.icon-selector-btn.selected {
  background: rgba(0, 86, 179, 0.12) !important;
  border-color: #0056b3 !important;
  color: #0056b3 !important;
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.25) !important;
}

/* Compact Color Palette */
.color-palette-selector {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.color-palette-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

.color-palette-btn:hover {
  transform: scale(1.18) !important;
}

.color-palette-btn.selected {
  transform: scale(1.18) !important;
  box-shadow: 0 0 0 2.5px #0056b3, 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Live Card Preview Box */
.editor-preview-card-wrap {
  margin-top: 4px !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--border, #e2e8f0) !important;
}

.editor-preview-card-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--text-muted, #64748b) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
}

.editor-live-preview-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1.5px solid rgba(0, 86, 179, 0.25) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.preview-card-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.preview-card-info h5 {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0f172a) !important;
  margin: 0 0 2px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

.preview-card-info span {
  font-size: 0.72rem !important;
  color: var(--text-muted, #64748b) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Right Panel: Tabs & Search */
.right-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.editor-member-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  background: var(--bg-card, #ffffff) !important;
  padding: 3px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}

.editor-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--text-muted, #64748b) !important;
  border: none !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.editor-tab-btn:hover {
  color: #0056b3 !important;
}

.editor-tab-btn.active {
  background: #0056b3 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 86, 179, 0.25) !important;
}

.picker-search-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.picker-search-row i {
  position: absolute !important;
  left: 12px !important;
  color: var(--text-muted, #64748b) !important;
  font-size: 0.82rem !important;
}

.picker-search-row input {
  width: 100% !important;
  padding: 7px 12px 7px 32px !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  font-size: 0.82rem !important;
  color: var(--text-dark, #0f172a) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.picker-search-row input:focus {
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12) !important;
}

/* Unit filter pills */
.picker-units-filter {
  display: flex !important;
  gap: 5px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
}

.picker-units-filter::-webkit-scrollbar {
  display: none !important;
}

.picker-unit-pill {
  white-space: nowrap !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text-muted, #64748b) !important;
  padding: 3px 9px !important;
  border-radius: 14px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.picker-unit-pill:hover {
  background: #f1f5f9 !important;
  color: #0056b3 !important;
}

.picker-unit-pill.active {
  background: rgba(0, 86, 179, 0.12) !important;
  border-color: #0056b3 !important;
  color: #0056b3 !important;
  font-weight: 700 !important;
}

/* Contacts Picker Multi-Column Grid */
.picker-contacts-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 8px !important;
  max-height: 230px !important;
  min-height: 180px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border: 1px solid var(--border-light, #f1f5f9) !important;
  border-radius: 12px !important;
  background: var(--bg-card, #ffffff) !important;
  scrollbar-width: thin !important;
}

.picker-contact-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: var(--bg-hover, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  gap: 8px !important;
}

.picker-contact-row:hover {
  background: var(--bg-card, #ffffff) !important;
  border-color: #0056b3 !important;
  box-shadow: 0 2px 6px rgba(0, 86, 179, 0.08) !important;
}

.picker-contact-row.is-selected {
  background: rgba(0, 86, 179, 0.06) !important;
  border-color: #0056b3 !important;
}

.picker-contact-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(0, 86, 179, 0.1) !important;
  color: #0056b3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.picker-contact-avatar.selected {
  background: #10b981 !important;
  color: #ffffff !important;
}

.picker-contact-info {
  flex: 1 !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.picker-contact-name {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.picker-contact-name strong {
  font-size: 0.8rem !important;
  color: var(--text-dark, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.picker-contact-unit {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  background: rgba(0, 86, 179, 0.08) !important;
  color: #0056b3 !important;
  flex-shrink: 0 !important;
}

.picker-contact-sub {
  font-size: 0.72rem !important;
  color: var(--text-muted, #64748b) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.btn-picker-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-dark, #334155) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-picker-toggle:hover {
  background: #0056b3 !important;
  color: #ffffff !important;
  border-color: #0056b3 !important;
}

.btn-picker-toggle.selected {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

/* Manual Input Panel */
.manual-input-box {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.manual-input-desc {
  font-size: 0.8rem !important;
  color: var(--text-muted, #64748b) !important;
  margin: 0 0 10px 0 !important;
}

.member-input-row {
  display: flex !important;
  gap: 8px !important;
}

.member-autocomplete-wrap {
  flex: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.member-autocomplete-wrap i {
  position: absolute !important;
  left: 12px !important;
  color: var(--text-muted, #64748b) !important;
  font-size: 0.84rem !important;
}

.member-autocomplete-wrap input {
  width: 100% !important;
  padding: 8px 12px 8px 34px !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  background: var(--bg-hover, #f8fafc) !important;
  font-size: 0.84rem !important;
  color: var(--text-dark, #0f172a) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.member-autocomplete-wrap input:focus {
  background: var(--bg-card, #ffffff) !important;
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12) !important;
}

.btn-add-member {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #0056b3 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-add-member:hover {
  background: #004494 !important;
}

/* Selected Members Tray (Bottom of Right Panel) */
.editor-selected-tray {
  margin-top: auto !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.members-list-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.members-list-header label {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #334155) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn-clear-members {
  background: none !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.btn-clear-members:hover {
  text-decoration: underline !important;
}

.editor-members-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 90px !important;
  overflow-y: auto !important;
  padding: 2px !important;
  scrollbar-width: thin !important;
}

.editor-member-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px 4px 6px !important;
  background: var(--bg-hover, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 8px !important;
  max-width: 220px !important;
}

.chip-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
  background: rgba(0, 86, 179, 0.1) !important;
  color: #0056b3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.chip-info {
  flex: 1 !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.chip-info strong {
  display: block !important;
  font-size: 0.72rem !important;
  color: var(--text-dark, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chip-info small {
  display: none !important;
}

.btn-chip-remove {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.65rem !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.btn-chip-remove:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

.editor-no-members {
  width: 100% !important;
  text-align: center !important;
  padding: 8px 4px !important;
  color: var(--text-muted, #94a3b8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.editor-no-members i {
  font-size: 0.9rem !important;
}

.editor-no-members p {
  font-size: 0.75rem !important;
  margin: 0 !important;
}

/* Full Width Footer Actions */
.group-editor-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 12px 24px 16px !important;
  border-top: 1px solid var(--border-light, #f1f5f9) !important;
  background: var(--bg-card, #ffffff) !important;
  flex-shrink: 0 !important;
}

.btn-save-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #0056b3 0%, #0077ff 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25) !important;
}

.btn-save-group:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.35) !important;
}

.btn-cancel-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--bg-hover, #f8fafc) !important;
  color: var(--text-muted, #64748b) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-cancel-group:hover {
  background: #e2e8f0 !important;
  color: var(--text-dark, #0f172a) !important;
}

/* ====================================================
   DARK MODE ADJUSTMENTS FOR WIDE GROUP EDITOR
   ==================================================== */
html.dark-mode .group-editor-wide-box {
  background: #0b1322 !important;
  border-color: #1e2e4a !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .group-editor-header,
html.dark-mode .group-editor-actions {
  background: #0b1322 !important;
  border-color: #1e293b !important;
}

html.dark-mode .group-editor-title-wrap h2 {
  color: #f1f5f9 !important;
}

html.dark-mode .editor-panel-card {
  background: #0f172a !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .editor-panel-card .form-group label {
  color: #cbd5e1 !important;
}

html.dark-mode .editor-panel-card .form-group input[type="text"],
html.dark-mode .picker-search-row input,
html.dark-mode .member-autocomplete-wrap input {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
  color: #f1f5f9 !important;
}

html.dark-mode .icon-selector-btn {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
  color: #cbd5e1 !important;
}

html.dark-mode .editor-live-preview-card,
html.dark-mode .picker-contacts-list,
html.dark-mode .manual-input-box,
html.dark-mode .editor-selected-tray {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .preview-card-info h5,
html.dark-mode .picker-contact-name strong {
  color: #f1f5f9 !important;
}

html.dark-mode .editor-member-tabs {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .picker-unit-pill {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
  color: #94a3b8 !important;
}

html.dark-mode .picker-unit-pill.active {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

html.dark-mode .picker-contact-row {
  background: #0f172a !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .picker-contact-row:hover {
  border-color: #38bdf8 !important;
}

html.dark-mode .picker-contact-row.is-selected {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: #38bdf8 !important;
}

html.dark-mode .btn-picker-toggle {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
  color: #cbd5e1 !important;
}

html.dark-mode .btn-picker-toggle.selected {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

html.dark-mode .editor-member-chip {
  background: #0f172a !important;
  border-color: #1e2e4a !important;
}

html.dark-mode .chip-info strong {
  color: #f1f5f9 !important;
}

html.dark-mode .btn-cancel-group {
  background: #090e18 !important;
  border-color: #1e2e4a !important;
  color: #cbd5e1 !important;
}

/* Responsive adjustments */
@media (max-width: 860px) {
  .group-editor-form-grid {
    grid-template-columns: 1fr !important;
    max-height: calc(90vh - 130px) !important;
  }

  .picker-contacts-list {
    grid-template-columns: 1fr !important;
  }

  .address-backup-actions {
    width: 100%;
    justify-content: space-between;
  }

  .btn-backup-action {
    flex: 1;
    justify-content: center;
  }

  .address-groups-grid {
    grid-template-columns: 1fr;
  }

  .address-book-content {
    padding: 16px 20px;
  }
}

/* ====================================================
   APP CUSTOM DIALOG MODAL (SweetAlert / Modern Dialog Style)
   ==================================================== */
.app-dialog-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20000 !important;
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  padding: 20px !important;
}

.app-dialog-box {
  width: 100% !important;
  max-width: 440px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 22px !important;
  padding: 30px 24px 24px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.35) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  animation: appDialogPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes appDialogPop {
  0% { opacity: 0; transform: scale(0.88) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.app-dialog-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  margin-bottom: 16px !important;
  animation: iconPulse 1.8s infinite ease-in-out !important;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Icon Wrap Types */
.app-dialog-icon-wrap.type-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 2px solid rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
}

.app-dialog-icon-wrap.type-error,
.app-dialog-icon-wrap.type-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 2px solid rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

.app-dialog-icon-wrap.type-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 2px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

.app-dialog-icon-wrap.type-info {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* ============================================================
   EXECUTIVE VIBRANT FULL-COLOR GRADIENT UNIT CARDS
   ============================================================ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.unit-stat-card {
  position: relative !important;
  border-radius: 24px !important;
  padding: 24px 22px 20px !important;
  background: 
    radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(0, 0, 0, 0.35) 0%, transparent 50%),
    linear-gradient(145deg, 
      var(--unit-color, #0284c7) 0%, 
      color-mix(in srgb, var(--unit-color, #0284c7) 82%, #000 18%) 50%, 
      color-mix(in srgb, var(--unit-color, #0284c7) 62%, #000 38%) 100%
    ) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 
    0 16px 38px -6px color-mix(in srgb, var(--unit-color, #0284c7) 60%, transparent),
    0 4px 16px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  overflow: hidden !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #ffffff !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease !important;
}

.unit-stat-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 
    0 26px 54px -8px color-mix(in srgb, var(--unit-color, #0284c7) 75%, transparent),
    0 8px 24px rgba(15, 23, 42, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* =====================================================================
   DEEP INTENSE EXECUTIVE PALETTES FOR ENTERPRISE UNITS
   ===================================================================== */
/* 1. Larbâa — Deep Intense Royal Sapphire */
.unit-stat-card[data-unit*="Larb" i] {
  --unit-color: #1d4ed8;
  background: 
    radial-gradient(circle at 14% 14%, rgba(96, 165, 250, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(10, 25, 60, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #1d4ed8 0%, #1e40af 48%, #172554 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(29, 78, 216, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 2. Oued Smar — Deep Intense Sunset Tangerine / Terracotta */
.unit-stat-card[data-unit*="Smar" i] {
  --unit-color: #ea580c;
  background: 
    radial-gradient(circle at 14% 14%, rgba(251, 146, 60, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(67, 20, 7, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #ea580c 0%, #c2410c 48%, #7c2d12 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(234, 88, 12, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 3. Douera — Deep Intense Velvet Magenta / Burgundy Rose */
.unit-stat-card[data-unit*="Douera" i] {
  --unit-color: #be185d;
  background: 
    radial-gradient(circle at 14% 14%, rgba(244, 114, 182, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(80, 7, 36, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #be185d 0%, #9d174d 48%, #500724 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(190, 24, 93, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 4. El Oued — Deep Intense Emerald Forest */
.unit-stat-card[data-unit*="Oued" i]:not([data-unit*="Smar" i]) {
  --unit-color: #047857;
  background: 
    radial-gradient(circle at 14% 14%, rgba(52, 211, 153, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(2, 44, 34, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #059669 0%, #047857 48%, #064e3b 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(5, 150, 105, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 5. Rahmania — Deep Intense Midnight Royal Indigo */
.unit-stat-card[data-unit*="Rahmania" i] {
  --unit-color: #3730a3;
  background: 
    radial-gradient(circle at 14% 14%, rgba(129, 140, 248, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(15, 23, 42, 0.55) 0%, transparent 50%),
    linear-gradient(145deg, #4338ca 0%, #3730a3 48%, #1e1b4b 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(55, 48, 163, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 6. Autres Unités — Deep Intense Velvet Amethyst / Purple */
.unit-stat-card[data-unit*="Autres" i] {
  --unit-color: #6d28d9;
  background: 
    radial-gradient(circle at 14% 14%, rgba(192, 132, 252, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(46, 16, 101, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #7c3aed 0%, #6d28d9 48%, #3b0764 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(109, 40, 217, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 7. ORAN — Deep Intense Ruby Wine Crimson */
.unit-stat-card[data-unit*="ORAN" i] {
  --unit-color: #be123c;
  background: 
    radial-gradient(circle at 14% 14%, rgba(251, 113, 133, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(76, 5, 25, 0.55) 0%, transparent 50%),
    linear-gradient(145deg, #e11d48 0%, #be123c 48%, #4c0519 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(190, 18, 60, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* 8. depot Sétif — Deep Intense Imperial Amber / Dark Honey Gold */
.unit-stat-card[data-unit*="Sétif" i],
.unit-stat-card[data-unit*="Setif" i] {
  --unit-color: #b45309;
  background: 
    radial-gradient(circle at 14% 14%, rgba(251, 191, 36, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 86% 86%, rgba(69, 26, 3, 0.50) 0%, transparent 50%),
    linear-gradient(145deg, #d97706 0%, #b45309 48%, #451a03 100%) !important;
  box-shadow: 0 18px 42px -6px rgba(180, 83, 9, 0.65), 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Watermark SVG inside cards */
.unit-card-watermark {
  position: absolute !important;
  right: -6px !important;
  bottom: 22px !important;
  width: 145px !important;
  height: 125px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.14 !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
}

.unit-stat-card:hover .unit-card-watermark {
  transform: scale(1.06) translateY(-2px) !important;
  opacity: 0.25 !important;
}

.unit-card-ambient-glow {
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.20) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.unit-stat-card > *:not(.unit-card-watermark):not(.unit-card-ambient-glow) {
  position: relative !important;
  z-index: 1 !important;
}

.unit-stat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.unit-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.40) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.unit-stat-card:hover .unit-icon-box {
  transform: scale(1.08) rotate(-3deg) !important;
}

.unit-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.copy-unit-mini {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.25s ease !important;
}

.copy-unit-mini:hover {
  background: #ffffff !important;
  color: var(--unit-color, #0284c7) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

.unit-stat-card .unit-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.70rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}

.unit-card-title-row {
  margin-bottom: 12px !important;
}

.unit-card-title {
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.30) !important;
}

.stat-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.stat-main-metric {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.stat-metric-group {
  display: flex !important;
  flex-direction: column !important;
}

.stat-metric-label {
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

.stat-val {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.stat-metric-pills {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.stat-pill-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  background: rgba(16, 185, 129, 0.35) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(167, 243, 208, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.stat-pill-blocked {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  background: rgba(239, 68, 68, 0.35) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(254, 202, 202, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

.unit-progress-container {
  margin-top: 2px !important;
}

.unit-progress-info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.unit-progress-info,
.unit-progress-info .progress-label,
.unit-progress-info .progress-value,
.unit-stat-card .progress-label,
.unit-stat-card .progress-value {
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important;
  letter-spacing: 0.02em !important;
}

.unit-progress-bg {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.unit-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.60) !important;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.view-unit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: 850 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.unit-stat-card .view-unit-btn i,
.unit-stat-card .view-unit-btn span {
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.unit-stat-card .view-unit-btn:hover {
  background: #ffffff !important;
  color: var(--unit-color, #0284c7) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
}

.unit-stat-card .view-unit-btn:hover i,
.unit-stat-card .view-unit-btn:hover span {
  color: var(--unit-color, #0284c7) !important;
  text-shadow: none !important;
}

.unit-stat-card .view-unit-btn:hover i {
  transform: translateX(4px) !important;
}

.app-dialog-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0f172a) !important;
  margin: 0 0 8px 0 !important;
}

.app-dialog-message {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #64748b) !important;
  margin: 0 0 22px 0 !important;
  max-width: 360px !important;
}

.app-dialog-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.btn-app-dialog-confirm {
  flex: 1 !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-app-dialog-confirm.type-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.btn-app-dialog-confirm.type-error,
.btn-app-dialog-confirm.type-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.btn-app-dialog-confirm.type-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.btn-app-dialog-confirm.type-info {
  background: linear-gradient(135deg, #0056b3 0%, #0077ff 100%) !important;
}

.btn-app-dialog-confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.btn-app-dialog-cancel {
  padding: 11px 18px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  background: var(--bg-hover, #f8fafc) !important;
  color: var(--text-muted, #64748b) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-app-dialog-cancel:hover {
  background: #e2e8f0 !important;
  color: var(--text-dark, #0f172a) !important;
}

/* Dark Mode for App Dialog */
html.dark-mode .app-dialog-box {
  background: #0f172a !important;
  border-color: #1e2e4a !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8) !important;
}

html.dark-mode .app-dialog-title {
  color: #f1f5f9 !important;
}

html.dark-mode .app-dialog-message {
  color: #cbd5e1 !important;
}

html.dark-mode .btn-app-dialog-cancel {
  background: #111d32 !important;
  border-color: #1e2e4a !important;
  color: #94a3b8 !important;
}

html.dark-mode .btn-app-dialog-cancel:hover {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

/* ==========================================================================
   CENTRE DE FORMATION & TUTORIELS — STYLES OFFICIELS
   ========================================================================== */
#tutorialsModal .config-modal {
  box-shadow:
    0 5px 0 #f43f5e,
    0 36px 90px rgba(2, 8, 23, 0.32),
    0 20px 46px rgba(244, 63, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#tutorialsModal .config-modal::before {
  background:
    linear-gradient(90deg, #f43f5e, rgba(244, 63, 94, 0.42) 40%, transparent 78%) top left / 100% 5px no-repeat,
    linear-gradient(rgba(244, 63, 94, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 63, 94, 0.035) 1px, transparent 1px);
  background-size: 100% 5px, 30px 30px, 30px 30px;
}

.formation-catalog-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.formation-catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

.formation-step-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.formation-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2, 132, 199, 0.16) !important;
  border-color: #0284c7 !important;
}

.step-card-signature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.2) !important;
  border-color: #4f46e5 !important;
}

.formation-mini-card:hover {
  transform: translateY(-2px);
  border-color: #f43f5e !important;
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.12) !important;
}

/* Dark Mode Overrides for Tutorials Modal */
html.dark-mode #tutorialsModal .config-modal {
  background: #0f172a !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  box-shadow:
    0 5px 0 #f43f5e,
    0 36px 90px rgba(2, 8, 23, 0.6),
    0 20px 46px rgba(244, 63, 94, 0.2) !important;
}

html.dark-mode #tutorialsModal .tutorials-header {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(15, 23, 42, 0.95)) !important;
  border-bottom: 1px solid rgba(244, 63, 94, 0.2) !important;
}

html.dark-mode #tutorialsModal .tutorials-header h2 {
  color: #f8fafc !important;
}

html.dark-mode #tutorialsModal .formation-catalog-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode #tutorialsModal .formation-catalog-card h4 {
  color: #f8fafc !important;
}

html.dark-mode #tutorialsModal .formation-catalog-card p {
  color: #cbd5e1 !important;
}

html.dark-mode #tutorialsModal .formation-catalog-card button[style*="background: #f8fafc"] {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode #tutorialsModal .formation-step-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode #tutorialsModal .formation-step-card div[style*="background: #f8fafc"] {
  background: #0f172a !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode #tutorialsModal .formation-step-card p {
  color: #cbd5e1 !important;
}

html.dark-mode #tutorialsModal .formation-mini-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode #tutorialsModal .formation-mini-card div[style*="color: #0f172a"] {
  color: #f8fafc !important;
}

html.dark-mode #tutorialsModal div[style*="background: #f1f5f9"] {
  background: #0f172a !important;
}

/* ==========================================================================
   INTERACTIVE BUTTONS FOR TUTORIALS & SIGNATURE (TUTORIELS & FORMATIONS)
   ========================================================================== */

/* Base style for interactive tutorial buttons */
.btn-tutorial-interactive {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  font-family: inherit !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  outline: none !important;
}

.btn-tutorial-interactive:focus-visible {
  outline: 2px solid #4f46e5 !important;
  outline-offset: 2px !important;
}

/* 1. Banner button: "Voir le Tutoriel Outlook ➔" */
.btn-tutorial-outlook-banner {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  font-weight: 750 !important;
  font-size: 0.84rem !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.32) !important;
}

.btn-tutorial-outlook-banner:hover {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
  transform: translateY(-2.5px) scale(1.025) !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.48), 0 0 14px rgba(99, 102, 241, 0.3) !important;
  color: #ffffff !important;
}

.btn-tutorial-outlook-banner:hover i.fa-arrow-right {
  transform: translateX(3px) !important;
}

.btn-tutorial-outlook-banner:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

.btn-tutorial-outlook-banner i.fa-arrow-right {
  transition: transform 0.22s ease !important;
}

/* 2. Store badges: Google Play & App Store */
.btn-store-badge {
  background: #ffffff !important;
  color: #0369a1 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 0.84rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
}

.btn-store-badge i {
  font-size: 1.05rem !important;
  transition: transform 0.22s ease !important;
}

.btn-store-play:hover {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35), 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

.btn-store-play:hover i {
  transform: scale(1.2) rotate(-6deg) !important;
}

.btn-store-apple:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25), 0 0 12px rgba(148, 163, 184, 0.2) !important;
}

.btn-store-apple:hover i {
  transform: scale(1.2) translateY(-1px) !important;
}

.btn-store-badge:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Dark mode for store badges */
html.dark-mode .btn-store-badge {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-color: #334155 !important;
}

html.dark-mode .btn-store-play:hover {
  background: #0f172a !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 22px rgba(56, 189, 248, 0.3) !important;
}

html.dark-mode .btn-store-apple:hover {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 8px 22px rgba(148, 163, 184, 0.3) !important;
}

/* 3. Header button: "Ouvrir le Générateur" */
.btn-open-generator-header {
  background: #ffffff !important;
  color: #4338ca !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18) !important;
}

.btn-open-generator-header i {
  color: #4f46e5 !important;
  font-size: 0.92rem !important;
  transition: transform 0.22s ease !important;
}

.btn-open-generator-header:hover {
  background: #ffffff !important;
  color: #312e81 !important;
  border-color: #c7d2fe !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.38), 0 0 14px rgba(199, 210, 254, 0.4) !important;
}

.btn-open-generator-header:hover i {
  transform: translate(2px, -2px) scale(1.15) !important;
}

.btn-open-generator-header:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2) !important;
}

html.dark-mode .btn-open-generator-header {
  background: #1e293b !important;
  color: #a5b4fc !important;
  border-color: #3730a3 !important;
}

html.dark-mode .btn-open-generator-header:hover {
  background: #0f172a !important;
  color: #c7d2fe !important;
  border-color: #4f46e5 !important;
}

/* 4. Step 1 inline button */
.tutorial-copy-action-btn {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1.5px solid #c7d2fe !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
  font-weight: 750 !important;
  transition: all 0.22s ease !important;
}

.tutorial-copy-action-btn:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.3) !important;
}

.tutorial-copy-action-btn:active {
  transform: translateY(0) scale(0.97) !important;
}


/* ==========================================================================
   GLOBAL RESPONSIVE SYSTEM REFINEMENT (WINDOW RESIZE & TABLET / MEDIUM SCREENS)
   ========================================================================== */

/* Navbar links responsive scaling */
@media (max-width: 1300px) and (min-width: 769px) {
  .navbar-links {
    gap: 3px !important;
    padding: 4px 8px !important;
    width: fit-content !important;
    max-width: calc(100% - 20px) !important;
    justify-content: safe center !important;
  }
  .navbar-links .nav-link {
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .navbar-links {
    gap: 2px !important;
    padding: 3px 6px !important;
  }
  .navbar-links .nav-link {
    padding: 5px 7px !important;
    font-size: 0.73rem !important;
    gap: 3px !important;
  }
}

/* KPI Stats Capsule Row responsive scaling */
@media (max-width: 1300px) and (min-width: 900px) {
  .stats-row {
    width: min(1200px, calc(100% - 32px)) !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    border-radius: 24px !important;
  }
  .stats-row .stat-card {
    min-height: 58px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }
  .stats-row .stat-card-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 0.95rem !important;
    border-radius: 11px !important;
  }
  .stats-row .stat-card-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
  }
  .stats-row .stat-card-value {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 899px) and (min-width: 769px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    width: calc(100% - 24px) !important;
    border-radius: 20px !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .stats-row .stat-card:nth-child(4),
  .stats-row .stat-card:nth-child(5) {
    grid-column: span 1 !important;
  }
}

/* Dashboard Hero section responsive adaptation */
@media (max-width: 1120px) {
  #pageDashboard .hero-section-redesign .hero-redesign {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #pageDashboard .hero-section-redesign .hero-redesign-copy {
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  #pageDashboard .hero-section-redesign .hero-redesign-title {
    font-size: 2.3rem !important;
  }
  #pageDashboard .hero-section-redesign .hero-redesign-actions,
  #pageDashboard .hero-section-redesign .hero-redesign-assurance {
    justify-content: center !important;
  }
  #pageDashboard .hero-section-redesign .hero-redesign-console {
    max-width: 520px !important;
    width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
}

/* Module Cards / Quick Access balanced 2x2 grid on medium screens */
@media (max-width: 1200px) and (min-width: 680px) {
  .module-cards-grid,
  .quick-access-grid,
  #pageDashboard .hero-section + .content-section .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Quick Access Module Cards - Themed Vibrant Colored Headings */
.module-card .module-body h3,
.module-card h3,
#pageDashboard .module-card .module-body h3 {
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.module-card.mc-green .module-body h3,
#pageDashboard .module-card.mc-green .module-body h3,
.module-card.mc-blue .module-body h3,
#pageDashboard .module-card.mc-blue .module-body h3,
.module-card.mc-orange .module-body h3,
#pageDashboard .module-card.mc-orange .module-body h3,
.module-card.mc-purple .module-body h3,
#pageDashboard .module-card.mc-purple .module-body h3 { 
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.module-card:hover .module-body h3 {
  filter: brightness(1.15) !important;
  transform: translateX(3px) !important;
}

/* ============================================================
   HERO SIDE CONSOLE WIDGET - DUAL VIBRANT FILL LUXURY EDITION
   ============================================================ */
#pageDashboard .hero-section-redesign .hero-redesign-console {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.25) !important;
  box-shadow:
    0 24px 50px -12px rgba(15, 23, 42, 0.12),
    0 6px 20px rgba(2, 132, 199, 0.08),
    inset 0 1px 0 #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 26px !important;
}

#pageDashboard .hero-section-redesign .hero-redesign-console:hover {
  border-color: rgba(2, 132, 199, 0.45) !important;
  box-shadow:
    0 28px 58px -10px rgba(15, 23, 42, 0.16),
    0 10px 28px rgba(2, 132, 199, 0.14),
    inset 0 1px 0 #ffffff !important;
}

/* Header Brand Mark & Status Pill */
#pageDashboard .hero-section-redesign .hero-console-mark {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

#pageDashboard .hero-section-redesign .hero-console-status {
  background: #dcfce7 !important;
  border: 1.5px solid #22c55e !important;
  color: #15803d !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.22) !important;
}

/* Upper Focus Box - Full Vibrant Royal/Azure Blue Gradient */
#pageDashboard .hero-section-redesign .hero-console-focus {
  background:
    radial-gradient(circle at 12% 16%, rgba(125, 211, 252, 0.35), transparent 42%),
    linear-gradient(140deg, #0284c7 0%, #0369a1 52%, #075985 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 28px -6px rgba(2, 132, 199, 0.45),
    0 4px 12px rgba(7, 89, 133, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus:hover {
  background:
    radial-gradient(circle at 12% 16%, rgba(125, 211, 252, 0.45), transparent 42%),
    linear-gradient(140deg, #0284c7 0%, #0275b1 50%, #03527e 100%) !important;
  transform: translateY(-3px) scale(1.01) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 16px 36px -4px rgba(2, 132, 199, 0.60),
    0 6px 16px rgba(7, 89, 133, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

#pageDashboard .hero-section-redesign .hero-console-orb {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

#pageDashboard .hero-section-redesign .hero-console-focus p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.82rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

#pageDashboard .hero-section-redesign .hero-console-kicker {
  display: inline-block !important;
  margin-bottom: 5px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  font-size: 0.63rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Lower IT Support Box - Full Vibrant Emerald Green Gradient */
#pageDashboard .hero-section-redesign .hero-support-card {
  background:
    radial-gradient(circle at 12% 16%, rgba(110, 231, 183, 0.35), transparent 42%),
    linear-gradient(140deg, #059669 0%, #047857 52%, #064e3b 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 28px -6px rgba(5, 150, 105, 0.45),
    0 4px 12px rgba(6, 78, 59, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pageDashboard .hero-section-redesign .hero-support-card:hover {
  background:
    radial-gradient(circle at 12% 16%, rgba(110, 231, 183, 0.45), transparent 42%),
    linear-gradient(140deg, #059669 0%, #046e50 50%, #044333 100%) !important;
  transform: translateY(-3px) scale(1.01) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 16px 36px -4px rgba(5, 150, 105, 0.60),
    0 6px 16px rgba(6, 78, 59, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

#pageDashboard .hero-section-redesign .hero-support-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#pageDashboard .hero-section-redesign .hero-support-role {
  background: #ffffff !important;
  color: #047857 !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

#pageDashboard .hero-section-redesign .hero-support-role i {
  color: #10b981 !important;
}

#pageDashboard .hero-section-redesign .hero-support-info strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

#pageDashboard .hero-section-redesign .hero-support-phone {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

#pageDashboard .hero-section-redesign .hero-support-phone i {
  color: #ffffff !important;
}

#pageDashboard .hero-section-redesign .hero-support-action {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20) !important;
  transition: all 0.25s ease !important;
}

#pageDashboard .hero-section-redesign .hero-support-card:hover .hero-support-action {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #047857 !important;
  transform: scale(1.10) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30) !important;
}

/* Footer & Refresh Button */
#pageDashboard .hero-section-redesign .hero-console-footer {
  color: #475569 !important;
  font-weight: 650 !important;
}

#pageDashboard .hero-section-redesign .hero-console-footer strong {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

#pageDashboard .hero-section-redesign .hero-console-refresh {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

#pageDashboard .hero-section-redesign .hero-console-refresh:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
}

/* Dark Mode Theme Support for Hero Console */
html.dark-mode #pageDashboard .hero-section-redesign .hero-redesign-console {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 50%, rgba(17, 24, 39, 0.95) 100%) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(2, 132, 199, 0.15) !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-console-focus {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(14, 116, 144, 0.25) 100%) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-console-focus strong {
  color: #7dd3fc !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-support-card {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-support-info strong {
  color: #6ee7b7 !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-support-phone {
  color: #a7f3d0 !important;
}

html.dark-mode #pageDashboard .hero-section-redesign .hero-console-footer strong {
  color: #38bdf8 !important;
}

/* ============================================================
   MY POINTAGE — MODERN INTERFACE (Labo Nedjma)
   ============================================================ */
/* ==========================================================================
   EXECUTIVE MY POINTAGE SUITE (V6.0 - Glassmorphic Enterprise Attendance Portal)
   ========================================================================== */

.page-banner.executive-pointage-banner {
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 45%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 40px -10px rgba(10, 30, 140, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pointage-view-wrapper {
  max-width: 1260px;
  width: 96%;
  margin: 0 auto;
  padding: 10px 0 30px;
  transition: max-width 0.25s ease;
}

/* 1. Auth / Search View (Wide Executive Dashboard Redesign) */
.pointage-auth-card {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.92) 40%, rgba(240, 249, 255, 0.94) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  border-radius: 28px !important;
  padding: 38px 42px !important;
  text-align: left;
  max-width: 1240px !important;
  width: 100% !important;
  margin: 15px auto 25px !important;
  box-shadow: 0 24px 60px -12px rgba(16, 185, 129, 0.12), 0 8px 24px rgba(2, 132, 199, 0.08), inset 0 1px 0 #ffffff !important;
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-sizing: border-box !important;
}

.pointage-auth-glow-emerald {
  position: absolute;
  top: -100px;
  right: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(35px);
}

.pointage-auth-glow-blue {
  position: absolute;
  bottom: -80px;
  left: -40px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.12) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(30px);
}

.pointage-auth-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 36px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* Left Column: Search & Authentication Console */
.pointage-auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pointage-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 6px 4px 14px;
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.10);
  margin-bottom: 20px;
  align-self: flex-start;
}

.pointage-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 10px rgba(16, 185, 129, 0.8);
  animation: heroPulseGlow 2.5s infinite ease-in-out;
}

.pointage-badge-title {
  color: #065f46;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pointage-badge-divider {
  width: 1px;
  height: 13px;
  background: rgba(16, 185, 129, 0.3);
}

.pointage-badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.pointage-auth-header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.pointage-auth-orb {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0;
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: floatOrb 3.5s ease-in-out infinite alternate;
}

@keyframes floatOrb {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-4px); }
}

.pointage-auth-title {
  font-family: 'Poppins', 'Tajawal', sans-serif;
  font-size: 1.65rem;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.pointage-auth-subtitle {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}

.pointage-search-form {
  margin: 8px 0 18px 0;
  width: 100%;
}

.pointage-input-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.80rem;
  font-weight: 800;
  color: #0f766e;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pointage-input-group {
  display: flex;
  align-items: center;
  position: relative;
  background: #ffffff;
  border: 2px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.10);
  transition: all 0.25s ease;
}

.pointage-input-group:focus-within {
  border-color: #059669;
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.22), 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.pointage-input-icon {
  color: #059669;
  font-size: 1.2rem;
  margin-right: 12px;
}

.pointage-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  outline: none;
}

.pointage-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.pointage-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
  transition: all 0.22s ease;
  white-space: nowrap;
}

.pointage-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.45);
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
}

.pointage-error-msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 12px;
  text-align: left;
}

.pointage-auth-chips-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pointage-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(241, 245, 249, 0.9);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.pointage-hint-pill i {
  color: #059669;
}

.pointage-auth-features {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.p-feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.p-feat:hover {
  transform: translateY(-1px);
}

.p-feat-green {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.p-feat-green i { color: #059669; }

.p-feat-blue {
  background: rgba(2, 132, 199, 0.12);
  color: #0369a1;
  border: 1px solid rgba(2, 132, 199, 0.25);
}
.p-feat-blue i { color: #0284c7; }

.p-feat-amber {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.p-feat-amber i { color: #d97706; }

/* Right Column: Detailed Informational Cards */
.pointage-auth-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.76);
  border: 1.5px solid rgba(16, 185, 129, 0.22);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06);
  backdrop-filter: blur(10px);
}

.pointage-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.pointage-side-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
}

.pointage-side-title-wrap i {
  color: #059669;
  font-size: 1rem;
}

.pointage-side-title-wrap h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}

.pointage-side-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 800;
  border: 1px solid #bbf7d0;
}

.pointage-details-cards-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pointage-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pointage-info-card:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.pointage-info-card.card-emerald {
  border-left: 4px solid #059669;
}
.pointage-info-card.card-emerald .p-info-icon {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.pointage-info-card.card-blue {
  border-left: 4px solid #0284c7;
}
.pointage-info-card.card-blue .p-info-icon {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
}

.pointage-info-card.card-purple {
  border-left: 4px solid #7c3aed;
}
.pointage-info-card.card-purple .p-info-icon {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.p-info-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.p-info-content {
  flex: 1;
}

.p-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.p-info-top h5 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
}

.p-info-status {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-active {
  background: #dcfce7;
  color: #15803d;
}

.status-blue {
  background: #e0f2fe;
  color: #0369a1;
}

.status-purple {
  background: #f3e8ff;
  color: #7e22ce;
}

.p-info-content p {
  margin: 0;
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.4;
}

.pointage-side-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.p-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.p-footer-item i {
  color: #059669;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .pointage-auth-card {
    padding: 28px 20px !important;
  }
  .pointage-auth-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .pointage-auth-header-row {
    flex-direction: column;
    text-align: center;
  }
  .pointage-auth-title {
    text-align: center;
  }
  .pointage-auth-subtitle {
    text-align: center;
  }
  .pointage-auth-badge {
    align-self: center;
  }
}

/* 2. Employee Profile Banner */
.pointage-profile-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid rgba(2, 132, 199, 0.22);
  border-radius: 22px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(2, 132, 199, 0.08);
}

.pointage-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.pointage-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.pointage-avatar-box {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0284c7 0%, #0056b3 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.28);
  flex-shrink: 0;
}

.pointage-profile-info {
  min-width: 0;
}

.pointage-profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.pointage-profile-name-row h3 {
  font-size: 1.25rem;
  font-weight: 850;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.pointage-matricule-badge {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #0284c7;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.pointage-profile-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.80rem;
  font-weight: 600;
  color: #475569;
  flex-wrap: wrap;
}

.pointage-profile-meta i {
  color: #0284c7;
  margin-right: 4px;
}

.pointage-profile-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: auto;
}

.pointage-profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

.pointage-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
  font-size: 0.70rem;
  font-weight: 850;
  border-radius: 999px;
  white-space: nowrap;
}

.pointage-live-badge i {
  font-size: 0.5rem;
  color: #10b981;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.pointage-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.80rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pointage-action-btn.btn-refresh {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #0284c7;
  transition: all 0.25s ease;
}

.pointage-action-btn.btn-refresh:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-2px);
}

.pointage-action-btn.btn-refresh.is-syncing {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
  pointer-events: none !important;
}

.pointage-action-btn.btn-refresh.is-syncing i {
  animation: pointageSpin 0.75s linear infinite !important;
}

.pointage-action-btn.btn-refresh.is-synced {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

/* Hide Profile Actualiser (Button #1) when 7-Day Week View is Active */
#btnToggleWeekPointage.active ~ .btn-refresh,
#btnToggleWeekPointage.active ~ #btnRefreshPointage {
  display: none !important;
}

@keyframes pointageSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pointageTimePulse {
  0% { transform: scale(1); background-color: #f8fafc; }
  35% { transform: scale(1.05); background-color: #dcfce7; border-color: #86efac; box-shadow: 0 0 16px rgba(34, 197, 94, 0.35); }
  100% { transform: scale(1); background-color: #f8fafc; }
}

.pointage-time-box.pointage-time-pulse {
  animation: pointageTimePulse 2s ease-in-out !important;
}

/* Floating pointage toast notification */
.pointage-toast-notify {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 99999;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pointage-toast-notify.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.pointage-toast-notify i {
  color: #10b981;
  font-size: 1.15rem;
}

.pointage-action-btn.btn-switch {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.pointage-action-btn.btn-switch:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-2px);
}

/* 3. Cards Grid (Today & Yesterday) */
.pointage-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.pointage-day-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.pointage-day-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
}

.pointage-day-card.today-card {
  border-color: rgba(2, 132, 199, 0.4);
  background: linear-gradient(165deg, #ffffff 0%, #f0f9ff 100%);
}

.pointage-day-card.yesterday-card {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 100%);
}

.pointage-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.pointage-day-title-wrap h4 {
  font-size: 1.12rem;
  font-weight: 850;
  color: #0f172a;
  margin: 6px 0 0 0;
  letter-spacing: -0.01em;
}

.day-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.day-tag-pill.today-tag {
  background: #0284c7;
  color: #ffffff;
}

.day-tag-pill.yesterday-tag {
  background: #059669;
  color: #ffffff;
}

.pointage-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-present {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.status-present .status-dot { background: #16a34a; }

.status-retard {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.status-retard .status-dot { background: #d97706; }

.status-inprogress {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}
.status-inprogress .status-dot {
  background: #0284c7;
  animation: pulseDot 1.5s infinite;
}

.status-absent {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.status-absent .status-dot { background: #dc2626; }

.status-weekend {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.status-weekend .status-dot { background: #94a3b8; }

/* Metrics Grid (2 Balanced Columns: 1ère Entrée & Dernière Sortie) */
.pointage-day-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.p-metric-item {
  background: #ffffff;
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  min-width: 0;
  transition: all 0.2s ease;
}

.p-metric-item:hover {
  border-color: rgba(2, 132, 199, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.08);
}

.p-metric-label {
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  color: #64748b !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.p-metric-label i {
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}

.p-metric-val {
  font-size: 1.38rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.p-metric-val.highlight {
  color: #0284c7;
}

.pointage-day-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
}

.pointage-day-footer i {
  color: #0284c7;
  margin-right: 4px;
}

/* 4. Help / Support Footer Banner */
.pointage-help-banner {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  border-radius: 18px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}

.pointage-help-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.88rem;
  font-weight: 750;
  color: #065f46;
  text-align: center;
}

.pointage-help-left i {
  font-size: 1.25rem;
  color: #10b981;
  flex-shrink: 0;
}


/* Responsive tweaks */
@media (max-width: 860px) {
  .pointage-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .pointage-profile-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .pointage-help-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ============================================================
   TOPBAR UTILITY BUTTONS — INDIVIDUAL HARMONIOUS COLORS
   ============================================================ */

/* -1. Assistant IA d'Entreprise (DeepSeek TokenHarbor) — Electric Cyber Violet Pill */
.nav-ai-btn,
#aiAssistantBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #7c3aed 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.nav-ai-btn i,
#aiAssistantBtn i {
  font-size: 0.88rem !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.nav-ai-btn span,
#aiAssistantBtn span {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.nav-ai-btn:hover,
#aiAssistantBtn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c026d3 100%) !important;
  border-color: rgba(255, 255, 255, 0.50) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.55), 0 0 16px rgba(168, 85, 247, 0.40) !important;
}

.nav-ai-btn.active,
#aiAssistantBtn.active {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 50%, #581c87 100%) !important;
  border-color: #c4b5fd !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95), 0 4px 18px rgba(109, 40, 217, 0.6) !important;
  transform: translateY(-1px) !important;
}

.ai-chip-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  margin-left: 2px !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 0. Bloc-notes & Brouillon Personnel — Premium Crimson Red Pill (Left of Carnet d'adresses) */
.nav-notes-btn,
#notesBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.nav-notes-btn i,
#notesBtn i {
  font-size: 0.88rem !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.nav-notes-btn span,
#notesBtn span {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.nav-notes-btn:hover,
#notesBtn:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 22px rgba(225, 29, 72, 0.50) !important;
}

.nav-notes-btn.active,
#notesBtn.active {
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%) !important;
  border-color: #fecdd3 !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95), 0 4px 18px rgba(225, 29, 72, 0.6) !important;
  transform: translateY(-1px) !important;
}

.notes-count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  margin-left: 2px !important;
}

/* 1. Carnet d'adresses & Groupes — Compact Solid Royal Blue Pill (Left of Search Bar) */
.nav-carnet-btn,
#addressBookBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.nav-carnet-btn i,
#addressBookBtn i {
  font-size: 0.88rem !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.nav-carnet-btn span,
#addressBookBtn span {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.nav-carnet-btn:hover,
#addressBookBtn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.50) !important;
}

.nav-carnet-btn.active,
#addressBookBtn.active {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.95), 0 4px 18px rgba(29, 78, 216, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* 2. Services Professionnels — Solid Emerald Green */
#requestAccountBtn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#requestAccountBtn i {
  color: #ffffff !important;
}
#requestAccountBtn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.50) !important;
}

/* 3. Centre de Notifications — Solid Warm Amber / Gold */
#notifBtn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#notifBtn i {
  color: #ffffff !important;
}
#notifBtn:hover,
#notifBtn[aria-expanded="true"] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.50) !important;
}

/* 4. Diffuser une Annonce (Admin) — Solid Amethyst Purple */
.nav-icon-btn.admin-only[onclick*="Broadcast"] {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-icon-btn.admin-only[onclick*="Broadcast"] i {
  color: #ffffff !important;
}
.nav-icon-btn.admin-only[onclick*="Broadcast"]:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.50) !important;
}


/* 5. Rafraîchir le système — Solid Ocean Cyan */
#navRefreshBtn,
.nav-icon-btn[onclick*="handleNavbarSoftRefresh"],
.nav-icon-btn[onclick*="reload"] {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#navRefreshBtn i,
.nav-icon-btn[onclick*="handleNavbarSoftRefresh"] i,
.nav-icon-btn[onclick*="reload"] i {
  color: #ffffff !important;
}
#navRefreshBtn:hover,
.nav-icon-btn[onclick*="handleNavbarSoftRefresh"]:hover,
.nav-icon-btn[onclick*="reload"]:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.50) !important;
}

/* ============================================================
   TOPBAR SEARCH BAR — MODERN PROFESSIONAL DESIGN
   ============================================================ */
.nav-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 220px !important;
  width: 250px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.90)) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.28) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff !important;
  padding: 0 12px 0 10px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(12px) !important;
  position: relative !important;
}

.nav-search-wrap:hover {
  border-color: rgba(2, 132, 199, 0.48) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.10), inset 0 1px 0 #ffffff !important;
  transform: translateY(-1px);
}

.nav-search-wrap:focus-within {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.16), 0 8px 24px rgba(2, 132, 199, 0.12) !important;
  transform: translateY(-1px);
}

.search-icon-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(2, 132, 199, 0.10);
  color: #0284c7;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.nav-search-wrap:focus-within .search-icon-indicator {
  background: #0284c7;
  color: #ffffff;
  transform: scale(1.05);
}

.nav-search-wrap input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-family: 'Poppins', 'Tajawal', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  width: 100% !important;
  padding: 0 !important;
}

.nav-search-wrap input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

.search-kbd-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.search-kbd-shortcut kbd {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 5px;
  line-height: 1;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.22);
  color: #0284c7;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nav-search-wrap:focus-within .search-kbd-shortcut {
  opacity: 0.35;
}

/* Responsive Compact Topbar Actions (Eliminates Empty Space & Row Dropping at any viewport) */
.nav-search-wrap {
  width: 180px !important;
  min-width: 130px !important;
  max-width: 220px !important;
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .nav-search-wrap {
    width: 155px !important;
    min-width: 120px !important;
  }
  .search-kbd-shortcut {
    display: none !important;
  }
  .ai-chip-badge {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .navbar-brand .brand-system-name {
    display: none !important;
  }
  .nav-search-wrap {
    width: 125px !important;
    min-width: 95px !important;
  }
  .search-kbd-shortcut {
    display: none !important;
  }
  .nav-btn-label,
  .ai-chip-badge {
    display: none !important;
  }
  .nav-carnet-btn,
  #addressBookBtn,
  .nav-notes-btn,
  #notesBtn,
  .nav-ai-btn,
  #aiAssistantBtn {
    padding: 0 10px !important;
    width: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }
  .navbar-actions {
    gap: 6px !important;
  }
  .topbar-user .user-role {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .nav-search-wrap {
    width: 105px !important;
    min-width: 80px !important;
  }
  .topbar-user .user-name {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   ULTRA-PREMIUM DYNAMIC FLOATING NAVBAR (V5.0 - Next-Gen Grid Architecture)
   ========================================================================== */

@media (min-width: 769px) {
  .navbar-container {
    max-width: 1650px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(max-content, auto) 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "brand actions"
      "links links" !important;
    align-items: center !important;
    row-gap: 6px !important;
    column-gap: 16px !important;
    flex-wrap: unset !important;
    padding: 6px 20px !important;
  }

  .navbar-container::before {
    display: none !important;
  }

  .main-navbar .navbar-brand,
  .navbar-brand {
    grid-area: brand !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    order: unset !important;
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
  }

  .brand-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    line-height: 1.2 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .brand-system-name {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }

  .main-navbar .navbar-actions,
  .navbar-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
    order: unset !important;
  }

  .main-navbar .navbar-links,
  .navbar-links {
    grid-area: links !important;
    justify-self: center !important;
    order: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.5px !important;
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    flex: 0 0 auto !important;
    margin: 6px auto 2px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(241, 246, 255, 0.88) 35%,
      rgba(235, 252, 246, 0.88) 70%,
      rgba(245, 240, 255, 0.90) 100%
    ) !important;
    border: 1.5px solid rgba(10, 30, 140, 0.12) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    box-shadow:
      0 10px 30px -8px rgba(10, 30, 140, 0.10),
      0 4px 12px rgba(0, 0, 0, 0.03),
      inset 0 1px 1px rgba(255, 255, 255, 0.98),
      inset 0 -1px 2px rgba(10, 30, 140, 0.04) !important;
    position: relative !important;
    z-index: 100 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .main-navbar .navbar-links::-webkit-scrollbar,
  .navbar-links::-webkit-scrollbar {
    display: none !important;
  }

  .main-navbar .navbar-links:hover,
  .navbar-links:hover {
    border-color: rgba(10, 30, 140, 0.25) !important;
    box-shadow:
      0 16px 40px -10px rgba(10, 30, 140, 0.16),
      0 6px 16px rgba(0, 0, 0, 0.04),
      inset 0 1px 2px rgba(255, 255, 255, 1),
      inset 0 -1px 2px rgba(10, 30, 140, 0.06) !important;
    transform: translateY(-1px) !important;
  }

  /* Nav Item Styling */
  .navbar-links .nav-link,
  .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    color: #475569 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    position: relative !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
  }

  .navbar-links .nav-link i,
  .nav-link i {
    font-size: 0.86rem !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease !important;
  }

  /* Tier 1: Large Desktop & High-Resolution Screens (1440px+) */
  @media (min-width: 1440px) {
    .main-navbar .navbar-links,
    .navbar-links {
      padding: 7px 18px !important;
      gap: 6px !important;
      margin: 10px auto 3px !important;
    }
    .navbar-links .nav-link,
    .nav-link {
      padding: 8px 14px !important;
      font-size: 0.86rem !important;
      gap: 7px !important;
    }
    .navbar-links .nav-link i,
    .nav-link i {
      font-size: 0.94rem !important;
    }
    .navbar-links .nav-link.active::after {
      width: 18px !important;
      bottom: 3.5px !important;
    }
  }

  /* Tier 2: Standard Laptops (1180px - 1439px) */
  @media (min-width: 1180px) and (max-width: 1439px) {
    .main-navbar .navbar-links,
    .navbar-links {
      padding: 6px 14px !important;
      gap: 4.5px !important;
      margin: 8px auto 2px !important;
    }
    .navbar-links .nav-link,
    .nav-link {
      padding: 7px 11px !important;
      font-size: 0.80rem !important;
      gap: 5px !important;
    }
    .navbar-links .nav-link i,
    .nav-link i {
      font-size: 0.86rem !important;
    }
  }

  /* Tier 3: Compact Laptops & Small Desktop Windows (901px - 1179px) */
  @media (min-width: 901px) and (max-width: 1179px) {
    .main-navbar .navbar-links,
    .navbar-links {
      padding: 5px 10px !important;
      gap: 3px !important;
      margin: 6px auto 2px !important;
    }
    .navbar-links .nav-link,
    .nav-link {
      padding: 6px 9px !important;
      font-size: 0.75rem !important;
      gap: 4px !important;
    }
    .navbar-links .nav-link i,
    .nav-link i {
      font-size: 0.80rem !important;
    }
    .navbar-links .nav-link.active::after {
      width: 13px !important;
      bottom: 2.5px !important;
    }
  }

  /* Hover States */
  .navbar-links .nav-link:hover,
  .nav-link:hover {
    background: rgba(10, 30, 140, 0.06) !important;
    border-color: rgba(10, 30, 140, 0.08) !important;
    color: #0A1E8C !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(10, 30, 140, 0.08) !important;
  }

  .navbar-links .nav-link:hover i,
  .nav-link:hover i {
    transform: scale(1.22) !important;
  }

  /* Individual Icon Accent Colors on Hover */
  #navDashboard:hover i { color: #0A1E8C !important; }
  #navDirectory:hover i { color: #4f46e5 !important; }
  #navStats:hover i { color: #0284c7 !important; }
  #navTools:hover i { color: #7c3aed !important; }
  #navPointage:hover i { color: #10b981 !important; }
  #navDatabase:hover i { color: #8b5cf6 !important; }
  #navAbout:hover i { color: #d97706 !important; }
  #navCompany:hover i { color: #0A1E8C !important; }
  #navContact:hover i { color: #059669 !important; }

  /* Active State (Vibrant Royal Glow Capsule) */
  .navbar-links .nav-link.active,
  .nav-link.active {
    background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 50%, #2563eb 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 8px 22px rgba(10, 30, 140, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.08),
      inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }

  .navbar-links .nav-link.active i,
  .nav-link.active i {
    color: #ffffff !important;
    transform: scale(1.06) !important;
  }

  /* Active Indicator Pulse */
  .navbar-links .nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 3.5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 16px !important;
    height: 2.5px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
  }

  /* Dark Mode Support */
  html.dark-mode .navbar-links {
    background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.88) 0%,
      rgba(23, 37, 84, 0.82) 40%,
      rgba(15, 35, 45, 0.82) 75%,
      rgba(30, 27, 75, 0.85) 100%
    ) !important;
    border-color: rgba(56, 189, 248, 0.20) !important;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.45),
      inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
  }

  html.dark-mode .navbar-links .nav-link {
    color: #94a3b8 !important;
  }

  html.dark-mode .navbar-links .nav-link:hover {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
  }

  html.dark-mode .navbar-links .nav-link.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #38bdf8 100%) !important;
    box-shadow:
      0 8px 24px rgba(37, 99, 235, 0.45),
      inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   SERVICES PROFESSIONNELS MODAL & CARDS (Next-Gen Glassmorphic Redesign)
   ========================================================================== */

#serviceSelectionModal .service-selection-content {
  width: min(880px, calc(100vw - 32px)) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-radius: 32px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  padding: 32px !important;
  box-shadow:
    0 30px 80px -15px rgba(10, 30, 140, 0.22),
    0 0 0 1px rgba(10, 30, 140, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

#serviceSelectionModal .modal-header {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#serviceSelectionModal .service-selection-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-top: 0 !important;
}

/* Base Service Card */
#serviceSelectionModal .service-card {
  min-height: 250px !important;
  border-radius: 24px !important;
  padding: 24px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1.5px solid rgba(var(--service-rgb), 0.22) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--service-rgb), 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, rgba(var(--service-rgb), 0.04) 100%) !important;
  box-shadow:
    0 10px 25px -5px rgba(var(--service-rgb), 0.12),
    0 2px 6px rgba(0, 0, 0, 0.02),
    inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#serviceSelectionModal .service-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(var(--service-rgb), 0.55) !important;
  box-shadow:
    0 24px 48px -10px rgba(var(--service-rgb), 0.28),
    0 8px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

#serviceSelectionModal .service-card:active {
  transform: translateY(-2px) scale(0.99) !important;
}

/* Card Accent Themes */
#serviceSelectionModal .card-request {
  --service-accent: #2563eb;
  --service-rgb: 37, 99, 235;
  --service-grad-start: #3b82f6;
  --service-grad-end: #1d4ed8;
}

#serviceSelectionModal .card-correction {
  --service-accent: #7c3aed;
  --service-rgb: 124, 58, 237;
  --service-grad-start: #8b5cf6;
  --service-grad-end: #6d28d9;
}

#serviceSelectionModal .card-deactivation {
  --service-accent: #e11d48;
  --service-rgb: 225, 29, 72;
  --service-grad-start: #f43f5e;
  --service-grad-end: #be123c;
}

/* Icon Container */
#serviceSelectionModal .service-icon-wrapper {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--service-grad-start), var(--service-grad-end)) !important;
  box-shadow:
    0 8px 20px rgba(var(--service-rgb), 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}

#serviceSelectionModal .service-card:hover .service-icon-wrapper {
  transform: scale(1.12) rotate(-4deg) translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(var(--service-rgb), 0.45) !important;
}

/* Top-Right Badge */
#serviceSelectionModal .service-badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  background: rgba(var(--service-rgb), 0.08) !important;
  border: 1px solid rgba(var(--service-rgb), 0.22) !important;
  color: var(--service-accent) !important;
  transition: all 0.25s ease !important;
}

#serviceSelectionModal .service-card:hover .service-badge {
  background: var(--service-accent) !important;
  color: #ffffff !important;
  border-color: var(--service-accent) !important;
  box-shadow: 0 4px 12px rgba(var(--service-rgb), 0.3) !important;
}

/* Card Heading & Body */
#serviceSelectionModal .service-card h3 {
  margin: 0 0 6px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
}

#serviceSelectionModal .service-card:hover h3 {
  color: var(--service-accent) !important;
}

#serviceSelectionModal .service-card p {
  margin: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Bottom Action Arrow Button */
#serviceSelectionModal .service-card-arrow {
  width: 36px !important;
  height: 36px !important;
  margin-top: 16px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  color: var(--service-accent) !important;
  background: rgba(var(--service-rgb), 0.08) !important;
  border: 1px solid rgba(var(--service-rgb), 0.20) !important;
  box-shadow: 0 2px 8px rgba(var(--service-rgb), 0.08) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#serviceSelectionModal .service-card:hover .service-card-arrow {
  transform: translateX(4px) scale(1.05) !important;
  background: linear-gradient(135deg, var(--service-grad-start), var(--service-grad-end)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(var(--service-rgb), 0.35) !important;
}

/* Dark Mode Support for Modal */
html.dark-mode #serviceSelectionModal .service-selection-content {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
  border-color: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode #serviceSelectionModal .service-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--service-rgb), 0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border-color: rgba(var(--service-rgb), 0.3) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode #serviceSelectionModal .service-card h3 {
  color: #f1f5f9 !important;
}

html.dark-mode #serviceSelectionModal .service-card p {
  color: #94a3b8 !important;
}

html.dark-mode #serviceSelectionModal .service-card-arrow {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
}

/* Mobile Responsiveness */
@media (max-width: 820px) {
  #serviceSelectionModal .service-selection-content {
    padding: 20px !important;
    border-radius: 24px !important;
  }
  #serviceSelectionModal .service-selection-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #serviceSelectionModal .service-card {
    min-height: auto !important;
    padding: 18px !important;
  }
}

/* ==========================================================================
   REQUEST / CORRECTION / DEACTIVATION FORMS (Ultra-Modern Glassmorphism V5.0)
   ========================================================================== */

.request-modal-content {
  max-width: 880px !important;
  width: min(880px, calc(100vw - 32px)) !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 25px 70px -10px rgba(10, 30, 140, 0.22), 0 0 0 1px rgba(10, 30, 140, 0.06) !important;
}

/* Modal Header */
.request-modal-content .modal-header {
  padding: 22px 28px !important;
  background: linear-gradient(135deg, #091326 0%, #0d2347 40%, #0a374c 75%, #064e43 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

#correctionModal .modal-header {
  background: linear-gradient(135deg, #1e1136 0%, #3b1366 45%, #5b21b6 100%) !important;
  border-bottom: 1px solid rgba(192, 132, 252, 0.25) !important;
}

#deactivationModal .modal-header {
  background: linear-gradient(135deg, #260c0c 0%, #4c1111 45%, #7f1d1d 100%) !important;
  border-bottom: 1px solid rgba(248, 113, 113, 0.25) !important;
}

.request-modal-content .modal-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.request-modal-content .modal-title-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.20) 0%, rgba(16, 185, 129, 0.20) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.40) !important;
  color: #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}

.modal-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

.request-modal-content h2 {
  font-size: 1.30rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
  margin: 0 0 3px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.request-modal-content p {
  font-size: 0.80rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.request-modal-content .close-modal {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.request-modal-content .close-modal:hover {
  background: rgba(239, 68, 68, 0.85) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

/* Form Area */
.request-form {
  padding: 24px 28px 20px !important;
  background: #ffffff !important;
}

.request-form-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 22px !important;
  margin-bottom: 18px !important;
  align-items: stretch !important;
}

.form-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.80rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #0A1E8C !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}

/* Input Fields */
.request-form label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 6px !important;
}

.request-form label i {
  color: #0284c7 !important;
  font-size: 0.80rem !important;
}

.request-form input,
.request-form select,
.request-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.request-form input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.request-form input:hover,
.request-form select:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.14) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

/* Right Panel: High-End Virtual Enterprise ID Pass */
.request-form-preview {
  display: flex !important;
  flex-direction: column !important;
}

.virtual-id-card {
  height: 100% !important;
  min-height: 290px !important;
  background: linear-gradient(145deg, #091a48 0%, #0f2759 45%, #063c56 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 20px !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 14px 34px -8px rgba(10, 30, 140, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.20) !important;
}

.id-card-glow {
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.30) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Card Top: Chip & Brand */
.id-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 2 !important;
}

.id-chip {
  width: 38px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
}

.chip-lines {
  position: absolute !important;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

.id-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.3px !important;
}

.id-brand i {
  color: #38bdf8 !important;
  font-size: 0.90rem !important;
}

.id-brand strong {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

/* Card Body */
.id-card-body {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

.id-avatar-circle {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  font-weight: 850 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.id-status-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 2px solid #0f2759 !important;
}

.id-employee-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
}

.id-employee-details h4 {
  margin: 0 !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.id-tags-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.id-job-tag {
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(56, 189, 248, 0.20) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.id-unit-tag {
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(16, 185, 129, 0.20) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

/* Card Email Capsule */
.id-email-capsule {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.30) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

.email-capsule-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

.pulse-live-badge {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 0.54rem !important;
  font-weight: 850 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  letter-spacing: 0.4px !important;
}

.email-capsule-value {
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  word-break: break-all !important;
  letter-spacing: -0.2px !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace, sans-serif !important;
}

/* Card Footer */
.id-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.security-chip-note {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.62rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.security-chip-note i {
  color: #10b981 !important;
  font-size: 0.70rem !important;
}

.id-barcode {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

.id-barcode span {
  display: inline-block !important;
  height: 100% !important;
  width: 2px !important;
  background: #ffffff !important;
}
.id-barcode span:nth-child(2n) { width: 3px !important; }
.id-barcode span:nth-child(3n) { width: 1px !important; }

/* Modal Footer Section */
.request-form-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-top: 16px !important;
  border-top: 1.5px solid #f1f5f9 !important;
}

.arabic-disclaimer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  flex: 1 !important;
}

.arabic-disclaimer i {
  color: #0284c7 !important;
  font-size: 0.90rem !important;
  flex-shrink: 0 !important;
}

.btn-request-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 13px !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-request-submit:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 26px rgba(2, 132, 199, 0.45) !important;
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
}

.btn-request-submit:active {
  transform: translateY(0) scale(0.99) !important;
}

/* Dark Mode Support */
html.dark-mode .request-modal-content {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .request-form {
  background: #0f172a !important;
}

html.dark-mode .request-form label {
  color: #94a3b8 !important;
}

html.dark-mode .request-form input,
html.dark-mode .request-form select,
html.dark-mode .request-form textarea {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .preview-box {
  background: linear-gradient(150deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

html.dark-mode .generated-email-wrap {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

html.dark-mode #generatedEmailDisplay {
  color: #38bdf8 !important;
}

html.dark-mode .preview-note {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .request-form-footer {
  border-top-color: #1e293b !important;
}

html.dark-mode .arabic-disclaimer {
  color: #94a3b8 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .request-modal-content {
    border-radius: 20px !important;
  }
  .request-form {
    padding: 20px !important;
  }
  .request-form-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .request-form-main .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .request-form-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .btn-request-submit {
    width: 100% !important;
  }
}

/* ==========================================================================
   CORRECTION & DEACTIVATION MODALS CUSTOM PREVIEW & THEMING
   ========================================================================== */

/* Correction Modal Theme */
#correctionModal .request-form label i {
  color: #7c3aed !important;
}

#correctionModal .request-form input:focus,
#correctionModal .request-form select:focus,
#correctionModal .request-form textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(124, 58, 237, 0.08) !important;
}

.cor-preview-box {
  background: linear-gradient(150deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 8px 24px -6px rgba(124, 58, 237, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
}

.cor-preview-header {
  color: #6d28d9 !important;
  background: rgba(124, 58, 237, 0.10) !important;
}

.cor-btn-submit {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28) !important;
}

.cor-btn-submit:hover {
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.40) !important;
}

/* Deactivation Modal Theme */
#deactivationModal .request-form label i {
  color: #dc2626 !important;
}

#deactivationModal .request-form input:focus,
#deactivationModal .request-form select:focus,
#deactivationModal .request-form textarea:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12), 0 2px 8px rgba(220, 38, 38, 0.08) !important;
}

.dea-preview-box {
  background: linear-gradient(150deg, #fff1f2 0%, #ffe4e6 50%, #fecdd3 100%) !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
  box-shadow: 0 8px 24px -6px rgba(220, 38, 38, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
}

.dea-preview-header {
  color: #be123c !important;
  background: rgba(220, 38, 38, 0.10) !important;
}

.dea-btn-submit {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #ef4444 100%) !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.28) !important;
}

.dea-btn-submit:hover {
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.40) !important;
}

/* Service Preview Inner Card */
.service-preview-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 16px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.service-preview-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.service-preview-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  color: #ffffff !important;
}

.service-preview-icon.cor-icon {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

.service-preview-icon.dea-icon {
  background: linear-gradient(135deg, #dc2626, #f43f5e) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.service-preview-title {
  margin: 0 0 12px !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.service-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: left !important;
}

.service-checklist li {
  font-size: 0.77rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

.cor-checklist li i {
  color: #7c3aed !important;
  font-size: 0.82rem !important;
  margin-top: 1px !important;
}

.dea-checklist li i {
  color: #dc2626 !important;
  font-size: 0.82rem !important;
  margin-top: 1px !important;
}

.preview-status-pill {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

.preview-status-pill.cor-status {
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(124, 58, 237, 0.20) !important;
  color: #6d28d9 !important;
}

.preview-status-pill.dea-status {
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.20) !important;
  color: #be123c !important;
}

/* Dark Mode Overrides for Correction & Deactivation */
html.dark-mode .cor-preview-box {
  background: linear-gradient(150deg, #1e1b4b 0%, #0f172a 100%) !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
}

html.dark-mode .dea-preview-box {
  background: linear-gradient(150deg, #450a0a 0%, #0f172a 100%) !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}

html.dark-mode .service-preview-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .service-preview-title {
  color: #f1f5f9 !important;
}

html.dark-mode .service-checklist li {
  color: #cbd5e1 !important;
}

html.dark-mode .preview-status-pill.cor-status {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #c4b5fd !important;
}

html.dark-mode .preview-status-pill.dea-status {
  background: rgba(220, 38, 38, 0.2) !important;
  color: #fca5a5 !important;
}

/* ==========================================================================
   OPTIMIZED ULTRA-SMOOTH BANNERS (High Performance & Crisp Legibility)
   ========================================================================== */

.page-banner {
  width: calc(100% - 48px) !important;
  max-width: 1380px !important;
  margin: 20px auto 0 !important;
  padding: 28px 36px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--banner-a) 0%, var(--banner-b) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 28px -6px rgba(var(--banner-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.page-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px -6px rgba(var(--banner-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Left Luminous Accent Line */
.page-banner::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-top-left-radius: 22px !important;
  border-bottom-left-radius: 22px !important;
  display: block !important;
  pointer-events: none !important;
}

/* Background SVGs / Decorations (Subtle & Lightweight) */
.page-banner-decor {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 280px !important;
  height: 90% !important;
  pointer-events: none !important;
  opacity: 0.12 !important;
  transition: opacity 0.25s ease !important;
}

.page-banner:hover .page-banner-decor {
  opacity: 0.20 !important;
}

.page-banner-decor .banner-svg {
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
}

/* Banner Content */
.page-banner-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Banner Heading & Crisp Text (No Blurry Glow) */
.page-banner h2 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

.page-banner h2 .accent {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  display: inline-block !important;
  opacity: 0.95 !important;
}

/* Banner Icon Container */
.page-banner h2 > i {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.22s ease !important;
}

.page-banner:hover h2 > i {
  transform: translateY(-1px) scale(1.05) !important;
}

/* Banner Subtitle */
.page-banner p {
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  letter-spacing: 0.1px !important;
  text-shadow: none !important;
}

/* Palettes */
#pageDirectory .page-banner {
  --banner-a: #0A1E8C;
  --banner-b: #1e40af;
  --banner-rgb: 10, 30, 140;
}

#pageStats .page-banner {
  --banner-a: #0f766e;
  --banner-b: #0d9488;
  --banner-rgb: 13, 148, 136;
}

#pageTools .page-banner {
  --banner-a: #5b21b6;
  --banner-b: #7c3aed;
  --banner-rgb: 109, 40, 217;
}

#pagePointage .page-banner {
  --banner-a: #065f46;
  --banner-b: #059669;
  --banner-rgb: 5, 150, 105;
}

#pageDatabase .page-banner {
  --banner-a: #0369a1;
  --banner-b: #0284c7;
  --banner-rgb: 2, 132, 199;
}

#pageSignature .page-banner {
  --banner-a: #4338ca;
  --banner-b: #6366f1;
  --banner-rgb: 79, 70, 229;
}

#pageContact .page-banner {
  --banner-a: #0e7490;
  --banner-b: #0891b2;
  --banner-rgb: 8, 145, 178;
}

/* Dark Mode Page Banners */
html.dark-mode .page-banner {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Responsive adjustments */
@media (max-width: 820px) {
  .page-banner {
    width: calc(100% - 24px) !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
    margin-top: 14px !important;
  }
  .page-banner h2 {
    gap: 12px !important;
    font-size: 1.2rem !important;
  }
  .page-banner h2 > i {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
  }
  .page-banner p {
    font-size: 0.76rem !important;
  }
}

/* ============================================================
   MY POINTAGE 2.0 — BANNER ENHANCEMENTS
   ============================================================ */
.page-banner-pointage {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}

#pagePointage .page-banner-decor {
  opacity: 0.12 !important;
}

.page-banner-pointage .page-banner-content {
  flex: 1 1 500px !important;
  min-width: 0 !important;
}

.page-banner-pointage h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.pointage-version-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

.page-banner-pills {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

.banner-pill-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.banner-pill-chip:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

.banner-pill-chip.chip-live i {
  color: #a7f3d0 !important;
}


.banner-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7) !important;
  animation: bannerPulse 2s infinite !important;
}

@keyframes bannerPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

@media (max-width: 820px) {
  .page-banner-pills {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }
  .banner-pill-chip {
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
  }
}

/* ==========================================================================
   EXECUTIVE DIGITAL BADGE ID CARD (V5.2 - Modern Enterprise Split Layout)
   ========================================================================== */

/* ==========================================================================
   EXECUTIVE DIGITAL BADGE ID CARD (V5.3 - Modern Enterprise Mobile & Desktop)
   ========================================================================== */

.employee-details-modal.executive-id-card {
  position: relative !important;
  width: min(920px, calc(100vw - 24px)) !important;
  max-height: min(90vh, calc(100dvh - 36px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px -10px rgba(15, 23, 42, 0.22) !important;
  padding: 0 0 10px 0 !important;
  margin: auto !important;
}

/* Modal Close Button */
.employee-details-modal .employee-details-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 50 !important;
  transition: all 0.22s ease !important;
  font-size: 0.95rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.employee-details-modal .employee-details-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Executive Header Banner */
.employee-details-modal .employee-details-hero {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 60px 22px 26px !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 55%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  position: relative !important;
}

.employee-avatar-wrapper {
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.employee-avatar-wrapper .employee-avatar-orb {
  width: 70px !important;
  height: 70px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.employee-avatar-wrapper .employee-avatar-orb i {
  font-size: 1.95rem !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
}

.avatar-status-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 3px solid #0A1E8C !important;
}

.employee-title-block {
  flex: 1 !important;
  min-width: 0 !important;
}

.employee-header-top-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.employee-company-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.70rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.employee-header-top-row .employee-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.3px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.employee-title-block h2 {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.18 !important;
  text-transform: capitalize !important;
}

.employee-title-block p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.employee-status-pill.is-active {
  background: rgba(16, 185, 129, 0.35) !important;
  border-color: rgba(16, 185, 129, 0.7) !important;
  color: #a7f3d0 !important;
}

.employee-status-pill.is-blocked,
.employee-status-pill.is-deactivated {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  color: #fecaca !important;
}

/* 2-Column Split Cards Layout (Desktop) */
.employee-details-sections {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  background: #f8fafc !important;
}

.employee-section-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1.5px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.employee-section-card:hover {
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.section-card-header {
  padding: 12px 16px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.section-card-header i {
  color: #0A1E8C !important;
  font-size: 0.85rem !important;
}

.section-card-content {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.employee-info-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.employee-info-row:last-child {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.info-row-label {
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.info-row-label i {
  color: #2563eb !important;
  font-size: 0.72rem !important;
}

.info-row-val {
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

.info-row-val.email-highlight {
  color: #0A1E8C !important;
  font-family: inherit !important;
}

.info-row-val.unit-tag {
  color: #0284c7 !important;
}

.info-row-val.status-highlight {
  color: #059669 !important;
}

.employee-info-row .employee-phone-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0f172a !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.employee-info-row .employee-phone-link i {
  color: #25d366 !important;
  font-size: 1.05rem !important;
}

/* Action Buttons Grid */
.employee-details-modal .employee-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  padding: 14px 24px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

.employee-details-modal .employee-quick-actions button,
.employee-details-modal .employee-quick-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.employee-details-modal .employee-quick-actions button i,
.employee-details-modal .employee-quick-actions a i {
  font-size: 0.90rem !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.employee-details-modal .employee-quick-actions .hidden,
.employee-details-modal .employee-quick-actions button.hidden,
.employee-details-modal .employee-quick-actions a.hidden {
  display: none !important;
}

.employee-details-modal .employee-quick-actions button:hover:not(:disabled),
.employee-details-modal .employee-quick-actions a:hover:not(.hidden) {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15) !important;
}

.employee-details-modal .employee-quick-actions #copyEmployeePhoneBtn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #94a3b8 !important;
  box-shadow: none !important;
}

.employee-details-modal .employee-quick-actions button[onclick="copyEmployeeEmail()"] {
  background: linear-gradient(135deg, #0A1E8C 0%, #2563eb 100%) !important;
}

.employee-details-modal .employee-quick-actions #copyEmployeePhoneBtn {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
}

.employee-details-modal .employee-quick-actions .employee-whatsapp-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

.employee-details-modal .employee-quick-actions .employee-call-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

.employee-details-modal .employee-quick-actions button[onclick="editEmployeeFromDetails()"] {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
}

.employee-details-modal .employee-quick-actions .employee-danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

/* Dark Mode Support for Executive Card */
html.dark-mode .employee-details-modal.executive-id-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .employee-details-sections {
  background: #0b1120 !important;
}

html.dark-mode .employee-section-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .section-card-header {
  background: #182234 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .section-card-header i {
  color: #38bdf8 !important;
}

html.dark-mode .employee-info-row {
  border-color: #334155 !important;
}

html.dark-mode .info-row-label {
  color: #94a3b8 !important;
}

html.dark-mode .info-row-val {
  color: #f1f5f9 !important;
}

html.dark-mode .info-row-val.email-highlight {
  color: #38bdf8 !important;
}

html.dark-mode .employee-details-modal .employee-quick-actions {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* Mobile Responsiveness for Employee Details Modal */
@media (max-width: 768px) {
  .employee-details-modal.executive-id-card {
    width: calc(100vw - 20px) !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
  }

  .employee-details-modal .employee-details-hero {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 16px 18px !important;
    gap: 12px !important;
  }

  .employee-details-modal .employee-details-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .employee-avatar-wrapper .employee-avatar-orb {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.25rem !important;
    margin: 0 auto !important;
  }

  .employee-header-top-row {
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  .employee-title-block h2 {
    font-size: 1.25rem !important;
  }

  .employee-title-block p {
    justify-content: center !important;
    font-size: 0.82rem !important;
  }

  /* Single Column Stack on Mobile to prevent word-break */
  .employee-details-sections {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 14px !important;
  }

  .employee-info-row {
    padding-bottom: 6px !important;
  }

  .info-row-val {
    font-size: 0.88rem !important;
    word-break: break-word !important;
  }

  /* 2-Column Touch Grid for Actions on Mobile */
  .employee-details-modal .employee-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px 14px 16px !important;
  }

  .employee-details-modal .employee-quick-actions button,
  .employee-details-modal .employee-quick-actions a {
    min-height: 38px !important;
    font-size: 0.74rem !important;
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   EXECUTIVE DEVELOPER SHOWCASE CARD (V5.2 - Ultra-Modern Profile Modal)
   ========================================================================== */

#devModal .executive-dev-card {
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: 680px !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow:
    0 25px 60px -10px rgba(10, 30, 140, 0.20),
    0 0 0 1px rgba(10, 30, 140, 0.05) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

#devModal .executive-dev-card::before {
  display: none !important;
}

/* Close Button */
#devModal .modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: all 0.2s ease !important;
  font-size: 0.95rem !important;
}

#devModal .modal-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Banner Hero */
#devModal .dev-banner-hero {
  padding: 28px 70px 24px 30px !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 60%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  position: relative !important;
}

.dev-avatar-showcase {
  position: relative !important;
  flex-shrink: 0 !important;
}

.dev-avatar-showcase img {
  width: 78px !important;
  height: 78px !important;
  border-radius: 20px !important;
  object-fit: cover !important;
  border: 2.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
  display: block !important;
}

.dev-online-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 3px solid #0A1E8C !important;
}

.dev-title-block {
  flex: 1 !important;
  min-width: 0 !important;
}

.dev-creator-tag {
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#devModal .dev-title-block h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 3px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.verified-badge {
  font-size: 1.05rem !important;
  color: #38bdf8 !important;
}

#devModal .dev-tagline {
  display: block !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  margin-bottom: 10px !important;
}

#devModal .dev-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#devModal .dev-stat-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

#devModal .dev-stat-item i {
  color: #fed7aa !important;
}

/* Body Section */
#devModal .dev-body-section {
  padding: 24px 30px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

#devModal .dev-bio-card {
  border-radius: 16px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #0A1E8C !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

#devModal .dev-bio-card h4,
#devModal .dev-skills-section h4 {
  margin: 0 0 8px !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#devModal .dev-bio-card h4 i,
#devModal .dev-skills-section h4 i {
  color: #0A1E8C !important;
  font-size: 0.85rem !important;
}

#devModal .dev-bio-card p {
  margin: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Skills Pills */
#devModal .dev-skills-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#devModal .skill-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 12px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #0A1E8C !important;
  background: #f0f7ff !important;
  border: 1px solid #dbeafe !important;
  transition: all 0.2s ease !important;
}

#devModal .skill-pill i {
  color: #2563eb !important;
}

#devModal .skill-pill:hover {
  transform: translateY(-2px) !important;
  background: #0A1E8C !important;
  color: #ffffff !important;
  border-color: #0A1E8C !important;
  box-shadow: 0 4px 12px rgba(10, 30, 140, 0.2) !important;
}

#devModal .skill-pill:hover i {
  color: #ffffff !important;
}

/* Contact Footer Socials */
#devModal .dev-contact-footer {
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

#devModal .footer-socials {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#devModal .social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

#devModal .social-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

#devModal .social-link.fb-link {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%) !important;
}

#devModal .social-link.wa-link {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

#devModal .footer-msg p {
  margin: 0 !important;
  text-align: center !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#devModal .footer-msg p i {
  color: #2563eb !important;
}

/* Dark Mode Support for Developer Card */
html.dark-mode #devModal .executive-dev-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode #devModal .dev-body-section {
  background: #0f172a !important;
}

html.dark-mode #devModal .dev-bio-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  border-left-color: #38bdf8 !important;
}

html.dark-mode #devModal .dev-bio-card h4,
html.dark-mode #devModal .dev-skills-section h4 {
  color: #f1f5f9 !important;
}

html.dark-mode #devModal .dev-bio-card h4 i,
html.dark-mode #devModal .dev-skills-section h4 i {
  color: #38bdf8 !important;
}

html.dark-mode #devModal .dev-bio-card p {
  color: #cbd5e1 !important;
}

html.dark-mode #devModal .skill-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #93c5fd !important;
}

html.dark-mode #devModal .skill-pill i {
  color: #38bdf8 !important;
}

html.dark-mode #devModal .skill-pill:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

html.dark-mode #devModal .dev-contact-footer {
  border-top-color: #1e293b !important;
}

@media (max-width: 640px) {
  #devModal .dev-banner-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 22px 20px !important;
  }
  #devModal .dev-stats {
    justify-content: center !important;
  }
  #devModal .footer-socials {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   EXECUTIVE COMPANY HEADQUARTERS CARD (V5.2 - Ultra-Modern Enterprise)
   ========================================================================== */

#companyModal .executive-company-card {
  width: min(780px, calc(100vw - 32px)) !important;
  max-width: 780px !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow:
    0 25px 60px -10px rgba(10, 30, 140, 0.20),
    0 0 0 1px rgba(10, 30, 140, 0.05) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

#companyModal .executive-company-card::before {
  display: none !important;
}

/* Close Button */
#companyModal .modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: all 0.2s ease !important;
  font-size: 0.95rem !important;
}

#companyModal .modal-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Hero Banner */
.company-modal-hero {
  padding: 28px 70px 24px 30px !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #1e40af 60%, #2563eb 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  position: relative !important;
}

.company-logo-wrapper {
  background: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20) !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.company-logo-wrapper .company-modal-logo {
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.company-hero-title {
  flex: 1 !important;
  min-width: 0 !important;
}

.company-sub-tag {
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.company-hero-title h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
}

.company-hero-title p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
}

/* Grid Sections */
#companyModal .company-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  padding: 24px 30px !important;
  background: #f8fafc !important;
}

#companyModal .company-info-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  padding: 0 !important;
}

#companyModal .company-info-card:hover {
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.company-card-header {
  padding: 12px 18px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-siege .company-card-header i {
  color: #ef4444 !important;
}

.card-commercial .company-card-header i {
  color: #0A1E8C !important;
}

#companyModal .info-list {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#companyModal .info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  color: #0f172a !important;
}

#companyModal .info-item i {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  background: #f1f5f9 !important;
  color: #0A1E8C !important;
  margin-top: 2px !important;
}

.card-siege .info-item i {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}

.card-commercial .info-item i {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.info-lbl {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #64748b !important;
  margin-bottom: 2px !important;
}

#companyModal .info-item strong {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

#companyModal .info-item .email-text {
  color: #0A1E8C !important;
}

#companyModal .info-item span {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.company-social-wrap {
  margin-top: 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.btn-fluxcare {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  background: #f0f7ff !important;
  color: #1877f2 !important;
  border: 1px solid #dbeafe !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.btn-fluxcare:hover {
  background: #1877f2 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25) !important;
}

/* Footer */
#companyModal .company-modal-footer {
  padding: 16px 30px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  text-align: center !important;
  margin-top: 0 !important;
}

#companyModal .company-modal-footer p {
  margin: 0 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#companyModal .company-modal-footer p i {
  color: #eab308 !important;
}

/* Dark Mode Support for Company Modal */
html.dark-mode #companyModal .executive-company-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode #companyModal .company-modal-grid {
  background: #0b1120 !important;
}

html.dark-mode #companyModal .company-info-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode #companyModal .company-card-header {
  background: #182234 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode #companyModal .info-lbl {
  color: #94a3b8 !important;
}

html.dark-mode #companyModal .info-item strong {
  color: #f1f5f9 !important;
}

html.dark-mode #companyModal .info-item .email-text {
  color: #38bdf8 !important;
}

html.dark-mode #companyModal .info-item span {
  color: #cbd5e1 !important;
}

html.dark-mode #companyModal .company-modal-footer {
  background: #0f172a !important;
  border-color: #334155 !important;
}

@media (max-width: 768px) {
  .company-modal-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 22px 20px !important;
  }
  #companyModal .company-modal-grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
}

/* ==========================================================================
   EXECUTIVE DIRECTORY & ENTERPRISE DATA TABLE SUITE (V5.3)
   ========================================================================== */

/* 1. Left Sidebar Suite */
#pageDirectory .dir-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

#pageDirectory .dir-sidebar .panel-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(10, 30, 140, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#pageDirectory .dir-sidebar .panel-card:hover {
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(10, 30, 140, 0.08) !important;
}

#pageDirectory .dir-sidebar .panel-card h4 {
  margin: 0 0 16px !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#pageDirectory .dir-sidebar .panel-card h4 i {
  color: #0A1E8C !important;
  font-size: 0.90rem !important;
}

/* Quick Filter Buttons */
#pageDirectory .filter-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#pageDirectory .filter-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}

#pageDirectory .filter-btn:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}

#pageDirectory .filter-btn.active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  border-left: 4px solid #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10) !important;
}

.filter-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
}

.filter-icon.all {
  background: linear-gradient(135deg, #0A1E8C 0%, #2563eb 100%) !important;
}

.filter-icon.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

.filter-icon.blocked {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

.filter-text span {
  display: block !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.filter-text small {
  display: block !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

/* Quick Stats Section */
.quick-stat-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.82rem !important;
}

.quick-stat-row span {
  color: #64748b !important;
  font-weight: 600 !important;
}

.quick-stat-row strong {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.quick-stat-row .text-green { color: #059669 !important; }
.quick-stat-row .text-red { color: #dc2626 !important; }
.quick-stat-row .text-amber { color: #d97706 !important; }

.progress-track {
  margin-top: 14px !important;
  height: 8px !important;
  background: #f1f5f9 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #10b981, #06b6d4) !important;
  border-radius: 999px !important;
  transition: width 0.4s ease !important;
}

.progress-label {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-top: 6px !important;
}

/* 2. Main Table Card & Toolbar */
#pageDirectory .table-card {
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(10, 30, 140, 0.05) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#pageDirectory .table-header {
  padding: 16px 24px !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#pageDirectory .table-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

#pageDirectory .table-header-title h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -0.3px !important;
}

#pageDirectory .table-header-title h3 i {
  color: #0A1E8C !important;
}

#pageDirectory .table-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

body:not(.is-admin) #pageDirectory #addEmailBtn,
body:not(.is-admin) #pageDirectory .btn-add.admin-only {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Toolbar Buttons */
#pageDirectory .btn-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  border: none !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0A1E8C 0%, #2563eb 100%) !important;
  box-shadow: 0 4px 12px rgba(10, 30, 140, 0.18) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

#pageDirectory .btn-copy:hover:not(:disabled) {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(10, 30, 140, 0.28) !important;
}

#pageDirectory #copySelectionBtn {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

#pageDirectory #copySelectionBtn:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
}

#pageDirectory .btn-add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  border: none !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.2s ease !important;
}

#pageDirectory .btn-add:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
}

/* 3. High-Precision Data Table */
.data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.data-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 14px 16px !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  white-space: nowrap !important;
}

.data-table tbody tr.employee-row {
  background: #ffffff !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.data-table tbody tr.employee-row:hover {
  background: rgba(37, 99, 235, 0.035) !important;
}

.data-table tbody td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  font-size: 0.86rem !important;
}

/* Unit Badge */
.unit-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

/* Employee Name & Phone */
.employee-name-cell strong {
  display: block !important;
  font-size: 0.90rem !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

.employee-phone-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  margin-top: 3px !important;
}

.employee-phone-line i {
  font-size: 0.78rem !important;
}

/* Email Cell & Copy Icon */
.email-cell-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.email-cell-content span {
  font-weight: 700 !important;
  color: #0A1E8C !important;
  font-size: 0.86rem !important;
}

.single-copy-btn,
.mobile-single-copy-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.single-copy-btn:hover,
.mobile-single-copy-btn:hover {
  background: #0A1E8C !important;
  color: #ffffff !important;
  border-color: #0A1E8C !important;
  transform: scale(1.08) !important;
}

/* Status Capsules */
.status-active,
.status-blocked,
.status-deactivated,
.status-pending {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.2px !important;
}

.status-active {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.status-blocked {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.status-dot-inline {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: inline-block !important;
}

/* Table Row Action Buttons */
.action-btns {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-action {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.18s ease !important;
}

.btn-action.btn-edit {
  background: #f0f7ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.btn-action.btn-edit:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.btn-action.btn-delete {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border: 1px solid #fecaca !important;
}

.btn-action.btn-delete:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Pagination Bar */
.pagination-container {
  padding: 16px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
}

.pagination-container:empty,
#paginationContainer:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dark Mode Support for Directory */
html.dark-mode #pageDirectory .dir-sidebar .panel-card,
html.dark-mode #pageDirectory .table-card {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark-mode #pageDirectory .filter-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .filter-text span {
  color: #f1f5f9 !important;
}

html.dark-mode .quick-stat-row strong {
  color: #f1f5f9 !important;
}

html.dark-mode #pageDirectory .table-header {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark-mode #pageDirectory .table-header h3 {
  color: #f1f5f9 !important;
}

html.dark-mode .data-table thead th {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark-mode .data-table tbody tr.employee-row {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark-mode .data-table tbody tr.employee-row:hover {
  background: #1e293b !important;
}

html.dark-mode .employee-name-cell strong {
  color: #f1f5f9 !important;
}

html.dark-mode .email-cell-content span {
  color: #38bdf8 !important;
}

html.dark-mode .single-copy-btn,
html.dark-mode .mobile-single-copy-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark-mode .pagination-container {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* ============================================================
   MOBILE SPOTLIGHT SEARCH — HIDDEN ON DESKTOP BY DEFAULT
   ============================================================ */
@media (min-width: 901px) {
  .mobile-spotlight-modal,
  #mobileSpotlightSearch {
    display: none !important;
  }
}

/* ============================================================
   BLOC-NOTES & BROUILLON PERSONNEL (OFFLINE LOCAL SCRATCHPAD)
   ============================================================ */

/* 1. Page Banner */
.notes-page-banner {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #1e3a8a 100%) !important;
}

/* 2. Quick Scratchpad Card */
.notes-scratchpad-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff;
  padding: 26px 28px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.notes-scratchpad-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0284c7, #0ea5e9, #38bdf8);
}

.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.scratchpad-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.scratchpad-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(2, 132, 199, 0.10);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.scratchpad-title-wrap h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  letter-spacing: -0.3px;
}

.scratchpad-title-wrap p {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
}

.scratchpad-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 0.25s ease;
}

.scratchpad-save-badge.synced {
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}

.scratchpad-save-badge.saving {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.30);
  animation: pulseBadge 1.2s infinite;
}

@keyframes pulseBadge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.scratchpad-body {
  margin-bottom: 16px;
}

#scratchpadTextarea {
  width: 100%;
  min-height: 180px;
  max-height: 480px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
  font-family: 'Poppins', 'Tajawal', sans-serif;
  font-size: 0.96rem;
  line-height: 1.75;
  resize: vertical;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

#scratchpadTextarea:focus {
  outline: none;
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.scratchpad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.scratchpad-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
}

.scratchpad-sep {
  opacity: 0.4;
}

.scratchpad-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-notes-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-notes-subtle:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-notes-subtle.danger {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fee2e2;
}

.btn-notes-subtle.danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* 3. Saved Notes Header & Toolbar */
.saved-notes-header-bar {
  margin-bottom: 22px;
}

.saved-notes-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.saved-notes-title-group h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.saved-notes-title-group h3 i {
  color: #0284c7;
}

.notes-total-counter {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}

.saved-notes-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.notes-search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

.notes-search-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9rem;
}

.notes-search-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 40px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.88rem;
  color: #1e293b;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.notes-search-wrap input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.notes-color-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.color-pill-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.color-pill-btn span {
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
}

.color-pill-btn[data-color="all"] {
  width: auto;
  border-radius: 8px;
  padding: 2px 8px;
}

.color-pill-btn[data-color="all"].active span {
  color: #0284c7;
}

.color-pill-btn.color-blue { background: #2563eb; }
.color-pill-btn.color-emerald { background: #059669; }
.color-pill-btn.color-amber { background: #d97706; }
.color-pill-btn.color-rose { background: #e11d48; }
.color-pill-btn.color-purple { background: #7c3aed; }

.color-pill-btn.active {
  border-color: #0f172a;
  transform: scale(1.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-notes-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.btn-notes-primary:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.45);
}

.notes-export-import-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-notes-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-notes-outline:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

/* 4. Notes Cards Grid */
.notes-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 10px;
}

.note-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04), inset 0 1px 0 #ffffff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(203, 213, 225, 0.95);
}

.note-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
}

.note-card.note-color-blue::before { background: #2563eb; }
.note-card.note-color-emerald::before { background: #059669; }
.note-card.note-color-amber::before { background: #d97706; }
.note-card.note-color-rose::before { background: #e11d48; }
.note-card.note-color-purple::before { background: #7c3aed; }

.note-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.note-card-title-group {
  flex: 1;
  min-width: 0;
}

.note-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  word-break: break-word;
  line-height: 1.35;
}

.note-card-date {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}

.note-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

.note-card-body {
  flex: 1;
  font-size: 0.90rem;
  line-height: 1.65;
  color: #475569;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  margin-bottom: 16px;
  min-height: 60px;
}

.note-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  margin-top: auto;
}

.note-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.note-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.note-action-btn:hover {
  background: #f1f5f9;
  color: #0284c7;
  border-color: #cbd5e1;
}

.note-action-btn.pinned {
  color: #d97706;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.note-action-btn.danger:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* 5. Notes Empty State */
.notes-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border-radius: 24px;
  border: 2px dashed #e2e8f0;
}

.notes-empty-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
}

.notes-empty-state h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.notes-empty-state p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0 0 20px 0;
}

/* 6. Note Edit Modal */
.note-modal-box {
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: 600px !important;
  border-radius: 28px !important;
  padding: 34px !important;
  background: #ffffff !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28) !important;
}

.note-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.note-modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.note-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(2, 132, 199, 0.10);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.note-modal-header h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.note-modal-header p {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.note-form-group {
  margin-bottom: 18px;
}

.note-form-group label {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.note-form-group input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0f172a;
  box-sizing: border-box;
}

.note-form-group input[type="text"]:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.note-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

.note-color-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.color-radio-label {
  cursor: pointer;
  position: relative;
}

.color-radio-label input {
  display: none;
}

.color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: all 0.2s ease;
}

.color-radio-label.color-blue .color-swatch { background: #2563eb; }
.color-radio-label.color-emerald .color-swatch { background: #059669; }
.color-radio-label.color-amber .color-swatch { background: #d97706; }
.color-radio-label.color-rose .color-swatch { background: #e11d48; }
.color-radio-label.color-purple .color-swatch { background: #7c3aed; }

.color-radio-label input:checked + .color-swatch {
  border-color: #0f172a;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.note-pin-checkbox-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.note-pin-checkbox-label input {
  display: none;
}

.pin-custom-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.note-pin-checkbox-label input:checked + .pin-custom-box {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.35);
}

.note-content-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.note-formatting-mini-tools {
  display: flex;
  gap: 6px;
}

.note-formatting-mini-tools button {
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.note-formatting-mini-tools button:hover {
  background: #e2e8f0;
  color: #0f172a;
}

#noteEditContent {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.94rem;
  font-family: inherit;
  line-height: 1.7;
  color: #1e293b;
  box-sizing: border-box;
  resize: vertical;
  min-height: 160px;
}

#noteEditContent:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.note-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-notes-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.btn-notes-submit:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(2, 132, 199, 0.45);
}

/* Dark mode for Bloc-notes */
html.dark-mode .notes-scratchpad-card,
html.dark-mode .note-card,
html.dark-mode .notes-color-filter-pills,
html.dark-mode .notes-empty-state,
html.dark-mode .note-modal-box {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .scratchpad-title-wrap h3,
html.dark-mode .saved-notes-title-group h3,
html.dark-mode .note-card-title,
html.dark-mode .note-modal-header h3 {
  color: #f8fafc !important;
}

html.dark-mode #scratchpadTextarea,
html.dark-mode .notes-search-wrap input,
html.dark-mode .note-form-group input[type="text"],
html.dark-mode #noteEditContent {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .note-card-body {
  color: #cbd5e1 !important;
}

html.dark-mode .btn-notes-subtle,
html.dark-mode .btn-notes-outline,
html.dark-mode .note-action-btn,
html.dark-mode .pin-custom-box {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .btn-notes-subtle:hover,
html.dark-mode .btn-notes-outline:hover,
html.dark-mode .note-action-btn:hover {
  background: #1e293b !important;
  color: #f8fafc !important;
}

@media (max-width: 768px) {
  .notes-scratchpad-card {
    padding: 18px 16px;
  }
  .scratchpad-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .scratchpad-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .scratchpad-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .saved-notes-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .notes-color-filter-pills {
    justify-content: center;
  }
  .note-form-row {
    grid-template-columns: 1fr;
  }
  .note-modal-box {
    padding: 24px 18px !important;
  }
}

/* ==========================================================================
   MY POINTAGE EVOLUTION (V7.1 — 7-DAY WEEK VIEW & 24H MONTHLY REQUESTS)
   ========================================================================== */

/* Profile Action Buttons: Week Toggle & Month Request */
.pointage-action-btn.btn-week-toggle {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border-color: #0284c7;
}

.pointage-action-btn.btn-week-toggle:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.pointage-action-btn.btn-week-toggle.active {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}

.pointage-action-btn.btn-week-toggle.active:hover {
  background: linear-gradient(135deg, #115e59 0%, #0f766e 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.35);
}

.pointage-action-btn.btn-week-toggle i {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.pointage-action-btn.btn-week-toggle.active:hover i {
  transform: translateX(-3px);
}


/* Monthly Access Banner */
.pointage-month-status-banner {
  margin-bottom: 22px;
  border-radius: 18px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: slideInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.pointage-month-status-banner.banner-pending {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fde68a;
  color: #92400e;
}

.pointage-month-status-banner.banner-approved {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1.5px solid #a7f3d0;
  color: #065f46;
}

.pointage-month-status-banner.banner-expired {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
  color: #475569;
}

.pointage-month-status-banner.banner-rejected {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fecaca;
  color: #991b1b;
}

.pointage-banner-content-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.pointage-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.banner-pending .pointage-banner-icon {
  background: #fef08a;
  color: #b45309;
}

.banner-approved .pointage-banner-icon {
  background: #a7f3d0;
  color: #047857;
}

.banner-expired .pointage-banner-icon {
  background: #e2e8f0;
  color: #64748b;
}

.banner-rejected .pointage-banner-icon {
  background: #fecaca;
  color: #dc2626;
}

.pointage-banner-text {
  min-width: 0;
}

.pointage-banner-text strong {
  display: block;
  font-size: 0.96rem;
  margin-bottom: 2px;
  line-height: 1.3;
}

.pointage-banner-text span {
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.3;
}

/* Actions Group */
.pointage-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pointage-countdown-pill {
  background: #064e3b;
  color: #34d399;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(6, 78, 59, 0.25);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-sizing: border-box;
}

.btn-pointage-consult {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  height: 38px;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: none !important;
  font-size: 0.84rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.32) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.btn-pointage-consult:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(5, 150, 105, 0.42) !important;
  color: #ffffff !important;
}

.btn-pointage-consult:active {
  transform: translateY(0) !important;
}

/* 7-Day Week View Unified Horizon Strip */
.pointage-week-cards-grid {
  margin-bottom: 24px;
  animation: fadeIn 0.3s ease;
}

.pointage-week-header-bar {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 14px 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.week-bar-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.week-title-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  flex-shrink: 0;
}

.week-title-heading {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.week-bar-badge {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
}

/* Right-aligned Stats & Actions */
.week-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Summary stats chips */
.week-summary-stats-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.week-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.week-stat-chip.chip-present {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.week-stat-chip.chip-weekend {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.week-stat-chip.chip-absent {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.week-stat-chip.week-refresh-chip {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0284c7;
  cursor: pointer;
  transition: all 0.2s ease;
}

.week-stat-chip.week-refresh-chip:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.btn-close-week-view {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-close-week-view:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateX(-2px);
}

/* 30-Second Security Countdown Widget */
.week-security-countdown-box {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 255, 0.96) 100%);
  border: 1.5px solid #bae6fd;
  border-radius: 24px;
  padding: 38px 24px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(2, 132, 199, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px 0 16px 0;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  animation: pointageFadeIn 0.35s ease-out;
}

.week-countdown-dial-wrap {
  position: relative;
  width: 106px;
  height: 106px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-countdown-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.week-countdown-circle-bg {
  fill: none;
  stroke: #e0f2fe;
  stroke-width: 7;
}

.week-countdown-circle-progress {
  fill: none;
  stroke: #0284c7;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.08s linear;
}

.week-countdown-inner-number {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  color: #0369a1;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.week-countdown-inner-number span:last-child {
  font-size: 1.05rem;
  font-weight: 700;
  margin-left: 2px;
  color: #0284c7;
}

.week-countdown-title {
  font-size: 1.2rem;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.week-countdown-title i {
  color: #0284c7;
}

.week-countdown-desc {
  font-size: 0.9rem;
  color: #475569;
  max-width: 620px;
  margin: 0 0 18px 0;
  line-height: 1.6;
  font-weight: 500;
}

.week-countdown-progress-bar-wrap {
  width: 100%;
  max-width: 480px;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.week-countdown-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  width: 0%;
  transition: width 1s linear;
  border-radius: 999px;
}

.week-countdown-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.week-countdown-shield-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

.week-countdown-server-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

html.dark-mode .week-security-countdown-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

html.dark-mode .week-countdown-title {
  color: #f8fafc;
}

html.dark-mode .week-countdown-desc {
  color: #94a3b8;
}

html.dark-mode .week-countdown-progress-bar-wrap {
  background: #334155;
}

html.dark-mode .week-countdown-circle-bg {
  stroke: #334155;
}

html.dark-mode .week-countdown-inner-number {
  color: #38bdf8;
}

/* 10-Second Main Pointage Countdown Widget */
.pointage-main-countdown-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.98) 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 26px;
  padding: 44px 28px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(5, 150, 105, 0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  max-width: 680px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  animation: pointageFadeIn 0.35s ease-out;
}

.main-countdown-dial-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-countdown-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.main-countdown-circle-bg {
  fill: none;
  stroke: #d1fae5;
  stroke-width: 7;
}

.main-countdown-circle-progress {
  fill: none;
  stroke: #059669;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.08s linear;
}

.main-countdown-inner-number {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  color: #065f46;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.main-countdown-inner-number span:last-child {
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: 2px;
  color: #059669;
}

.main-countdown-title {
  font-size: 1.25rem;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-countdown-title i {
  color: #059669;
}

.main-countdown-desc {
  font-size: 0.92rem;
  color: #475569;
  max-width: 580px;
  margin: 0 0 20px 0;
  line-height: 1.6;
  font-weight: 500;
}

.main-countdown-progress-bar-wrap {
  width: 100%;
  max-width: 480px;
  height: 9px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}

.main-countdown-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
  width: 0%;
  transition: width 1s linear;
  border-radius: 999px;
}

.main-countdown-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.main-countdown-shield-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

.main-countdown-matricule-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

.main-countdown-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

html.dark-mode .pointage-main-countdown-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(6, 78, 59, 0.3) 100%);
  border-color: rgba(52, 211, 153, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

html.dark-mode .main-countdown-title {
  color: #f8fafc;
}

html.dark-mode .main-countdown-desc {
  color: #94a3b8;
}

html.dark-mode .main-countdown-circle-bg {
  stroke: #064e3b;
}

html.dark-mode .main-countdown-progress-bar-wrap {
  background: #064e3b;
}

/* 10-Day Horizon Grid: 4 + 4 + 2 Layout (Last row: 2 wide cards across full width) */
.pointage-week-horizon-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

/* Last 2 cards (Hier & Aujourd'hui) span 2 columns each to fill the entire 3rd row */
.pointage-week-horizon-strip > .week-horizon-col:nth-last-child(-n+2),
.pointage-week-horizon-strip > .week-horizon-col.is-span-half {
  grid-column: span 2;
  padding: 12px 18px;
  gap: 16px;
}

.pointage-week-horizon-strip > .week-horizon-col:nth-last-child(-n+2) .h-card-date-box,
.pointage-week-horizon-strip > .week-horizon-col.is-span-half .h-card-date-box {
  flex: 0 0 58px;
  height: 68px;
}

.pointage-week-horizon-strip > .week-horizon-col:nth-last-child(-n+2) .h-times-stream,
.pointage-week-horizon-strip > .week-horizon-col.is-span-half .h-times-stream {
  font-size: 0.90rem;
  gap: 12px;
}

/* ============================================================
   TECH ACCENT HIGH-CONTRAST 10-DAY CARDS (VIBRANT & PROFESSIONAL)
   ============================================================ */

/* Base Horizontal Card */
.week-horizon-col {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-top: 3.5px solid #94a3b8;
  border-radius: 16px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.week-horizon-col:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* 1. Left Date Box — Full Vivid Gradient Tile */
.h-card-date-box {
  flex: 0 0 52px;
  height: 64px;
  background: linear-gradient(145deg, #475569 0%, #64748b 100%);
  border: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3px;
  box-shadow: 0 4px 10px rgba(71, 85, 105, 0.22);
  transition: all 0.22s ease;
}

.h-date-day {
  font-size: 0.65rem;
  font-weight: 850;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.h-date-num {
  font-size: 1.30rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  font-family: 'Poppins', sans-serif;
  margin: 1px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.h-date-month {
  font-size: 0.60rem;
  font-weight: 750;
  color: #cbd5e1;
  text-transform: lowercase;
  line-height: 1;
}

/* 2. Right Content */
.h-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}

/* Top Row: Status */
.h-card-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.h-status-tag {
  font-size: 0.68rem;
  font-weight: 850;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.h-status-tag.tag-present {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.12);
}

.h-status-tag.tag-today {
  background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
  border: 1px solid #3b82f6;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.32);
}

.h-status-tag.tag-yesterday {
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  color: #0369a1;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.12);
}

.h-status-tag.tag-weekend {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.h-status-tag.tag-inprogress {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #b45309;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.20);
}

.h-status-tag.tag-absent {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.14);
}

/* Bottom Row: Times */
.h-card-times-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* High-Contrast Time Badges Stream */
.h-times-stream {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', monospace;
  font-size: 0.82rem;
  font-weight: 850;
}

.h-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.h-time.in {
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  color: #065f46;
}
.h-time.in i {
  color: #059669;
  font-size: 0.72rem;
}

.h-time.out {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1e40af;
}
.h-time.out i {
  color: #2563eb;
  font-size: 0.72rem;
}

.h-time.out.muted {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
}
.h-time.out.muted i {
  color: #cbd5e1;
}

.h-time-arrow {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 900;
  margin: 0 2px;
}

.h-weekend-note {
  font-size: 0.72rem;
  font-weight: 800;
  color: #92400e;
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 8px;
  padding: 3.5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

.h-weekend-note i {
  color: #d97706;
}

.h-absent-note {
  font-size: 0.72rem;
  font-weight: 800;
  color: #991b1b;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  padding: 3.5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.08);
}

.h-absent-note i {
  color: #e11d48;
}

/* ============================================================
   CARD DIFFERENTIATION STATES (VIBRANT TECH ACCENTS)
   ============================================================ */

/* 1. TODAY (Aujourd'hui) — Electric Royal Blue Tech Accent */
.week-horizon-col.is-today {
  border-color: #bfdbfe;
  border-top: 3.5px solid #2563eb;
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14), 0 1px 3px rgba(37, 99, 235, 0.08);
}

.week-horizon-col.is-today:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22);
}

.week-horizon-col.is-today .h-card-date-box {
  background: linear-gradient(145deg, #1d4ed8 0%, #0284c7 100%);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.38);
}

.week-horizon-col.is-today .h-date-day { color: #bfdbfe; }
.week-horizon-col.is-today .h-date-num { color: #ffffff; }
.week-horizon-col.is-today .h-date-month { color: #dbeafe; }

/* 2. YESTERDAY (Hier) — Cyan / Sky Blue Accent */
.week-horizon-col.is-yesterday:not(.is-today) {
  border-color: #bae6fd;
  border-top: 3.5px solid #0284c7;
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}

.week-horizon-col.is-yesterday:not(.is-today):hover {
  border-color: #7dd3fc;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.16);
}

.week-horizon-col.is-yesterday:not(.is-today) .h-card-date-box {
  background: linear-gradient(145deg, #0284c7 0%, #38bdf8 100%);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32);
}

.week-horizon-col.is-yesterday:not(.is-today) .h-date-day { color: #e0f2fe; }
.week-horizon-col.is-yesterday:not(.is-today) .h-date-num { color: #ffffff; }
.week-horizon-col.is-yesterday:not(.is-today) .h-date-month { color: #f0f9ff; }

/* 3. WORKDAY PRESENT (Présent) — Vivid Emerald Green */
.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) {
  border-color: #bbf7d0;
  border-top: 3.5px solid #059669;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.07);
}

.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend):hover {
  border-color: #86efac;
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.15);
}

.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) .h-card-date-box {
  background: linear-gradient(145deg, #047857 0%, #10b981 100%);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.30);
}

.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) .h-date-day { color: #a7f3d0; }
.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) .h-date-num { color: #ffffff; }
.week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) .h-date-month { color: #d1fae5; }

/* 4. WEEK-END / REPOS — Warm Sunset Bronze & Slate */
.week-horizon-col.is-weekend:not(.is-today) {
  border-color: #cbd5e1;
  border-top: 3.5px solid #64748b;
  border-style: solid;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.02);
}

.week-horizon-col.is-weekend:not(.is-today):hover {
  border-color: #94a3b8;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.week-horizon-col.is-weekend:not(.is-today) .h-card-date-box {
  background: linear-gradient(145deg, #475569 0%, #64748b 100%);
  box-shadow: 0 4px 10px rgba(71, 85, 105, 0.22);
}

.week-horizon-col.is-weekend:not(.is-today) .h-date-day { color: #cbd5e1; }
.week-horizon-col.is-weekend:not(.is-today) .h-date-num { color: #ffffff; }
.week-horizon-col.is-weekend:not(.is-today) .h-date-month { color: #e2e8f0; }

/* 5. ABSENT / NON POINTÉ — Rose Coral */
.week-horizon-col.is-absent:not(.is-today):not(.is-weekend) {
  border-color: #fecdd3;
  border-top: 3.5px solid #e11d48;
  background: linear-gradient(145deg, #ffffff 0%, #fff1f2 100%);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.07);
}

.week-horizon-col.is-absent:not(.is-today):not(.is-weekend):hover {
  border-color: #fda4af;
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.15);
}

.week-horizon-col.is-absent:not(.is-today):not(.is-weekend) .h-card-date-box {
  background: linear-gradient(145deg, #be123c 0%, #f43f5e 100%);
  box-shadow: 0 4px 12px rgba(190, 18, 60, 0.28);
}

.week-horizon-col.is-absent:not(.is-today):not(.is-weekend) .h-date-day { color: #fecdd3; }
.week-horizon-col.is-absent:not(.is-today):not(.is-weekend) .h-date-num { color: #ffffff; }
.week-horizon-col.is-absent:not(.is-today):not(.is-weekend) .h-date-month { color: #ffe4e6; }

/* Unlocked Month Modal Table */
.pointage-unlocked-table-wrap {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.pointage-unlocked-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

.pointage-unlocked-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 2px solid #e2e8f0;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.pointage-unlocked-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.pointage-unlocked-table tr:hover td {
  background: #f8fafc;
}

.pointage-unlocked-table tr.is-weekend-row td {
  background: #fafafa;
  color: #94a3b8;
}

/* Bouton d'impression interactif moderne (Relevé Mensuel) */
.pointage-btn-print {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 7px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  text-decoration: none !important;
}

.pointage-btn-print i {
  color: #2563eb !important;
  font-size: 0.88rem !important;
  transition: transform 0.22s ease, color 0.22s ease !important;
}

.pointage-btn-print:hover {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.pointage-btn-print:hover i {
  color: #ffffff !important;
  transform: scale(1.18) rotate(-5deg) !important;
}

.pointage-btn-print:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
}

/* ============================================================
   WEEKLY POINTAGE INTELLIGENCE SUITE: KPIS, RADAR & TABLE
   ============================================================ */

/* 1. Slim Stats Ribbon (Ultra Compact & Sleek) */
.pointage-week-kpis-grid {
  height: 100%;
}

.pointage-week-kpis-ribbon {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  height: 100%;
  align-items: center;
}

.kpi-ribbon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  min-width: 0;
}

.kpi-ribbon-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #f1f5f9;
}

.kpi-ribbon-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
}

.item-emerald .kpi-ribbon-icon {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.25);
}

.item-blue .kpi-ribbon-icon {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
}

.item-purple .kpi-ribbon-icon {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.25);
}

.item-amber .kpi-ribbon-icon {
  background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.25);
}

.kpi-ribbon-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-ribbon-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.kpi-ribbon-val-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.kpi-ribbon-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  font-family: 'Poppins', 'Tajawal', sans-serif;
  white-space: nowrap;
}

.kpi-ribbon-val small {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.kpi-ribbon-sub-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.kpi-ribbon-sub-pill.pill-emerald {
  background: #ecfdf5;
  color: #065f46;
}

.kpi-ribbon-sub-pill.pill-blue {
  background: #eff6ff;
  color: #1e40af;
}

.kpi-ribbon-sub-pill.pill-amber {
  background: #fffbeb;
  color: #92400e;
}

/* 2. Top Intelligence Row: Slim Ribbon + Compact Biometric Radar */
.pointage-week-top-intelligence-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}

.pointage-week-top-intelligence-row:empty {
  display: none !important;
}

.pointage-week-strip-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

.pointage-week-radar-widget {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.94) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.28);
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.06);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.pointage-week-radar-widget:empty {
  display: none !important;
}

.radar-compact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 1. Left Gauge Cell */
.radar-gauge-cell {
  flex: 0 0 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.radar-circular-gauge-compact {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-svg-compact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.radar-gauge-cell .radar-track {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 5.5;
}

.radar-gauge-cell .radar-progress {
  fill: none;
  stroke: #059669;
  stroke-width: 5.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.radar-center-compact {
  z-index: 2;
  text-align: center;
}

.radar-score-num-compact {
  font-size: 0.90rem;
  font-weight: 900;
  color: #065f46;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

/* 2. Vertical Divider */
.radar-card-divider {
  width: 1px;
  height: 36px;
  background: rgba(226, 232, 240, 0.9);
  flex-shrink: 0;
}

/* 3. Right Content Cell */
.radar-content-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  box-sizing: border-box;
}

/* Header Row */
.radar-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.radar-title-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 0;
}

.radar-icon-wrap {
  color: #059669;
  font-size: 0.80rem;
  display: inline-flex;
  flex-shrink: 0;
}

.radar-title-text {
  font-size: 0.76rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.radar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.60rem;
  font-weight: 850;
  white-space: nowrap;
  border: 1px solid #bbf7d0;
  flex-shrink: 0;
}

.radar-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #16a34a;
  animation: heroPulseGlow 1.5s infinite;
}

/* Metrics Row */
.radar-row-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  min-width: 0;
}

.radar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 7px;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}

.radar-chip i {
  font-size: 0.65rem;
  flex-shrink: 0;
}

.radar-chip span {
  white-space: nowrap;
}

.radar-chip.chip-zk {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.radar-chip.chip-detect {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

@media (max-width: 1200px) {
  .pointage-week-top-intelligence-row {
    grid-template-columns: 1fr;
  }
  .pointage-week-horizon-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .pointage-week-horizon-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pointage-week-horizon-strip > .week-horizon-col:nth-last-child(-n+2),
  .pointage-week-horizon-strip > .week-horizon-col.is-span-half {
    grid-column: span 1;
    padding: 10px 12px;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .pointage-week-top-intelligence-row {
    grid-template-columns: 1fr;
  }
  .pointage-week-kpis-ribbon {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
    height: auto;
    padding: 12px 14px;
  }
  .kpi-ribbon-item:not(:last-child)::after {
    display: none;
  }
  .pointage-week-horizon-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pointage-week-horizon-strip > .week-horizon-col:nth-last-child(-n+2),
  .pointage-week-horizon-strip > .week-horizon-col.is-span-half {
    grid-column: span 1;
  }
}

/* ============================================================
   ADMIN POINTAGE REQUESTS - EXECUTIVE CARD DESIGN SYSTEM
   ============================================================ */
.pointage-req-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.pointage-filter-btn {
  background: #f8fafc;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.pointage-filter-btn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.pointage-filter-btn.active {
  background: #064e3b;
  color: #ffffff;
  border-color: #064e3b;
  box-shadow: 0 2px 8px rgba(6, 78, 59, 0.22);
}

.pointage-filter-btn .p-filter-count {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 0.70rem;
}

.pointage-filter-btn.active .p-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.pointage-filter-btn .count-pending {
  background: #fef3c7;
  color: #92400e;
}

.pointage-filter-btn.active .count-pending {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.pointage-filter-btn .count-active {
  background: #ecfdf5;
  color: #059669;
}

.pointage-filter-btn.active .count-active {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.pointage-filter-btn.btn-pointage-refresh {
  margin-left: auto;
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pointage-filter-btn.btn-pointage-refresh:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #14532d;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.15);
}

.pointage-filter-btn.btn-pointage-refresh:active {
  transform: scale(0.96);
}

.pointage-filter-btn.btn-pointage-refresh.is-refreshing {
  pointer-events: none;
  opacity: 0.85;
}

.pointage-filter-btn.btn-pointage-refresh.is-refreshing i {
  animation: pReqSpin 0.75s linear infinite;
}

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

/* Scrollable Cards Container */
.pointage-req-cards-container {
  padding-right: 4px;
  transition: opacity 0.15s ease;
}

.pointage-req-cards-container::-webkit-scrollbar {
  width: 6px;
}

.pointage-req-cards-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* ============================================================
   POINTAGE CYCLE TYPE SELECTOR (Labo Nedjma 24->23 vs Mois Civil)
   ============================================================ */
.pointage-cycle-selector-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.cycle-tab-card {
  position: relative !important;
  display: block !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.cycle-tab-card input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cycle-tab-card:hover {
  border-color: #059669 !important;
  background: #f0fdf4 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08) !important;
}

.cycle-tab-card.active {
  border-color: #059669 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.14) !important;
}

.cycle-tab-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.cycle-tab-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

.cycle-tab-card.active .cycle-tab-icon {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3) !important;
}

.cycle-tab-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.cycle-tab-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  margin-bottom: 3px !important;
}

.cycle-tab-card.active .cycle-tab-title {
  color: #065f46 !important;
}

.cycle-badge-official {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  background: #059669 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.cycle-badge-standard {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.cycle-badge-secondary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.cycle-tab-desc {
  font-size: 0.74rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.cycle-tab-card.active .cycle-tab-desc {
  color: #047857 !important;
}

.cycle-info-alert {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  font-size: 0.76rem !important;
  color: #166534 !important;
  margin-top: 8px !important;
}

@media (max-width: 580px) {
  .pointage-cycle-selector-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   POINTAGE MONTH REQUEST MODAL - WIDE LANDSCAPE REDESIGN
   ============================================================ */
.pointage-req-modal-wide {
  max-width: 860px !important;
  width: 95% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35) !important;
  background: #ffffff !important;
}

.pointage-req-header {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%) !important;
  padding: 20px 26px !important;
  color: white !important;
  position: relative !important;
}

.pointage-req-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding-right: 36px !important;
}

.pointage-req-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.pointage-req-icon-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.pointage-req-title {
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: white !important;
  line-height: 1.2 !important;
}

.pointage-req-subtitle {
  margin: 3px 0 0 0 !important;
  font-size: 0.8rem !important;
  opacity: 0.9 !important;
  font-weight: 450 !important;
}

.req-modal-emp-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
}

.req-modal-emp-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.req-modal-emp-info {
  display: flex !important;
  flex-direction: column !important;
}

.req-modal-emp-name {
  font-size: 0.88rem !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

.req-modal-emp-meta {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600 !important;
}

.pointage-req-form-body {
  padding: 22px 28px 18px 28px !important;
}

.pointage-req-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.pointage-req-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.pointage-req-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.pointage-req-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  color: #334155 !important;
  margin-bottom: 2px !important;
}

.pointage-cycle-selector-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.pointage-cycle-selector-stack .cycle-tab-card {
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

.pointage-modern-select {
  width: 100% !important;
  padding: 9px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  outline: none !important;
  background: #ffffff !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.pointage-modern-select:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

.pointage-modern-textarea {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  color: #1e293b !important;
  outline: none !important;
  resize: none !important;
  height: 54px !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
}

.pointage-modern-textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

.pointage-req-security-box {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pointage-req-security-box i {
  color: #059669 !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.pointage-req-security-text {
  font-size: 0.76rem !important;
  color: #166534 !important;
  line-height: 1.35 !important;
}

.pointage-req-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.pointage-req-footer-notice {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.pointage-req-footer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (max-width: 820px) {
  .pointage-req-modal-wide {
    max-width: 95% !important;
  }
  .pointage-req-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pointage-req-header-inner {
    padding-right: 0 !important;
  }
  .req-modal-emp-chip {
    width: 100% !important;
  }
  .pointage-req-footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .pointage-req-footer-actions {
    justify-content: flex-end !important;
  }
}

@media (max-width: 540px) {
  .pointage-req-header {
    padding: 16px 18px !important;
  }
  .pointage-req-form-body {
    padding: 16px 18px !important;
  }
}

/* Individual Request Card */
.pointage-req-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
  cursor: pointer !important;
}

.pointage-req-item:hover {
  transform: translateY(-2px) !important;
  border-color: #059669 !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.10) !important;
  background: #fafcfb !important;
}

/* Avatar Box */
.pointage-req-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.pointage-req-avatar.status-pending {
  background: #fef3c7;
  color: #d97706;
  border: 1.5px solid #fde68a;
}

.pointage-req-avatar.status-approved {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
}

.pointage-req-avatar.status-rejected {
  background: #fee2e2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
}

.pointage-req-avatar.status-expired {
  background: #f1f5f9;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
}

/* Main Info Block */
.pointage-req-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pointage-req-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pointage-req-name {
  font-weight: 850;
  color: #0f172a;
  font-size: 0.98rem;
  letter-spacing: -0.2px;
}

.pointage-month-pill {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pointage-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 750;
}

.pointage-status-pill.pill-pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.pointage-status-pill.pill-active {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.pointage-status-pill.pill-rejected {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pointage-status-pill.pill-expired {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.pointage-req-middle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #475569;
}

.pointage-matricule-tag {
  background: #f1f5f9;
  color: #334155;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pointage-motif-tag {
  color: #334155;
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pointage-note-tag {
  color: #64748b;
  font-style: italic;
  font-size: 0.78rem;
}

.pointage-req-bottom-row {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 1px;
}

/* Actions Section */
.pointage-req-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-p-approve {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.80rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.22) !important;
  transition: all 0.2s ease !important;
}

.btn-p-approve:hover {
  background: linear-gradient(135deg, #047857, #059669) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(5, 150, 105, 0.32) !important;
}

.btn-p-reject {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.80rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-p-reject:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #be123c !important;
}

.btn-p-details {
  background: linear-gradient(135deg, #064e3b, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 3px 10px rgba(6, 78, 59, 0.22) !important;
  transition: all 0.2s ease !important;
}

.btn-p-details:hover {
  background: linear-gradient(135deg, #047857, #10b981) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(6, 78, 59, 0.35) !important;
  color: #ffffff !important;
}

.btn-p-delete {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1.5px solid #fecaca !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-p-delete:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.btn-p-delete:active {
  transform: translateY(0) scale(0.95) !important;
}

.btn-clear-history {
  background: #fff1f2;
  color: #e11d48;
  border: 1.5px dashed #fecdd3;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  transition: all 0.2s ease;
}

.btn-clear-history:hover {
  background: #e11d48;
  color: #ffffff;
  border-color: #e11d48;
  box-shadow: 0 3px 10px rgba(225, 29, 72, 0.25);
  transform: translateY(-1px);
}

.btn-clear-history:active {
  transform: translateY(0) scale(0.97);
}

.btn-p-revoke {
  background: #fff7ed !important;
  color: #ea580c !important;
  border: 1.5px solid #fed7aa !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-p-revoke:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.28) !important;
}

.btn-p-revoke:active {
  transform: translateY(0) scale(0.97) !important;
}

.btn-p-quick-approve {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1.5px solid #a7f3d0 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-p-quick-approve:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.28) !important;
}

.btn-p-quick-approve:active {
  transform: translateY(0) scale(0.97) !important;
}

.btn-p-quick-reject {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1.5px solid #fecaca !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-p-quick-reject:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28) !important;
}

.btn-p-quick-reject:active {
  transform: translateY(0) scale(0.97) !important;
}

.req-btn-revoke {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  margin: 0 !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.req-btn-revoke:hover {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.42) !important;
}

.req-btn-revoke:active {
  transform: translateY(0) scale(0.97) !important;
}

.req-detail-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.req-detail-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}

.req-detail-card label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.req-detail-card label i {
  font-size: 0.85rem !important;
}

.req-detail-val {
  color: #0f172a !important;
  word-break: break-word !important;
}

/* Dark Mode Overrides for Pointage Requests */
html.dark-mode .pointage-filter-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark-mode .pointage-filter-btn:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .pointage-filter-btn.active {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

html.dark-mode .pointage-req-item {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .pointage-req-item:hover {
  border-color: #10b981 !important;
  background: #24324a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .pointage-req-name {
  color: #f8fafc !important;
}

html.dark-mode .pointage-matricule-tag {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .pointage-motif-tag {
  color: #e2e8f0 !important;
}

html.dark-mode .btn-p-details {
  background: linear-gradient(135deg, #065f46, #059669) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .btn-p-details:hover {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
}

html.dark-mode .btn-p-delete {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #f87171 !important;
}

html.dark-mode .btn-p-delete:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

html.dark-mode .btn-clear-history {
  background: rgba(225, 29, 72, 0.15);
  border-color: rgba(225, 29, 72, 0.4);
  color: #fb7185;
}

html.dark-mode .btn-clear-history:hover {
  background: #e11d48;
  color: #ffffff;
  border-color: #f43f5e;
}

html.dark-mode .btn-p-revoke {
  background: rgba(234, 88, 12, 0.15) !important;
  border-color: rgba(234, 88, 12, 0.4) !important;
  color: #fb923c !important;
}

html.dark-mode .btn-p-revoke:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
}

html.dark-mode .req-btn-revoke {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
}

html.dark-mode .req-detail-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .req-detail-card:hover {
  border-color: #475569 !important;
}

html.dark-mode .req-detail-card label {
  color: #94a3b8 !important;
}

html.dark-mode .req-detail-val {
  color: #f1f5f9 !important;
}

html.dark-mode .req-status-banner.banner-active {
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.3) 0%, rgba(5, 150, 105, 0.2) 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

html.dark-mode .req-status-banner.banner-pending {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

html.dark-mode .req-status-banner.banner-expired {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .req-status-banner.banner-rejected {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* Dark Mode Overrides for Pointage Evolution */
html.dark-mode .pointage-week-header-bar {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .week-title-heading {
  color: #f8fafc !important;
}

html.dark-mode .btn-close-week-view {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .pointage-unlocked-table-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .pointage-unlocked-table th {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html.dark-mode .pointage-unlocked-table td {
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark-mode .pointage-unlocked-table tr:hover td {
  background: #334155 !important;
}

html.dark-mode .pointage-unlocked-table tr.is-weekend-row td {
  background: #162032 !important;
  color: #64748b !important;
}

html.dark-mode .pointage-btn-print {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .pointage-btn-print i {
  color: #60a5fa !important;
}

html.dark-mode .pointage-btn-print:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
}

html.dark-mode .pointage-btn-print:hover i {
  color: #ffffff !important;
}

html.dark-mode .pointage-week-kpis-ribbon {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .kpi-ribbon-item:not(:last-child)::after {
  background: #334155 !important;
}

html.dark-mode .kpi-ribbon-label {
  color: #94a3b8 !important;
}

html.dark-mode .kpi-ribbon-val {
  color: #f8fafc !important;
}

html.dark-mode .pointage-week-radar-widget {
  background: linear-gradient(155deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: #334155 !important;
}

html.dark-mode .radar-card-divider {
  background: #334155 !important;
}

html.dark-mode .radar-title-text {
  color: #f8fafc !important;
}

html.dark-mode .radar-chip.chip-zk {
  background: rgba(6, 78, 59, 0.35) !important;
  border-color: #059669 !important;
  color: #6ee7b7 !important;
}

html.dark-mode .radar-chip.chip-detect {
  background: rgba(12, 74, 110, 0.35) !important;
  border-color: #0284c7 !important;
  color: #7dd3fc !important;
}

html.dark-mode .week-horizon-col {
  background: #1e293b !important;
  border-color: #334155 !important;
  border-top-color: #64748b !important;
}

html.dark-mode .week-horizon-col.is-today {
  border-color: #1d4ed8 !important;
  border-top-color: #38bdf8 !important;
  background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 100%) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.25) !important;
}

html.dark-mode .week-horizon-col.is-yesterday:not(.is-today) {
  border-color: #0369a1 !important;
  border-top-color: #38bdf8 !important;
  background: linear-gradient(145deg, #0f172a 0%, #0c4a6e 100%) !important;
}

html.dark-mode .week-horizon-col.is-present:not(.is-today):not(.is-yesterday):not(.is-weekend) {
  border-color: #065f46 !important;
  border-top-color: #10b981 !important;
  background: linear-gradient(145deg, #0f172a 0%, #064e3b 100%) !important;
}

html.dark-mode .week-horizon-col.is-weekend:not(.is-today) {
  background: #0f172a !important;
  border-color: #334155 !important;
  border-top-color: #64748b !important;
}

html.dark-mode .week-horizon-col.is-absent:not(.is-today):not(.is-weekend) {
  border-color: #881337 !important;
  border-top-color: #f43f5e !important;
  background: linear-gradient(145deg, #0f172a 0%, #4c0519 100%) !important;
}

html.dark-mode .h-card-date-box {
  border: none !important;
}

html.dark-mode .h-date-num {
  color: #ffffff !important;
}

html.dark-mode .h-time.in {
  background: rgba(5, 150, 105, 0.22) !important;
  border-color: #059669 !important;
  color: #6ee7b7 !important;
}

html.dark-mode .h-time.out {
  background: rgba(37, 99, 235, 0.22) !important;
  border-color: #2563eb !important;
  color: #93c5fd !important;
}

html.dark-mode .h-time.out.muted {
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
}

html.dark-mode .h-weekend-note {
  background: rgba(217, 119, 6, 0.18) !important;
  border-color: #b45309 !important;
  color: #fde68a !important;
}

html.dark-mode .h-absent-note {
  background: rgba(225, 29, 72, 0.18) !important;
  border-color: #be123c !important;
  color: #fda4af !important;
}

html.dark-mode .pointage-month-status-banner.banner-approved {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border-color: #059669 !important;
  color: #ecfdf5 !important;
}

html.dark-mode .pointage-month-status-banner.banner-approved .pointage-banner-icon {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
}

html.dark-mode .pointage-month-status-banner.banner-approved .pointage-banner-text strong {
  color: #f8fafc !important;
}

html.dark-mode .pointage-month-status-banner.banner-approved .pointage-banner-text span {
  color: #a7f3d0 !important;
}

/* ============================================================
   DOCUMENT OFFICIEL D'IMPRESSION A4 / PDF (POINTAGE MENSUEL)
   ============================================================ */
.pointage-print-document {
  display: none; /* Masqué à l'écran, actif uniquement à l'impression */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
  background: #ffffff;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 5mm 8mm 5mm 8mm !important;
  }

  html, body {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: visible !important;
    font-size: 7.5pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Neutraliser strictement tous les fonds, gradients et pseudo-éléments */
  body::before, body::after, html::before, html::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .app-bg-decor, .bg-blob, .dev-banner-glow, .side-accent-glow, .ai-robot-glow,
  .global-email-watermark-bg, .watermark-svg {
    display: none !important;
  }

  /* Masquer l'intégralité absolue de l'application web */
  body > *:not(#pointagePrintDocument) {
    display: none !important;
    visibility: hidden !important;
  }

  #pageContent,
  .page-content,
  .page-section,
  .stats-row,
  .stat-card,
  .hero-section,
  .content-section,
  .main-navbar,
  .navbar-links,
  .global-email-watermark-bg,
  .institutional-banner,
  .mobile-bottom-nav,
  .mobile-bottom-nav *,
  .modal,
  .modal.show,
  .modal-overlay,
  .modal-overlay.show,
  .config-modal-overlay,
  .config-modal-overlay.show,
  header, nav, footer, #app, .app-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
  }

  /* Document A4 officiel de pointage calibré pour couvrir parfaitement la page sans fuite */
  #pointagePrintDocument {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    visibility: visible !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-after: avoid !important;
    break-inside: avoid !important;
  }

  #pointagePrintDocument * {
    visibility: visible !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* 1. En-tête officiel */
  .print-doc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #091740 !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }

  .print-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .print-logo {
    height: 38px !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }

  .print-company-name {
    font-size: 11.5pt !important;
    font-weight: 850 !important;
    margin: 0 0 1px 0 !important;
    color: #091740 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
  }

  .print-company-sub {
    font-size: 7.2pt !important;
    color: #475569 !important;
    margin: 0 0 1px 0 !important;
    font-weight: 600 !important;
  }

  .print-system-tag {
    font-size: 6.5pt !important;
    color: #059669 !important;
    margin: 0 !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
  }

  .print-doc-meta {
    text-align: right !important;
    font-size: 7pt !important;
    color: #334155 !important;
    line-height: 1.3 !important;
  }

  .print-meta-badge {
    display: inline-block !important;
    background: #091740 !important;
    color: #ffffff !important;
    padding: 1.5px 6px !important;
    border-radius: 3px !important;
    font-weight: 800 !important;
    font-size: 6.5pt !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
  }

  .print-meta-line {
    margin-bottom: 1px !important;
  }

  .print-meta-line span {
    color: #64748b !important;
  }

  /* 2. Titre & Période */
  .print-title-section {
    text-align: center !important;
    margin: 3px 0 5px 0 !important;
    padding: 3px 8px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }

  .print-doc-title {
    font-size: 10.5pt !important;
    font-weight: 850 !important;
    margin: 0 0 1px 0 !important;
    color: #091740 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
  }

  .print-doc-period {
    font-size: 7.8pt !important;
    margin: 0 !important;
    color: #475569 !important;
  }

  /* 3. Cartouche Collaborateur & Statistiques */
  .print-info-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 5px !important;
    flex-shrink: 0 !important;
  }

  .print-info-card, .print-stats-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    background: #ffffff !important;
  }

  .print-card-title {
    font-size: 6.5pt !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 1px !important;
  }

  .print-card-name {
    font-size: 9.5pt !important;
    font-weight: 850 !important;
    color: #091740 !important;
    margin-bottom: 2px !important;
  }

  .print-card-detail {
    font-size: 7.5pt !important;
    color: #334155 !important;
    margin-bottom: 1px !important;
    line-height: 1.25 !important;
  }

  .print-card-detail span {
    color: #64748b !important;
    display: inline-block !important;
    width: 110px !important;
  }

  .print-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    margin-top: 3px !important;
    text-align: center !important;
  }

  .print-stat-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 3px 1px !important;
    background: #f8fafc !important;
  }

  .print-stat-item .stat-count {
    display: block !important;
    font-size: 10pt !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  .print-stat-item .stat-lbl {
    display: block !important;
    font-size: 6pt !important;
    color: #64748b !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    margin-top: 1px !important;
  }

  .stat-count.count-present { color: #047857 !important; }
  .stat-count.count-rest { color: #475569 !important; }
  .stat-count.count-absent { color: #b91c1c !important; }
  .stat-count.count-rate { color: #0284c7 !important; }

  /* 4. Tableau Mensuel ZKBioTime */
  .print-attendance-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 4px !important;
    font-size: 7.2pt !important;
    flex-grow: 1 !important;
  }

  .print-attendance-table thead {
    display: table-header-group !important;
  }

  .print-attendance-table th {
    background: #091740 !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    padding: 2.5px 5px !important;
    border: 1px solid #091740 !important;
    text-align: left !important;
    font-size: 6.8pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.1 !important;
  }

  .print-attendance-table td {
    padding: 1.8px 5px !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    vertical-align: middle !important;
    line-height: 1.15 !important;
  }

  .print-attendance-table tr:nth-child(even) td {
    background: #f8fafc !important;
  }

  .print-attendance-table tr.is-weekend-row td {
    background: #f1f5f9 !important;
    color: #64748b !important;
  }

  .print-pill {
    display: inline-block !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    font-size: 6.2pt !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    line-height: 1.1 !important;
  }

  .print-pill-present {
    border: 1px solid #059669 !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
  }

  .print-pill-rest {
    border: 1px solid #94a3b8 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
  }

  .print-pill-absent {
    border: 1px solid #f87171 !important;
    color: #b91c1c !important;
    background: #fef2f2 !important;
  }

  .print-pill-inprogress {
    border: 1px solid #fbbf24 !important;
    color: #b45309 !important;
    background: #fffbeb !important;
  }

  /* 5. Bloc de Signatures & Cachet */
  .print-signatures-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    page-break-inside: avoid !important;
  }

  .print-sig-box {
    border: 1px dashed #94a3b8 !important;
    border-radius: 5px !important;
    padding: 4px 8px !important;
    background: #ffffff !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .sig-title {
    font-size: 6.8pt !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
  }

  .sig-note {
    font-size: 5.8pt !important;
    color: #64748b !important;
    line-height: 1.1 !important;
  }

  .sig-space {
    height: 22px !important;
  }

  .sig-footer {
    font-size: 6.2pt !important;
    color: #475569 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 2px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }

  /* 6. Pied de Page Juridique */
  .print-doc-footer {
    margin-top: 3px !important;
    padding-top: 2px !important;
    border-top: 1px solid #cbd5e1 !important;
    font-size: 5.8pt !important;
    color: #64748b !important;
    text-align: center !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    page-break-inside: avoid !important;
  }
}

/* ==========================================================================
   EXECUTIVE CUSTOM CONFIRMATION & PROMPT DIALOGS (POINTAGE)
   ========================================================================== */

.pointage-custom-dialog-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 250000 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: none !important;
  pointer-events: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  animation: pDialogFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pointage-custom-dialog-overlay.show {
  display: flex !important;
  pointer-events: auto !important;
}

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

@keyframes pDialogCardPop {
  0% { transform: scale(0.92) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.pointage-custom-dialog-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 26px !important;
  max-width: 490px !important;
  width: 100% !important;
  padding: 34px 30px 26px !important;
  text-align: center !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  animation: pDialogCardPop 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: 'Poppins', sans-serif !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.pointage-dialog-icon-wrap {
  width: 68px !important;
  height: 68px !important;
  border-radius: 22px !important;
  margin: 0 auto 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.85rem !important;
  transition: all 0.3s ease !important;
}

/* Themes for icon and button */
.pointage-dialog-icon-wrap.theme-warning {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  color: #ea580c !important;
  border: 2px solid #fed7aa !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.22) !important;
}

.pointage-dialog-icon-wrap.theme-danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  color: #dc2626 !important;
  border: 2px solid #fecaca !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.22) !important;
}

.pointage-dialog-icon-wrap.theme-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  color: #059669 !important;
  border: 2px solid #a7f3d0 !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.22) !important;
}

.pointage-dialog-icon-wrap.theme-info {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #0284c7 !important;
  border: 2px solid #bae6fd !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.22) !important;
}

.pointage-dialog-title {
  font-size: 1.28rem !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
}

.pointage-dialog-subtitle {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-top: -4px !important;
  margin-bottom: 16px !important;
}

.pointage-dialog-message {
  font-size: 0.94rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 0 24px !important;
}

.pointage-dialog-message strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.pointage-prompt-input-group {
  text-align: left !important;
  margin: 16px 0 24px !important;
}

.pointage-prompt-input-group label {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}

.pointage-prompt-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.pointage-prompt-input-wrap i {
  position: absolute !important;
  left: 14px !important;
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  pointer-events: none !important;
}

.pointage-prompt-input-wrap input {
  width: 100% !important;
  padding: 12px 14px 12px 42px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  font-size: 0.92rem !important;
  font-family: 'Poppins', sans-serif !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.pointage-prompt-input-wrap input:focus {
  border-color: #ef4444 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}

.pointage-dialog-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 10px !important;
}

.btn-dialog-cancel {
  flex: 1 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 750 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Poppins', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-dialog-cancel:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.btn-dialog-confirm {
  flex: 1.4 !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Poppins', sans-serif !important;
}

.btn-dialog-confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45) !important;
}

.btn-dialog-confirm.theme-warning {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}

.btn-dialog-confirm.theme-warning:hover {
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.5) !important;
}

.btn-dialog-confirm.theme-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.btn-dialog-confirm.theme-danger:hover {
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5) !important;
}

.btn-dialog-confirm.theme-info {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

/* Dark mode overrides for dialogs */
html.dark-mode .pointage-custom-dialog-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .pointage-dialog-title {
  color: #f8fafc !important;
}

html.dark-mode .pointage-dialog-subtitle {
  color: #94a3b8 !important;
}

html.dark-mode .pointage-dialog-message {
  color: #cbd5e1 !important;
}

html.dark-mode .pointage-dialog-message strong {
  color: #ffffff !important;
}

html.dark-mode .btn-dialog-cancel {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

html.dark-mode .btn-dialog-cancel:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

html.dark-mode .pointage-prompt-input-group label {
  color: #94a3b8 !important;
}

html.dark-mode .pointage-prompt-input-wrap input {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark-mode .pointage-prompt-input-wrap input:focus {
  border-color: #ef4444 !important;
  background: #0f172a !important;
}

/* ============================================================
   MODAL DE DÉTAILS DE LA DEMANDE - PIED DE PAGE & BOUTONS D'ACTION
   ============================================================ */
.req-modal-footer {
  padding: 16px 28px !important;
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

/* Bouton Fermer */
.btn-req-detail-cancel {
  flex: 0 0 auto !important;
  margin-right: auto !important;
  height: 44px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.btn-req-detail-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.btn-req-detail-cancel:active {
  transform: translateY(0) !important;
}

/* Base pour tous les boutons d'action du modal */
.btn-req-detail-action {
  flex: 0 0 auto !important;
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
  letter-spacing: 0.2px !important;
}

.btn-req-detail-action i {
  font-size: 0.98rem !important;
  transition: transform 0.2s ease !important;
}

.btn-req-detail-action:hover i {
  transform: scale(1.1) !important;
}

/* 1. Bouton Supprimer de l'Historique */
.btn-req-detail-delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(220, 38, 38, 0.45) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28) !important;
}

.btn-req-detail-delete:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #b91c1c !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.42) !important;
  transform: translateY(-2px) !important;
}

.btn-req-detail-delete:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}

/* 2. Bouton Verrouiller / Clôturer */
.btn-req-detail-revoke {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(234, 88, 12, 0.45) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.28) !important;
}

.btn-req-detail-revoke:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.42) !important;
  transform: translateY(-2px) !important;
}

.btn-req-detail-revoke:active {
  transform: translateY(0) !important;
}

/* 3. Bouton Valider l'accès 24h */
.btn-req-detail-approve {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(5, 150, 105, 0.45) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.btn-req-detail-approve:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-2px) !important;
}

.btn-req-detail-approve:active {
  transform: translateY(0) !important;
}

/* 4. Bouton Refuser */
.btn-req-detail-reject {
  background: #ffffff !important;
  color: #dc2626 !important;
  border: 1.5px solid #fecaca !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08) !important;
}

.btn-req-detail-reject:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.16) !important;
}

.btn-req-detail-reject:active {
  transform: translateY(0) !important;
}

/* Dark Mode Overrides */
html.dark-mode .req-modal-footer {
  background: #0f172a !important;
  border-top-color: #1e293b !important;
}

html.dark-mode .btn-req-detail-cancel {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

html.dark-mode .btn-req-detail-cancel:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

html.dark-mode .btn-req-detail-reject {
  background: #1e293b !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

html.dark-mode .btn-req-detail-reject:hover {
  background: #7f1d1d !important;
  color: #ffffff !important;
}

/* ==========================================================================
   TUTORIAL / FORMATION STEP IMAGE PREVIEW & PROFESSIONAL LIGHTBOX MODAL
   ========================================================================== */
.step-image-preview-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.step-image-preview-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
}

.step-image-preview-wrapper img {
  display: block;
  transition: filter 0.22s ease, transform 0.25s ease;
}

.step-image-preview-wrapper:hover img {
  filter: brightness(0.96);
}

.step-image-hover-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.step-image-preview-wrapper:hover .step-image-hover-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox Modal Structure */
.image-lightbox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 250000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.image-lightbox-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.image-lightbox-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  max-width: 1100px !important;
  width: 92vw !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  animation: lightboxPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes lightboxPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.image-lightbox-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

.image-lightbox-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden;
}

.image-lightbox-badge {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}

.image-lightbox-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-lightbox-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0;
}

.lightbox-counter-pill {
  background: #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
}

.lightbox-action-btn, .lightbox-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.lightbox-action-btn:hover, .lightbox-close-btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.image-lightbox-stage {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f172a !important;
  min-height: 400px !important;
  max-height: calc(90vh - 140px) !important;
  flex: 1 !important;
  overflow: hidden !important;
  padding: 20px !important;
}

.lightbox-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  transition: all 0.2s ease !important;
}

.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.lightbox-nav-btn.prev-btn { left: 20px !important; }
.lightbox-nav-btn.next-btn { right: 20px !important; }
.lightbox-nav-btn.disabled { opacity: 0.3 !important; pointer-events: none !important; }

.image-lightbox-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: auto !important;
}

.image-lightbox-img {
  max-width: 100% !important;
  max-height: calc(90vh - 180px) !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: zoom-in !important;
}

.image-lightbox-img.zoomed {
  transform: scale(1.6) !important;
  cursor: zoom-out !important;
}

.image-lightbox-caption-bar {
  padding: 14px 24px !important;
  background: #1e293b !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.image-lightbox-caption {
  font-size: 0.9rem !important;
  margin: 0 !important;
  color: #e2e8f0 !important;
}

.lightbox-shortcuts-hint {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  display: flex !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

.lightbox-shortcuts-hint kbd {
  background: #334155 !important;
  color: #f1f5f9 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: monospace !important;
}

/* ============================================================
   MODAL DE DÉTAILS DE LA DEMANDE - FORMAT HORIZONTAL WIDESCREEN
   ============================================================ */
.pointage-details-modal-wide {
  max-width: 1040px !important;
  width: 95% !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pointage-widescreen-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

.pointage-widescreen-grid .req-detail-card {
  min-height: 90px !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

.pointage-widescreen-grid .req-detail-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px) !important;
}

html.dark-mode .pointage-widescreen-grid .req-detail-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .pointage-widescreen-grid .req-detail-card:hover {
  border-color: #475569 !important;
}

@media (max-width: 960px) {
  .pointage-widescreen-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pointage-widescreen-grid {
    grid-template-columns: 1fr !important;
  }
  .btn-req-detail-cancel {
    margin-right: 0 !important;
    width: 100% !important;
  }
  .req-modal-footer {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .btn-req-detail-action {
    width: 100% !important;
  }
}

/* ============================================================
   MODAL RELEVÉ DE POINTAGE MENSUEL - FORMAT HORIZONTAL WIDESCREEN
   ============================================================ */
.pointage-unlocked-modal-wide {
  max-width: 1180px !important;
  width: 96% !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pointage-unlocked-modal-wide .pointage-unlocked-table-wrap {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.pointage-unlocked-modal-wide .pointage-unlocked-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.pointage-unlocked-modal-wide .pointage-unlocked-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 800 !important;
  padding: 13px 18px !important;
  border-bottom: 2px solid #cbd5e1 !important;
  text-transform: uppercase !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.6px !important;
}

.pointage-unlocked-modal-wide .pointage-unlocked-table td {
  padding: 11px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

.pointage-unlocked-modal-wide .pointage-unlocked-table tr:hover td {
  background: #f8fafc !important;
}

html.dark-mode .pointage-unlocked-modal-wide {
  background: #0f172a !important;
}

html.dark-mode .pointage-unlocked-modal-wide .pointage-unlocked-table-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .pointage-unlocked-modal-wide .pointage-unlocked-table th {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .pointage-unlocked-modal-wide .pointage-unlocked-table td {
  border-bottom-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.dark-mode .pointage-unlocked-modal-wide .pointage-unlocked-table tr:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ============================================================
   ULTRA-SMOOTH, FLUID & LOW-END OPTIMIZED MOTION (STAT & MODULE CARDS)
   ============================================================ */

/* --- 1. Pure, Gentle Single-Curve Entrance (No Bounce, No Stutter) --- */
#pageDashboard.active .stats-row .stat-card,
#pageDashboard.active .module-grid .module-card {
  animation: silkyCardFadeUp 0.38s cubic-bezier(0.25, 1, 0.5, 1) both !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
}

@keyframes silkyCardFadeUp {
  0% {
    opacity: 0.85;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Natural, Gentle Stagger Delays */
#pageDashboard.active .stats-row .stat-card:nth-child(1) { animation-delay: 0.02s !important; }
#pageDashboard.active .stats-row .stat-card:nth-child(2) { animation-delay: 0.04s !important; }
#pageDashboard.active .stats-row .stat-card:nth-child(3) { animation-delay: 0.06s !important; }
#pageDashboard.active .stats-row .stat-card:nth-child(4) { animation-delay: 0.08s !important; }
#pageDashboard.active .stats-row .stat-card:nth-child(5) { animation-delay: 0.10s !important; }

#pageDashboard.active .module-grid .module-card:nth-child(1) { animation-delay: 0.08s !important; }
#pageDashboard.active .module-grid .module-card:nth-child(2) { animation-delay: 0.12s !important; }
#pageDashboard.active .module-grid .module-card:nth-child(3) { animation-delay: 0.16s !important; }
#pageDashboard.active .module-grid .module-card:nth-child(4) { animation-delay: 0.20s !important; }

/* --- 2. Silky Soft Hover for Stat Cards (Pure Lift, Crisp Text, Velvety Transition) --- */
.stats-row .stat-card {
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.24s ease,
              border-color 0.22s ease !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
}

.stats-row .stat-card:hover {
  transform: translateY(-4px) !important;
  z-index: 5 !important;
}

.stats-row .stat-card.stat-green:hover {
  border-color: #16a34a !important;
  box-shadow: 0 10px 20px -4px rgba(22, 163, 74, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.stats-row .stat-card.stat-blue:hover {
  border-color: #2563eb !important;
  box-shadow: 0 10px 20px -4px rgba(37, 99, 235, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.stats-row .stat-card.stat-red:hover {
  border-color: #e11d48 !important;
  box-shadow: 0 10px 20px -4px rgba(225, 29, 72, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.stats-row .stat-card.stat-amber:hover {
  border-color: #0891b2 !important;
  box-shadow: 0 10px 20px -4px rgba(8, 145, 178, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.stats-row .stat-card.stat-purple:hover {
  border-color: #7c3aed !important;
  box-shadow: 0 10px 20px -4px rgba(124, 58, 237, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.stats-row .stat-card .stat-card-icon {
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.stats-row .stat-card:hover .stat-card-icon {
  transform: translateY(-2px) scale(1.05) !important;
}

.stats-row .stat-card:active {
  transform: translateY(-1px) !important;
  transition-duration: 0.1s !important;
}

/* --- 3. Silky Soft Hover for Module Cards (Accès Rapide) --- */
.module-grid .module-card {
  transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.26s ease,
              border-color 0.22s ease !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
}

.module-grid .module-card:hover {
  transform: translateY(-5px) !important;
  z-index: 5 !important;
}

.module-grid .module-card.mc-green:hover {
  border-color: #059669 !important;
  box-shadow: 0 16px 30px -6px rgba(5, 150, 105, 0.25), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.module-grid .module-card.mc-blue:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 16px 30px -6px rgba(2, 132, 199, 0.25), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.module-grid .module-card.mc-orange:hover {
  border-color: #ea580c !important;
  box-shadow: 0 16px 30px -6px rgba(234, 88, 12, 0.25), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.module-grid .module-card.mc-purple:hover {
  border-color: #7c3aed !important;
  box-shadow: 0 16px 30px -6px rgba(124, 58, 237, 0.25), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.module-grid .module-card .module-icon-colored {
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.module-grid .module-card:hover .module-icon-colored {
  transform: translateY(-2px) scale(1.04) !important;
}

.module-grid .module-card .module-arrow-colored {
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), background 0.22s ease, color 0.22s ease !important;
}

.module-grid .module-card:hover .module-arrow-colored {
  transform: translateX(4px) !important;
}

.module-grid .module-card .module-illustration {
  transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.26s ease !important;
}

.module-grid .module-card:hover .module-illustration {
  opacity: 0.13 !important;
  transform: translateY(-2px) !important;
}

.module-grid .module-card:active {
  transform: translateY(-1px) !important;
  transition-duration: 0.1s !important;
}

/* ============================================================
   4. ADAPTIVE GUARDS FOR WEAK HARDWARE / LOW-END DEVICES
   (Intel HD Graphics, Celeron/i3, Low RAM <= 4GB, or Battery Saver)
   ============================================================ */

/* On weak devices or when low performance is active: zero GPU shadow cost, swift transition */
html.performance-lite .stats-row .stat-card,
html.performance-lite .module-grid .module-card,
html.motion-lite .stats-row .stat-card,
html.motion-lite .module-grid .module-card,
html.gpu-saver .stats-row .stat-card,
html.gpu-saver .module-grid .module-card {
  transition: transform 0.16s ease-out, border-color 0.16s ease-out !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  animation: pageFadeInSimple 0.18s ease-out both !important;
  animation-delay: 0s !important;
}

html.performance-lite .stats-row .stat-card:hover,
html.motion-lite .stats-row .stat-card:hover,
html.gpu-saver .stats-row .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

html.performance-lite .module-grid .module-card:hover,
html.motion-lite .module-grid .module-card:hover,
html.gpu-saver .module-grid .module-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

/* Disable secondary micro-transforms on low-end hardware */
html.performance-lite .stat-card:hover .stat-card-icon,
html.performance-lite .module-card:hover .module-icon-colored,
html.performance-lite .module-card:hover .module-illustration,
html.motion-lite .stat-card:hover .stat-card-icon,
html.motion-lite .module-card:hover .module-icon-colored,
html.motion-lite .module-card:hover .module-illustration,
html.gpu-saver .stat-card:hover .stat-card-icon,
html.gpu-saver .module-card:hover .module-icon-colored,
html.gpu-saver .module-card:hover .module-illustration {
  transform: none !important;
}

/* Touch Screens: Prevent Sticky Hovers on Mobile */
@media (hover: none) {
  .stats-row .stat-card:hover,
  .module-grid .module-card:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  }
  .stats-row .stat-card:active,
  .module-grid .module-card:active {
    transform: scale(0.985) !important;
    transition-duration: 0.08s !important;
  }
}

/* OS Accessibility & Low-End Hardware Guards: Zero Lag & Instant Fallback */
@media (prefers-reduced-motion: reduce) {
  #pageDashboard.active .stats-row .stat-card,
  #pageDashboard.active .module-grid .module-card,
  .stats-row .stat-card,
  .module-grid .module-card,
  .page-section.active,
  .page-section.active .page-banner {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

html.performance-lite .page-section.active,
html.performance-lite .page-section.active .page-banner,
html.motion-lite .page-section.active,
html.motion-lite .page-section.active .page-banner,
html.gpu-saver .page-section.active,
html.gpu-saver .page-section.active .page-banner {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ============================================================
   POINTAGE DAY DETAILS MODAL (PREMIUM LANDSCAPE DESIGN)
   ============================================================ */

.pointage-day-card {
  cursor: pointer;
}

.pointage-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pointage-btn-details {
  font-size: 0.72rem;
  font-weight: 800;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
}

.pointage-day-card:hover .pointage-btn-details {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
  transform: translateY(-1px);
}

.pointage-detail-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 200000 !important;
  background: rgba(15, 23, 42, 0.68) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease !important;
}

.pointage-detail-modal-overlay:not(.show) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pointage-detail-modal-overlay.show {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.pointage-detail-modal-box {
  max-width: 1040px !important;
  width: 96% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  margin: auto !important;
  position: relative !important;
  z-index: 200001 !important;
  animation: pdetailModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes pdetailModalPop {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Header - Horizontal Sleek */
.pdetail-modal-header {
  padding: 16px 28px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.pdetail-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 36px;
}

.pdetail-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.25);
  flex-shrink: 0;
}

.pdetail-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pdetail-date-title {
  margin: 0 0 2px;
  font-size: 1.18rem;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.pdetail-emp-line {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pdetail-emp-line strong {
  color: #1e293b;
}

.pdetail-badge-matricule {
  background: #e2e8f0;
  color: #334155;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.70rem;
  font-weight: 800;
}

.pdetail-badge-dept {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.70rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pdetail-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pdetail-day-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.pdetail-day-tag.tag-today { background: #0284c7; }
.pdetail-day-tag.tag-yesterday { background: #059669; }
.pdetail-day-tag.tag-weekend { background: #64748b; }
.pdetail-day-tag.tag-ouvre { background: #0284c7; }

/* Modal Body */
.pdetail-modal-body {
  padding: 20px 28px;
  overflow-y: auto;
  max-height: calc(92vh - 140px);
}

/* Landscape 2-Column Grid */
.pdetail-landscape-layout {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 20px;
  align-items: stretch;
}

.pdetail-col-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdetail-col-right {
  display: flex;
  flex-direction: column;
}

/* Hero Cards Grid */
.pdetail-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pdetail-punch-card {
  border-radius: 20px;
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  min-height: 148px;
}

/* Entry Card Vibrant Emerald */
.pdetail-punch-card.in-card {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}

/* Exit Card Vibrant Indigo/Blue */
.pdetail-punch-card.out-card {
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #bfdbfe;
}

.pcard-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.pcard-badge {
  font-size: 0.68rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.03em;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2;
}

.in-badge {
  background: #059669;
  color: #ffffff;
}

.out-badge {
  background: #2563eb;
  color: #ffffff;
}

.pcard-time-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 12px 0 8px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pcard-time-main {
  font-size: 2.35rem;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pcard-time-sec {
  font-size: 1.45rem;
  font-weight: 850;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.in-card .pcard-time-sec { color: #059669; }
.out-card .pcard-time-sec { color: #2563eb; }

.pcard-bottom-method {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.pcard-bottom-method .pcard-verify-badge {
  font-size: 0.70rem;
  font-weight: 750;
  color: #475569;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(203, 213, 225, 0.85);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  white-space: nowrap !important;
}

.pcard-bottom-method .pcard-verify-badge.is-empty {
  color: #94a3b8;
  background: rgba(241, 245, 249, 0.85);
  border-color: #e2e8f0;
}

html.dark-mode .pcard-bottom-method .pcard-verify-badge.is-empty {
  color: #64748b;
  background: rgba(30, 41, 59, 0.7);
  border-color: #334155;
}

/* Summary Strip (2 Spacious, Balanced 50/50 Pills) */
.pdetail-summary-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summary-pill-item {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.summary-pill-item.pill-presence {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border-color: #a7f3d0;
}

.summary-pill-item.pill-presence .pill-title {
  color: #065f46;
  font-weight: 850;
}

.summary-pill-item.pill-presence .pill-value {
  font-size: 0.98rem !important;
  font-weight: 950 !important;
  color: #047857 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  letter-spacing: -0.01em;
}

.summary-pill-item.pill-punches {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #bae6fd;
}

.summary-pill-item.pill-punches .pill-title {
  color: #0369a1;
  font-weight: 850;
}

.summary-pill-item.pill-punches .pill-value {
  font-size: 0.98rem !important;
  font-weight: 950 !important;
  color: #0284c7 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  letter-spacing: -0.01em;
}

.pill-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.pill-icon-circle.text-emerald { color: #059669; }
.pill-icon-circle.text-sky { color: #0284c7; }
.pill-icon-circle.text-indigo { color: #6366f1; }

.pill-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pill-title {
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.pill-value {
  font-size: 0.88rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detailed Chronological Punches Timeline (Right Column) */
.pdetail-timeline-wrapper {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.timeline-header h5 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 850;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 7px;
}

.timeline-sub-badge {
  font-size: 0.66rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.timeline-punch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  max-height: 250px;
  padding-right: 4px;
}

.timeline-punch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.timeline-punch-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateX(2px);
}

.timeline-punch-item.is-entry-item {
  border-left: 4px solid #10b981;
}

.timeline-punch-item.is-exit-item {
  border-left: 4px solid #3b82f6;
}

.punch-item-index {
  font-size: 0.72rem;
  font-weight: 900;
  color: #94a3b8;
  width: 20px;
}

.punch-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.punch-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.punch-item-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.punch-full-time {
  font-size: 1.02rem;
  font-weight: 900;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.punch-full-time strong {
  font-size: 0.84rem;
  color: #64748b;
  margin-left: 1px;
}

.punch-type-pill {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.punch-type-pill.in-tag {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.punch-type-pill.out-tag {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.punch-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  color: #64748b;
  font-weight: 600;
}

.meta-terminal strong {
  color: #1e293b;
}

/* Empty State */
.pdetail-empty-state {
  text-align: center;
  padding: 32px 20px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1.5px dashed #cbd5e1;
}

.empty-state-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.pdetail-empty-state h4 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 850;
  color: #1e293b;
}

.pdetail-empty-state p {
  margin: 0 auto 16px;
  font-size: 0.84rem;
  color: #64748b;
  max-width: 440px;
  line-height: 1.4;
}

.empty-state-card-info-landscape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.info-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.76rem;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-pill i {
  color: #0284c7;
}

/* Modal Footer */
.pdetail-modal-footer {
  padding: 12px 28px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pdetail-footer-shield {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}

.btn-pdetail-close {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-pdetail-close:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

/* Responsive query for landscape layout */
@media (max-width: 820px) {
  .pdetail-landscape-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pdetail-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* Dark Mode Overrides */
html.dark-mode .pointage-detail-modal-box {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark-mode .pdetail-modal-header,
html.dark-mode .pdetail-modal-footer {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .pdetail-date-title,
html.dark-mode .pcard-time-main,
html.dark-mode .terminal-val,
html.dark-mode .pill-value,
html.dark-mode .punch-full-time {
  color: #f8fafc !important;
}

html.dark-mode .pdetail-emp-line strong {
  color: #f1f5f9 !important;
}

html.dark-mode .pdetail-badge-matricule {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .pdetail-badge-dept {
  background: rgba(30, 58, 138, 0.45) !important;
  color: #93c5fd !important;
  border-color: #1d4ed8 !important;
}

html.dark-mode .pdetail-punch-card.in-card {
  background: linear-gradient(145deg, #064e3b 0%, #022c22 100%);
  border-color: #047857;
}

html.dark-mode .pdetail-punch-card.out-card {
  background: linear-gradient(145deg, #1e3a8a 0%, #172554 100%);
  border-color: #1d4ed8;
}

html.dark-mode .pcard-time-wrap {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .pcard-bottom-method .pcard-verify-badge {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
}

html.dark-mode .summary-pill-item,
html.dark-mode .pdetail-timeline-wrapper,
html.dark-mode .timeline-punch-item,
html.dark-mode .pdetail-empty-state,
html.dark-mode .info-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .summary-pill-item.pill-presence {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%) !important;
  border-color: #059669 !important;
}

html.dark-mode .summary-pill-item.pill-presence .pill-value {
  color: #34d399 !important;
}

html.dark-mode .summary-pill-item.pill-presence .pill-title {
  color: #a7f3d0 !important;
}

html.dark-mode .summary-pill-item.pill-punches {
  background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%) !important;
  border-color: #0284c7 !important;
}

html.dark-mode .summary-pill-item.pill-punches .pill-value {
  color: #38bdf8 !important;
}

html.dark-mode .summary-pill-item.pill-punches .pill-title {
  color: #7dd3fc !important;
}

html.dark-mode .pill-icon-circle,
html.dark-mode .punch-item-icon {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

html.dark-mode .pointage-btn-details {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

html.dark-mode .pointage-day-card:hover .pointage-btn-details {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* ============================================================
   ASSISTANT IA D'ENTREPRISE (DEEPSEEK / TOKENHARBOR) PAGE VIEW
   ============================================================ */

/* Page Banner AI */
.page-banner-ai {
  --banner-a: #6366f1;
  --banner-b: #7c3aed;
  --banner-c: #0284c7;
  --banner-rgb: 99, 102, 241;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}

#pageAi .page-banner-decor {
  opacity: 0.16 !important;
}

.page-banner-ai .page-banner-content {
  flex: 1 1 500px !important;
  min-width: 0 !important;
}

.page-banner-ai h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.btn-banner-ai-settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.btn-banner-ai-settings:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.btn-banner-ai-info {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.btn-banner-ai-info:hover {
  background: #ffffff;
  color: #4f46e5;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.btn-banner-ai-info i {
  font-size: 1.1rem;
  color: #fde047;
  transition: transform 0.25s ease;
}

.btn-banner-ai-info:hover i {
  color: #4f46e5;
  transform: scale(1.18) rotate(12deg);
}

/* ==========================================================================
   AI ASSISTANT INFO MODAL & ADVANCED CONFIG MODAL
   ========================================================================== */
.ai-info-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.70) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 200005 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.ai-info-modal-overlay.show,
.ai-info-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.ai-info-modal-overlay.show *,
.ai-info-modal-overlay.active * {
  visibility: visible !important;
  pointer-events: auto !important;
}

.ai-info-modal-overlay.show .ai-info-modal-box,
.ai-info-modal-overlay.active .ai-info-modal-box {
  animation: aiInfoPopIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.ai-info-modal-box {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 900px !important;
  max-height: 90vh !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 200006 !important;
}

.ai-info-modal-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.18s ease;
  z-index: 5;
}

.ai-info-modal-close:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
  transform: rotate(90deg);
}

.ai-info-modal-header {
  padding: 26px 32px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.ai-info-badge-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}

.ai-info-header-titles {
  flex: 1;
}

.ai-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}

.ai-info-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 850;
  color: #0f172a;
  line-height: 1.25;
}

.ai-info-modal-title span.accent {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-info-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

.ai-info-tabs-nav {
  display: flex;
  gap: 8px;
  padding: 12px 32px 0;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.ai-info-tab-btn {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.ai-info-tab-btn:hover {
  color: #334155;
}

.ai-info-tab-btn.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

.ai-info-pane {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
}

.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.ai-feature-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.ai-feature-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.ai-feature-card.highlight-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}

.ai-feature-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ai-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.ai-feature-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.ai-feature-subtitle {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
  display: block;
}

.ai-feature-card p {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.55;
  flex: 1;
}

.ai-feature-card p code {
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.78rem;
}

.ai-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.ai-feature-tags span {
  font-size: 0.70rem;
  font-weight: 750;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-feature-tags span i {
  color: #10b981;
  font-size: 0.65rem;
}

.ai-info-modal-footer {
  padding: 16px 32px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-ai-info-close {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  border: none;
  padding: 9px 24px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  transition: all 0.2s ease;
}

.btn-ai-info-close:hover {
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

@media (max-width: 640px) {
  .ai-info-modal-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ai-features-grid {
    grid-template-columns: 1fr;
  }
  .ai-info-pane {
    padding: 16px 20px;
  }
  .ai-info-tabs-nav {
    padding: 10px 20px 0;
  }
  .ai-info-modal-footer {
    padding: 12px 20px;
  }
}

/* Page AI Container */
.page-ai-container {
  width: calc(100% - 48px);
  max-width: 1352px;
  margin: 24px auto 50px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.8);
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.page-ai-container .ai-modal-tabs {
  border-radius: 0;
  padding: 18px 28px 0;
  background: #ffffff;
  border-bottom: 1.5px solid #f1f5f9;
}

.page-ai-container .ai-modal-body {
  padding: 24px 28px;
}

.page-ai-container .ai-chat-card {
  height: 580px;
}

.page-ai-container .ai-compose-textarea {
  min-height: 180px;
}

.page-ai-container .ai-output-textarea {
  min-height: 250px;
}

/* ==========================================================================
   AI ASSISTANT COMING SOON (BIENTÔT DISPONIBLE) SHOWCASE
   ========================================================================== */
.ai-coming-soon-container {
  padding: 40px 28px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.ai-cs-card {
  max-width: 960px;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 28px;
  padding: 44px 36px;
  box-shadow: 0 20px 45px -10px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.ai-cs-header-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ai-cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ai-cs-pill i {
  color: #7c3aed;
  font-size: 0.9rem;
}

.ai-cs-badge-sub {
  background: #f1f5f9;
  color: #475569;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 750;
  border: 1px solid #e2e8f0;
}

.ai-cs-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.ai-cs-icon-pulse {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.3rem;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.40), 0 0 0 8px rgba(99, 102, 241, 0.12);
  transition: transform 0.3s ease;
}

.ai-cs-icon-pulse:hover {
  transform: scale(1.06) rotate(6deg);
}

.ai-cs-heading {
  font-size: 2.2rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-cs-lead {
  font-size: 1.05rem;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 34px;
  line-height: 1.65;
  font-weight: 500;
}

.ai-cs-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 34px;
  text-align: left;
}

.ai-cs-feat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-cs-feat-card:hover {
  transform: translateY(-4px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.12);
}

.ai-cs-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: #ffffff;
}

.ai-cs-feat-icon.icon-grad-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 6px 14px rgba(139, 92, 246, 0.3);
}

.ai-cs-feat-icon.icon-grad-blue {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}

.ai-cs-feat-icon.icon-grad-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3);
}

.ai-cs-feat-card h4 {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.ai-cs-feat-card p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.ai-cs-progress-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 14px 22px;
  margin: 0 auto 30px;
  max-width: 720px;
}

.ai-cs-progress-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 650;
  color: #334155;
}

.ai-cs-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: csPulse 1.8s infinite;
}

@keyframes csPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-cs-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-ai-cs-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
  color: #ffffff;
  border: none;
  padding: 12px 26px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 86, 179, 0.32);
  transition: all 0.22s ease;
}

.btn-ai-cs-primary:hover {
  background: linear-gradient(135deg, #004494 0%, #003366 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 86, 179, 0.42);
}

.btn-ai-cs-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: all 0.22s ease;
}

.btn-ai-cs-secondary:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #94a3b8;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .ai-cs-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ai-cs-card {
    padding: 30px 18px;
  }
  .ai-cs-heading {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   POINTAGE MAINTENANCE MODE STYLES & ADMIN CONTROLS
   ========================================================================== */
.pointage-maintenance-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(251, 191, 36, 0.40);
  border-radius: 28px;
  padding: 46px 40px;
  box-shadow: 0 20px 45px -10px rgba(245, 158, 11, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  margin-bottom: 24px;
}

.pointage-maint-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 250px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.05) 50%, transparent 70%);
  pointer-events: none;
}

.p-maint-header-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.p-maint-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.30);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.p-maint-pill i {
  color: #d97706;
  font-size: 0.9rem;
}

.p-maint-subtag {
  background: #f8fafc;
  color: #475569;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 750;
  border: 1px solid #e2e8f0;
}

.p-maint-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.p-maint-icon-circle {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.3rem;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.38), 0 0 0 8px rgba(245, 158, 11, 0.12);
  transition: transform 0.3s ease;
}

.p-maint-icon-circle:hover {
  transform: scale(1.06) rotate(-6deg);
}

.p-maint-title {
  font-size: 2.1rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #78350f 0%, #b45309 60%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-maint-desc {
  font-size: 1.05rem;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 34px;
  line-height: 1.65;
  font-weight: 500;
}

.p-maint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 34px;
  text-align: left;
}

.p-maint-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-maint-item:hover {
  transform: translateY(-4px);
  border-color: #fde68a;
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.12);
}

.p-maint-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: #ffffff;
}

.p-maint-item-icon.icon-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3);
}

.p-maint-item-icon.icon-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.3);
}

.p-maint-item-icon.icon-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.3);
}

.p-maint-item h4 {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.p-maint-item p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.p-maint-notice-bar {
  background: #fefce8;
  border: 1px dashed #fde047;
  border-radius: 16px;
  padding: 14px 22px;
  margin: 0 auto 30px;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 650;
  color: #854d0e;
}

.p-maint-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: csAmberPulse 1.8s infinite;
}

@keyframes csAmberPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.p-maint-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-p-maint-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
  color: #ffffff;
  border: none;
  padding: 12px 26px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 86, 179, 0.32);
  transition: all 0.22s ease;
}

.btn-p-maint-home:hover {
  background: linear-gradient(135deg, #004494 0%, #003366 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 86, 179, 0.42);
}

.btn-p-maint-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: all 0.22s ease;
}

.btn-p-maint-contact:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #94a3b8;
  transform: translateY(-2px);
}

/* Banner Pill Maintenance Chip */
.banner-pill-chip.chip-maintenance {
  background: rgba(245, 158, 11, 0.20) !important;
  color: #ffffff !important;
  border: 1px solid rgba(251, 191, 36, 0.55) !important;
}

.banner-pill-chip.chip-maintenance i {
  color: #fbbf24 !important;
}

/* Database Page Admin Control Box */
.maint-admin-control-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.maint-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maint-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.25s ease;
}

.maint-status-dot.maint-active {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

.maint-status-dot.maint-inactive {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.btn-toggle-maint {
  border: none;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
}

.btn-toggle-maint:hover {
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .p-maint-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pointage-maintenance-card {
    padding: 30px 18px;
  }
  .p-maint-title {
    font-size: 1.7rem;
  }
}

.ai-assistant-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: aiFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

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

.ai-assistant-dialog {
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.25), 0 0 0 1.5px rgba(124, 58, 237, 0.22);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: aiSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes aiSlideUp {
  from { transform: translateY(22px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Ambient glow accents */
.ai-glow-orb {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.ai-glow-purple {
  top: -80px;
  right: 10%;
  background: #7c3aed;
}

.ai-glow-blue {
  bottom: -80px;
  left: 10%;
  background: #0284c7;
}

/* Header */
.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1.5px solid #f1f5f9;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  position: relative;
  z-index: 1;
}

.ai-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #7c3aed 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  flex-shrink: 0;
}

.ai-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-modal-title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.01em;
  font-family: 'Poppins', 'Tajawal', sans-serif;
}

.ai-header-badge {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 2.5px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ai-header-badge i {
  color: #7c3aed;
  font-size: 0.65rem;
}

.ai-modal-subtitle {
  margin: 3px 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

.ai-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-icon-btn,
.ai-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.ai-icon-btn:hover {
  background: #ede9fe;
  color: #7c3aed;
  border-color: #c4b5fd;
}

.ai-modal-close-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
  transform: rotate(90deg);
}

/* Tabs Bar */
.ai-modal-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

.ai-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #64748b;
  font-family: 'Poppins', 'Tajawal', sans-serif;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-tab-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

.ai-tab-btn.active {
  background: #ffffff;
  color: #7c3aed;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Settings Collapsible Panel */
.ai-settings-panel {
  background: #faf5ff;
  border-bottom: 1.5px solid #e9d5ff;
  padding: 14px 24px;
  position: relative;
  z-index: 1;
  animation: aiFadeIn 0.2s ease;
}

.ai-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #6b21a8;
}

.ai-settings-close-link {
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  text-decoration: underline;
}

.ai-security-status-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ai-security-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #059669;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.ai-security-status-text strong {
  display: block;
  font-size: 0.78rem;
  color: #065f46;
  font-weight: 800;
  margin-bottom: 2px;
}

.ai-security-status-text p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #047857;
}

.ai-security-status-text code {
  background: #d1fae5;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  font-family: monospace;
}

.ai-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.ai-settings-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-settings-field label {
  font-size: 0.74rem;
  font-weight: 750;
  color: #475569;
}

.ai-key-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.ai-text-input,
.ai-select-input {
  width: 100%;
  height: 38px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ai-text-input:focus,
.ai-select-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.ai-key-toggle-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  font-size: 0.82rem;
}

.ai-settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-save-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 9px;
  border: none;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-save-settings-btn:hover {
  background: #6d28d9;
}

.ai-settings-status {
  font-size: 0.76rem;
  font-weight: 750;
  color: #059669;
}

/* Modal Body & Workspace */
.ai-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  position: relative;
  z-index: 1;
}

.ai-tab-pane {
  display: none;
}

.ai-tab-pane.active {
  display: block;
}

/* 2-Column Split Workspace */
.ai-workspace-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.ai-compose-card,
.ai-result-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}

.ai-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 850;
  color: #0f172a;
}

.ai-card-title i {
  color: #7c3aed;
}

.ai-clear-input-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.ai-clear-input-btn:hover {
  color: #e11d48;
}

.ai-compose-textarea {
  width: 100%;
  min-height: 130px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.ai-compose-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Quick Presets Box */
.ai-presets-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-presets-label {
  font-size: 0.70rem;
  font-weight: 850;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-preset-chip:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.ai-preset-chip.active {
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  border-color: #8b5cf6;
  color: #6d28d9;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

/* Parameters Row */
.ai-params-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ai-param-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-param-item label {
  font-size: 0.70rem;
  font-weight: 800;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-param-select,
.ai-param-input {
  height: 36px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 650;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
}

.ai-param-select:focus,
.ai-param-input:focus {
  border-color: #7c3aed;
}

/* Main Action Button */
.ai-main-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.90rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}

.ai-main-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.48);
}

.ai-main-action-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* Result Column & Box */
.ai-result-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-mini-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.ai-mini-btn.btn-notes-export {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.ai-mini-btn.btn-notes-export:hover {
  background: #dbeafe;
}

.ai-result-box {
  flex: 1;
  min-height: 250px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.ai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  margin: auto;
  padding: 20px;
  color: #94a3b8;
}

.ai-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.ai-empty-state h4 {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  font-weight: 850;
  color: #334155;
}

.ai-empty-state p {
  margin: 0;
  font-size: 0.80rem;
  line-height: 1.5;
  max-width: 320px;
}

.ai-output-textarea {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #0f172a;
  outline: none;
  resize: none;
  box-sizing: border-box;
  white-space: pre-wrap;
}

/* AI Result Footer - Organized Status & Performance Bar */
.ai-result-footer {
  border-top: 1px solid #e2e8f0;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 0 0 14px 14px;
  margin: 10px -14px -14px -14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
}

.ai-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

[dir="rtl"] .ai-footer-right,
body.rtl .ai-footer-right {
  margin-left: unset;
  margin-right: auto;
}

.ai-perf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ai-perf-pill.success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}

.ai-perf-pill.success i {
  color: #10b981;
  font-size: 0.76rem;
}

.ai-perf-pill.idle {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.ai-perf-pill.idle i {
  color: #8b5cf6;
}

.ai-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.ai-model-pill i {
  color: #6366f1;
  font-size: 0.72rem;
}

.ai-tip-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.ai-tip-text.success {
  color: #334155;
}

.ai-tip-text.success i {
  color: #10b981;
  font-size: 0.78rem;
}

/* Chat Pane */
.ai-chat-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 480px;
  box-sizing: border-box;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
}

.ai-chat-bubble {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

.ai-chat-bubble.bubble-assistant {
  align-self: flex-start;
}

.ai-chat-bubble.bubble-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #7c3aed;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.bubble-user .ai-bubble-avatar {
  background: #0284c7;
}

.ai-bubble-content {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  unicode-bidi: plaintext;
  text-align: start;
}

.bubble-user .ai-bubble-content {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-color: #0284c7;
}

.ai-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-chat-textarea {
  flex: 1;
  height: 42px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.84rem;
  color: #0f172a;
  outline: none;
  resize: none;
  box-sizing: border-box;
}

.ai-chat-textarea:focus {
  border-color: #7c3aed;
}

.ai-chat-send-btn {
  width: 44px;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ai-chat-send-btn:hover {
  background: #6d28d9;
  transform: scale(1.04);
}

/* Pointage Result Card in Chat */
.ai-pointage-result-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
  max-width: 480px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ai-pt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}

.ai-pt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ai-pt-info {
  flex: 1;
}

.ai-pt-info h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 850;
  color: #0f172a;
}

.ai-pt-info span {
  font-size: 0.75rem;
  color: #64748b;
}

.ai-pt-badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.70rem;
  font-weight: 800;
}

.ai-pt-badge.badge-warning {
  background: #fef3c7;
  color: #b45309;
}

.ai-pt-badge.badge-success {
  background: #dcfce7;
  color: #15803d;
}

.ai-pt-period-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 0.72rem;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 700;
}

.ai-pt-period-banner .period-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e293b;
}

.ai-pt-period-banner .period-days-tag {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.ai-pt-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ai-pt-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-pt-stat-box .stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

.ai-pt-stat-box .stat-value {
  font-size: 0.92rem;
  font-weight: 850;
  color: #0f172a;
}

.ai-pt-stat-box .stat-value.highlight {
  color: #0284c7;
}

.ai-pt-stat-box .stat-value.text-green {
  color: #16a34a;
}

.ai-pt-stat-box .stat-value.text-red {
  color: #dc2626;
}

.ai-pt-stat-box small {
  font-size: 0.64rem;
  color: #94a3b8;
}

.ai-pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ai-pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-pt-btn.btn-pdf {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.ai-pt-btn.btn-pdf:hover {
  background: #fecaca;
  transform: translateY(-1px);
}

.ai-pt-btn.btn-excel {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}
.ai-pt-btn.btn-excel:hover {
  background: #bbf7d0;
  transform: translateY(-1px);
}

.ai-pt-btn.btn-email {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.ai-pt-btn.btn-email:hover {
  background: #ddd6fe;
  transform: translateY(-1px);
}

/* Contact Result Card in Chat */
.ai-contact-result-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.ai-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ai-contact-info {
  flex: 1;
  min-width: 0;
}

.ai-contact-name {
  font-size: 0.84rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-contact-email {
  font-size: 0.74rem;
  color: #0284c7;
  display: flex;
  align-items: center;
  gap: 4px;
  word-break: break-all;
}

.ai-contact-unit {
  font-size: 0.68rem;
  color: #64748b;
}

.ai-contact-action-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.70rem;
  font-weight: 750;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ai-contact-action-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* ============================================================
   DARK MODE OVERRIDES FOR AI ASSISTANT MODAL
   ============================================================ */

html.dark-mode .ai-assistant-dialog {
  background: #0f172a !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .ai-modal-header {
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%) !important;
  border-bottom-color: #1e293b !important;
}

html.dark-mode .ai-modal-title {
  color: #f8fafc !important;
}

html.dark-mode .ai-modal-subtitle {
  color: #94a3b8 !important;
}

html.dark-mode .ai-icon-btn,
html.dark-mode .ai-modal-close-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark-mode .ai-modal-tabs {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode .ai-tab-btn {
  color: #94a3b8 !important;
}

html.dark-mode .ai-tab-btn.active {
  background: #0f172a !important;
  color: #c4b5fd !important;
  border-color: #334155 !important;
}

html.dark-mode .ai-compose-card,
html.dark-mode .ai-result-card,
html.dark-mode .ai-chat-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark-mode .ai-card-title {
  color: #f8fafc !important;
}

html.dark-mode .ai-compose-textarea,
html.dark-mode .ai-result-box,
html.dark-mode .ai-chat-textarea {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark-mode .ai-output-textarea {
  color: #f8fafc !important;
}

html.dark-mode .ai-preset-chip {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .ai-preset-chip.active {
  background: rgba(124, 58, 237, 0.25) !important;
  border-color: #8b5cf6 !important;
  color: #ddd6fe !important;
}

html.dark-mode .ai-param-select,
html.dark-mode .ai-param-input,
html.dark-mode .ai-text-input,
html.dark-mode .ai-select-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark-mode .ai-settings-panel {
  background: #1e1b4b !important;
  border-bottom-color: #312e81 !important;
}

html.dark-mode .ai-security-status-box {
  background: rgba(6, 78, 59, 0.35) !important;
  border-color: #059669 !important;
}

html.dark-mode .ai-security-status-text strong {
  color: #6ee7b7 !important;
}

html.dark-mode .ai-security-status-text p {
  color: #a7f3d0 !important;
}

html.dark-mode .ai-security-status-text code {
  background: #064e3b !important;
  color: #6ee7b7 !important;
}

html.dark-mode .ai-settings-header {
  color: #ddd6fe !important;
}

html.dark-mode .ai-settings-field label {
  color: #cbd5e1 !important;
}

html.dark-mode .ai-bubble-content {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark-mode .ai-mini-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-mode .ai-mini-btn.btn-notes-export {
  background: rgba(30, 58, 138, 0.3) !important;
  border-color: #1e40af !important;
  color: #93c5fd !important;
}

/* Mobile responsive for AI modal */
@media (max-width: 900px) {
  .ai-workspace-grid {
    grid-template-columns: 1fr !important;
  }
  .ai-assistant-dialog {
    max-height: 96vh !important;
    border-radius: 18px !important;
  }
  .ai-params-row,
  .ai-settings-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================ */
/* AI LIVE SECONDS TIMER & ATTENDANCE PERFORMANCE STYLES        */
/* ============================================================ */
.ai-live-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: 'Poppins', monospace, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  margin-inline-start: 6px;
  letter-spacing: 0.3px;
  animation: aiTimerPulse 0.9s infinite alternate ease-in-out;
}

@keyframes aiTimerPulse {
  from { opacity: 0.7; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.02); }
}

.ai-btn-timer {
  display: inline-block;
  font-family: 'Poppins', monospace, sans-serif;
  font-weight: 700;
  margin-inline-start: 4px;
  opacity: 0.95;
}

.ai-response-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-family: 'Poppins', monospace, sans-serif;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.ai-pt-timer-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 6px;
}

.ai-pt-refresh-btn {
  background: #f8fafc;
  color: #0284c7;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.ai-pt-refresh-btn:hover {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}

html.dark-mode .ai-live-timer {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

html.dark-mode .ai-response-duration {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

html.dark-mode .ai-pt-timer-tag {
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
  border-color: #059669;
}

html.dark-mode .ai-pt-refresh-btn {
  background: #1e293b;
  color: #38bdf8;
  border-color: #0369a1;
}

/* ==========================================================================
   AI TASK DASHBOARD (CENTRE DE TÂCHES IA LABO NEDJMA)
   ========================================================================== */
.ai-tasks-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ai-dashboard-hero-banner {
  direction: ltr;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.07) 0%, rgba(14, 165, 233, 0.07) 100%);
  border: 1.5px solid rgba(99, 102, 241, 0.20);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.ai-hero-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.ai-hero-text {
  flex: 1;
}

.ai-hero-text h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0 0 4px 0;
}

.ai-hero-text p {
  font-size: 0.85rem;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

.ai-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.pulse-green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ai-tasks-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ai-task-module-card {
  direction: ltr;
  text-align: left;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.25s ease;
}

.ai-task-module-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}

.ai-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-module-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-module-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
  flex-shrink: 0;
}

.icon-emerald { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); }
.icon-blue { background: linear-gradient(135deg, #0284c7, #0ea5e9); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25); }
.icon-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25); }
.icon-purple { background: linear-gradient(135deg, #7c3aed, #8b5cf6); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); }
.icon-amber { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); }
.icon-rose { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25); }

.ai-module-title-wrap h4 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
}

.ai-module-sub {
  font-size: 0.76rem;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

.ai-module-tag {
  font-size: 0.70rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tag-emerald { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.tag-blue { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
.tag-indigo { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.tag-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.tag-amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.tag-rose { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }

.ai-module-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-input-action-row {
  display: flex;
  gap: 10px;
}

.ai-input-with-icon {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.ai-input-with-icon i {
  position: absolute;
  left: 14px;
  right: auto;
  color: #94a3b8;
  font-size: 0.9rem;
  pointer-events: none;
}

.ai-input-with-icon input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  transition: all 0.2s ease;
}

.ai-input-with-icon input:focus {
  outline: none;
  border-color: #6366f1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.btn-ai-task-action {
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  border: none;
  color: #ffffff;
  font-weight: 750;
  font-size: 0.84rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-ai-task-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-emerald { background: linear-gradient(135deg, #059669, #10b981); }
.btn-blue { background: linear-gradient(135deg, #0284c7, #0ea5e9); }

.ai-module-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chips-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
}

.chip-item {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-item:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.chip-item-clear {
  background: transparent;
  border: none;
  color: #dc2626;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
}

.chip-item-clear:hover {
  text-decoration: underline;
}

.ai-module-result-box {
  margin-top: 4px;
  border-radius: 14px;
  max-height: 580px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.ai-module-result-box::-webkit-scrollbar {
  width: 6px;
}

.ai-module-result-box::-webkit-scrollbar-track {
  background: transparent;
}

.ai-module-result-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

.ai-module-result-box::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Server Config Grid */
.ai-server-items-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-srv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
}

.ai-srv-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.ai-srv-val {
  flex: 1;
  font-size: 0.82rem;
  color: #1e293b;
  unicode-bidi: plaintext;
}

.ai-srv-val code {
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  color: #0284c7;
  font-weight: 700;
}

.btn-srv-copy,
.btn-srv-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.btn-srv-copy:hover,
.btn-srv-link:hover {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

/* Units interactive grid */
.ai-units-interactive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.unit-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #1e293b;
  font-size: 0.80rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.unit-tile i {
  color: #7c3aed;
  font-size: 0.95rem;
}

.unit-tile:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  transform: translateY(-1px);
  color: #6d28d9;
}

.unit-tile.active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
}

.unit-tile.active i {
  color: #ffffff;
}

/* Courriers Action list */
.ai-courriers-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.courrier-action-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition: all 0.2s ease;
}

.courrier-action-row:hover {
  background: #fffbeb;
  border-color: #fcd34d;
  transform: translateX(-2px);
}

.courrier-action-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.courrier-action-left i {
  font-size: 1.1rem;
  color: #d97706;
}

.courrier-action-left strong {
  display: block;
  font-size: 0.84rem;
  color: #0f172a;
}

.courrier-action-left small {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 1px;
}

.courrier-arrow-btn {
  font-size: 0.74rem;
  font-weight: 800;
  color: #d97706;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Tools links grid */
.ai-tools-links-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-link-card:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  transform: translateX(-2px);
}

.tool-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.tool-link-info {
  flex: 1;
}

.tool-link-info strong {
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
}

.tool-link-info span {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 1px;
}

.ai-tool-link .tool-btn,
.ai-tools-links .tool-btn {
  font-size: 0.74rem;
  font-weight: 800;
  color: #e11d48;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   RESSOURCES & OUTILS — CARTES & BOUTONS "OUVRIR" ULTRA-SOIGNÉS
   ============================================================ */
.tool-card {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tool-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
}

.tool-card .tool-btn,
.tool-card[class*="tc-"] .tool-btn {
  color: #ffffff !important;
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tool-card .tool-btn *,
.tool-card[class*="tc-"] .tool-btn * {
  color: #ffffff !important;
}

.tool-card .tool-btn:hover,
.tool-card[class*="tc-"] .tool-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26) !important;
  filter: brightness(1.08) !important;
}

.tool-card .tool-btn:hover i,
.tool-card[class*="tc-"] .tool-btn:hover i {
  transform: translateX(3px) !important;
  transition: transform 0.2s ease !important;
}

.tool-card.tc-blue .tool-btn    { background: linear-gradient(135deg, #1d4ed8, #2563eb) !important; }
.tool-card.tc-emerald .tool-btn { background: linear-gradient(135deg, #047857, #059669) !important; }
.tool-card.tc-amber .tool-btn   { background: linear-gradient(135deg, #b45309, #d97706) !important; }
.tool-card.tc-teal .tool-btn    { background: linear-gradient(135deg, #0f766e, #0d9488) !important; }
.tool-card.tc-crimson .tool-btn { background: linear-gradient(135deg, #b91c1c, #dc2626) !important; }
.tool-card.tc-purple .tool-btn  { background: linear-gradient(135deg, #7e22ce, #9333ea) !important; }
.tool-card.tc-indigo .tool-btn  { background: linear-gradient(135deg, #4338ca, #4f46e5) !important; }
.tool-card.tc-rose .tool-btn    { background: linear-gradient(135deg, #be123c, #e11d48) !important; }


/* Responsive */
@media (max-width: 980px) {
  .ai-tasks-modules-grid {
    grid-template-columns: 1fr;
  }
  .ai-dashboard-hero-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dark mode overrides for AI Task Dashboard */
html.dark-mode .ai-dashboard-hero-banner {
  background: rgba(30, 41, 59, 0.7);
  border-color: #334155;
}
html.dark-mode .ai-hero-text h3 {
  color: #f1f5f9;
}
html.dark-mode .ai-hero-text p {
  color: #94a3b8;
}
html.dark-mode .ai-task-module-card {
  background: #0f172a;
  border-color: #1e293b;
}
html.dark-mode .ai-module-title-wrap h4 {
  color: #f8fafc;
}
html.dark-mode .ai-input-with-icon input {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}
html.dark-mode .chip-item {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html.dark-mode .ai-srv-item,
html.dark-mode .unit-tile,
html.dark-mode .courrier-action-row,
html.dark-mode .tool-link-card {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark-mode .tool-link-info strong,
html.dark-mode .courrier-action-left strong {
  color: #f8fafc;
}

html.dark-mode .ai-module-result-box {
  scrollbar-color: #475569 transparent;
}

html.dark-mode .ai-module-result-box::-webkit-scrollbar-thumb {
  background: #475569;
}

html.dark-mode .unit-tile.active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

html.dark-mode .unit-tile.active i {
  color: #ffffff;
}

/* ==========================================================================
   AI WORKSPACE NAVIGATION BAR & ADVANCED MODULES (Traduction Pro & Analyse IA)
   ========================================================================== */

/* Workspace Nav Bar */
.ai-workspace-nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 8px;
}

.ai-workspace-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.ai-workspace-nav-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: #cbd5e1;
}

.ai-workspace-nav-btn.active {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.nav-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ai-workspace-nav-btn:hover .nav-btn-icon {
  transform: scale(1.08);
}

.nav-btn-icon.icon-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.nav-btn-icon.icon-purple {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #e9d5ff;
}

.nav-btn-icon.icon-emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.nav-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-btn-title {
  font-size: 0.88rem;
  font-weight: 850;
  color: #1e293b;
  white-space: nowrap;
}

.nav-btn-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-workspace-nav-btn.active .nav-btn-title {
  color: #0f172a;
}

/* Tool Hero Banner */
.ai-tool-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.8) 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 16px;
}

.ai-tool-hero-content {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 750px;
}

.ai-tool-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ai-tool-hero-icon.icon-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.ai-tool-hero-icon.icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}

.ai-tool-hero-content h3 {
  margin: 0 0 3px 0;
  font-size: 0.96rem;
  font-weight: 850;
  color: #0f172a;
}

.ai-tool-hero-content p {
  margin: 0;
  font-size: 0.80rem;
  color: #475569;
  line-height: 1.45;
}

.ai-tool-hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
}

.ai-badge-chip.chip-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ai-badge-chip.chip-purple {
  background: #faf5ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.ai-badge-chip.chip-emerald {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* Translation Control Bar */
.ai-trans-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 14px;
}

.ai-trans-direction-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e293b;
  background: #f8fafc;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.btn-swap-lang {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #3b82f6;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-swap-lang:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  transform: rotate(180deg);
}

.ai-trans-tone-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-trans-tone-selector label {
  font-size: 0.76rem;
  font-weight: 750;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-select-compact {
  height: 34px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 700;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.ai-select-compact:focus {
  border-color: #3b82f6;
}

/* Comprendre & Répondre Section */
.ai-btn-analyze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.ai-btn-analyze:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.ai-analysis-panel {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 10px;
}

.ai-analysis-header {
  font-size: 0.74rem;
  font-weight: 850;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-analysis-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ai-analysis-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-analysis-card .card-label {
  font-size: 0.68rem;
  font-weight: 750;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-analysis-card .card-val {
  font-size: 0.80rem;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.35;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  width: fit-content;
}

.card-badge.badge-emerald {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.card-badge.badge-warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.card-badge.badge-rose {
  background: #fef2f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

/* Reply Intent Selector */
.ai-reply-intent-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.ai-section-label {
  font-size: 0.72rem;
  font-weight: 850;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-reply-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ai-reply-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.ai-reply-chip.active {
  background: #faf5ff;
  border-color: #8b5cf6;
  color: #6d28d9;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

/* Dark Mode Overrides */
html.dark-mode .ai-workspace-nav-bar {
  background: #0f172a;
  border-color: #334155;
}

html.dark-mode .ai-workspace-nav-btn.active {
  background: #1e293b;
  border-color: #475569;
}

html.dark-mode .nav-btn-title {
  color: #f1f5f9;
}

html.dark-mode .nav-btn-sub {
  color: #94a3b8;
}

html.dark-mode .ai-tool-hero-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark-mode .ai-tool-hero-content h3 {
  color: #f8fafc;
}

html.dark-mode .ai-tool-hero-content p {
  color: #cbd5e1;
}

html.dark-mode .ai-trans-control-bar {
  background: #1e293b;
  border-color: #334155;
}

html.dark-mode .lang-tag {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

html.dark-mode .btn-swap-lang {
  background: #0f172a;
  border-color: #334155;
  color: #38bdf8;
}

html.dark-mode .ai-select-compact {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

html.dark-mode .ai-btn-analyze {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

html.dark-mode .ai-analysis-panel {
  background: #0f172a;
  border-color: #334155;
}

html.dark-mode .ai-analysis-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark-mode .ai-analysis-card .card-val {
  color: #f8fafc;
}

html.dark-mode .ai-reply-chip {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark-mode .ai-reply-chip.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}