/* ==================================================
   Medical Bootstrap Theme (Modern & Professional - RTL)
   Primary Base: #14b8a6 (Teal-500)
   Usage: Load AFTER bootstrap.css (v5+)
   Designed for Persian/Farsi Language (dir="rtl")
   ================================================== */
:root {
  /* ======================
       Complete Brand Spectrum (Teal)
    ====================== */
  --brand-50: #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  /* Main Primary */
  --brand-600: #0d9488;
  /* Secondary */
  --brand-700: #0f766e;
  /* Darker/Sidebar */
  --brand-800: #115e59;
  /* Sidebar Background */
  --brand-900: #134e4a;
  /* Darkest/Headings */

  /* ======================
       Bootstrap Semantic Mapping
    ====================== */
  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 20, 184, 166;
  --bs-secondary: var(--brand-600);
  --bs-secondary-rgb: 13, 148, 136;
  --bs-success: var(--brand-500);
  --bs-success-rgb: 20, 184, 166;
  --bs-info: var(--brand-200);
  --bs-info-rgb: 153, 246, 228;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #ef4444;
  /* Modern Red */
  --bs-danger-rgb: 239, 68, 68;

  /* ======================
       Background & Neutral (Modern Warm)
    ====================== */
  --bs-light: #fdfbf7;
  --bs-light-rgb: 253, 251, 247;
  --bs-dark: var(--brand-900);
  --bs-dark-rgb: 19, 78, 74;
  --bs-body-bg: #f8fafc;
  /* Modern Slate-50 tint */
  --bs-body-color: #334155;
  /* Better contrast for readability */

  /* ======================
       Typography
    ====================== */
  --bs-heading-color: #0f172a;
  /* Darker for headings */
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-800);
  --bs-body-font-family: "irsans", irsans, sans-serif;
  --bs-body-font-size: 0.95rem;
  /* Slightly smaller for professional look */

  /* ======================
       Borders & Radius
    ====================== */
  --bs-border-color: #e2e8f0;
  /* Slightly grayer */
  --bs-border-radius: 0.75rem;
  /* More rounded for modern look */
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;

  /* ======================
       Shadows (Layered & Soft)
    ====================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-medical: 0 4px 20px -2px rgba(var(--bs-primary-rgb), 0.15);
  --sidebar-shadow: -4px 0 15px rgba(0, 0, 0, 0.05);
  /* Shadow for Right Sidebar */

  /* ======================
       Component Specifics
    ====================== */
  --btn-primary-hover: var(--brand-600);
  --btn-primary-active: var(--brand-700);
  --sidebar-bg: var(--brand-800);
  --sidebar-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-bg: var(--brand-500);
  --sidebar-active-text: #ffffff;
}

@font-face {
  font-family: "irsans";
  src: url(../../assets/fonts/iran-sans.eot);
  src:
    url(../../assets/fonts/iran-sans.eot) format("embedded-opentype"),
    url(../../assets/fonts/iran-sans.woff) format("woff"),
    url(../../assets/fonts/iran-sans.ttf) format("truetype");
}

/* ==================================================
   Global Reset & Typography (RTL Optimized)
   ================================================== */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  line-height: 1.8;
  /* Increased for better Persian readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: right;
  /* Default alignment for RTL */
  direction: rtl;
  /* Enforce RTL direction */
  font-family: "irsans", irsans, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: 0;
  /* Removed negative spacing for Persian legibility */
  color: var(--bs-heading-color);
  line-height: 1.4;
}

/* Responsive Typography using Clamp */
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ==================================================
   Global Scrollbar (Modern)
   ================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

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

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* ==================================================
   Bootstrap Core Overrides
   ================================================== */
/* --- Buttons (Modern & Interactive) --- */
.btn {
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.2rem;
  border-radius: var(--bs-border-radius);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--btn-primary-hover);
  --bs-btn-hover-border-color: var(--btn-primary-hover);
  --bs-btn-active-bg: var(--btn-primary-active);
  --bs-btn-active-border-color: var(--btn-primary-active);
  --bs-btn-color: #fff;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.2);
}

.btn-primary:hover {
  box-shadow: 0 4px 6px rgba(var(--bs-primary-rgb), 0.3);
  transform: translateY(-1px);
  /* Lift effect */
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

/* --- Links (Micro-interaction RTL) --- */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  right: 0;
  /* Start from right for RTL */
  background-color: var(--bs-link-hover-color);
  transform: scaleX(0);
  transform-origin: bottom right;
  /* Expand from right to left */
  transition: transform 0.25s ease-out;
}

a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* ==================================================
   Forms (Modern UX & Validation - RTL)
   ================================================== */
.form-control,
.form-select {
  border-radius: var(--bs-border-radius);
  border-color: var(--bs-border-color);
  background-color: #fff;
  color: var(--bs-body-color);
  padding: 0.75rem 1rem;
  transition: all 0.2s ease-in-out;
  font-size: 0.95rem;
  text-align: right;
  /* Ensure text aligns right in inputs */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
  background-color: #fff;
}

.form-control::placeholder {
  color: #94a3b8;
  /* Muted gray */
}

/* Validation States - RTL Adjusted */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--bs-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2314b8a6' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  /* Icon on Right */
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--bs-danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  /* Icon on Right */
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Custom Text Input Style */
.text-input-style {
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem 1rem;
  background-color: #fff;
  transition: all 0.2s;
  text-align: right;
}

.text-input-style:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

/* ==================================================
   Global Switch Style for Inputs (RTL)
   تبدیل تمام تگ‌های checkbox و radio به سوئیچ
   ================================================== */
/* مخفی کردن استایل پیش‌فرض مرورگر */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 3em;
  /* عرض سوئیچ */
  height: 1.5em;
  /* ارتفاع سوئیچ */
  background-color: #e2e8f0;
  /* رنگ پس‌زمینه خاموش */
  border-radius: 1.5em;
  /* گرد کردن کامل بدنه */
  border: none;
  position: relative;
  cursor: pointer;
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  margin-left: 0.5rem;
  /* فاصله از متن سمت چپ */
}

/* دکمه متحرک (Handle) */
input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  position: absolute;
  height: 1.2em;
  width: 1.2em;
  right: 0.15em;
  /* موقعیت اولیه در سمت راست (حالت خاموش) */
  bottom: 0.15em;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* حالت انتخاب شده (Checked) - تغییر رنگ بدنه */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}

/* حالت انتخاب شده (Checked) - حرکت دکمه به چپ */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  transform: translateX(-1.5em);
  /* حرکت به سمت چپ */
}

/* حالت فوکوس (Focus) */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ==================================================
   Cards (Glassmorphism hint & Depth)
   ================================================== */
.card {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--shadow-sm);
  background-color: #fff;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-align: right;
  /* Ensure content is right-aligned */
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  /* Slight lift on hover */
}

.card-header {
  background-color: #f8fafc;
  color: var(--brand-800);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 1.25rem;
  font-weight: 700;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
  text-align: right;
}

.card-body {
  padding: 1.5rem;
}

/* ==================================================
   Tables (Clean & Readable)
   ================================================== */
.table {
  color: var(--bs-body-color);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: right;
  /* Right align table text */
}

.table thead th {
  background-color: #f1f5f9;
  color: var(--brand-800);
  font-weight: 700;
  border-bottom: 2px solid var(--bs-border-color);
  padding: 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-align: right;
  /* Right align headers */
}

.table tbody tr {
  transition: background-color 0.2s;
}

.table-hover tbody tr:hover {
  background-color: #f8fafc;
  color: var(--bs-body-color);
}

.table td {
  padding: 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--bs-border-color);
}

/* ==================================================
   Alerts (Modern Soft)
   ================================================== */
.alert {
  border: none;
  border-radius: var(--bs-border-radius);
  padding: 1rem 1.25rem;
  font-weight: 500;
  text-align: right;
}

.alert-primary {
  background-color: var(--brand-50);
  color: var(--brand-800);
  border-right: 4px solid var(--brand-500);
  /* Border on Right for RTL */
}

.alert-info {
  background-color: #f0f9ff;
  color: #0369a1;
  border-right: 4px solid #0ea5e9;
  /* Border on Right for RTL */
}

/* ==================================================
   Sidebar (Smooth & Accessible - RTL)
   ================================================== */
.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  box-shadow: var(--sidebar-shadow);
  /* Shadow on the left side */
  padding: 1rem;
}

.sidebar a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align content to start (right) */
  padding: 0.75rem 1rem;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
}

.sidebar a:hover {
  background-color: var(--sidebar-hover-bg);
  color: #fff;
  transform: translateX(-4px);
  /* Move slightly left on hover */
}

.sidebar .active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==================================================
   Utilities & Components
   ================================================== */
.shadow-medical {
  box-shadow: var(--shadow-medical);
}

/* Avatar Styling */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-200);
}

/* Focus Visible (Accessibility) */
*:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ==================================================
   SECTION 9: Advanced Visuals & Animations
   ================================================== */

/* --- Glassmorphism Class --- */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Entrance Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Staggered Lists (Helper Classes) --- */
.stagger-item-1 {
  animation-delay: 0.1s;
}

.stagger-item-2 {
  animation-delay: 0.2s;
}

.stagger-item-3 {
  animation-delay: 0.3s;
}

.stagger-item-4 {
  animation-delay: 0.4s;
}

.stagger-item-5 {
  animation-delay: 0.5s;
}

/* ==================================================
   SECTION 10: Enhanced UX Components
   ================================================== */

/* --- Toast Notifications --- */
.toast-container {
  z-index: 1060;
}

.toast {
  background-color: #fff;
  border: none;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--shadow-lg);
  direction: rtl;
  text-align: right;
  overflow: hidden;
}

/* RTL Toast positioning fix */
.toast-header {
  background-color: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.75rem 1rem;
}

.toast-body {
  padding: 1rem;
}

/* Progress bar for auto-dismiss toasts */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: var(--brand-500);
  width: 100%;
  animation: toastProgress linear forwards;
}

/* --- Floating Action Button (FAB) --- */
.fab {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  /* Left for RTL layout usually, or right based on preference. Prompt says bottom-right for mobile, but in RTL left is often 'end'. Let's stick to prompt: bottom-right visually. */
  right: 2rem;
  /* Explicitly right as per prompt */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s;
  z-index: 1050;
}

.fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.5);
  background-color: var(--brand-600);
}

.fab:active {
  transform: scale(0.95);
}

.fab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* --- Input Groups (Icon inside) --- */
.input-group-text {
  background-color: #f8fafc;
  border-color: var(--bs-border-color);
  color: var(--brand-600);
  border-radius: var(--bs-border-radius-sm);
  /* Match input radius */
}

/* ==================================================
   SECTION 11: Skeleton Loading Details
   ================================================== */

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

  100% {
    background-position: -200% 0;
  }
}

.skeleton {
  background-color: #e2e8f0;
  background-image: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
}

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

  a::after {
    display: none;
    /* Remove link animation */
  }

  .btn:hover,
  .card:hover,
  .sidebar a:hover,
  .fab:hover {
    transform: none;
    /* Remove movement */
  }

  .skeleton {
    animation: none;
    background-color: #e2e8f0;
  }
}

/* ==================================================
   DARK MODE SYSTEM (Complete & Organized)
   ================================================== */
html.dark {
  /* ======================
       Global Variables
    ====================== */
  /* Backgrounds (Slate Palette) */
  --bs-body-bg: #0f172a;
  /* Slate 900 */
  --bs-light: #1e293b;
  /* Slate 800 */
  --bs-light-rgb: 30, 41, 59;

  /* Text Colors */
  --bs-body-color: #e2e8f0;
  /* Slate 200 */
  --bs-heading-color: #f1f5f9;
  /* Slate 100 */
  --bs-text-muted: #94a3b8;
  /* Slate 400 */

  /* Borders & Inputs */
  --bs-border-color: #334155;
  /* Slate 700 */

  /* Component Overrides */
  --sidebar-bg: #0f766e;
  /* Teal 800 */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --card-bg: #1e293b;
  /* Slate 800 */
  --header-bg: #1e293b;
  /* Slate 800 */

  /* Buttons Focus Shadow */
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.4);
}

/* ==================================================
   Components Overrides
   ================================================== */
/* --- Glassmorphism in Dark Mode --- */
html.dark .glass {
  background: rgba(30, 41, 59, 0.7);
  /* Slate 800 with opacity */
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Cards --- */
html.dark .card {
  background-color: var(--card-bg);
  border-color: var(--bs-border-color);
}

html.dark .card-header {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--bs-heading-color);
  border-bottom-color: var(--bs-border-color);
}

/* --- Forms --- */
html.dark .form-control,
html.dark .form-select {
  background-color: #0f172a;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html.dark .form-control:focus,
html.dark .form-select:focus {
  background-color: #0f172a;
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
}

/* FIX: Placeholder Color in Dark Mode */
html.dark .form-control::placeholder,
html.dark .form-select::placeholder,
html.dark .text-input-style::placeholder {
  color: #64748b;
  /* Slate 500 - Lighter for better contrast */
}

/* Custom Text Input Style */
html.dark .text-input-style {
  background-color: #0f172a;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html.dark .text-input-style:focus {
  background-color: #0f172a;
  border-color: var(--bs-primary);
  color: #fff;
}

/* Validation States */
html.dark .was-validated .form-control:valid,
html.dark .form-control.is-valid {
  border-color: var(--bs-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232dd4bf' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-color: #0f172a;
}

html.dark .was-validated .form-control:invalid,
html.dark .form-control.is-invalid {
  border-color: var(--bs-danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f87171'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f87171' stroke='none'/%3e%3c/svg%3e");
  background-color: #0f172a;
}

/* FIX: Switches Background in Dark Mode (Unchecked State) */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  background-color: #334155;
  /* Slate 700 - Darker background for switch track */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked {
  background-color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

/* Switches */
html.dark input[type="checkbox"]::before,
html.dark input[type="radio"]::before {
  background-color: #f1f5f9;
  /* رنگ دکمه در حالت تاریک */
}

/* --- Buttons --- */
html.dark .btn-outline-primary {
  --bs-btn-color: var(--brand-300);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-color: #fff;
}

html.dark .btn-light {
  --bs-btn-bg: #334155;
  --bs-btn-color: #f8fafc;
  --bs-btn-border-color: #475569;
  --bs-btn-hover-bg: #475569;
  --bs-btn-hover-color: #fff;
}

/* FIX: Input Group Text (Icons inside inputs) */
html.dark .input-group-text {
  background-color: #1e293b;
  /* Match card/bg */
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* --- Links --- */
html.dark a {
  color: var(--brand-300);
}

html.dark a:hover {
  color: var(--brand-100);
}

html.dark a::after {
  background-color: var(--brand-100);
}

/* --- Tables --- */
html.dark .table {
  color: var(--bs-body-color);
}

html.dark .table thead th {
  background-color: #1e293b;
  color: var(--bs-heading-color);
  border-bottom-color: var(--bs-border-color);
}

html.dark .table tbody tr {
  border-bottom-color: var(--bs-border-color);
}

html.dark .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* --- Alerts --- */
html.dark .alert-primary {
  background-color: rgba(20, 184, 166, 0.15);
  color: #99f6e4;
  border-right-color: var(--brand-400);
}

html.dark .alert-info {
  background-color: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-right-color: #38bdf8;
}

html.dark .alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-right-color: #fbbf24;
}

html.dark .alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-right-color: #f87171;
}

/* --- Sidebar --- */
html.dark .sidebar {
  background-color: var(--sidebar-bg);
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
}

html.dark .sidebar a {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .sidebar a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

html.dark .sidebar .active {
  background-color: var(--brand-500);
  color: #fff;
}

/* --- Scrollbar --- */
html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--brand-500);
}

html.dark * {
  scrollbar-color: #334155 #0f172a;
}

/* --- Shadows --- */
html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

html.dark .shadow-md {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
}

html.dark .shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.4),
    0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

html.dark .shadow-medical {
  box-shadow: 0 4px 20px -2px rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Avatar --- */
html.dark .avatar {
  border-color: var(--brand-700);
}

/* FIX: Badge Background in Dark Mode */
html.dark .badge {
  background-color: #334155;
  /* Slate 700 */
  color: #e2e8f0;
  /* Slate 200 */
  border: 1px solid #475569;
}

/* FIX: Border Dashed Color in Dark Mode */
html.dark .border-dashed {
  border-color: #475569;
  /* Slate 600 */
}

/* --- Skeleton in Dark Mode --- */
html.dark .skeleton {
  background-color: #1e293b;
  background-image: linear-gradient(
    90deg,
    #1e293b 25%,
    #334155 50%,
    #1e293b 75%
  );
}

/* --- Toast in Dark Mode --- */
html.dark .toast {
  background-color: #1e293b;
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

html.dark .toast-header {
  color: var(--bs-heading-color);
  border-bottom-color: var(--bs-border-color);
}

/* ==================================================
   Utilities (Text Colors) - Maximum Specificity Fix
   ================================================== */
html.dark .text-primary {
  color: #5eead4 !important;
}

html.dark .text-secondary {
  color: #94a3b8 !important;
}

html.dark .text-success {
  color: #2dd4bf !important;
}

html.dark .text-info {
  color: #7dd3fc !important;
}

html.dark .text-warning {
  color: #fcd34d !important;
}

html.dark .text-danger {
  color: #fca5a5 !important;
}

html.dark .text-light {
  color: #f1f5f9 !important;
}

html.dark .text-dark {
  color: #cbd5e1 !important;
}

html.dark .text-body {
  color: #e2e8f0 !important;
}

html.dark .text-muted {
  color: #cbd5e1 !important;
}

/* ==================================================
   iOS Design System Add-ons
   ================================================== */

/* --- 1. iOS Blur Effect (Stronger Glassmorphism) --- */
.ios-blur {
  background: rgba(255, 255, 255, 0.65);
  /* شفافیت بیشتر */
  backdrop-filter: blur(20px) saturate(180%);
  /* بلور قوی‌تر و اشباع رنگ */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* حالت تاریک برای iOS Blur */
html.dark .ios-blur {
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 2. iOS Cards (Floating & Clean) --- */
.card-ios {
  background-color: #ffffff;
  border-radius: 1.25rem;
  /* گردی بیشتر (20px) شبیه iOS */
  border: none;
  /* حذف حاشیه ساده */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  /* سایه پخش‌تر و نرم‌تر */
  padding: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.dark .card-ios {
  background-color: #1e293b;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* --- 3. iOS Buttons (Pill Shape & Smooth) --- */
.btn-ios {
  border-radius: 50px;
  /* کاملاً گرد (Pill) */
  font-weight: 600;
  letter-spacing: -0.01em;
  /* فشرده‌تر کردن حروف */
  padding: 0.7rem 1.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.2);
  /* سایه رنگی */
}

.btn-ios:active {
  transform: scale(0.96);
  /* افکت فشردن دکمه */
  opacity: 0.9;
}

/* --- 4. iOS Inputs (Inset Style) --- */
.input-ios {
  background-color: #f3f4f6;
  /* خاکستری روشن برای پس‌زمینه */
  border: none;
  border-radius: 12px;
  padding: 1rem;
  font-size: 1rem;
  color: #000;
  transition: all 0.2s;
}

html.dark .input-ios {
  background-color: #334155;
  color: #fff;
}

.input-ios:focus {
  background-color: #e5e7eb;
  outline: none;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
  /* حلقه فوکوس */
}

html.dark .input-ios:focus {
  background-color: #475569;
}

/* --- 5. iOS Toggles (More Rounded) --- */
/* بازنویسی سوئیچ‌ها برای ظاهر iOS */
input[type="checkbox"].ios-toggle,
input[type="radio"].ios-toggle {
  width: 3.5em;
  height: 2.1em;
  background-color: #e5e7eb;
  border-radius: 2em;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

input[type="checkbox"].ios-toggle::before,
input[type="radio"].ios-toggle::before {
  width: 1.7em;
  height: 1.7em;
  right: 0.2em;
  bottom: 0.2em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  /* سایه دکمه */
}

input[type="checkbox"].ios-toggle:checked,
input[type="radio"].ios-toggle:checked {
  background-color: #34c759;
  /* سبز کلاسیک iOS */
  border-color: #34c759;
}

input[type="checkbox"].ios-toggle:checked::before,
input[type="radio"].ios-toggle:checked::before {
  transform: translateX(-1.4em);
}

/* حالت تاریک سوئیچ iOS */
html.dark input[type="checkbox"].ios-toggle,
html.dark input[type="radio"].ios-toggle {
  background-color: #475569;
}

/* --- 6. iOS List Items (Grouped) --- */
.list-group-ios {
  background-color: #f2f2f7;
  border-radius: 12px;
  overflow: hidden;
}

html.dark .list-group-ios {
  background-color: #1c1c1e;
}

.list-item-ios {
  background-color: #ffffff;
  padding: 1rem;
  border-bottom: 1px solid #c6c6c8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.dark .list-item-ios {
  background-color: #2c2c2e;
  border-bottom-color: #3a3a3c;
  color: #fff;
}

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

/* --- 7. iOS Typography (San Francisco Style) --- */
.text-ios-title {
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.03em;
  /* تیترهای فشرده iOS */
  color: #000;
}

html.dark .text-ios-title {
  color: #fff;
}

.text-ios-body {
  font-weight: 400;
  color: #3a3a3c;
  font-size: 1.05rem;
  line-height: 1.5;
}

html.dark .text-ios-body {
  color: #ebebf5;
}

/* --- 8. iOS Modal/Sheet (Bottom Sheet Style) --- */
.modal-content-ios {
  border-radius: 20px 20px 0 0;
  /* فقط گوشه‌های بالا گرد */
  border: none;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
}

/* برای افکت هاور نرم در دکمه‌های انتخاب بیمه */
.hover-bg-gray:hover {
  background-color: #e5e7eb !important;
}

html.dark .hover-bg-gray:hover {
  background-color: #475569 !important;
}

/* ==================================================
   MISSING COMPONENTS (Additions)
   ================================================== */

/* ==================================================
   1. Modals (Modern & Accessible)
   ================================================== */
.modal-content {
  border: none;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  background-color: #fff;
  overflow: hidden;
}

.modal-header {
  background-color: #f8fafc;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 1.25rem 1.5rem;
}

.modal-title {
  font-weight: 700;
  color: var(--bs-heading-color);
}

.modal-footer {
  background-color: #f8fafc;
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem 1.5rem;
}

/* Close Button Customization */
.btn-close {
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-close:hover {
  opacity: 1;
}

/* Dark Mode Modals */
html.dark .modal-content {
  background-color: #1e293b;
  color: var(--bs-body-color);
}

html.dark .modal-header,
html.dark .modal-footer {
  background-color: rgba(15, 23, 42, 0.5);
  border-color: var(--bs-border-color);
}

html.dark .btn-close {
  filter: invert(1);
}

/* ==================================================
   2. Tabs (Clean & Minimal)
   ================================================== */
.nav-tabs {
  border-bottom: 2px solid var(--bs-border-color);
  padding: 0 1rem;
}

.nav-tabs .nav-link {
  border: none;
  color: var(--bs-body-color);
  font-weight: 500;
  padding: 1rem 1.25rem;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  margin-bottom: -2px;
  /* Overlap border */
}

.nav-tabs .nav-link:hover {
  color: var(--brand-600);
  border-color: transparent;
  background-color: transparent;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--brand-600);
  border-bottom: 3px solid var(--brand-500);
  font-weight: 700;
}

.nav-tabs .nav-link:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 3px solid var(--brand-300);
}

/* Dark Mode Tabs */
html.dark .nav-tabs {
  border-bottom-color: #334155;
}

html.dark .nav-tabs .nav-link {
  color: #94a3b8;
}

html.dark .nav-tabs .nav-link:hover,
html.dark .nav-tabs .nav-link.active {
  color: var(--brand-400);
  border-bottom-color: var(--brand-500);
}

/* ==================================================
   3. Dropdowns (Soft & Floating)
   ================================================== */
.dropdown-menu {
  border: none;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  background-color: #fff;
  animation: fadeInUp 0.2s ease-out;
}

.dropdown-item {
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  font-weight: 500;
  color: var(--bs-body-color);
  transition: all 0.15s;
}

.dropdown-item:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.dropdown-divider {
  border-color: var(--bs-border-color);
  margin: 0.5rem 0;
}

/* Dark Mode Dropdowns */
html.dark .dropdown-menu {
  background-color: #1e293b;
  border: 1px solid var(--bs-border-color);
}

html.dark .dropdown-item {
  color: #e2e8f0;
}

html.dark .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ==================================================
   4. Advanced Forms (Range Slider & Standard Checkboxes)
   ================================================== */

/* --- Range Slider --- */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--brand-500);
  cursor: pointer;
  margin-top: -8px;
  box-shadow: 0 2px 6px rgba(20, 184, 166, 0.4);
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 2px;
}

input[type="range"]:focus {
  outline: none;
}

/* Dark Mode Range */
html.dark input[type="range"]::-webkit-slider-runnable-track {
  background: #334155;
}

/* ==================================================
   5. Spinners (Loading States)
   ================================================== */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

@keyframes spinner-border {
  100% {
    transform: rotate(360deg);
  }
}

/* ==================================================
   6. Badges (Contextual Variants for Dark Mode)
   ================================================== */
/* Fixing Bootstrap badges in Dark Mode */
html.dark .bg-primary {
  background-color: rgba(20, 184, 166, 0.2) !important;
  color: #5eead4 !important;
}

html.dark .bg-success {
  background-color: rgba(20, 184, 166, 0.2) !important;
  color: #5eead4 !important;
}

html.dark .bg-info {
  background-color: rgba(14, 165, 233, 0.2) !important;
  color: #7dd3fc !important;
}

html.dark .bg-warning {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}

html.dark .bg-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

html.dark .bg-secondary {
  background-color: rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
}

/* ==================================================
   7. Print Styles (Optimized for Medical Reports)
   ================================================== */
@media print {
  /* Hide non-essential elements */
  .sidebar,
  .fab,
  .btn,
  .no-print,
  .modal-footer {
    display: none !important;
  }

  /* Reset colors to black and white */
  body,
  .card,
  .modal-content {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ensure links are readable */
  a {
    text-decoration: underline;
    color: #000 !important;
  }

  /* Improve table readability */
  .table {
    border: 1px solid #000;
  }

  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 0.5rem;
  }

  /* Adjust layout */
  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .card {
    border: 1px solid #000;
    break-inside: avoid;
    /* Prevent card splitting */
    margin-bottom: 1rem;
  }
}