/* =====================================================
   ULTRA-LIGHT CSS FRAMEWORK
   Fast • Professional • No Glass • Minimal Shadows
===================================================== */

/* ========================
   ROOT (LIGHT FIRST)
======================== */

:root {
  /* NexLink Core: Professional 'Trust Blue' */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-rgb: 37, 99, 235;
  
  /* Status Colors */
  --secondary: #64748b;
  --info: #0ea5e9;
  --success: #15803d;
  --warning: #b45309;
  --danger: #dc2626;
  
  /* Backgrounds: Layered Slate */
  --bg: #f8fafc;         
  --bg-soft: #f1f5f9;    
  --card-bg: #ffffff;    
  --border: #e2e8f0;     
  
  /* Typography */
  --text: #0f172a;       
  --text-muted: #64748b; 
  
  /* Elevation & Details */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* Scrollbar */
  --bg-color: #ffffff;
  --scroll-track: #f1f5f9;
  --scroll-thumb: #cbd5e1;
  --scroll-thumb-hover: #94a3b8;

  /* Restored Original Highlights */
  --highlight: var(--primary);
  --highlight-font: 'Inter', system-ui, -apple-system, sans-serif;
  --highlight-font-weight: 600;
  --highlight-font-size: 0.95rem;

  --link: #2563eb;
  --link-hover: #1d4ed8;
  --link-font: inherit;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --scroll-track: #2c2c2c;
    --scroll-thumb: #555;
    --scroll-thumb-hover: #777;
  }
}

/* Apply the styles */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 5px;
  border: 2px solid var(--scroll-track); /* Creates a 'padding' effect */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

html {
  /* Tells the browser the page supports both themes */
  color-scheme: light dark;

  scrollbar-color: #888 transparent; 
  scrollbar-width: thin; /* Options: auto, thin, none */

  box-sizing: border-box;

}
*, *:before, *:after { box-sizing: inherit; }

/* ========================
   RESET
======================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Figtree', sans-serif;
  font-size: 0.80rem;
  font-style: normal;
  color: var(--text);
  background: var(--bg);
  line-height: 1.0;
}

/* 1. Ensure the box model is correct everywhere */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ========================
   HIGHLIGHTER (Subtle Lift)
======================== */

.subtle-lift {
  /* Keeps original color, prepares the transform property */
  transform: translateY(0);
  
  /* Optional: Adds a subtle initial shadow for depth */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  
  /* Smooth transition for both movement and shadow */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.subtle-lift:hover {
  /* Moves the element upward subtly */
  transform: translateY(-8px);
  
  /* Optional: Deepens the shadow to make it look like it's lifting off the page */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* ========================
   CONTAINER
======================== */

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
}


/* ========================
   RESPONSIVE GRID
======================== */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
} 

[class*="col-"] {
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* Desktop */

/* --- XS: Extra Small (Default / Phone) --- */
.col-xs-1 { width: 8.333% }   .col-xs-2 { width: 16.666% }  .col-xs-3 { width: 25% }
.col-xs-4 { width: 33.333% }  .col-xs-5 { width: 41.666% }  .col-xs-6 { width: 50% }
.col-xs-7 { width: 58.333% }  .col-xs-8 { width: 66.666% }  .col-xs-9 { width: 75% }
.col-xs-10 { width: 83.333% } .col-xs-11 { width: 91.666% }.col-xs-12 { width: 100% }

/* --- SM: Small (≥ 576px / Landscape Phone) --- */
@media (min-width: 576px) {
  .col-sm-1 { width: 8.333% }   .col-sm-2 { width: 16.666% }  .col-sm-3 { width: 25% }
  .col-sm-4 { width: 33.333% }  .col-sm-5 { width: 41.666% }  .col-sm-6 { width: 50% }
  .col-sm-7 { width: 58.333% }  .col-sm-8 { width: 66.666% }  .col-sm-9 { width: 75% }
  .col-sm-10 { width: 83.333% }.col-sm-11 { width: 91.666% }.col-sm-12 { width: 100% }
}

/* --- MD: Medium (≥ 768px / Tablet) --- */
@media (min-width: 768px) {
  .col-md-1 { width: 8.333% }   .col-md-2 { width: 16.666% }  .col-md-3 { width: 25% }
  .col-md-4 { width: 33.333% }  .col-md-5 { width: 41.666% }  .col-md-6 { width: 50% }
  .col-md-7 { width: 58.333% }  .col-md-8 { width: 66.666% }  .col-md-9 { width: 75% }
  .col-md-10 { width: 83.333% }.col-md-11 { width: 91.666% }.col-md-12 { width: 100% }
}

/* --- LG: Large (≥ 992px / Desktop) --- */
@media (min-width: 992px) {
  .col-lg-1 { width: 8.333% }   .col-lg-2 { width: 16.666% }  .col-lg-3 { width: 25% }
  .col-lg-4 { width: 33.333% }  .col-lg-5 { width: 41.666% }  .col-lg-6 { width: 50% }
  .col-lg-7 { width: 58.333% }  .col-lg-8 { width: 66.666% }  .col-lg-9 { width: 75% }
  .col-lg-10 { width: 83.333% }.col-lg-11 { width: 91.666% }.col-lg-12 { width: 100% }
}

/* --- XL: Extra Large (≥ 1200px / Large Monitor) --- */
@media (min-width: 1200px) {
  .col-xl-1 { width: 8.333% }   .col-xl-2 { width: 16.666% }  .col-xl-3 { width: 25% }
  .col-xl-4 { width: 33.333% }  .col-xl-5 { width: 41.666% }  .col-xl-6 { width: 50% }
  .col-xl-7 { width: 58.333% }  .col-xl-8 { width: 66.666% }  .col-xl-9 { width: 75% }
  .col-xl-10 { width: 83.333% }.col-xl-11 { width: 91.666% }.col-xl-12 { width: 100% }
}

/* ========================
   FULL-SCREEN LAYOUTS
======================== */

.viewport-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
  background: var(--bg-soft);
}

body.dark .bg-gradient {
  background: linear-gradient(135deg, var(--bg) 0%, #0f172a 100%);
}

/* ========================
   NAVBAR
======================== */

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.nav-menu {
  display: flex;
  gap: 22px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

/* ========================
   AVATARS & ROUNDED
======================== */

:root {
  --avatar-size: 48px;
  --avatar-bg: #f0f2f5;
  --avatar-border: #ffffff;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  background-color: var(--avatar-bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  border: 2px solid var(--avatar-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* The Circle Shape */
.rounded-circle {
  border-radius: 50%;
}

/* Image handling */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Prevents squishing */
  display: block;
}

/* Size Variants */
.avatar-sm {
  --avatar-size: 32px;
  font-size: 0.75rem;
}

.avatar-lg {
  --avatar-size: 64px;
  font-size: 1.25rem;
}

.avatar-xl {
  --avatar-size: 96px;
  font-size: 1.75rem;
}

/* ========================
   DROPDOWN IN NAVBAR
======================== */

/* Make dropdown label inherit navbar link style */
.navbar .dropdown label {
  all: unset;
  /* remove default label/btn styles */
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

/* Optional caret spacing */
.navbar .dropdown label .caret {
  margin-left: 4px;
  font-size: 0.85em;
}

/* Dropdown menu links match nav link style */
.navbar .dropdown .dropdown-menu a {
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  padding: 10px 14px;
  display: block;
}

/* Dropdown hover effect */
.navbar .dropdown .dropdown-menu a:hover {
  color: var(--link);
  background: var(--bg-soft);
}

/* Hover version (desktop) */
.navbar .dropdown.hover:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



/* Dropdown menu container */
.navbar .dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 999;
  display: none;
  /* hidden by default */
  box-shadow: var(--shadow-sm);
  /* ADDED SHADOW */
}

/* Positioning Modifications */
.navbar .dropdown.align-right .dropdown-menu {
  left: auto;
  right: 0;
}

.navbar .dropdown.drop-up .dropdown-menu {
  top: auto;
  bottom: 100%;
}

/* ========================
   MOBILE TOGGLE
======================== */

.nav-toggle-label {
  display: none;
  font-size: 22px;
  cursor: pointer;
}

/* Mobile */
@media(max-width:768px) {

  .row {
    margin: 0;
  }

  [class*="col-"] {
    padding: 8px 0;
  }

  .container {
    width: 100%;
    padding: 0 16px;
  }

  .nav-toggle-label {
    display: block;
  }

  .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 12px 0;
    display: none;
  }

  .nav-menu a,
  .navbar .dropdown label {
    padding: 10px 20px;
    /* match nav link padding */
  }

}


/* =========================
   FIXED NAVBAR
========================= */

.navbar-fixed {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  
  /* Safe defaults for mobile (when sidebar is hidden) */
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Desktop: Shift the navbar to start AFTER the sidebar */
@media (min-width: 1025px) {
  .navbar-fixed {
    margin-left: 200px !important; /* Shifts the starting point past the 200px sidebar */
    width: calc(100% - 200px) !important; /* Spans only the remaining screen width */
    
    /* Optional: If you want the text inside the navbar to line up with your content padding */
    padding-left: 30px !important; 
    padding-right: 30px !important;
  }
}

/* Default: Desktop spacing for body */
body.has-fixed-navbar {
  padding-top: 60px; /* Adjust based on your desktop navbar height */
}

/* Mobile: Reduced spacing */
@media (max-width: 768px) {
  body.has-fixed-navbar {
    padding-top: 35px; /* Adjust this to match your mobile navbar height */
  }
}

/* =========================
   FOOTER
========================= */

.footer {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 14px 0;
  font-size: 14px;
  color: var(--text);

  /* Safe defaults for mobile (when sidebar is hidden) */
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Links inside footer */
.footer-right a {
  margin-left: 16px;
  text-decoration: none;
  color: var(--text);
}

.footer-right a:hover {
  color: var(--link);
}

/* =========================
   FIXED FOOTER
========================= */

.footer-fixed {
  background: var(--bg);
  position: fixed;
  padding: 12px 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  /* Safe defaults for mobile (when sidebar is hidden) */
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* --- 1. Mobile Heights & Centering --- */
.mobile-footer {
  position: fixed;
  background: var(--bg);
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1000;
}

.mobile-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

.fnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --- 2. Animations & Transitions --- */
.mobile-footer .icon {
  width: 28px;  /* Adjusted from 44px so icons don't spill out of 50px header */
  height: 28px;
  
  /* Inherit stroke/fill/color handling from .icon base */
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

/* Hover/Active states matching your theme */
.fnav-item:active .icon {
  transform: scale(0.82);
}

.fnav-item.active .icon {
  color: var(--accent, var(--text)); /* Highlight color if you have one */
  transform: translateY(-2px) scale(1.15);
}

.fnav-item.pulse .icon {
  animation: navPulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: translateY(-2px) scale(1.15); }
}

/* --- 3. Responsive Hide for Desktop --- */
@media (min-width: 768px) {
  .mobile-footer {
    display: none !important;
  }
}

/* =========================
   DESKTOP SIDEBAR OFFSET
========================= */

@media (min-width: 1025px) {
  .footer,
  .footer-fixed {
    margin-left: 200px !important; /* Starts after the 200px sidebar */
    width: calc(100% - 200px) !important; /* Spans the remaining width */
    padding-left: 30px !important; /* Matches content area padding */
    padding-right: 30px !important;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
  }

  .footer-right a {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* Add some spacing for page content if footer is fixed */
body.has-fixed-footer {
  padding-bottom: 60px;
  /* adjust based on footer height */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--highlight-font);
  color: var(--highlight);
  font-weight: var(--highlight-font-weight);
  font-size: var(--highlight-font-size);
}

a {
  color: var(--link);
  font-family: var(--link-font);
}

/* ========================
   BUTTONS
======================== */

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
  font-family: inherit; 
  line-height: inherit; 
}

.btn-block {
  display: block;
  width: 100%;
}

/* ---------- Filled Buttons ---------- */

/* Primary */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Secondary */
.btn-secondary {
  background: #6b7280;
  /* gray-500 */
  color: #fff;
  border-color: #6b7280;
}

.btn-secondary:hover {
  background: #4b5563;
  border-color: #4b5563;
}

/* Dark */
.btn-dark {
  background: #111827;
  /* gray-900 */
  color: #fff;
  border-color: #111827;
}

.btn-dark:hover {
  background: #0f172a;
  border-color: #0f172a;
}

/* Info */
.btn-info {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.btn-info:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* Success */
.btn-success {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}

.btn-success:hover {
  background: #16a34a;
  border-color: #16a34a;
}

/* Danger */
.btn-danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Warning */
.btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.btn-warning:hover {
  background: #d97706;
  border-color: #d97706;
}

/* ---------- Outline Buttons ---------- */

/* Primary Outline */
.btn-outline-primary {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}

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

/* Secondary Outline */
.btn-outline-secondary {
  background: #fff;
  color: #6b7280;
  border-color: #6b7280;
}

.btn-outline-secondary:hover {
  background: #6b7280;
  color: #fff;
}

/* Dark Outline */
.btn-outline-dark {
  background: #fff;
  color: #111827;
  border-color: #111827;
}

.btn-outline-dark:hover {
  background: #111827;
  color: #fff;
}

/* Info Outline */
.btn-outline-info {
  background: #fff;
  color: #ff38ff;
  border-color: #ff38ff;
}

.btn-outline-info:hover {
  background: #ff38ff;
  color: #fff;
}

/* Success Outline */
.btn-outline-success {
  background: #fff;
  color: #22c55e;
  border-color: #22c55e;
}

.btn-outline-success:hover {
  background: #22c55e;
  color: #fff;
}

/* Danger Outline */
.btn-outline-danger {
  background: #fff;
  color: #ef4444;
  border-color: #ef4444;
}

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

/* Warning Outline */
.btn-outline-warning {
  background: #fff;
  color: #f59e0b;
  border-color: #f59e0b;
}

.btn-outline-warning:hover {
  background: #f59e0b;
  color: #fff;
}

/* ---------- Disabled State ---------- */

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  /* Prevents clicks and hover effects */
  box-shadow: none;
}

/* Ensure outline buttons look correct when disabled in Dark Mode */
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn-outline-dark:disabled {
  background: transparent;
}

/* ---------- Button Sizes ---------- */

/* Extra Small (xs) */
.btn-xs {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: calc(var(--radius) * 0.75);
}

/* Small (sm) */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
  border-radius: calc(var(--radius) * 0.85);
}

/* Large (lg) */
.btn-lg {
  padding: 12px 24px;
  font-size: 1.125rem;
  border-radius: calc(var(--radius) * 1.2);
}

/* Extra Large (xl) */
.btn-xl {
  padding: 16px 32px;
  font-size: 1.25rem;
  border-radius: calc(var(--radius) * 1.5);
}

.card {
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg) 100%);
  border: 1px solid var(--border); 
  border-radius: 7px; 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: 
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Header */
.card-header {
  font-family: var(--highlight-font);
  color: var(--text); 
  padding: 16px 20px; 
  background: transparent;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Card Footer */
.card-footer {
  padding: 14px 20px;
  background: rgba(241, 245, 249, 0.5); /* Semi-transparent slate-100 to blend with background gradient */
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* Card Image */
.card-img {
  width: 100%;
  height: 350px; 
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--border);
}

/* Card Body */
.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px; 
}

/* Card Title */
.card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Card Text */
.card p {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--text-muted); 
}

/* Buttons inside card-body */
.card .btn {
  align-self: flex-start;
  font-weight: 500;
  border-radius: 0px; /* Slightly increased to match card's roundness */
}

/* Badges (e.g., 'Pending', 'Critical', 'Completed') */
.card .badge {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px; /* Fully rounded pill layout */
}

/* Progress bar */
.card .progress {
  margin-top: 4px;
  height: 6px;
  background-color: var(--bg-soft);
  border-radius: 3px;
  overflow: hidden;
}

.card.draggable {
  position: fixed;
  z-index: 1000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  user-select: none;
  resize: both; 
  min-width: 250px;
  min-height: 200px;

  /* Centers the card exactly in the middle of the viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-draggable-handle {
  cursor: move;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   OPTIONAL MEDICAL ADDITIONS
   ========================================================================== */

/* Left-border Triage Indicator (Maintains rounded corners on left side) */
.card.triage-urgent { border-left: 5px solid var(--danger); }
.card.triage-stable { border-left: 5px solid var(--success); }
.card.triage-review { border-left: 5px solid var(--warning); }

/* Compact variant for dense data grids */
.card-compact {
  border-radius: 12px; /* Marginally sharper for dense, high-data dashboards */
}
.card-compact .card-header { padding: 10px 14px; font-size: 0.9rem; }
.card-compact .card-body { padding: 14px; gap: 8px; }
.card-compact .card-footer { padding: 10px 14px; }

/* =========================
   DROPDOWN (Hover or Click)
========================= */

.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Dropdown Header */
.dropdown-header {
  padding: 0px 0px;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  /* Prevents the icon from squishing or growing */
}

/* ---------- Dropdown Menu ---------- */
.dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 999;

  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);

  /* Animation */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* Alignment utilities */
.dropdown.align-right .dropdown-menu {
  left: auto;
  right: 0;
  /* Aligns right edge of menu to right edge of icon */
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  /* adjust if needed */

  width: 12px;
  height: 12px;

  background: var(--card-bg);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);

  transform: rotate(45deg);
}

.dropdown.align-right .dropdown-menu::before {
  left: auto;
  right: 20px;
}


.dropdown.drop-up .dropdown-menu {
  top: auto;
  bottom: 110%;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text, #333);
}


.dropdown-menu a:hover {
  background: var(--bg-soft, --link);
}

/* ---------- Hover Version ---------- */
.dropdown.hover:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



/* Optional: Change cursor on the label to show it's clickable */
.dropdown.click label {
  cursor: pointer;
  display: inline-block;
}

/* ========================
   SWITCHES (TOGGLES)
======================== */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch input {
  display: none !important;
  /* Override global display: none if needed */
}

.switch-slider {
  position: relative;
  background-color: var(--border);
  border-radius: 34px;
  transition: 0.3s;
  display: block;
}

.switch-slider:before {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input:checked+.switch-slider {
  background-color: var(--primary);
}

/* --- Sizes --- */

/* Small */
.switch-sm .switch-slider {
  width: 32px;
  height: 18px;
}

.switch-sm .switch-slider:before {
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
}

.switch-sm input:checked+.switch-slider:before {
  transform: translateX(14px);
}

/* Medium */
.switch-md .switch-slider {
  width: 44px;
  height: 24px;
}

.switch-md .switch-slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
}

.switch-md input:checked+.switch-slider:before {
  transform: translateX(20px);
}

/* Large */
.switch-lg .switch-slider {
  width: 56px;
  height: 30px;
}

.switch-lg .switch-slider:before {
  height: 24px;
  width: 24px;
  left: 3px;
  top: 3px;
}

.switch-lg input:checked+.switch-slider:before {
  transform: translateX(26px);
}


/* ========================
   FUNCTIONAL TABS
======================== */
.tabs-container {
  width: 100%;
  position: relative;
}

.tab-nav {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .tab-nav::-webkit-scrollbar {
      display: none;
    }



.tab-nav label {
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: 0.2s ease;
  flex: 0 0 auto;
}

.tab-nav label.active {
  border-color: var(--primary, #007bff);
  color: var(--primary, #007bff);
}

/* Dropdown Styles */
.tab-more {
  position: relative;
  margin-left: auto;
  /* Pushes 'More' to the right */
}

.tab-more-toggle {
  padding: 10px 12px;
  font-weight: bold;
  cursor: pointer;
}

.tab-more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--border, #ccc);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  z-index: 100;
}

.tab-more.open .tab-more-menu {
  display: flex;
}

/* Ensure labels inside dropdown look like menu items */
.tab-more-menu label {
  display: block;
  padding: 10px 20px;
  border-bottom: none;
  width: 100%;
}

.tab-content {
  display: none;
}

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

/* ========================
   RESPONSIVE CONTENT
======================== */

/* The Wrapper */
.responsive-container {
  width: 100%;
  overflow-x: auto;
  /* Adds horizontal scroll if content is too wide */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  border: 1px solid var(--border, #eee);
  border-radius: 8px;
}

/* The "Table" */
/* Core Table Container */
.div-table {
  display: block;
  min-width: 600px;
  width: 100%;
  border: 1px solid #999;
  font-family: "Segoe UI", Tahoma, sans-serif;
  box-sizing: border-box;
  background-color: #fff;
}

/* Row Styling */
.div-row {
  display: flex;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

/* The Professional Hover Effect */
.div-row:not(.header):hover {
  background-color: #e8f2ff; /* Classic enterprise highlight blue */
  cursor: default;
}

/* Header Styling - Old School Gradient */
.div-row.header {
  background: linear-gradient(to bottom, #fdfdfd 0%, #e8e9ea 100%);
  border-bottom: 1px solid #888;
  font-weight: bold;
  color: #333;
}

/* Cell Styling */
.div-cell {
  flex: 1;
  padding: 8px 12px; /* Tighter padding for data density */
  white-space: nowrap;
  min-width: 150px;
  font-size: 13px;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
}

/* Ensure the last cell doesn't have a right border */
.div-cell:last-child {
  border-right: none;
}

/* Header specific cell tweaks */
.div-row.header .div-cell {
  border-right: 1px solid #bbb;
  text-shadow: 0 1px 0 #fff;
}

/* Zebra Striping for long lists */
.div-row:nth-child(even):not(.header) {
  background-color: #f9f9f9;
}

/* First cell emphasis (Employee Name / ID) */
.div-row:not(.header) .div-cell:first-child {
  font-weight: 600;
  color: #000;
}

/* ========================
   OFF-CANVAS BASE
======================== */

.offcanvas {
  position: fixed;
  background: var(--card-bg);
  z-index: 2000;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px;
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}

.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Trigger Overlay */
.offcanvas.is-open {
  transform: translateX(0);
}

.offcanvas-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px; /* Space between header and content */
  padding-bottom: 15px;
}

.offcanvas-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
}

.offcanvas-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  color: var(--text-muted, #666);
  transition: color 0.2s ease;
}

.offcanvas-close:hover {
  color: var(--accent-color, #000);
}

/* Initial State */
.offcanvas {
  transform: translateX(-100%);
}

/* OPEN State: Triggered when the URL ID matches the element ID */
.offcanvas:target {
  transform: translateX(0);
}

/* ------------------------
   DIRECTIONS
------------------------ */

/* LEFT (Default) */
.offcanvas-left {
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  transform: translateX(-105%);
  /* Hide slightly past the edge */
  border-right: 1px solid var(--border);
}

/* RIGHT */
.offcanvas-right {
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  transform: translateX(105%);
  border-left: 1px solid var(--border);
}

/* TOP */
.offcanvas-top {
  top: 0;
  left: 0;
  width: 100vw;
  height: 300px;
  transform: translateY(-105%);
  border-bottom: 1px solid var(--border);
}

.offcanvas-right.is-open {
  transform: translateX(0);
}

.offcanvas-left.is-open {
  transform: translateX(0);
}

.offcanvas-top.is-open {
  transform: translateY(0);
}

.offcanvas-bottom.is-open {
  transform: translateY(0);
}

/* BOTTOM */
.offcanvas-bottom {
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 300px;
  transform: translateY(105%);
  border-top: 1px solid var(--border);
}

/* ------------------------
   SIZES (Applies to width or height based on orientation)
------------------------ */

/* Horizontal Sizing (Left/Right) */
.offcanvas-left.sm,
.offcanvas-right.sm {
  width: 20%;
}

.offcanvas-left.md,
.offcanvas-right.md {
  width: 50%;
}

.offcanvas-left.lg,
.offcanvas-right.lg {
  width: 75%;
}

/* Vertical Sizing (Top/Bottom) */
.offcanvas-top.sm,
.offcanvas-bottom.sm {
  height: 20%;
}

.offcanvas-top.md,
.offcanvas-bottom.md {
  height: 50%;
}

.offcanvas-top.lg,
.offcanvas-bottom.lg {
  height: 75%;
}

/* ========================
   MOBILE FULL-SCREEN FIX
======================== */

@media (max-width: 768px) {
  /* For Left and Right menus */
  .offcanvas-left, 
  .offcanvas-right {
    width: 95vw !important; /* Forces 100% width on mobile */
    max-width: 100vw;
  }

  /* For Top and Bottom menus */
  .offcanvas-top, 
  .offcanvas-bottom {
    height: 100vh !important; /* Forces 100% height on mobile */
    max-height: 100vh;
  }
}

/* ========================
   BADGES
======================== */

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: .75rem;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
}

/* ========================
   PROGRESS BAR
======================== */

.progress {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
}

/* ========================
   FORMS
======================== */

.form-group {
  margin-bottom: 8px;
}

.input {
  width: 100%;
  padding: 5px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
}

/* FLOATING LABEL */

.float {
  position: relative;
}

.float input {
  width: 100%;
  padding: 5px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: bolder;
}

.float label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 4px;
  font-size: 1rem;
  color: #666;
  transition: .15s;
  pointer-events: none;
  font-weight: bolder;
}

.float input:focus+label,
.float input:not(:placeholder-shown)+label {
  top: -7px;
  font-size: 1rem;
  color: var(--primary);
}

/* 1. Universal Style Sync */
.float input,
.float textarea,
.float select {
  /* Box Model & Layout */
  width: 100%;
  padding: 12px 12px !important;
  box-sizing: border-box;
  
  /* Typography - Mirroring Body and Card Style */
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 1rem !important;
  font-weight: bolder;
  line-height: 1.5 !important; /* Matches your body line-height */
  color: var(--text-muted) !important; /* Matches your card p color */
  
  /* Visuals */
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  
  /* Select-Specific resets */
  appearance: none;
  -webkit-appearance: none;
  
}

/* 2. Label Style (Sync with the Input Text) */
.float label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  
  /* Typography Sync */
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  color: var(--text-muted);
  
  background: var(--card-bg); /* Matches card background */
  padding: 0 4px;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

/* 3. Floating State Logic */
.float input:focus + label,
.float input:not(:placeholder-shown) + label,
.float textarea:focus + label,
.float textarea:not(:placeholder-shown) + label,
.float select:focus + label,
.float select:valid + label {
  top: -8px; /* Adjusted for 1.5 line-height */
  font-size: 0.75rem;
  color: var(--primary);
  transform: translateY(0);
}

/* 4. Select Dropdown Options */
.float select option {
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text); /* Actual choices usually look better slightly darker */
}

/* ========================
   ALERTS
======================== */

/* Base Alert Component */
.alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius, 8px);
  border: 1px solid;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Success (Whisper of Mint) */
.alert-success {
  background-color: #f7fee7; /* extremely faint green-yellow tint */
  border-color: #ecfccb;
  color: #3f6212;
}

/* Danger/Error (Whisper of Rose) */
.alert-danger {
  background-color: #fffafb; /* extremely faint rose tint */
  border-color: #ffe4e6;
  color: #9f1239;
}

/* Warning (Whisper of Amber) */
.alert-warning {
  background-color: #fffdfa; /* extremely faint warm tint */
  border-color: #fef3c7;
  color: #78350f;
}

/* Info (Whisper of Blue) */
.alert-info {
  background-color: #fafcfe; /* extremely faint cool tint */
  border-color: #e0f2fe;
  color: #0369a1;
}

span.alert {
    width: 100%;
    text-align: left;
    opacity: 1;
    display: inline-block; /* Ensures transition applies properly */
    transition: opacity 1000ms ease-out; /* 1-second smooth fade */
}

span.alert.fade-out {
    opacity: 0;
}

/* ========================
   FORM CONTROLS
======================== */

/* Form Group */
.form-group {
  position: relative;
  margin-bottom: 8px;
}

/* ========================
   TEXT INPUTS
======================== */
.input,
textarea {
  width: 100%;
  padding: 5px 5px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: all 0.2s ease;
  outline: none;
  font-family: inherit;
  resize: vertical;
}

/* Focus effect */
.input:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* ========================
   FLOATING LABEL FIX
======================== */

.float {
  position: relative;
  margin-bottom: 8px;
}

/* Inputs and textarea */
.float input,
.float textarea {
  width: 100%;
  padding: 12px 12px;
  /* vertical + horizontal padding */
  line-height: 1.4;
  /* centers text vertically */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

/* Focus effect */
.float input:focus,
.float textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* Floating label */
.float label {
  position: absolute;
  left: 12px;
  top: 50%;
  /* center label vertically initially */
  transform: translateY(-50%);
  font-size: 1rem;
  color: #888;
  background: #fff;
  padding: 0 4px;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Select-specific overrides */
.float select {
  width: 100%;
  padding: 12px 12px;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: auto;
  outline: none;
  appearance: none; /* Removes default arrow to customize if needed */
  cursor: pointer;
}

/* Float logic for Select */
.float select:focus + label,
.float select:not([value=""]) + label,
.float select:valid + label {
  top: -6px;
  font-size: 0.75rem;
  color: var(--primary);
  transform: translateY(0);
}

/* Active / focused state */
.float input:focus+label,
.float input:not(:placeholder-shown)+label,
.float textarea:focus+label,
.float textarea:not(:placeholder-shown)+label {
  top: -6px;
  /* moves label to top */
  font-size: 0.75rem;
  color: var(--primary);
  transform: translateY(0);
}

/* ========================
   CHECKBOX & RADIO (MERGED)
======================== */

/* Container & Hidden Input Logic */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  position: relative;
  user-select: none;
  padding: 4px 0; /* Extra hit area */
}

/* Hide the default browser input entirely */
.checkbox input,
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: 0;
}

/* The Visual Box / Circle */
.checkbox span,
.radio span {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  margin-right: 8px;
  transition: all 0.2s ease;
  position: relative;
  background-color: transparent; /* Default state */
  flex-shrink: 0; /* Prevents the box from squishing */
}

.radio span {
  border-radius: 50%;
}

/* --- STATE: HOVER --- */
.checkbox:hover span,
.radio:hover span {
  border-color: var(--primary, #007bff);
}

/* --- STATE: CHECKED --- */
.checkbox input:checked ~ span,
.radio input:checked ~ span {
  background-color: var(--primary, #007bff);
  border-color: var(--primary, #007bff);
}

/* --- INNER MARKS (Checkmark & Dot) --- */
.checkbox span::after,
.radio span::after {
  content: "";
  position: absolute;
  display: none;
}

/* Show mark when checked */
.checkbox input:checked ~ span::after,
.radio input:checked ~ span::after {
  display: block;
}

/* Checkmark Design (White L-shape) */
.checkbox span::after {
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Radio Dot Design (White Circle) */
.radio span::after {
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

/* ========================
   SEAMLESS INPUT GROUP
======================== */
.input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
  isolation: isolate;
  /* Keeps z-index clean */
}

/* 1. Universal Reset for all group children */
.input-group>* {
  margin: 0;
  border-radius: 0 !important;
  /* Force square for internal connections */
  position: relative;
}

/* 2. Round ONLY the far left edge of the first item */
.input-group>*:first-child {
  border-top-left-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
}

/* 3. Round ONLY the far right edge of the last item */
.input-group>*:last-child {
  border-top-right-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* 4. Fix Borders: Overlap them so they don't look double-thick */
.input-group>*:not(:first-child) {
  margin-left: -1px;
}

/* 5. Focus State: Bring the active element to the top layer */
.input-group .input:focus,
.input-group .btn:focus {
  z-index: 2;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.input-group .input-icon {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 0 12px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

/* ========================
   FLOATING LABEL + INPUT GROUP
======================== */

/* Make the float wrapper grow to fill space */
.input-group .float {
  flex: 1 1 auto;
  margin-right: -1px;
}

/* Remove rounding from the input INSIDE the float if it's in a group */
.input-group .float input,
.input-group .float textarea {
  border-radius: 0 !important;
}

/* Round only the far left of a float if it's the first child */
.input-group .float:first-child input {
  border-top-left-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
}

/* Round only the far right of a float if it's the last child */
.input-group .float:last-child input {
  border-top-right-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Adjust z-index for label visibility during focus */
.input-group .float input:focus+label {
  z-index: 3;
}

/* ========================
   TABLE (PRE-2010 STYLE)
======================== */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: inherit;
  background: var(--card-bg);
  border: 1px solid var(--border);

  /* Refined raised effect for better compatibility */
  box-shadow: 
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.2);
}

/* 1. Targeted Hover: We target the TD instead of the TR */
/* This overrides any background colors set on the cells themselves */
.table tr:hover td {
  background-color: rgba(255, 255, 255, 0.08) !important;
  /* Optional: Adds a slight "glow" to the row in dark mode */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* 2. Handle the "Raised" border on the first and last cells */
.table tr td {
  transition: background 0.1s ease;
}

/* 3. Dark Mode specific tweaks if the hover is still too faint */
@media (prefers-color-scheme: dark) {
  .table tr:hover td {
    background-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* ========================
   CELLS
======================== */

.table th,
.table td {
  padding: 6px 6px !important;
  text-align: left;
  vertical-align: middle;

  background: var(--card-bg);
  font-size: .80rem;
  color: var(--text);

  /* Classic beveled borders */
  border-top: 1px solid rgba(255,255,255,0.4);
  border-left: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* ========================
   HEADER (Glossy)
======================== */

.table thead {
  background: var(--bg-soft);
}

.table thead th {
  background: linear-gradient(
    to bottom,
    rgba(182, 182, 182, 0.9),
    rgba(0,0,0,0.05)
  ), var(--bg-soft);

  font-weight: bold;

  border-bottom: 2px solid var(--border);
}

/* ========================
   ROW STATES
======================== */

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

/* ========================
   PAGINATION (CLASSIC BUTTONS)
======================== */

.pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.pagination .btn {
  min-width: 38px;
  text-align: center;
  padding: 6px 10px;

  font-family: Tahoma, Arial, sans-serif;
  font-size: 1rem;

  background: var(--card-bg);
  border: 1px solid var(--border);

  /* Classic button bevel */
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.7),
    inset -1px -1px 0 rgba(0,0,0,0.15);

  cursor: pointer;
}

.pagination .btn:active {
  /* Pressed look */
  box-shadow:
    inset -1px -1px 0 rgba(255,255,255,0.5),
    inset 1px 1px 0 rgba(0,0,0,0.3);
}

.pagination .active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  pointer-events: none;
}

.pagination .disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================
   TABLE MODIFIERS
======================== */

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--bg-soft) !important;
}

.table-hover tbody tr:hover td {
  background-color: var(--bg-soft) !important;
}

.table-bordered, 
.table-bordered th, 
.table-bordered td, 
.table-bordered thead th {
  border: none !important;
}

.table-sm th,
.table-sm td {
  padding: 0.25rem;
}

/* ========================
   RESPONSIVE
======================== */

.responsive {
  display: block;
  width: 100%;
  overflow-x: auto;

  padding-bottom: 100px;
  margin-bottom: -100px;

  cursor: grab;
  user-select: none;
}

.responsive > table {
  width: 100%;
  border-collapse: separate;
}



/* =========================
   PULSING SKELETON LOADER
========================= */

/* Base skeleton style */
.skeleton {
  display: inline-block;
  width: 100%;
  height: 20px;
  border-radius: var(--radius, 4px);
  background: #e2e8f0; /* Standard light gray */
  
  /* The Pulse Animation */
  animation: pulse 1.5s ease-in-out infinite;
  
  /* Prevents layout shift if empty */
  vertical-align: middle; 
}

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

/* Variants (Your original structure) */
.skeleton.text {
  height: 14px;
  margin-bottom: 8px;
  width: 90%; /* Slighting shorter to look like real text */
}

.skeleton.title {
  height: 24px;
  margin-bottom: 12px;
  width: 60%;
}

.skeleton.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton.button {
  width: 80px;
  height: 32px;
}

.skeleton.image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Modal hidden by default */
/* BASE MODAL STYLES */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
  padding: 1rem; /* Prevents touching screen edges on mobile */
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* DIALOG BASE */
.modal-dialog {
  background: white; /* Added so content is visible */
  border-radius: 8px;
  width: 100%; 
  max-width: 500px; /* Default medium size */
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* INNER CONTENT CONTAINER */
.modal-content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden; /* Ensures background doesn't bleed past corners */
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* HEADER */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* BODY */
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.5rem;
  overflow-y: auto; /* Enables scrolling if content is too long */
  max-height: 70vh;  /* Prevents modal from being taller than the screen */
}

/* FOOTER */
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end; /* Aligns buttons to the right */
  padding: 1rem;
  gap: 0.5rem; /* Space between buttons */
}

/* SIZE MODIFIERS */

/* Small: 300px */
.modal-sm {
  max-width: 300px;
}

/* Large: 800px (Desktop) */
@media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}

/* Extra Large: 1140px (Wide Screens) */
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}


/* ========================
   DYNAMIC DATEPICKER STYLES
======================== */
.datepicker-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.calendar-menu {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 15px;
  display: none;
  /* Reset any inherited styles */
  margin: 0;
  pointer-events: auto;
}

.calendar-menu.show {
  display: block;
  animation: calFade 0.2s ease-out;
}

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.cal-day-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 5px;
}

.cal-date {
  padding: 8px 0;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}

.cal-date:hover:not(.empty) {
  background: var(--bg-soft);
  color: var(--primary);
}

.cal-date.selected {
  background: var(--primary) !important;
  color: #fff;
}

.cal-date.today {
  border: 1px solid var(--primary);
}

.cal-date.empty {
  cursor: default;
}

.cal-time {
  display: flex;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.cal-time input {
  width: 50px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--text);
  text-align: center;
}

@keyframes calFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================
   UTILITIES
======================== */

/* Text & Alignment */
.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

/* Spacing (Consistent Scales) */
.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 16px;
}

.mt-3 {
  margin-top: 32px;
}

.mt-4 {
  margin-top: 48px;
}

.mb-1 {
  margin-bottom: 8px;
}

.mb-2 {
  margin-bottom: 16px;
}

.mb-3 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 32px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Padding (Fixed Duplicates) */
.p-1 {
  padding: 8px;
}

.p-2 {
  padding: 16px;
}

.p-3 {
  padding: 24px;
}

.p-4 {
  padding: 32px;
}

/* Sizing */
.w-100 {
  width: 100%;
}

.flex-container {
  display: flex;
  justify-content: space-between; /* Pushes items to opposite ends */
  width: 100%;
}

.push-right {
  margin-left: auto;
}

.push-left {
  margin-right: auto;
}

/* Line */
.line {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px; /* Optional: adds space between columns */
}

.line > * {
  flex: 1;          /* Forces all items to grow/shrink equally */
  text-align: left; /* Default alignment */
}

.line > :last-child {
  text-align: right;
}

.stabilize-layout {
  /* 1. Set the 'width' based on character count without 'content' */
  min-inline-size: 130ch; 

  /* 2. Set the 'height' to exactly one line of text */
  min-block-size: 1lh;

  /* 3. Ensure it behaves like a block and doesn't shrink in a flex column */
  display: block;
  flex-shrink: 0;

  /* 4. Keeps the fixed element from collapsing if it's empty */
  contain: layout size;
}

.column-parent {
  /* 1. Name the column so the fixed child can find it */
  anchor-name: --column-anchor;
}

.fixed-pos::before {
  content: "";
  display: inline-block;
  width: 1lw; /* Matches exactly one line of text height */
}

.column {
  container-type: inline-size;
}

.fixed-pos {
  position: fixed;
  width: 100cqw; /* 100% of the Container Width */
  z-index: 1;
}

.minimal-editor {
  /* Dimensions & Locking */
  width: 100%;
  height: 400px;
  resize: none; /* Disables the grab handle in the bottom corner */
  
  /* Layout & Behavior */
  box-sizing: border-box;
  padding: 15px;
  overflow-y: auto;
  
  /* Resetting Styles (No Typography/Color) */
  border: 1px solid #ccc;
  outline: none;
}

.cal-month-item:hover {
    background-color: #007bff;
    color: white;
}
.btn-present:hover {
    background-color: #e2e2e2 !important;
}

#custom-alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.custom-alert {
    pointer-events: auto;
    min-width: 250px;
    padding: 12px 20px;
    
    /* THEME DEPENDENCY LOGIC */
    font-family: inherit;      /* Uses your site's font */
    font-size: inherit;        /* Uses your site's base text size */
    background: canvas;        /* Matches the root background (Light/Dark) */
    color: canvastext;         /* Matches the root text color */
    border-radius: inherit;    /* Matches the rounding of parent containers */
    
    /* Border that matches your text color but at 15% opacity */
    border: 1px solid color-mix(in srgb, canvastext, transparent 85%);
    
    /* Subtle shadow that works in both modes */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Animation */
    transform: translateX(120%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.custom-alert.show {
    transform: translateX(0);
    opacity: 1;
}

/* Status variants using standard semantic colors */
.custom-alert.success { border-left: 4px solid #28a745; }
.custom-alert.error { border-left: 4px solid #dc3545; }

/* =======================
  TAGS
======================== */

/* 1. Main Wrapper: Acts as a flex container BUT doesn't define its own look */
/* 1. The Wrapper: 
   We keep flex so pills sit next to the input, but we remove 
   all padding/borders so it adopts the style of your .input class. */
.tagit-wrapper.input.float {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px; /* Match your .float input padding */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    min-height: 48px; /* Match your standard input height */
    position: relative;
    cursor: text;
}

/* --- THE INTERNAL INPUT (The ghost cursor) --- */
.tagit-input {
    flex: 1;
    min-width: 60px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}

/* --- THE WRAPPER (The visible "Box") --- */
.tagit-wrapper.input.float {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0px; /* Match your .float input padding */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    min-height: 48px; /* Match your standard input height */
    position: relative;
    cursor: text;
}

/* --- THE INTERNAL INPUT (The ghost cursor) --- */
.tagit-input {
    flex: 1;
    min-width: 60px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    font-size: 1rem;
}

/* --- FLOATING LABEL FIX --- */
.float label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 4px;
    font-size: .85rem;
    color: #666;
    transition: .15s;
    pointer-events: none;
    z-index: 10;
}

/* Trigger the float when:
   1. The internal input is focused
   2. OR the internal input has text 
   3. OR there are pills present (we use a helper class 'has-pills' usually added by JS)
*/
.tagit-wrapper.float:focus-within label,
.tagit-wrapper.float .tagit-input:not(:placeholder-shown) + input + div + label,
.tagit-wrapper.has-pills label {
    top: 0; /* Adjusted from -7px to 0 to sit better on the border */
    transform: translateY(-50%);
    font-size: .7rem;
    color: var(--primary);
}

/* --- DROPDOWN & PILLS --- */
.tagit-pill {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.tagit-dropdown {
    position: absolute;
    top: 100%;
    left: -1px; /* Align with wrapper border */
    right: -1px;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 2. The Input: 
   Since this sits INSIDE the wrapper, it must be invisible 
   to let the wrapper's (your theme's) styling show through. */
.tagit-input.input {
    flex: 1;
    min-width: 80px;
    border: none !important;      /* Removes the duplicate border */
    outline: none !important;     /* Removes the duplicate focus ring */
    background: transparent !important; 
    box-shadow: none !important;  /* Prevents double shadows */
    padding: 2px 0 !important;    /* Adjust vertical padding to match your theme */
    margin: 0 !important;
    height: auto !important;      /* Prevents stretching */
}

/* 3. The Pills: 
   Keep these small enough so they don't expand the height of your standard .input */
.tagit-pill {
    background: var(--primary, #007bff);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1;
    margin: 2px 0;
}

.tagit-remove {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

/* 4. The Dropdown: 
   This stays absolute so it doesn't break the layout. */
.tagit-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #ccc);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tagit-item {
    padding: 10px 15px;
    cursor: pointer;
}

.tagit-item:hover {
    background: var(--bg-soft, #f8f9fa);
}

/* 5. Floating Label Fix */
.form-group.float label {
    pointer-events: none !important;
}

/* 1. Keep label floating if the wrapper has ANY pills inside it */
/* We look for the presence of .tagit-pill inside the wrapper */
.tagit-wrapper.float:has(.tagit-pill) label, 
.tagit-wrapper.float:focus-within label,
.tagit-wrapper.float .tagit-input:not(:placeholder-shown) ~ label {
  top: -1px;
  font-size: auto;
  color: var(--primary);
}

/* 2. Ensure the label doesn't overlap the pills when it's in the 'down' position */
.tagit-wrapper.float label {
  /* Move it slightly right if pills are present but not focused 
     (Optional: helps prevent overlap if you have many pills) */
  pointer-events: none;
}

/* 1. Remove the focus outline from the wrapper */
.tagit-wrapper.input:focus-within,
.tagit-wrapper.input:focus {
    outline: none !important;
    box-shadow: none !important; /* Some frameworks use shadows instead of outlines */
    border-color: var(--border); /* Keeps the border color stable, or change to var(--primary) if you want a subtle change */
}

/* 2. Double-check the internal input is also stripped */
.tagit-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* The Card Container */
.fixed-sidebar {
  position: fixed;
  left: 10px;            /* Distance from the left edge */
  top: 50%;              /* Move top edge to center of screen */
  transform: translateY(-50%); /* Offset by half its own height to perfectly center */
  
  /* Card Styling */
  display: flex;
  flex-direction: column; /* Aligns icons in a vertical column */
  gap: 40px;             /* Space between icons */
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  
  z-index: 1000;         /* Ensures it stays on top of other content */
}

/* ========================
   1. BASE ICON & LAYOUT
   ======================== */
.icon {
  position: relative;
  width: 20px;
  height: 20px;
  /* inline-flex removes the "whitespace gap" and centers the SVG perfectly */
  display: inline-flex;  
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  
  /* Reset spacing to kill ghost margins */
  margin: 0;
  padding: 0;

  /* Theme/Color System */
  color: var(--text);
  stroke: currentColor;
  fill: none; /* Icons usually use stroke; change to currentColor if filled */
  cursor: pointer;
}

/* Ensure the SVG inside fills the 20px box and doesn't add padding */
.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Specific styling for sidebar usage */
.fixed-sidebar .icon {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.fixed-sidebar .icon:hover {
  transform: scale(1.15);
}

/* ========================
   2. THE TOOLTIP SYSTEM
   ======================== */
.icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 125%;                  /* Slightly more gap from the icon */
  white-space: nowrap;
  
  /* Styling */
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;             /* Reduced from 20px for better proportions */
  font-family: sans-serif;
  pointer-events: none;
  
  /* Hide state */
  opacity: 0;
  visibility: hidden;          /* Prevents browser from calculating "ghost" space */
  transform: translateX(-8px); 
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.icon:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ========================
   3. UTILITIES & VARIANTS
   ======================== */

.mobile-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; 
  box-sizing: border-box; 
  padding: 0px 0px; /* Added some vertical padding for breathing room */
  background-color: transparent; /* Example background */
}

/* Targeting the icons/links inside the navigation */
.mobile-navigation i, 
.mobile-navigation svg,
.mobile-navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  
  /* The "Magic" transition: 0.3s with a slight bounce (cubic-bezier) */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

/* Hover state: Primarily for desktop users with a mouse */
@media (hover: hover) {
  .mobile-navigation i:hover, 
  .mobile-navigation svg:hover {
    transform: scale(1.2) translateY(-3px); /* Grows and lifts up slightly */
    color: #007bff; 
  }
}

/* Active/Press state: Perfect for mobile touch feedback */
.mobile-navigation i:active, 
.mobile-navigation svg:active {
  transform: scale(0.9); /* Shrinks slightly when pressed */
  opacity: 0.7;
}


/* Sizing overrides */
.icon-sm { width: 16px !important; height: 16px !important; }
.icon-md { width: 22px !important; height: 22px !important; }
.icon-lg { width: 32px !important; height: 32px !important; }

/* Color overrides */
.icon-primary { color: var(--primary); }
.icon-muted   { color: var(--text-muted); }

/* SVG child inheritance */
.icon circle,
.icon path {
  stroke: currentColor;
}

/* Responsive Helpers */
.break-after { display: block; }

.show-on-mobile { display: none !important; }

@media screen and (max-width: 1024px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: block !important; }
}

.break-after {
  display: block;
}

/* 1. Hide the element by default (Desktop/Large Screens) */
.show-on-mobile {
  display: none !important;
}

/* 2. Your existing Media Query */
@media screen and (max-width: 1024px) {
  
  /* Hides desktop elements */
  .hide-on-mobile {
    display: none !important;
  }

  /* Shows mobile elements */
  .show-on-mobile {
    display: block !important; /* or inline-block, flex, etc. */
  }
  
}

/* =========================================
   DARK THEME (Add class="dark" to body)
========================================= */

body.dark {
  /* Core: Dark Mode Primary */
  --primary: #60a5fa; 
  --primary-hover: #93c5fd;
  --primary-rgb: 96, 165, 250;

  /* Status: Vibrant for dark mode */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  /* Backgrounds: Dark Industrial Gray */
  --bg: #111111;        
  --bg-soft: #1e1e1e;   
  --card-bg: #1e1e1e;   
  --border: #2e2e2e;    

  /* Typography */
  --text: #ededed;      
  --text-muted: #a1a1aa;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);

  /* Scrollbar Dark */
  --bg-color: #111111;
  --scroll-track: #111111;
  --scroll-thumb: #3f3f46;
  --scroll-thumb-hover: #52525b;

  /* Restored Original Highlights */
  --highlight: var(--primary);
  --highlight-font: 'Inter', system-ui, -apple-system, sans-serif;
  --highlight-font-weight: 600;
  --highlight-font-size: 0.95rem;

  --link: #60a5fa;
  --link-hover: #93c5fd;
  --link-font: inherit;
}

.navbar,
.navbar-fixed {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-menu a,
.navbar .dropdown label {
  color: var(--text);
}

.nav-menu a:hover {
  color: var(--link);
}

/* Dropdown menu */
.navbar .dropdown .dropdown-menu,
.dropdown-menu {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

.dropdown-menu a:hover {
  background: var(--bg-soft);
}

/* Mobile menu */
@media(max-width:768px) {
  .nav-menu {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
}

/* ========================
   SIDEBAR
======================== */

/* Sidebar Container */
.sidebar {
  width: 200px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Brand/Logo Area */
.sidebar-header {
  height: 60px; /* Slightly taller for NexLink feel */
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}

/* Navigation Links */
.sidebar-nav {
  padding: 15px 0;
  flex-grow: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 3px;
  margin: 4px 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.nav-item img {
  margin-right: 12px;
  margin-left: 2px;
  width: 20px!important;
  height: 20px!important;
}

/* --- ICON STYLING --- */
.icon {
  width: 20px;
  height: 20px;
  margin-right: 0px; /* Space from text */
  flex-shrink: 0;
  transition: all 0.2s ease;
  
  /* Matches inactive text color: Grayish/Muted */
  filter: invert(48%) sepia(13%) saturate(1115%) hue-rotate(174deg) brightness(92%) contrast(85%);
  opacity: 0.8;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* --- HOVER STATE --- */
.nav-item:hover {
  background-color: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

/* Change icon color to match Primary Text on Hover */
.nav-item:hover .icon {
  opacity: 1;
  transform: translateX(3px);
  /* This filter targets the NexLink Primary (#665dfe) */
  filter: invert(41%) sepia(82%) saturate(2822%) hue-rotate(228deg) brightness(101%) contrast(99%);
}

/* --- ACTIVE STATE --- */
.nav-item.active {
  background-color: var(--primary);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Make icon white when background is primary */
.nav-item.active .icon {
  opacity: 1;
  filter: brightness(0) invert(1); 
}

/* Collapsed State */
.sidebar.collapsed { width: 70px; }
.sidebar.collapsed .nav-text, 
.sidebar.collapsed .sidebar-header span { display: none; }

/* ========================
   FOOTER
======================== */

.footer,
.footer-fixed {
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.footer-right a {
  color: var(--text);
}

.footer-right a:hover {
  color: var(--link);
}

/* ========================
   CONTENT
======================== */

.content-area {
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 15px;
}


@media (min-width: 1025px) {
  .content-area {
    margin-left: 200px !important;
    width: calc(100% - 200px) !important;
    
    padding-left: 30px !important; 
  
    padding-right: 30px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ========================
   CARD
======================== */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

.card-header,
.card-footer {
  background: var(--card-bg);
  border-color: var(--border);
}

.card p {
  color: var(--text-muted);
}

/* ========================
   BUTTON OUTLINE FIX (DARK)
======================== */

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-info,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
  background: transparent;
}

/* ========================
   TABS
======================== */

.tabs {
  border-bottom: 1px solid var(--border);
}

.tab.active {
  border-color: var(--primary);
  color: var(--primary);
}

/* ========================
   BADGE
======================== */

.badge {
  color: var(--primary);
}

/* Color Scheme Modifiers */
.badge-primary   { background-color: var(--primary); color: #ffffff; }
.badge-secondary { background-color: var(--secondary); color: #ffffff; }
.badge-success   { background-color: var(--success); color: #ffffff; }
.badge-danger    { background-color: var(--danger); color: #ffffff; }
.badge-warning   { background-color: var(--warning); color: #212529; } /* Darker text for visibility */
.badge-info      { background-color: var(--info); color: #ffffff; }

/* ========================
   PROGRESS
======================== */

.progress {
  background: #334155;
}

.progress-bar {
  background: var(--primary);
}

/* ========================
   INPUTS & TEXTAREA
======================== */

.input,
textarea,
.float input,
.float select,
.float textarea {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.2s ease; /* Smooth transition for focus/disabled states */
}

/* --- Added Disabled State --- */
.input:disabled,
textarea:disabled,
.float input:disabled,
.float select:disabled,
.float textarea:disabled {
  cursor: not-allowed;
  background-color: var(--bg-soft); /* Using your soft background for a "muted" look */
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 0.7;
}

.input:focus,
textarea:focus,
.float input:focus,
.float select:focus,
.float textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  outline: none; /* Prevents default browser outline clashing with your shadow */
}

/* Floating label */
.float label {
  background: var(--bg-soft);
  color: var(--text-muted);
}

/* --- Added Label Disabled State --- */
.float input:disabled + label,
.float textarea:disabled + label {
  color: var(--text-muted);
  opacity: 0.6;
}

.float input:focus + label,
.float textarea:focus + label {
  color: var(--primary);
}

/* ========================
   CHECKBOX & RADIO
======================== */

.checkbox span,
.radio span {
  border-color: var(--border);
}

.checkbox:hover span,
.radio:hover span {
  border-color: var(--primary);
}

/* ========================
   INPUT GROUP
======================== */

.input-group .input-icon {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* ========================
   TABLE
======================== */

.table {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.table thead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.table thead th {
  border-bottom: 1px solid var(--border);
}

.table tbody tr {
  border-bottom: 1px solid var(--border);
}

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

.table-striped tbody tr:nth-child(odd) {
  background: #162033;
}

/* ========================
   ALERTS (DARK)
======================== */

/* Dark Mode Overrides */
.dark .alert-success {
  background-color: rgba(74, 222, 128, 0.08); /* 8% translucent light green */
  border-color: rgba(74, 222, 128, 0.2);
  color: #4ade80; /* Brighter, accessible text for dark backdrops */
}

.dark .alert-danger {
  background-color: rgba(f8, 113, 113, 0.08); /* 8% translucent light red */
  border-color: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.dark .alert-warning {
  background-color: rgba(251, 191, 36, 0.08); /* 8% translucent light amber */
  border-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.dark .alert-info {
  background-color: rgba(96, 165, 250, 0.08); /* 8% translucent light blue */
  border-color: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

/* ========================
   SKELETON
======================== */

.skeleton {
  background: #334155;
}

.skeleton::after {
  background: linear-gradient(180deg,
      transparent,
      rgba(255, 255, 255, 0.06),
      transparent);
}

/* ========================
   MODAL
======================== */

.modal {
  background: rgba(0, 0, 0, 0.6);
}

.modal-dialog {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  /* MODIFIED SHADOW */
}

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

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

/* Specific component fixes for Dark Mode */
body.dark .switch-slider {
  background-color: #334155;
  /* A slightly lighter gray than the dark bg for visibility */
}

body.dark .offcanvas-overlay {
  background: rgba(0, 0, 0, 0.6);
  /* Darker overlay for better contrast in dark mode */
}

body.dark .tab-nav {
  border-bottom-color: var(--border);
}

body.dark-mode .tagit-dropdown {
    background-color: #1a1a1a;
    border-color: #444;
}

/* ========================
   UTILITIES (TEXT)
======================== */

.text-muted {
  color: var(--text-muted);
}

/* Force icons to respect the text variable in dark mode */
body.dark svg.icon,
body.dark svg.icon circle,
body.dark svg.icon path {
  stroke: var(--text) !important;
}

/* If the icon is inside a primary button, it should stay white */
.btn-primary .icon,
.btn-primary .icon circle,
.btn-primary .icon path {
  stroke: #ffffff !important;
}

body.dark .icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}