/* Global styles for Call Doctor BD React App */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 1;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* Header styles */
.header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.3s;
}

.nav-links a:hover {
  opacity: 0.8;
}

/* Footer styles */
.footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 2rem 0;
  margin-top: auto;
}

/* Home page styles */
.hero {
  text-align: center;
  padding-top: 4rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(47, 173, 247, 0.8) 100%);
  color: white;
  border-radius: 12px;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.search-bar {
  display: flex;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.search-bar input {
  flex: 1 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
}

.search-bar button {
  padding: 1rem 2rem;
  background: #333;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.features {
  display: block;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.feature {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.feature h3 {
  color: #667eea;
  margin-bottom: 1rem;
}

/* Auth styles */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.auth-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 400px;
  width: 100%;
}

.auth-form h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.auth-form input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.auth-form button {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.auth-form p {
  text-align: center;
  margin-top: 1rem;
}

.auth-form a {
  color: #667eea;
  text-decoration: none;
}

/* Dashboard styles */
.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  margin-top: 2rem;
}

.upcoming-appointments,
.today-patients,
.pending-bookings,
.schedule,
.quick-actions,
.emergency-requests {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dashboard-content h2 {
  color: #333;
  margin-bottom: 1rem;
}

.dashboard-content button {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .search-bar {
    flex-direction: column;
  }
  
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  main {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .nav {
    padding: 0 12px;
    margin: 0;
  }

  .footer {
    padding: 1.5rem 12px;
    margin: 0;
  }
}

@media (max-width: 480px) {
  main {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    overflow-x: hidden;
  }

  html {
    width: 100%;
    overflow-x: hidden;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode body {
  background-color: #1a1a1a;
  color: #e8e8e8;
}

:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
  background-color: #2d2d2d;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode input::placeholder,
:root.dark-mode textarea::placeholder {
  color: #707070;
}

:root.dark-mode a {
  color: #667eea;
}

:root.dark-mode button {
  background-color: #667eea;
  color: white;
}

:root.dark-mode code {
  background-color: #2d2d2d;
  color: #7c8ff0;
}

:root.dark-mode pre {
  background-color: #1a1a1a;
  color: #e8e8e8;
  border-color: #404040;
}
/* ===== COMPREHENSIVE MOBILE RESPONSIVE FIX ===== */
/* This file ensures all pages display full-width content on mobile devices */
/* by removing left/right margins and optimizing padding */

/* Mobile breakpoints */
@media (max-width: 768px) {
  
  /* ===== GLOBAL MOBILE OVERRIDES ===== */
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .App {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===== PAGE CONTAINERS ===== */
  .page-container,
  .home-page,
  .doctor-list,
  .doctor-list-page,
  .hospital-list,
  .hospital-list-page,
  .doctor-profile,
  .hospital-profile,
  .profile-page,
  .dashboard,
  .dashboard-page,
  .medical-records-page,
  .prescriptions-page,
  .my-appointments,
  .my-appointments-page,
  .forum-page,
  .forum,
  .blog-page,
  .forum-post-page,
  .auth-page,
  .login-page,
  .register-page,
  .forgot-password-page,
  .contact-page,
  .about-page,
  .help-center-page,
  .support-page,
  .faq-page,
  .booking-page,
  .book-appointment-page,
  .reviews-page,
  .activity-log-page,
  .notifications-page,
  .settings-page,
  .profile-settings-page,
  .family-page,
  .insurance-page,
  .health-records,
  .location-pages,
  .emergency-page,
  .emergencies-page,
  .doctor-registration-page,
  .appointment-history-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== SECTION CONTAINERS ===== */
  .filters-section,
  .search-filters,
  .search-container,
  .search-container-new,
  .filter-container,
  .filter-group,
  .card-container,
  .content-wrapper,
  .page-wrapper,
  .container,
  .main-container,
  .content-container,
  .section-container,
  .list-container,
  .grid-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== HEADER SECTIONS ===== */
  .page-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-radius: 0 !important;
  }

  .hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 0 0 20px 20px;
  }

  /* ===== MAIN LAYOUT ===== */
  .dashboard-layout,
  .main-layout,
  .page-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== CONTENT SECTIONS ===== */
  .patients-main,
  .appointments-main,
  .prescriptions-main,
  .reviews-main,
  .earnings-main,
  .doctors-main,
  .revenue-main,
  .settings-main,
  .analytics-main,
  .reports-main,
  .hospitals-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== CARD COMPONENTS ===== */
  .patient-card,
  .doctor-card,
  .hospital-card,
  .appointment-card,
  .review-card,
  .prescription-card,
  .insurance-card,
  .user-card,
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ===== GRID LAYOUTS ===== */
  .doctors-grid,
  .hospitals-grid,
  .appointments-grid,
  .cards-grid,
  .items-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* ===== FORM LAYOUTS ===== */
  .form-container,
  .form-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ===== AUTH PAGES ===== */
  .auth-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .auth-form {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== DASHBOARD COMPONENTS ===== */
  .dashboard-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .patients-header,
  .appointments-header,
  .prescriptions-header,
  .reviews-header,
  .earnings-header,
  .doctors-header,
  .revenue-header,
  .settings-header,
  .analytics-header,
  .reports-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
  }

  /* ===== MODAL/DIALOG ===== */
  .modal-content,
  .dialog,
  .modal {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100% - 20px) !important;
  }

  /* ===== LIST ITEMS ===== */
  .list-item,
  .item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ===== TABLES ===== */
  .table-container,
  .table-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: auto;
  }

  table {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== SIDEBARS ===== */
  .sidebar,
  .sidebar-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== NAVIGATION ===== */
  .nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== FOOTER ===== */
  .footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ===== PADDING ADJUSTMENTS ===== */
  [class*="container"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class*="wrapper"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class*="section"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== SEARCH AND FILTER ===== */
  .search-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .filters {
    padding: 12px !important;
  }

  /* ===== FORUM/BLOG ===== */
  .forum-container,
  .blog-container,
  .post-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .forum-post,
  .blog-post,
  .post {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== DOCTOR/HOSPITAL PROFILES ===== */
  .profile-container,
  .info-section,
  .details-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ===== BUTTONS AND ACTIONS ===== */
  .button-group,
  .actions {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== DIALOG/POPOVER ===== */
  .popover,
  .tooltip,
  .dropdown {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== CHAT/MESSAGING ===== */
  .chat-container,
  .message-container,
  .messages {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== STATS/ANALYTICS ===== */
  .stats-container,
  .analytics-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ===== RESPONSIVE WIDTH ===== */
  [style*="margin-left"],
  [style*="margin-right"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== ENSURE NO HORIZONTAL SCROLL ===== */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  * {
    max-width: 100%;
  }

}

/* EXTRA SMALL DEVICES (320px - 480px) */
@media (max-width: 480px) {
  
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .page-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .patients-main,
  .appointments-main,
  .prescriptions-main,
  .reviews-main,
  .earnings-main,
  .doctors-main,
  .revenue-main,
  .settings-main,
  .analytics-main,
  .reports-main,
  .hospitals-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .form-container,
  .form-wrapper,
  .auth-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .table-container,
  .table-wrapper {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .profile-container,
  .info-section,
  .details-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .stats-container,
  .analytics-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .forum-container,
  .blog-container,
  .post-container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

}


/* ===== MODERN DESIGN ENHANCEMENTS ===== */
/* Apply modern blue styling to placeholders and labels */

:root {
  --modern-blue: #667eea;
  --modern-blue-light: #f0f4ff;
  --modern-blue-dark: #5568d3;
  --modern-text: #1a1a1a;
  --modern-border: #e0e7ff;
}

/* ===== INPUT PLACEHOLDERS - BLUE STYLING ===== */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
  opacity: 0.8;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-input-placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
}

/* Firefox */
input::-moz-placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
  opacity: 0.8;
}

/* Firefox 19+ */
input::-moz-placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
}

/* IE 10-11 */
input:-ms-input-placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
}

/* Edge */
input::-ms-input-placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 500;
}

/* ===== SEARCH INPUTS - MODERN DESIGN ===== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  border: 2px solid #e0e7ff !important;
  border: 2px solid var(--modern-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: #667eea !important;
  border-color: var(--modern-blue) !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
  outline: none !important;
  background: white !important;
  transform: translateY(-2px);
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
  border-color: #667eea !important;
  border-color: var(--modern-blue) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

/* ===== LABELS - MODERN BLUE STYLING ===== */
label {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

/* ===== NO DATA MESSAGES - MODERN DESIGN ===== */
.empty-state,
.no-data,
[class*="empty"],
[class*="no-data"]:not([class*="field"]) {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, rgba(102, 126, 234, 0.05) 100%);
  background: linear-gradient(135deg, var(--modern-blue-light) 0%, rgba(102, 126, 234, 0.05) 100%);
  border: 2px dashed #e0e7ff;
  border: 2px dashed var(--modern-border);
  border-radius: 12px;
  color: #1a1a1a;
  color: var(--modern-text);
}

.empty-state h3,
.no-data h3,
[class*="empty"] h3,
[class*="no-data"] h3 {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 8px;
}

.empty-state p,
.no-data p,
[class*="empty"] p,
[class*="no-data"] p {
  color: #666 !important;
  font-size: 14px !important;
  margin-bottom: 16px;
}

/* ===== SELECT/DROPDOWN OPTIONS ===== */
select option {
  padding: 10px;
  background: white;
  color: #1a1a1a;
  color: var(--modern-text);
  font-weight: 500;
}

select option:checked {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  background: linear-gradient(135deg, var(--modern-blue) 0%, var(--modern-blue-dark) 100%);
  color: white;
}

/* ===== DATE INPUTS - SPECIAL STYLING ===== */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 600;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.2));
}

/* ===== TEXT CONTENT STYLING ===== */
span {
  color: inherit;
}

/* Target specific text nodes for blue styling */
[class*="label"],
[class*="title"],
[class*="header"],
.text-primary,
.text-muted {
  color: #1a1a1a;
  color: var(--modern-text);
}

/* Address field styling */
.address-field,
[class*="address"] {
  background: linear-gradient(135deg, #f0f4ff 0%, rgba(102, 126, 234, 0.05) 100%);
  background: linear-gradient(135deg, var(--modern-blue-light) 0%, rgba(102, 126, 234, 0.05) 100%);
  border: 1px solid #e0e7ff;
  border: 1px solid var(--modern-border);
  border-radius: 10px;
  padding: 12px 16px;
  color: #667eea;
  color: var(--modern-blue);
}

.address-field input,
[class*="address"] input {
  background: transparent !important;
  border: none !important;
  color: #667eea !important;
  color: var(--modern-blue) !important;
}

.address-field input::placeholder,
[class*="address"] input::placeholder {
  color: #667eea !important;
  color: var(--modern-blue) !important;
  opacity: 0.7;
}

/* ===== BUTTONS WITH BLUE THEME ===== */
button {
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.2);
}

/* Primary buttons */
.btn-primary,
button.primary,
[class*="primary-btn"] {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%) !important;
  background: linear-gradient(135deg, var(--modern-blue) 0%, var(--modern-blue-dark) 100%) !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button.primary:hover,
[class*="primary-btn"]:hover {
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
}

/* ===== SEARCH BUTTON STYLING ===== */
.search-btn,
[class*="search"] button,
button[type="search"] {
  background: #667eea !important;
  background: var(--modern-blue) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.search-btn:hover,
[class*="search"] button:hover,
button[type="search"]:hover {
  background: #5568d3 !important;
  background: var(--modern-blue-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
}

/* ===== FORM GROUPS STYLING ===== */
.form-group,
.form-control,
.form-field {
  margin-bottom: 16px;
}

.form-group label,
.form-control label,
.form-field label {
  display: block;
  margin-bottom: 8px;
  color: #667eea !important;
  color: var(--modern-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* ===== HELPER TEXT ===== */
.form-text,
.help-text,
.helper-text,
small[class*="text"],
small {
  color: #999 !important;
  font-size: 12px !important;
  margin-top: 4px;
}

/* ===== ERROR MESSAGES ===== */
.error-message,
.text-danger,
[class*="error"],
.invalid-feedback {
  color: #dc3545 !important;
  font-size: 12px !important;
  margin-top: 4px;
}

/* ===== SUCCESS MESSAGES ===== */
.success-message,
.text-success,
[class*="success"],
.valid-feedback {
  color: #28a745 !important;
  font-size: 12px !important;
  margin-top: 4px;
}

/* ===== MODERN CARD STYLING ===== */
.card,
[class*="card"] {
  border: 1px solid #e0e7ff !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08) !important;
  transition: all 0.3s ease !important;
}

.card:hover,
[class*="card"]:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.12) !important;
  transform: translateY(-2px);
}

/* ===== MODAL STYLING ===== */
.modal-header {
  background: linear-gradient(135deg, #f0f4ff 0%, rgba(102, 126, 234, 0.05) 100%) !important;
  background: linear-gradient(135deg, var(--modern-blue-light) 0%, rgba(102, 126, 234, 0.05) 100%) !important;
  border-bottom: 2px solid #e0e7ff !important;
  border-bottom: 2px solid var(--modern-border) !important;
}

.modal-body {
  background: #f9fafb;
}

/* ===== MODERN TEXT COLORS ===== */
.text-blue,
[class*="blue"] {
  color: #667eea !important;
  color: var(--modern-blue) !important;
}

.text-blue-light {
  color: rgba(102, 126, 234, 0.7) !important;
}

.bg-blue-light {
  background: #f0f4ff !important;
  background: var(--modern-blue-light) !important;
}

/* ===== MODERN BADGES ===== */
.badge {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%) !important;
  background: linear-gradient(135deg, var(--modern-blue) 0%, var(--modern-blue-dark) 100%) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* ===== MODERN ALERTS ===== */
.alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 16px 20px !important;
}

.alert-info {
  background: #f0f4ff !important;
  background: var(--modern-blue-light) !important;
  color: #667eea !important;
  color: var(--modern-blue) !important;
  border-left: 4px solid #667eea !important;
  border-left: 4px solid var(--modern-blue) !important;
}

.alert-warning {
  background: #fff3cd !important;
  color: #856404 !important;
  border-left: 4px solid #ffc107 !important;
}

.alert-danger {
  background: #f8d7da !important;
  color: #721c24 !important;
  border-left: 4px solid #dc3545 !important;
}

.alert-success {
  background: #d4edda !important;
  color: #155724 !important;
  border-left: 4px solid #28a745 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  .empty-state,
  .no-data {
    padding: 30px 16px !important;
  }

  label {
    font-size: 13px !important;
  }
}

/* ===== ACCESSIBILITY ===== */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
}

/* Ensure sufficient contrast */
input[type="text"]:disabled,
input[type="search"]:disabled,
textarea:disabled,
select:disabled {
  background: #f5f5f5 !important;
  color: #999 !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== ANIMATION ===== */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group,
.form-control,
.card {
  animation: slideDown 0.3s ease;
}

/* ===== MODERN SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #667eea;
  background: var(--modern-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5568d3;
  background: var(--modern-blue-dark);
}

/* ===== FOCUS RING - MODERN ===== */
:focus-visible {
  outline: 2px solid #667eea !important;
  outline: 2px solid var(--modern-blue) !important;
  outline-offset: 2px !important;
}

/* ===== REMOVE ALL INTERNAL BORDERS ===== */

/* Remove borders from all internal elements except those needed for structure */
.search-box input,
.filter-group input,
.filter-group select,
.filter-input,
.filter-select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
textarea,
select {
  border: none !important;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border: none !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

/* Remove borders from internal elements */
.info-row,
.doctor-info-row,
.patient-card,
.doctor-card,
.hospital-card,
.appointment-card,
.review-card,
.prescription-card,
.insurance-card,
.user-card,
.filter-group,
.search-box,
.stat-card,
.card,
.info-section,
.details-section,
[class*="card"],
[class*="row"],
[class*="item"] {
  border: none !important;
}

/* Remove divider/separator borders */
.info-row {
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding-bottom: 12px;
  padding-top: 12px;
}

.info-row:last-child {
  border-bottom: none !important;
}

/* Remove table borders */
table,
tbody,
thead,
tr,
td,
th {
  border: none !important;
}

/* Remove list item borders */
li,
[role="listitem"],
.list-item,
.item {
  border: none !important;
}

/* Remove dropdown/select borders */
.dropdown,
.dropdown-menu,
select option {
  border: none !important;
}

/* Remove modal/dialog borders */
.modal,
.modal-content,
.dialog,
.popover,
.tooltip {
  border: none !important;
}

/* Remove tab borders */
.tab,
.tabs,
.tab-pane,
[role="tab"] {
  border: none !important;
}

/* Remove form group borders */
.form-group,
.form-row,
.form-container {
  border: none !important;
}

/* Remove menu/nav item borders */
.nav-item,
.menu-item,
.dropdown-item,
[role="menuitem"] {
  border: none !important;
}

/* Remove button borders (except focus state) */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: none !important;
}

/* Remove chat/message borders */
.message,
.chat-message,
.comment,
.reply {
  border: none !important;
}

/* Remove section/container borders */
.section,
.container,
.wrapper,
.content,
[class*="container"],
[class*="wrapper"],
[class*="section"] {
  border: none !important;
}

/* Dark mode - remove internal borders */
:root.dark-mode .info-row,
:root.dark-mode .doctor-info-row,
:root.dark-mode .patient-card,
:root.dark-mode .doctor-card,
:root.dark-mode .hospital-card,
:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select,
:root.dark-mode table,
:root.dark-mode [class*="card"],
:root.dark-mode [class*="row"] {
  border: none !important;
  border-color: transparent !important;
}

/* ===== MODERN TRANSITIONS ===== */
* {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/* Header Component Styles */
.header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white;
  transition: opacity 0.3s;
}

.logo:hover {
  opacity: 0.9;
}

.logo-image {
  height: 60px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .logo-image {
    height: 95px;
  }
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
}

/* Search Bar */
.search-bar-container {
  flex: 1 1;
  max-width: 600px;
  position: relative;
}

.search-bar {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.search-bar:focus-within {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.search-input {
  flex: 1 1;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  background: transparent;
}

.search-input:focus {
  outline: none;
    background: rgba(255, 255, 255, 0);
}
.search-input::placeholder {
  color: #adb5bd;
}

.search-button {
  background: none;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.search-button:hover {
  background: #f8f9fa;
}

.search-icon {
  font-size: 20px;
  color: #667eea;
  transition: transform 0.3s;
}

.search-icon.active {
  transform: scale(1.1);
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 20px;
  transition: all 0.3s;
  position: relative;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-link.login-btn {
  background: white;
  color: #667eea;
  font-weight: 600;
}

.nav-link.login-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.nav-link.register-btn {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #212529;
  font-weight: 600;
}

.nav-link.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.language-switch-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.6);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-switch-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

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

/* Notification Bell */
.notification-bell {
  position: relative;
  background: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.notification-bell:hover {
  background: rgba(255, 255, 255, 0.2);
}

.bell-icon {
  font-size: 22px;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #dc3545;
  color: white;
  font-size: 12px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* Chat Icon Button */
.chat-icon-btn {
  position: relative;
  background: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  color: white;
  margin-right: 8px;
}

.chat-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.chat-icon {
  font-size: 22px;
}

.chat-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #667eea;
  color: white;
  font-size: 12px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* User Menu */
.user-menu-container {
  position: relative;
}

.user-menu-trigger {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 25px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.user-name {
  font-size: 15px;
  font-weight: 600;
}

.dropdown-arrow {
  font-size: 12px;
  transition: transform 0.3s;
}

.user-menu-trigger:hover .dropdown-arrow,
.dropdown-arrow.active {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  min-width: 250px;
  padding: 0;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s;
  overflow: hidden;
  z-index: 1100;
}

.user-menu-trigger:hover .user-dropdown,
.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown Header */
.dropdown-header {
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.user-full-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: white;
}

.user-email {
  font-size: 12px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

/* Dropdown Divider */
.dropdown-divider {
  height: 1px;
  background: #e8e8e8;
  margin: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  color: #1a1a1a !important;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
  border: none;
  background: white !important;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.dropdown-item span {
  color: #1a1a1a !important;
}

.dropdown-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-width: 20px;
  color: #667eea;
}

.dropdown-item:hover {
  background: #f8f9fa !important;
  padding-left: 20px;
  color: #667eea !important;
}

.dropdown-item.logout-btn {
  color: #dc3545 !important;
}

.dropdown-item.logout-btn:hover {
  background: #f8d7da !important;
  color: #721c24 !important;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 30px;
}

.hamburger span {
  width: 30px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 70px;
  left: -100%;
  width: 100%;
  height: calc(100vh - 70px);
  background: white;
  z-index: 999;
  transition: left 0.3s ease;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.close-mobile-menu {
  position: absolute;
  top: 15px;
  right: 20px;
  background: #f8f9fa;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.close-mobile-menu:hover {
  background: #e9ecef;
  transform: rotate(90deg);
}

.mobile-nav-link {
  display: block;
  padding: 15px;
  color: #212529;
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s;
}

.mobile-nav-link:hover {
  background: #f8f9fa;
  padding-left: 25px;
  color: #667eea;
}

.mobile-language-switch-btn {
  background: linear-gradient(135deg, #667eea15 0%, #38b6ff15 100%);
  color: #667eea;
  font-weight: 600;
  border: 2px solid #667eea30;
  cursor: pointer;
}

.mobile-language-switch-btn:hover {
  background: linear-gradient(135deg, #667eea25 0%, #38b6ff25 100%);
  border-color: #667eea50;
}

.mobile-user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 10px;
}

.mobile-user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #667eea;
}

.mobile-user-name {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
}

.mobile-login-btn {
  background: #667eea;
  color: white;
  padding: 18px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.mobile-login-btn:hover {
  background: #5568d3;
}

.mobile-register-btn {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #212529;
  padding: 18px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.mobile-logout-btn {
  color: #dc3545;
  font-weight: 600;
}

.mobile-logout-btn:hover {
  color: #c82333;
}

.mobile-footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-top: 2px solid #e9ecef;
  margin-top: 20px;
}

.mobile-footer-links a {
  color: #6c757d;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.mobile-footer-links a:hover {
  color: #667eea;
}

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

/* Notifications Dropdown */
.notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 100px;
  width: 380px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s;
  z-index: 1001;
}

.notifications-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 2px solid #e9ecef;
}

.notifications-header h3 {
  font-size: 18px;
  color: #212529;
  margin: 0;
}

.view-all-btn {
  color: #667eea;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.3s;
}

.view-all-btn:hover {
  color: #5568d3;
}

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f8f9fa;
  transition: background 0.3s;
}

.notification-item:hover {
  background: #f8f9fa;
}

.notification-item.unread {
  background: #f0f6ff;
  border-left: 3px solid #667eea;
}

.notification-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notification-title {
  font-weight: 600;
  color: #212529;
  font-size: 15px;
}

.notification-message {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.5;
}

.notification-time {
  font-size: 12px;
  color: #adb5bd;
}

.notifications-footer {
  display: block;
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: all 0.3s;
}

.notifications-footer:hover {
  background: #e9ecef;
}

/* Chat and Notification Icon Color Control */
.chat-icon svg path,
.chat-icon svg circle {
  stroke: #fff;
  transition: stroke 0.3s;
}

.chat-icon-btn:hover .chat-icon svg path,
.chat-icon-btn:hover .chat-icon svg circle {
  stroke: #667eea;
}

.bell-icon svg path,
.bell-icon svg circle {
  stroke: #fff;
  transition: stroke 0.3s;
}

.notification-bell:hover .bell-icon svg path,
.notification-bell:hover .bell-icon svg circle {
  stroke: #667eea;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .desktop-nav {
    gap: 15px;
  }

  .nav-link {
    padding: 6px 10px;
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .search-bar-container {
    display: none;
  }

  .logo-text {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 0 12px;
    margin: 0;
    width: 100%;
  }

  .logo-icon {
    font-size: 28px;
  }

  .logo-text {
    font-size: 18px;
  }

  .mobile-menu {
    top: 65px;
    height: calc(100vh - 65px);
  }
}
/* ===== DARK MODE STYLES ===== */
:root.dark-mode .header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

:root.dark-mode .logo-text {
  color: white;
}

:root.dark-mode .nav-links a {
  color: white;
}

:root.dark-mode .nav-links a:hover {
  color: #b0b0b0;
}

:root.dark-mode .auth-buttons {
  gap: 10px;
}

:root.dark-mode .dropdown-menu {
  background: #2d2d2d;
  border-color: #404040;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

:root.dark-mode .dropdown-menu a,
:root.dark-mode .dropdown-menu button {
  color: #e8e8e8;
  background: none;
  border: none;
  padding: 10px 15px;
}

:root.dark-mode .dropdown-menu a:hover,
:root.dark-mode .dropdown-menu button:hover {
  background: #3a3a3a;
}

:root.dark-mode .notification-bell {
  color: white;
}

:root.dark-mode .notification-badge {
  background: #dc3545;
}

:root.dark-mode .chat-icon-btn {
  color: white;
}

:root.dark-mode .chat-badge {
  background: #667eea;
}

:root.dark-mode .profile-menu {
  background: white;
  color: #333;
}

:root.dark-mode .mobile-menu {
  background: #2d2d2d;
  border-color: #404040;
}

:root.dark-mode .mobile-menu a {
  color: #e8e8e8;
}

:root.dark-mode .mobile-menu a:hover {
  background: #3a3a3a;
}
/* Footer Styles */
.footer {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px 0 20px;
  margin-top: 60px;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}

.footer-section p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  opacity: 0.9;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.3s;
}

.social-links a:hover {
  opacity: 0.8;
}

.social-icons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.facebook-icon:hover {
  background: #1877F2;
}

.whatsapp-icon:hover {
  background: #25D366;
}

.social-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.3s;
  display: inline-block;
}

.footer-links a:hover {
  opacity: 0.8;
  transform: translateX(5px);
}

.newsletter-section input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 14px;
}

.newsletter-form button {
  width: 100%;
  padding: 10px;
  background: white;
  color: #667eea;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.newsletter-form button:hover {
  transform: scale(1.02);
}

.success-message {
  color: #4ade80;
  font-size: 13px;
  margin-top: 10px;
}

.footer-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.legal-links a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  opacity: 0.9;
}

.legal-links a:hover {
  opacity: 1;
}

.legal-links span {
  opacity: 0.5;
}

.trust-badges {
  display: flex;
  gap: 15px;
}

.badge {
  font-size: 12px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.contact-info {
  display: flex;
  gap: 20px;
  font-size: 13px;
  opacity: 0.9;
  flex-wrap: wrap;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
}

.footer-bottom p {
  margin: 0;
  opacity: 0.9;
}

.platform-links {
  display: flex;
  gap: 15px;
}

.platform-links a {
  color: white;
  text-decoration: none;
  opacity: 0.9;
}

.platform-links a:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-secondary {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 30px 0 15px;
    margin: 0;
  }

  .footer-container {
    margin: 0;
    padding: 0 12px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .contact-info {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: center;
  }

  .platform-links {
    flex-direction: column;
    gap: 10px;
  }

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

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

  .footer-section {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .footer-section:last-child {
    border-bottom: none;
  }

  .social-section h4 {
    margin-bottom: 20px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px 20px;
    gap: 15px 20px;
    text-align: center;
  }
}
/* ===== DARK MODE STYLES ===== */
:root.dark-mode .footer {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .footer-section h3 {
  color: white;
}

:root.dark-mode .footer-section a {
  color: rgba(255, 255, 255, 0.8);
}

:root.dark-mode .footer-section a:hover {
  color: white;
}

:root.dark-mode .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

:root.dark-mode .social-icons a {
  color: white;
}

:root.dark-mode .social-icons a:hover {
  color: #b0b0b0;
}
/* Home Page Styles */
.home-page {
  min-height: 100vh;
  background: #f8f9fa;
}

/* Hero Section */
.hero {
  text-align: center;
  padding-top: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(47, 173, 247, 0.8) 100%);
  color: white;
  border-radius: 12px;
  padding: 50px 20px;
  margin-bottom: 60px;
  position: relative;
  min-height: 320px;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero p {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

/* Search Container - New Design */
.search-container-new {
  max-width: 900px;
  margin: 0 auto;
  padding: 35px;
  border-radius: 20px;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  background: transparent;
  align-items: flex-end;
}

/* Search Step */
.search-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-label {
  font-size: 16px;
  font-weight: 600;
  color: white !important;
  text-transform: none;
}

/* Labels inside search container should be white */
.search-container-new .step-label {
  color: white !important;
}

/* Button Group for Search Type */
.button-group-horizontal {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.search-type-btn {
  flex: 1 1;
  min-width: 200px;
  padding: 16px 24px;
  background: #f0f2f5;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #495057;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.search-type-btn:hover {
  border-color: #667eea;
  background: #f8f9ff;
  color: #667eea;
}

.search-type-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* Search Select Dropdowns */
.search-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.search-select:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.25);
}

.search-select:focus {
  outline: none;
  border-color: white;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.search-select:disabled {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Style option elements */
.search-select option {
  background-color: white;
  color: #212529;
}

/* Selected value in the select shows blue */
.search-select {
  color: white;
}

.search-select:not([value=""]) {
  color: #667eea;
}

/* Search Button */
.search-btn-large {
  padding: 16px 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-btn-large:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
}

.search-btn-large:active:not(:disabled) {
  transform: translateY(-1px);
}

.search-btn-large:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    padding: 40px 15px;
    margin-bottom: 40px;
    min-height: 280px;
  }

  .hero h1 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .hero p {
    font-size: 16px;
    margin-bottom: 25px;
  }

  .search-container-new {
    padding: 20px;
    gap: 15px;
    grid-template-columns: 1fr;
  }

  .search-step {
    width: 100%;
  }

  .button-group-horizontal {
    flex-direction: column;
  }

  .search-type-btn {
    min-width: auto;
    width: 100%;
  }

  .search-select {
    padding: 12px 14px;
    font-size: 15px;
  }

  .search-btn-large {
    padding: 14px 30px;
    font-size: 16px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 30px 12px;
    margin-bottom: 30px;
    min-height: 240px;
    border-radius: 0 0 30px 30px;
  }

  .hero h1 {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .hero p {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .search-container-new {
    padding: 12px;
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .search-step {
    width: 100%;
  }

  .step-label {
    font-size: 14px;
    font-weight: 600;
  }

  .search-select {
    padding: 11px 12px;
    font-size: 14px;
    border-radius: 8px;
  }

  .search-btn-large {
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
    margin-top: 5px;
  }
}

/* Features Section */
.features {
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  box-sizing: border-box;
}

.features h2 {
  text-align: center;
  font-size: 36px;
  margin: 0 auto 50px auto;
  color: #212529;
  display: block;
  width: 100%;
  max-width: 100%;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.feature-card {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 25px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.feature-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #212529;
}

.feature-card p {
  color: #6c757d;
  line-height: 1.6;
}

/* Stats Section */
.stats-section {
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.stats-section h2 {
  display: none;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: 30px !important;
  gap: 30px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.stat-item {
  padding: 25px 15px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-item h3 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #6a75ff;
}

.stat-item p {
  font-size: 16px;
  opacity: 1;
  color: #6a75ff;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .stats-section {
    padding: 50px 15px;
  }

  .stats-section h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .stat-item h3 {
    font-size: 32px;
    margin-bottom: 5px;
  }

  .stat-item p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .stats-section {
    padding: 40px 10px;
  }

  .stats-section h2 {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .stat-item h3 {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .stat-item p {
    font-size: 12px;
  }
}

/* Specialties Section */
.specialties {
  padding: 80px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.specialties h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 50px;
  color: #212529;
}

.specialties-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.specialty-card {
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.specialty-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.specialty-card:hover .specialty-icon {
  transform: scale(1.1);
  box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
}

.specialty-icon {
  font-size: 42px;
  margin-bottom: 15px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.specialty-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #212529;
}

.specialty-card p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

/* Specialties Pagination */
.specialties-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.specialties-pagination .pagination-btn {
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.specialties-pagination .pagination-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.specialties-pagination .pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, #d0d5dd 0%, #b8bcc8 100%);
}

.specialties-pagination .page-info {
  color: #495057;
  font-weight: 600;
  font-size: 14px;
  min-width: 140px;
  text-align: center;
  background: #f5f7fa;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

/* How It Works Section */
.how-it-works {
  padding: 80px 20px;
  background: white;
}

.how-it-works h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 50px;
  color: #212529;
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.step-item {
  text-align: center;
  position: relative;
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 20px;
}

.step-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #212529;
}

.step-item p {
  color: #6c757d;
  line-height: 1.6;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.cta-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.cta-section p {
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 15px 40px;
  background: white;
  color: #667eea;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-secondary {
  padding: 15px 40px;
  background: transparent;
  color: white;
  border: 2px solid white;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.btn-secondary:hover {
  background: white;
  color: #667eea;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .search-form {
    grid-template-columns: 1fr 1fr;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    font-size: 16px;
  }

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

  .features h2,
  .specialties h2,
  .how-it-works h2 {
    font-size: 28px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .specialties-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .specialties-pagination {
    flex-wrap: wrap;
    gap: 10px;
  }

  .specialties-pagination .pagination-btn {
    padding: 10px 20px;
    font-size: 13px;
    flex: 0 1 auto;
  }

  .specialties-pagination .page-info {
    width: 100%;
    min-width: auto;
  }

  .cta-buttons {
    flex-direction: column;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .home-page {
  background: #1a1a1a;
}

:root.dark-mode .hero {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

:root.dark-mode .search-container {
  background: #2d2d2d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .search-tabs {
  border-bottom-color: #404040;
}

:root.dark-mode .search-tab {
  color: #b0b0b0;
}

:root.dark-mode .search-tab:hover,
:root.dark-mode .search-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

:root.dark-mode .search-input,
:root.dark-mode .search-select,
:root.dark-mode .search-location-input {
  background: #3a3a3a;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .search-input::placeholder,
:root.dark-mode .search-select::placeholder {
  color: #808080;
}

:root.dark-mode .search-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .features,
:root.dark-mode .specialties,
:root.dark-mode .how-it-works {
  background: transparent;
}

:root.dark-mode .features h2,
:root.dark-mode .specialties h2,
:root.dark-mode .how-it-works h2 {
  color: #e8e8e8;
}

:root.dark-mode .features p,
:root.dark-mode .specialties p,
:root.dark-mode .how-it-works p {
  color: #b0b0b0;
}

:root.dark-mode .feature-card,
:root.dark-mode .specialty-card,
:root.dark-mode .step {
  background: #2d2d2d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:root.dark-mode .feature-card h3,
:root.dark-mode .specialty-card h3,
:root.dark-mode .step h4 {
  color: #e8e8e8;
}

:root.dark-mode .feature-card p,
:root.dark-mode .specialty-card p,
:root.dark-mode .step p {
  color: #b0b0b0;
}

:root.dark-mode .cta-section {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
}

:root.dark-mode .cta-section h2,
:root.dark-mode .cta-section p {
  color: #e8e8e8;
}

:root.dark-mode .cta-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}
/* Modern Search Form Styles */
.search-form.modern-search-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: flex-end;
  background: linear-gradient(135deg, #f5f7fa 0%, #f9fafb 100%);
  padding: 2rem;
  border-radius: 12px;
  margin-top: 20px;
}

.search-form.modern-search-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-form.modern-search-form label {
  color: #667eea;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.search-input-modern,
.city-filter-modern,
.date-filter-modern {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e7ff;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  color: #1a1a1a;
  transition: all 0.3s ease;
}

.search-input-modern::placeholder,
.city-filter-modern::placeholder,
.date-filter-modern::placeholder {
  color: #667eea;
  font-weight: 500;
  opacity: 0.8;
}

.search-input-modern:focus,
.city-filter-modern:focus,
.date-filter-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  background: #fafbff;
}

.search-input-modern:hover,
.city-filter-modern:hover,
.date-filter-modern:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

/* Map Hero Section */
.map-hero-section {
  padding: 2rem;
  background: white;
  margin-bottom: 3rem;
}

.map-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
  border: 2px solid #e0e7ff;
  position: relative;
}

.map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #f9fafb 100%);
  color: #667eea;
  font-weight: 600;
  font-size: 1.1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* Responsive */
@media (max-width: 1024px) {
  .search-form.modern-search-form {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .search-form.modern-search-form .search-btn {
    grid-column: 1 / -1;
  }

  .map-hero-container {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .search-form.modern-search-form {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }

  .search-form.modern-search-form .search-btn {
    grid-column: 1;
  }

  .map-hero-section {
    padding: 1rem 0;
  }

  .map-hero-container {
    height: 300px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .search-form.modern-search-form label {
    font-size: 0.85rem;
  }

  .search-input-modern,
  .city-filter-modern,
  .date-filter-modern {
    font-size: 0.9rem;
    padding: 0.65rem 0.85rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 20px;
    margin-bottom: 2rem;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .search-form.modern-search-form {
    gap: 0.875rem;
    padding: 1rem;
  }

  .map-hero-section {
    padding: 0;
  }

  .map-hero-container {
    height: 250px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .search-container {
    padding: 15px;
    border-radius: 10px;
  }
}

/* Doctors List Section */
.doctors-list-section {
  background: #f8f9fa;
  min-height: 600px;
}

.doctors-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

.doctors-list-container h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
  color: #212529;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

/* Doctor Card */
.doctor-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

/* Row 1: Image */
.doctor-card-image {
  width: 100%;
  height: 180px;
  overflow: visible;
  background: #f0f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.doctor-avatar {
  margin: auto;
  width: 150px;
  height: 150px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  object-fit: cover;
}

/* Row 2: Doctor Name */
.doctor-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #212529;
  margin: 4px 8px 0;
  line-height: 1.2;
  text-align: center;
}

/* Row 3: Specializations */
.doctor-card-specializations {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px 4px 0;
  padding: 0 4px;
}

.spec-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Row 4: View Profile & Chat Buttons */
.doctor-card-actions-primary {
  display: flex;
  gap: 4px;
  margin: 4px 4px 0;
  padding: 0;
}

.btn-view-profile,
.btn-chat {
  flex: 1 1;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-view-profile {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-view-profile:hover {
  background: #667eea;
  color: white;
}

.btn-chat {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.btn-chat:hover {
  background: #ffc107;
  color: white;
}

/* Row 5: Book Appointment Button */
.doctor-card-actions-secondary {
  margin: 2px 4px 0;
  padding: 0;
}

.btn-book-appointment {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
}

.btn-book-appointment:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.2);
}

/* Row 6: Schedule */
.doctor-card-schedule {
  margin: 2px 4px 0;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.schedule-hospital,
.schedule-time {
  display: inline-block;
  background: #f0f3ff;
  color: #667eea;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-schedule {
  font-size: 10px;
  color: #adb5bd;
}

.doctors-loading,
.no-doctors {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
  font-size: 18px;
}

.show-all-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.show-all-btn {
  display: inline-block;
  padding: 14px 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.show-all-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

@media (max-width: 768px) {
  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .doctors-list-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .doctor-card-name {
    font-size: 12px;
  }

  .spec-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .btn-view-profile,
  .btn-chat {
    font-size: 10px;
    padding: 4px 5px;
  }

  .btn-book-appointment {
    font-size: 10px;
    padding: 5px 7px;
  }
}

/* Hospital List Section Styles */
.hospitals-list-section {
  padding: 60px 20px;
  background: #f8f9fa;
}

.hospitals-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

.hospitals-list-container h2 {
  font-size: 32px;
  color: #212529;
  margin-bottom: 10px;
  font-weight: 700;
}

.filter-info {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 30px;
}

.hospitals-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #667eea;
  font-weight: 600;
  font-size: 16px;
}

.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.hospital-card-link {
  text-decoration: none;
  color: inherit;
}

.hospital-card.modern {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid #e9ecef;
}

.hospital-card.modern:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.hospital-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f0f2f5;
}

.hospital-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hospital-card.modern:hover .hospital-image {
  transform: scale(1.05);
}

.hospital-card-body {
  padding: 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.hospital-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

.hospital-name {
  font-size: 18px;
  color: #212529;
  margin: 0;
  font-weight: 700;
  flex: 1 1;
}

.rating {
  background: #fff3cd;
  color: #997404;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.hospital-address {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}

.hospital-doctors-count {
  color: #667eea;
  font-weight: 600;
  font-size: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
}

.no-hospitals {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.no-hospitals p {
  font-size: 18px;
  margin: 0;
}

@media (max-width: 1024px) {
  .hospitals-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .hospitals-list-container h2 {
    font-size: 24px;
  }

  .hospitals-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }

  .hospital-image-container {
    height: 150px;
  }

  .hospital-card-body {
    padding: 15px;
  }

  .hospital-name {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hospitals-grid {
    grid-template-columns: 1fr;
  }

  .hospitals-list-container h2 {
    font-size: 20px;
  }

  /* Override circular elements on mobile */
  [class*="avatar"],
  .spinner,
  .doctor-avatar {
    border-radius: 5% !important;
    margin: auto !important;
  }

  .doctor-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* Doctor List Page Styles */
.doctor-list {
  min-height: 100vh;
  background: white;
  padding: 40px 20px;
}

/* Status Message */
.status-message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  animation: slideIn 0.3s ease-out;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.status-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

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

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 60px 20px;
  color: white;
  border-radius: 15px;
}

.page-header h1 {
  font-size: 42px;
  margin-bottom: 15px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  opacity: 0.9;
}

/* Filters Section */
.filters-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.search-filters {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1 1;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
}

.search-button {
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.search-button:hover {
  transform: translateY(-2px);
}

.filters-row {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: nowrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
  min-width: 180px;
}

.filter-group label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.filter-select {
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
}

.sort-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
  min-width: 180px;
}

.sort-options label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

/* Results Section */
.results-count {
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Loading, Error, Empty States */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
  font-size: 18px;
}

.error {
  text-align: center;
  padding: 60px 20px;
  color: #dc3545;
  font-size: 18px;
  background: #fff5f5;
  border-radius: 15px;
  margin: 20px;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 15px;
  max-width: 1400px;
  margin: 0 auto;
}

.empty-state h3 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  font-size: 16px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.pagination-btn {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #6c757d;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #667eea;
  color: #667eea;
}

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

.page-info {
  color: #6c757d;
  font-weight: 500;
  margin: 0 15px;
}

/* Doctors Grid */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 40px;
  padding: 0 8px;
}

/* Doctor Card */
.doctor-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid #f0f0f0;
  margin: 8px;
}

.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  background: #f9fbff;
}

/* Row 1: Image */
.doctor-card-image {
  width: 100%;
  height: 180px;
  overflow: visible;
  background: #f0f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.doctor-avatar {
  margin: auto;
  width: 150px;
  height: 150px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  object-fit: cover;
}

/* Row 2: Doctor Name */
.doctor-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #212529;
  margin: 4px 8px 0;
  line-height: 1.2;
  text-align: center;
}

/* Row 3: Specializations */
.doctor-card-specializations {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px 4px 0;
  padding: 0 4px;
}

.spec-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Row 4: View Profile & Chat Buttons */
.doctor-card-actions-primary {
  display: flex;
  gap: 4px;
  margin: 4px 4px 0;
  padding: 0;
}

.btn-view-profile,
.btn-chat {
  flex: 1 1;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-view-profile {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-view-profile:hover {
  background: #667eea;
  color: white;
}

.btn-chat {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.btn-chat:hover {
  background: #ffc107;
  color: white;
}

/* Row 5: Book Appointment Button */
.doctor-card-actions-secondary {
  margin: 2px 4px 0;
  padding: 0;
}

.btn-book-appointment,
.btn-invite,
.btn-invited-status {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-book-appointment {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-book-appointment:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.2);
}

.btn-invite {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-invite:hover {
  background: #667eea;
  color: white;
}

.btn-invited-status {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Row 6: Schedule */
.doctor-card-schedule {
  margin: 2px 4px 0;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.schedule-hospital,
.schedule-time {
  display: inline-block;
  background: #f0f3ff;
  color: #667eea;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-schedule {
  font-size: 10px;
  color: #adb5bd;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }

  .page-header p {
    font-size: 16px;
  }

  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .filters-row {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .filter-group,
  .sort-options {
    min-width: auto;
    width: 100%;
  }

  .doctor-header {
    flex-direction: column;
  }

  .post-actions {
    width: 100%;
  }

  .view-profile-btn,
  .book-appointment-btn {
    width: 100%;
  }

  /* ===== MOBILE OPTIMIZED DOCTOR CARD ===== */
  .doctor-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Row 1: Image */
  .doctor-card-image {
    width: 100%;
    height: 160px;
    margin-bottom: 8px;
  }

  .doctor-avatar {
    width: 120px;
    height: 120px;
  }

  /* Row 2: Doctor Name - Full Width */
  .doctor-card-name {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 0 12px;
    text-align: center;
  }

  /* Row 3: Specializations - Max 2, Full Width */
  .doctor-card-specializations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px 0;
    padding: 0 12px;
  }

  .spec-badge {
    font-size: 11px;
    padding: 4px 10px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 3px);
    max-width: 140px;
    text-align: center;
  }

  /* Row 4: Buttons - Full Width Stack */
  .doctor-card-actions-primary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 8px 0;
    padding: 0 12px;
  }

  .btn-view-profile,
  .btn-chat {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Secondary Actions - Full Width */
  .doctor-card-actions-secondary {
    margin: 0 0 8px 0;
    padding: 0 12px;
  }

  .btn-invite {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Row 5: Schedule - Full Width */
  .doctor-card-schedule {
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    background: #f0f3ff;
    border-top: 1px solid #e0e7ff;
    border-radius: 0;
  }

  .schedule-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .schedule-hospital,
  .schedule-time {
    display: block;
    background: transparent;
    color: #667eea;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .doctor-card-image {
    height: 140px;
  }

  .doctor-avatar {
    width: 100px;
    height: 100px;
  }

  .doctor-card-name {
    font-size: 13px;
  }

  .spec-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .btn-view-profile,
  .btn-chat,
  .btn-invite {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .doctor-list-page {
  background: #1a1a1a;
}

:root.dark-mode .list-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .filter-container {
  background: #2d2d2d;
  border-color: #404040;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-input,
:root.dark-mode .filter-select {
  background: #3a3a3a;
  color: #e8e8e8;
  border-color: #404040;
}



/* ===== DARK MODE STYLES ===== */
:root.dark-mode .doctor-list-page {
  background: #1a1a1a;
}

:root.dark-mode .list-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .filter-container {
  background: #2d2d2d;
  border-color: #404040;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-input,
:root.dark-mode .filter-select {
  background: #3a3a3a;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .doctor-card {
  background: #2d2d2d;
  border-color: #404040;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root.dark-mode .doctor-card-image {
  background: #404040;
}

:root.dark-mode .doctor-card-name {
  color: #e8e8e8;
}

:root.dark-mode .spec-badge {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .btn-view-profile {
  background: #3a3a3a;
  color: #38b6ff;
  border-color: #38b6ff;
}

:root.dark-mode .btn-view-profile:hover {
  background: #38b6ff;
  color: #2d2d2d;
}

:root.dark-mode .btn-chat {
  background: #3a3a3a;
  color: #ffc107;
  border-color: #ffc107;
}

:root.dark-mode .btn-chat:hover {
  background: #ffc107;
  color: #2d2d2d;
}

:root.dark-mode .btn-book-appointment {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .schedule-hospital,
:root.dark-mode .schedule-time {
  background: #3a3a3a;
  color: #38b6ff;
}

/* Doctor Profile Page Styles */
.doctor-profile-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 40px 20px;
}

/* Profile Header */
.profile-header {
  max-width: 1400px;
  margin: 0 auto 40px;
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.profile-header-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 40px;
  gap: 40px;
  align-items: start;
  margin-bottom: 30px;
}

.doctor-avatar-large {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #667eea;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.doctor-info-main h1 {
  font-size: 36px;
  color: #212529;
  margin-bottom: 10px;
}

.doctor-specialty {
  color: #667eea;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.doctor-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.doctor-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-size: 16px;
}

.doctor-detail-icon {
  font-size: 20px;
}

.doctor-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.book-now-btn {
  padding: 15px 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s;
}

.book-now-btn:hover {
  transform: translateY(-3px);
}

.favorite-btn-large {
  padding: 12px;
  background: #f8f9fa;
  color: #6c757d;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.favorite-btn-large:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.rating-overall {
  text-align: center;
}

.rating-number {
  font-size: 48px;
  font-weight: 700;
  color: #212529;
}

.rating-stars {
  color: #ffc107;
  font-size: 24px;
  margin-top: 5px;
}

.rating-details {
  flex: 1 1;
}

.rating-details h4 {
  color: #212529;
  margin-bottom: 10px;
  font-size: 18px;
}

.review-count {
  color: #6c757d;
  font-size: 14px;
}

/* Profile Content */
.profile-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 40px;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.content-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.content-section h2 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid #667eea;
}

.about-text {
  color: #6c757d;
  line-height: 1.8;
  font-size: 16px;
}

/* Specializations */
.specializations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.specialization-tag {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* Experience */
.experience-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 15px;
}

.experience-item h4 {
  color: #212529;
  font-size: 18px;
  margin-bottom: 10px;
}

.experience-period {
  color: #667eea;
  font-weight: 600;
  margin-bottom: 10px;
}

.experience-description {
  color: #6c757d;
  line-height: 1.6;
  font-size: 15px;
}

/* Schedule */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.schedule-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.schedule-day {
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
}

.schedule-time {
  color: #6c757d;
  font-size: 14px;
}

.schedule-item.closed {
  background: #f8d7da;
}

.schedule-item.closed .schedule-time {
  color: #721c24;
}

/* Reviews */
.review-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h4 {
  color: #212529;
  font-size: 16px;
  margin-bottom: 5px;
}

.review-date {
  color: #6c757d;
  font-size: 14px;
}

.review-rating {
  color: #ffc107;
  font-size: 18px;
}

.review-text {
  color: #495057;
  line-height: 1.6;
  font-size: 15px;
}

.load-more-btn {
  width: 100%;
  padding: 15px;
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.load-more-btn:hover {
  background: #667eea;
  color: white;
}

/* Sidebar */
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.contact-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.contact-card h3 {
  color: #212529;
  font-size: 22px;
  margin-bottom: 20px;
}

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

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-item-icon {
  font-size: 24px;
  color: #667eea;
}

.contact-item-info h4 {
  color: #212529;
  font-size: 14px;
  margin-bottom: 5px;
}

.contact-item-info p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.hospital-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  align-items: center;
}

.hospital-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.hospital-info h4 {
  color: #212529;
  font-size: 16px;
  margin-bottom: 5px;
}

.hospital-info p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.map-placeholder {
  background: #e9ecef;
  height: 300px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 18px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .profile-content {
    grid-template-columns: 1fr;
  }

  .sidebar-sticky {
    position: static;
  }
}

@media (max-width: 768px) {
  .profile-header-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .doctor-avatar-large {
    margin: 0 auto;
  }

  .profile-header h1 {
    font-size: 28px;
  }

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

  .rating-summary {
    flex-direction: column;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .doctor-profile-container {
  background: #1a1a1a;
}

:root.dark-mode .profile-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .profile-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .profile-header p {
  color: #b0b0b0;
}

:root.dark-mode .doctor-avatar-large {
  border: 3px solid #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .profile-actions {
  gap: 10px;
  margin-top: 15px;
}

:root.dark-mode .action-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .action-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .action-btn.secondary {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .action-btn.secondary:hover {
  background: #606060;
}

:root.dark-mode .rating-summary {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .rating-value {
  color: #667eea;
}

:root.dark-mode .rating-count {
  color: #b0b0b0;
}

:root.dark-mode .profile-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  margin-bottom: 20px;
}

:root.dark-mode .profile-section h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .section-content {
  color: #e8e8e8;
}

:root.dark-mode .info-row {
  border-bottom: 1px solid #404040;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

:root.dark-mode .info-row:last-child {
  border-bottom: none;
}

:root.dark-mode .info-label {
  color: #b0b0b0;
  font-weight: 500;
}

:root.dark-mode .info-value {
  color: #e8e8e8;
}

:root.dark-mode .specializations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:root.dark-mode .specialization-badge {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

:root.dark-mode .languages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:root.dark-mode .language-item {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
}

:root.dark-mode .education-item {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}

:root.dark-mode .education-item:last-child {
  margin-bottom: 0;
}

:root.dark-mode .education-degree {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .education-school {
  color: #b0b0b0;
  font-size: 0.9rem;
}

:root.dark-mode .education-year {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .experience-item {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}

:root.dark-mode .experience-item:last-child {
  margin-bottom: 0;
}

:root.dark-mode .experience-title {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .experience-hospital {
  color: #b0b0b0;
  font-size: 0.9rem;
}

:root.dark-mode .experience-duration {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .reviews-card {
  background: transparent;
}

:root.dark-mode .review-item {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .review-item:last-child {
  margin-bottom: 0;
}

:root.dark-mode .review-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

:root.dark-mode .review-author {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .review-date {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .review-rating {
  color: #ffc107;
}

:root.dark-mode .review-text {
  color: #b0b0b0;
}

:root.dark-mode .availability-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

:root.dark-mode .availability-status {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

:root.dark-mode .availability-status.available {
  background: rgba(51, 150, 51, 0.2);
  color: #4db84d;
}

:root.dark-mode .availability-status.unavailable {
  background: rgba(150, 51, 51, 0.2);
  color: #cc6666;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

/* Hospital List Page Styles */
.hospital-list-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 0;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 60px 20px;
  color: white;
  border-radius: 15px;
}

.page-header h1 {
  font-size: 42px;
  margin-bottom: 15px;
  font-weight: 700;
  color: white;
}

.page-header p {
  font-size: 18px;
  opacity: 0.9;
  color: white;
}

/* Search Container - New Design */
.search-container-new {
  max-width: 1400px;
  margin: 0 auto 60px auto;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

/* Search Step */
.search-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1;
  min-width: 200px;
}

.step-label {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  text-transform: none;
}

/* Search Select Dropdowns */
.search-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #495057;
}

.search-select:hover {
  border-color: #667eea;
}

.search-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-select:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
  color: #adb5bd;
  border-color: #e9ecef;
}

/* Map Section */
.map-hero-section {
  padding: 2rem;
  background: white;
  margin-bottom: 3rem;
}

.map-hero-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
  border: 2px solid #e0e7ff;
  position: relative;
}

.map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #f9fafb 100%);
  color: #667eea;
  font-weight: 600;
  font-size: 1.1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

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

.search-input,
.city-filter {
  flex: 1 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.search-input:focus,
.city-filter:focus {
  outline: none;
  border-color: #667eea;
}

.loading-message {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
}

.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .hospitals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .hospitals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .hospitals-grid {
    grid-template-columns: 1fr;
  }
}

.hospital-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: none;
}

  .hospital-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

.hospital-image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.chat-icon-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  color: #667eea;
  font-size: 2rem;
  border-radius: 50%;
  padding: 6px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(102,126,234,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon-overlay {
  position: absolute;
  top: 56px;
  left: 16px;
  background: #fff;
  color: #667eea;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: 6px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(102,126,234,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.phone-icon-overlay .phone-number {
  display: none;
}

.hospital-card:hover .chat-icon-overlay,
.hospital-card:hover .phone-icon-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1.1);
}
.hospital-card:hover .chat-icon-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1.1);
}

.hospital-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hospital-type-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.hospital-card-body {
  padding: 25px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.hospital-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.hospital-name {
  font-size: 1.3rem;
  color: #212529;
  margin: 0;
  font-weight: 700;
}

.hospital-location {
  color: #667eea;
  font-weight: 600;
  margin: 0.5rem 0 1rem 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hospital-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
  font-size: 14px;
}

.meta-icon {
  font-size: 18px;
  color: #667eea;
}

.hospital-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stars {
  color: #ffc107;
  font-size: 18px;
}

.rating-text {
  color: #6c757d;
  font-size: 14px;
}

.reviews-count {
  color: #667eea;
  font-weight: 600;
}

.doctors-count {
  color: #667eea;
  font-weight: 600;
  margin: 0.5rem 0 0 0;
}

.hospital-card-footer {
  display: flex;
  gap: 10px;
  margin: 20px 25px 25px 25px;
}

.hospital-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.hospital-card h3 {
  font-size: 1.3rem;
  color: #212529;
  margin: 0;
}

.rating {
  background: #fff3cd;
  color: #856404;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.hospital-location {
  color: #667eea;
  font-weight: 600;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.hospital-address {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.hospital-phone {
  color: #495057;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.doctors-count {
  color: #667eea;
  font-weight: 600;
  margin: 0.5rem 0;
}

.hospital-card-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.view-details-btn {
  flex: 1 1;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.3s;
}

.view-details-btn:hover {
  transform: translateY(-2px);
}

.chat-btn {
  flex: 1 1;
  padding: 0.75rem;
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.chat-btn:hover {
  background: #ffc107;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.request-join-btn {
  flex: 1 1;
  padding: 0.75rem;
  background: #e7f3ff;
  color: #0c63e4;
  border: 2px solid #0d6efd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.request-join-btn:hover:not(:disabled) {
  background: #0d6efd;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.request-join-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.request-join-btn.requested {
  background: #d1e7dd;
  color: #0f5132;
  border-color: #198754;
}

.no-results {
  text-align: center;
  padding: 3rem;
  background: #f8f9fa;
  border-radius: 12px;
  color: #6c757d;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .search-container-new {
    gap: 15px;
  }

  .search-step {
    min-width: 180px;
  }

  .map-hero-container {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .search-container-new {
    flex-direction: column;
    gap: 20px;
    padding: 25px;
  }

  .search-step {
    width: 100%;
    min-width: auto;
  }

  .map-hero-section {
    padding: 1rem 0;
  }

  .map-hero-container {
    height: 300px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .hospital-list-container {
    padding: 1rem;
  }

  .page-header h1 {
    font-size: 2rem;
  }

  .search-filters {
    flex-direction: column;
  }

  .hospitals-grid {
    grid-template-columns: 1fr;
  }
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  align-items: end;
}

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

.filter-group label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.filter-group input,
.filter-group select {
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: #667eea;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.filter-btn {
  flex: 1 1;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.filter-btn:hover {
  transform: translateY(-2px);
}

.clear-btn {
  background: #6c757d;
}

/* Results Section */
.results-section {
  max-width: 1400px;
  margin: 0 auto;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.results-count {
  font-size: 18px;
  color: #6c757d;
}

.results-count strong {
  color: #667eea;
  font-weight: 700;
}

.sort-select {
  padding: 10px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* Hospitals Grid */
.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

/* Hospital Card */
.hospital-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

.hospital-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hospital-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.hospital-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hospital-type-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.hospital-card-body {
  padding: 25px;
}

.hospital-name {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 10px;
}

.hospital-location {
  color: #6c757d;
  font-size: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hospital-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
  font-size: 14px;
}

.meta-icon {
  font-size: 18px;
  color: #667eea;
}

.hospital-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stars {
  color: #ffc107;
  font-size: 18px;
}

.rating-text {
  color: #6c757d;
  font-size: 14px;
}

.reviews-count {
  color: #667eea;
  font-weight: 600;
}

.hospital-card-footer {
  display: flex;
  gap: 10px;
}

.view-doctors-btn {
  flex: 1 1;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.view-doctors-btn:hover {
  transform: translateY(-2px);
}

.view-details-btn {
  flex: 1 1;
  padding: 12px;
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.view-details-btn:hover {
  background: #667eea;
  color: white;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.pagination-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #6c757d;
  transition: all 0.3s;
}

.pagination-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.pagination-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

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

/* Loading State */
.loading-state {
  text-align: center;
  padding: 60px;
  color: #6c757d;
  font-size: 18px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 15px;
}

.empty-state-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }

  .page-header p {
    font-size: 16px;
  }

  .hospitals-grid {
    grid-template-columns: 1fr;
  }

  .results-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .hospital-meta {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    flex-direction: column;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .hospital-list-container {
  background: #1a1a1a;
}

:root.dark-mode .page-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .page-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .page-header p {
  color: #b0b0b0;
}

:root.dark-mode .page-header .search-bar {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .page-header .search-bar::placeholder {
  color: #909090;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .results-header {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .results-header .result-text,
:root.dark-mode .results-header .sort-option {
  color: #b0b0b0;
}

:root.dark-mode .results-header select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .hospital-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .hospital-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .hospital-logo {
  background: #667eea;
  color: white;
}

:root.dark-mode .hospital-info h3 {
  color: #e8e8e8;
}

:root.dark-mode .hospital-info p {
  color: #b0b0b0;
}

:root.dark-mode .hospital-meta {
  border-top: 1px solid #404040;
  padding-top: 15px;
  margin-top: 15px;
  color: #b0b0b0;
}

:root.dark-mode .meta-item strong {
  color: #667eea;
}

:root.dark-mode .hospital-actions {
  border-top: 1px solid #404040;
  padding-top: 15px;
  margin-top: 15px;
}

:root.dark-mode .action-btn {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .view-details-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
}

:root.dark-mode .chat-btn {
  background: #b8860b;
  color: white;
  border: 2px solid #ffc107;
}


:root.dark-mode .action-btn.primary {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .action-btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}
/* Modern Search Form Styles */
.search-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: flex-end;
  background: linear-gradient(135deg, #f5f7fa 0%, #f9fafb 100%);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
}

.search-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-form label {
  color: #667eea;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.search-input-modern,
.city-filter-modern,
.date-filter-modern {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e7ff;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  color: #1a1a1a;
  transition: all 0.3s ease;
}

.search-input-modern::placeholder,
.city-filter-modern::placeholder,
.date-filter-modern::placeholder {
  color: #667eea;
  font-weight: 500;
  opacity: 0.8;
}

.search-input-modern:focus,
.city-filter-modern:focus,
.date-filter-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  background: #fafbff;
}

.search-input-modern:hover,
.city-filter-modern:hover,
.date-filter-modern:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

.search-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

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

/* Map Section */
.map-section {
  margin-bottom: 3rem;
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
}

.map-container {
  width: 100%;
  height: 450px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e7ff;
}

.map-container .loading-message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #f9fafb 100%);
  color: #667eea;
  font-weight: 600;
}

/* Hospitals Section */
.hospitals-section {
  margin-top: 3rem;
}

.hospitals-section h2 {
  font-size: 1.8rem;
  color: #212529;
  margin-bottom: 2rem;
  font-weight: 700;
}

.filter-info {
  background: #e7f3ff;
  border-left: 4px solid #667eea;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 2rem;
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .search-form {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .search-btn {
    grid-column: 1 / -1;
  }

  .map-container {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .search-form {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }

  .search-btn {
    grid-column: 1;
  }

  .map-container {
    height: 300px;
  }

  .hospitals-grid {
    grid-template-columns: 1fr;
  }

  .search-form label {
    font-size: 0.85rem;
  }

  .search-input-modern,
  .city-filter-modern,
  .date-filter-modern {
    font-size: 0.9rem;
    padding: 0.65rem 0.85rem;
  }
}

@media (max-width: 480px) {
  .hospital-list-container {
    padding: 1rem;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .page-header p {
    font-size: 0.95rem;
  }

  .search-form {
    gap: 0.875rem;
    padding: 1rem;
  }

  .map-container {
    height: 250px;
  }

  .map-hero-section {
    padding: 0;
  }

  .map-hero-container {
    height: 250px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .hospitals-section h2 {
    font-size: 1.4rem;
  }
}
/* Hospital Profile Page Styles */
.hospital-profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.back-button {
  padding: 0.5rem 1rem;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 2rem;
  transition: all 0.3s;
}

.back-button:hover {
  background: #e9ecef;
  transform: translateX(-5px);
}

.hospital-header-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
}

.hospital-header-section .hospital-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hospital-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hospital-info h1 {
  font-size: 2.5rem;
  color: #212529;
  margin: 0 0 1rem 0;
  font-weight: 700;
  line-height: 1.2;
}

.hospital-details {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hospital-details p {
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.4;
}

.location {
  color: #667eea;
  font-weight: 600;
  font-size: 1rem;
}

.location-meta {
  color: #6c757d;
  font-size: 0.9rem;
}

.phone {
  color: #495057;
  font-weight: 500;
}

.manager {
  color: #667eea;
  font-weight: 500;
}

.hospital-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e9ecef;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #667eea;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  color: #6c757d;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Map Section Styles */
.map-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.map-header h2 {
  font-size: 1.5rem;
  color: #212529;
  margin: 0;
}

.open-google-maps-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.open-google-maps-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.open-google-maps-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.hospital-map-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 400px;
  width: 100%;
}

.doctors-section {
  margin-bottom: 2rem;
}

.doctors-section h2 {
  font-size: 2rem;
  color: #212529;
  margin-bottom: 2rem;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.doctor-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.doctor-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.doctor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.doctor-card h3 {
  font-size: 1.2rem;
  color: #212529;
  margin: 0;
}

.rating {
  background: #fff3cd;
  color: #856404;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.specialization {
  color: #667eea;
  font-weight: 600;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.experience {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.fees {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.fees span {
  background: #f0f0f0;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  color: #495057;
}

.view-doctor-btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.3s;
  margin-top: 1rem;
}

.view-doctor-btn:hover {
  transform: translateY(-2px);
}

.no-doctors {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  border-radius: 12px;
  color: #6c757d;
  border: 2px dashed #dee2e6;
}

.no-doctors p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.no-doctors-hint {
  font-size: 0.9rem;
  color: #adb5bd;
  margin-top: 0.5rem;
  font-style: italic;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .hospital-profile-container {
    padding: 1rem;
  }

  .hospital-header-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .hospital-info h1 {
    font-size: 2rem;
  }

  .hospital-title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .hospital-action {
    width: 100%;
    justify-content: stretch;
    margin-top: 1.5rem;
  }

  .request-join-btn {
    align-self: stretch;
    text-align: center;
  }

  .map-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .open-google-maps-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .hospital-map-container {
    height: 300px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .doctors-section h2 {
    font-size: 1.5rem;
  }

  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .hospital-stats {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .no-doctors {
    padding: 3rem 1rem;
  }
}

.hospital-info-main h1 {
  font-size: 36px;
  color: #212529;
  margin-bottom: 10px;
}

.hospital-type {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}

.hospital-location {
  color: #6c757d;
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hospital-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.hospital-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #495057;
  font-size: 15px;
}

.detail-icon {
  font-size: 22px;
  color: #667eea;
}

.hospital-rating-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.rating-overall {
  text-align: center;
}

.rating-number {
  font-size: 48px;
  font-weight: 700;
  color: #212529;
}

.rating-stars {
  color: #ffc107;
  font-size: 24px;
  margin-top: 5px;
}

.rating-details {
  flex: 1 1;
}

.rating-details h4 {
  color: #212529;
  margin-bottom: 10px;
  font-size: 18px;
}

.review-count {
  color: #6c757d;
  font-size: 14px;
}

/* Profile Content */
.profile-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 40px;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.content-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.content-section h2 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid #667eea;
}

.about-text {
  color: #6c757d;
  line-height: 1.8;
  font-size: 16px;
}

/* Facilities */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.facility-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s;
}

.facility-item:hover {
  transform: translateY(-3px);
  background: #667eea;
  color: white;
}

.facility-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.facility-name {
  font-size: 14px;
  font-weight: 500;
}

/* Departments */
.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.department-card {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
  text-decoration: none;
}

.department-card:hover {
  transform: translateY(-3px);
}

.department-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.department-name {
  font-size: 16px;
  font-weight: 600;
}

/* Doctors Section */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.doctor-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s;
  text-decoration: none;
  color: inherit;
}

.doctor-card:hover {
  transform: translateY(-5px);
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-bottom: 15px;
}

.doctor-card h3 {
  font-size: 18px;
  color: #212529;
  margin-bottom: 10px;
}

.doctor-specialty {
  color: #667eea;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.doctor-experience {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
}

.view-profile-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.view-profile-btn:hover {
  transform: translateY(-2px);
}

/* Sidebar */
.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.contact-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.contact-card h3 {
  color: #212529;
  font-size: 22px;
  margin-bottom: 20px;
}

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

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-item-icon {
  font-size: 24px;
  color: #667eea;
}

.contact-item-info h4 {
  color: #212529;
  font-size: 14px;
  margin-bottom: 5px;
}

.contact-item-info p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.map-placeholder {
  background: #e9ecef;
  height: 300px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 18px;
  margin-bottom: 20px;
}

.opening-hours {
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.opening-hours h4 {
  color: #212529;
  font-size: 18px;
  margin-bottom: 15px;
}

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

.hours-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 5px;
}

.hours-day {
  font-weight: 500;
  color: #212529;
}

.hours-time {
  color: #6c757d;
}

.hours-item.closed {
  background: #f8d7da;
}

.hours-item.closed .hours-time {
  color: #721c24;
}

.book-appointment-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s;
  margin-top: 20px;
}

.book-appointment-btn:hover {
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .profile-content {
    grid-template-columns: 1fr;
  }

  .sidebar-sticky {
    position: static;
  }
}

@media (max-width: 768px) {
  .hospital-header-content {
    grid-template-columns: 1fr;
  }

  .profile-header h1 {
    font-size: 28px;
  }

  .hospital-details {
    grid-template-columns: 1fr;
  }

  .rating-summary {
    flex-direction: column;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .hospital-profile-container {
  background: #1a1a1a;
}

:root.dark-mode .profile-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .profile-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .profile-header p {
  color: #b0b0b0;
}

:root.dark-mode .hospital-logo {
  border: 3px solid #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .hospital-actions {
  gap: 10px;
  margin-top: 15px;
}

:root.dark-mode .action-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .action-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .action-btn.secondary {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .action-btn.secondary:hover {
  background: #606060;
}

:root.dark-mode .rating-summary {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .rating-value {
  color: #667eea;
}

:root.dark-mode .rating-count {
  color: #b0b0b0;
}

:root.dark-mode .hospital-content {
  gap: 20px;
}

:root.dark-mode .hospital-main {
  gap: 20px;
}

:root.dark-mode .hospital-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .hospital-section h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .hospital-section h3 {
  color: #667eea;
  margin-bottom: 10px;
}

:root.dark-mode .hospital-section p {
  color: #b0b0b0;
}

:root.dark-mode .info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .info-row:last-child {
  border-bottom: none;
}

:root.dark-mode .info-label {
  color: #b0b0b0;
  font-weight: 500;
}

:root.dark-mode .info-value {
  color: #e8e8e8;
}

:root.dark-mode .contact-info {
  gap: 10px;
}

:root.dark-mode .contact-item {
  background: #1a1a1a;
  padding: 10px 15px;
  border-radius: 4px;
  border-left: 3px solid #667eea;
}

:root.dark-mode .contact-item-label {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .contact-item-value {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .contact-item-value a {
  color: #667eea;
}

:root.dark-mode .contact-item-value a:hover {
  color: #7b8ff5;
}

:root.dark-mode .departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

:root.dark-mode .department-card {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

:root.dark-mode .department-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .department-icon {
  color: #667eea;
  font-size: 32px;
  margin-bottom: 10px;
}

:root.dark-mode .department-name {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .department-count {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .facilities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

:root.dark-mode .facility-badge {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

:root.dark-mode .hospital-sidebar {
  gap: 20px;
}

:root.dark-mode .sidebar-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .sidebar-card h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

:root.dark-mode .sidebar-card p {
  color: #b0b0b0;
  font-size: 0.9rem;
}

/* Hospital Title Section */
.hospital-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hospital-title-section h1 {
  margin: 0;
  flex-shrink: 0;
}

.verified-badge {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Location Meta */
.location-meta {
  color: #6c757d;
  font-size: 0.95rem;
  margin: 0.5rem 0 !important;
}

.manager {
  color: #667eea;
  font-weight: 500;
}

/* Request to Join Button */
.request-join-btn {
  padding: 0.85rem 1.8rem;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  height: -webkit-fit-content;
  height: fit-content;
  align-self: center;
}

.request-join-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.request-join-btn:active:not(:disabled) {
  transform: translateY(0);
}

.request-join-btn:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.request-join-btn.success {
  background: linear-gradient(135deg, #28a745, #20c997);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.request-join-btn.already-member {
  background: linear-gradient(135deg, #6c757d, #495057);
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}

/* Success Message */
.success-message {
  background: #d4edda;
  color: #155724;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #28a745;
}

/* Specializations Section */
.specializations-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.specializations-section h2 {
  font-size: 1.5rem;
  color: #212529;
  margin-bottom: 1.5rem;
}

.specializations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.specialization-badge {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}

.specialization-badge:hover {
  transform: translateY(-2px);
}

/* Hospital Info Section */
.hospital-info-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hospital-info-section h2 {
  font-size: 1.5rem;
  color: #212529;
  margin-bottom: 1.5rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.info-item {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.info-item label {
  display: block;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item p {
  color: #212529;
  margin: 0;
  font-size: 1rem;
}

.info-item a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.info-item a:hover {
  color: #38b6ff;
}

.manager-email {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Location Info */
.location-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.location-info p {
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
}

.location-info strong {
  color: #212529;
}

:root.dark-mode .reviews-section {
  background: transparent;
}

:root.dark-mode .review-item {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .review-item:last-child {
  margin-bottom: 0;
}

:root.dark-mode .review-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

:root.dark-mode .review-author {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .review-date {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .review-rating {
  color: #ffc107;
}

:root.dark-mode .review-text {
  color: #b0b0b0;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}
/* Login & Register Page Styles */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.auth-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  max-width: 750px;
  width: 100%;
  display: block;
}

/* Left Side - Image/Info */
.auth-info {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.auth-info h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

.auth-info p {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 40px;
}

.auth-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: 15px;
}

.auth-feature-icon {
  font-size: 28px;
}

.auth-feature-text {
  font-size: 16px;
  opacity: 0.95;
}

/* Right Side - Form */
.auth-form-section {
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form-section h2 {
  font-size: 32px;
  color: #212529;
  margin-bottom: 10px;
}

.auth-form-subtitle {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 40px;
}

.auth-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e9ecef;
}

.auth-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  font-weight: 500;
}

.auth-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  max-width: 750px;
  margin: 0 auto;
}

.auth-form h1 {
  font-size: 28px;
  color: #212529;
  margin: 0 0 10px 0;
  font-weight: 700;
}

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

.form-group label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.form-group input,
.form-group select {
  padding: 14px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
}

.form-group input::placeholder {
  color: #adb5bd;
}

.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6c757d;
}

.toggle-password:hover {
  color: #667eea;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.remember-me input {
  width: 18px;
  height: 18px;
  accent-color: #667eea;
}

.forgot-password {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.forgot-password:hover {
  text-decoration: underline;
}

.submit-btn {
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.divider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
}

.divider-line {
  flex: 1 1;
  height: 2px;
  background: #e9ecef;
}

.divider-text {
  color: #6c757d;
  font-size: 14px;
}

.social-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

.social-btn {
  padding: 12px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #495057;
  transition: all 0.3s;
}

.social-btn:hover {
  border-color: #667eea;
  transform: translateY(-2px);
}

.social-btn.google:hover {
  background: #fff;
  border-color: #db4437;
}

.social-btn.facebook:hover {
  background: #fff;
  border-color: #1877f2;
}

.signup-prompt {
  text-align: center;
  margin-top: 30px;
  color: #6c757d;
  font-size: 15px;
}

.signup-prompt a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.signup-prompt a:hover {
  text-decoration: underline;
}

/* Registration Form Specific */
.registration-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.registration-form .full-width {
  grid-column: 1 / -1;
}

.role-selection {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.role-option {
  flex: 1 1;
  padding: 15px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
}

.role-option.selected {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-color: #667eea;
}

.role-icon {
  font-size: 24px;
}

.role-name {
  font-weight: 600;
  font-size: 16px;
}

/* Error Messages */
.error-message {
  padding: 15px;
  background: #f8d7da;
  color: #721c24;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
  border-left: 4px solid #dc3545;
}

.success-message {
  padding: 15px;
  background: #d4edda;
  color: #155724;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
  border-left: 4px solid #28a745;
}

/* Loading Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .auth-container {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .auth-info {
    display: none;
  }

  .auth-form-section {
    padding: 40px 30px;
  }

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

  .social-login {
    grid-template-columns: 1fr;
  }

  .auth-info h1 {
    font-size: 32px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .auth-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

:root.dark-mode .auth-info {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

:root.dark-mode .auth-form-section {
  background: #2d2d2d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

:root.dark-mode .auth-form h1 {
  color: #e8e8e8;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
}

:root.dark-mode .form-group input {
  background: #3a3a3a;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .form-group input::placeholder {
  color: #808080;
}

:root.dark-mode .form-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .form-link {
  color: #b0b0b0;
}

:root.dark-mode .form-link a {
  color: #667eea;
}

:root.dark-mode .divider {
  border-top-color: #404040;
}

:root.dark-mode .divider-text {
  background: #2d2d2d;
  color: #b0b0b0;
}

:root.dark-mode .google-btn,
:root.dark-mode .facebook-btn,
:root.dark-mode .github-btn {
  background: #3a3a3a;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .google-btn:hover,
:root.dark-mode .facebook-btn:hover,
:root.dark-mode .github-btn:hover {
  background: #404040;
  border-color: #667eea;
}

:root.dark-mode .test-credentials {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #e8e8e8;
}

:root.dark-mode .error-message {
  background: rgba(220, 53, 69, 0.1);
  color: #ff7675;
  border-left-color: #dc3545;
}
/* Role Selection Cards */
.role-card {
  transition: all 0.3s ease;
}

.role-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.role-card h3 {
  margin: 10px 0;
  font-size: 20px;
}

.role-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Specializations Section Styles */
.specializations-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.specializations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.specializations-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.specialization-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  background-color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.specialization-checkbox:hover {
  background-color: #f0f4ff;
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.specialization-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #667eea;
  cursor: pointer;
  display: none;
}

.specialization-checkbox label {
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

.specializations-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.specializations-input {
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background-color: #ffffff;
  color: #495057;
  min-height: 60px;
  word-wrap: break-word;
  font-family: inherit;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  transition: border-color 0.3s;
}

.specializations-input:focus-within {
  border-color: #667eea;
  outline: none;
}

.specializations-hidden-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 0;
  font-family: inherit;
  flex: 1 1;
  min-width: 150px;
  color: #495057;
}

.specializations-hidden-input::placeholder {
  color: #adb5bd;
}

.specialization-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #667eea;
  color: white;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 13px;
}

.specialization-tag-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
  line-height: 1;
}

.specialization-tag-remove:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .specializations-options {
    flex-wrap: wrap;
  }
}



.degree-entry {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}

.degree-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.degree-entry-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.degree-remove-btn {
  background: #ff4444;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}

.degree-remove-btn:hover {
  background: #cc0000;
}

.add-degree-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  margin-bottom: 15px;
  transition: background 0.2s;
}

.add-degree-btn:hover {
  background: #45a049;
}

.degrees-section-label {
  display: block;
  margin-bottom: 15px;
  font-weight: 600;
}

.degrees-section-desc {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .degree-fields-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .degree-fields-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .degree-entry {
    padding: 12px;
    margin-bottom: 12px;
  }

  .degree-entry-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .degree-entry-header h4 {
    margin-bottom: 8px;
  }

  .degree-remove-btn {
    width: 100%;
  }
}



@media (max-width: 768px) {
  .auth-page {
    padding: 20px 10px;
  }

  .auth-container {
    max-width: 100%;
    border-radius: 12px;
  }

  .role-card {
    padding: 20px !important;
    min-height: 150px !important;
  }

  .role-card h3 {
    font-size: 16px;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

:root.dark-mode .role-card {
  background: #2a2a2a;
  border-color: #404040;
}

:root.dark-mode .role-card h3 {
  color: #fff;
}

:root.dark-mode .role-card p {
  color: #b0b0b0;
}

:root.dark-mode .role-card:hover {
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
  border-color: #667eea;
}
/* Profile Page Styles */
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.profile-header {
  text-align: center;
  margin-bottom: 3rem;
}

.profile-header h1 {
  font-size: 2.5rem;
  color: #212529;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.profile-header p {
  font-size: 1.1rem;
  color: #6c757d;
}

/* Alerts */
.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 4px solid #f5c6cb;
  display: flex;
  align-items: center;
  gap: 10px;
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 4px solid #c3e6cb;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Layout */
.profile-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 2rem;
  gap: 2rem;
}

/* Sidebar */
.profile-sidebar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 30px;
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.profile-avatar {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #667eea;
  margin-bottom: 15px;
}

.avatar-name {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin: 10px 0 5px 0;
}

.avatar-role {
  font-size: 13px;
  color: #6c757d;
  text-transform: capitalize;
  margin: 0;
}

.profile-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-btn {
  padding: 12px 16px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s;
  text-align: left;
}

.tab-btn:hover {
  background: #f8f9fa;
  color: #667eea;
}

.tab-btn.active {
  background: #f0f4ff;
  color: #667eea;
  border-left-color: #667eea;
  border-left-width: 3px;
}

/* Main Content */
.profile-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 40px;
}

.profile-form h2 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.form-section {
  margin-bottom: 35px;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #667eea;
}

.section-description {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
}

/* Picture Upload */
.picture-upload {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 30px;
  gap: 30px;
  align-items: center;
}

.picture-preview {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #667eea;
  margin: 0 auto;
}

.upload-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-label {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.3s;
  width: -webkit-fit-content;
  width: fit-content;
}

.upload-label:hover {
  transform: translateY(-2px);
}

.help-text {
  font-size: 13px;
  color: #6c757d;
  margin: 0;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #adb5bd;
}

.readonly-field {
  background: #f8f9fa;
  cursor: not-allowed;
}

.form-group small {
  display: block;
  margin-top: 6px;
  color: #6c757d;
  font-size: 13px;
}

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

/* Buttons */
.btn-submit {
  padding: 14px 32px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

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

/* Account Information */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.info-item {
  background: #f8f9fa;
  padding: 18px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.info-label {
  display: block;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
}

.info-value {
  display: block;
  color: #212529;
  font-size: 15px;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  background: #e7f0ff;
  color: #667eea;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.badge.success {
  background: #d4edda;
  color: #155724;
}

/* Responsive Design */
@media (max-width: 768px) {
  .profile-wrapper {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    position: static;
  }

  .profile-content {
    padding: 25px;
  }

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

  .picture-upload {
    grid-template-columns: 1fr;
  }

  .profile-header h1 {
    font-size: 2rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 1rem;
  }

  .profile-content {
    padding: 20px;
  }

  .profile-header h1 {
    font-size: 1.5rem;
  }

  .profile-header p {
    font-size: 0.95rem;
  }

  .avatar-image {
    width: 80px;
    height: 80px;
  }

  .btn-submit {
    width: 100%;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .profile-container {
  background: #1a1a1a;
}

:root.dark-mode .profile-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .profile-header p {
  color: #b0b0b0;
}

:root.dark-mode .tabs {
  background: transparent;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .tab-button {
  color: #b0b0b0;
  border-bottom: 2px solid transparent;
}

:root.dark-mode .tab-button:hover {
  color: #e8e8e8;
}

:root.dark-mode .tab-button.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

:root.dark-mode .tab-content {
  background: transparent;
}

:root.dark-mode .form-group {
  margin-bottom: 1.5rem;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea,
:root.dark-mode .form-group select {
  background: #2d2d2d;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus,
:root.dark-mode .form-group select:focus {
  background: #333333;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group input::placeholder {
  color: #909090;
}

:root.dark-mode .error-message {
  background: #3d2222;
  color: #ff9999;
  border-left-color: #c74545;
}

:root.dark-mode .success-message {
  background: #223d2d;
  color: #99ff99;
  border-left-color: #45c745;
}

:root.dark-mode .btn-submit {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .btn-submit:hover {
  background: #7b8ff5;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

:root.dark-mode .btn-submit:disabled {
  background: #505050;
  cursor: not-allowed;
  opacity: 0.6;
}

:root.dark-mode .profile-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

:root.dark-mode .profile-section h3 {
  color: #667eea;
  margin-bottom: 1rem;
}

:root.dark-mode .profile-info {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .profile-info:last-child {
  border-bottom: none;
}

:root.dark-mode .profile-info-label {
  color: #b0b0b0;
  font-weight: 500;
}

:root.dark-mode .profile-info-value {
  color: #e8e8e8;
  text-align: right;
}

:root.dark-mode .avatar-container {
  text-align: center;
  margin-bottom: 2rem;
}

:root.dark-mode .avatar-container h3 {
  color: #e8e8e8;
  margin-bottom: 1rem;
}

:root.dark-mode .avatar-image {
  border: 3px solid #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Breadcrumb Navigation Styles */
.breadcrumbs {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 12px 0;
  margin-bottom: 20px;
  width: 100%;
}

.breadcrumb-container {
  max-width: 100%;
  margin: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  width: 100%;
}

.breadcrumb-link {
  color: #6c757d;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}

.breadcrumb-link:hover {
  color: #667eea;
  text-decoration: none;
}

.breadcrumb-icon {
  font-size: 16px;
}

.breadcrumb-separator {
  color: #dee2e6;
  font-size: 18px;
  -webkit-user-select: none;
          user-select: none;
}

.breadcrumb-current {
  color: #212529;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  .breadcrumbs {
    margin-bottom: 16px;
  }

  .breadcrumb-container {
    padding: 0 12px;
    font-size: 12px;
  }

  .breadcrumb-icon {
    font-size: 14px;
  }

  .breadcrumb-separator {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .breadcrumb-container {
    padding: 0 8px;
    gap: 4px;
  }
}
/* ===== DARK MODE STYLES ===== */
:root.dark-mode .breadcrumbs {
  background: #2d2d2d;
  border-bottom-color: #404040;
}

:root.dark-mode .breadcrumb-link {
  color: #667eea;
}

:root.dark-mode .breadcrumb-link:hover {
  color: #7c8ff0;
}

:root.dark-mode .breadcrumb-text {
  color: #e8e8e8;
}

:root.dark-mode .breadcrumb-separator {
  color: #b0b0b0;
}
.dashboard-page {
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
  padding: 20px 0;
}

.dashboard-main {
  max-width: 100% !important;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.dashboard-main .container {
  padding: 20px;
}

/* Loading State */
.loading {
  text-align: center;
  padding: 80px 20px;
}

.loading p {
  font-size: 18px;
  color: #666;
  margin: 0;
}

/* Dashboard Content */
.dashboard-content {
  animation: fadeIn 0.3s ease;
  width: 100% !important;
  display: block !important;
}

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

.dashboard-content h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
  text-align: center;
}

.dashboard-content > p {
  font-size: 16px;
  color: #666;
  margin: 0 0 30px 0;
  text-align: center;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-gap: 25px !important;
  gap: 25px !important;
  margin-bottom: 40px;
  width: 100% !important;
  max-width: 100% !important;
}

/* Dashboard Cards */
.dashboard-card {
  background: white;
  border-radius: 8px;
  padding: 30px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
  min-height: 180px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}

.dashboard-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  border-color: #667eea;
}

.dashboard-card:active {
  transform: scale(0.98);
}

.card-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  margin-bottom: 20px;
}

.dashboard-card:hover .card-icon {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.dashboard-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.dashboard-card p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }

  .dashboard-content h1 {
    font-size: 28px;
  }

  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: 15px 0;
  }

  .dashboard-main {
    padding: 0 15px;
  }

  .dashboard-main .container {
    padding: 15px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-bottom: 30px;
  }

  .dashboard-content h1 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .dashboard-content > p {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .dashboard-card {
    padding: 20px 15px;
    border-radius: 12px;
    min-height: 150px;
  }

  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .dashboard-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .dashboard-card p {
    font-size: 12px;
    line-height: 1.4;
  }
}

@media (max-width: 640px) {
  .dashboard-page {
    padding: 12px 0;
  }

  .dashboard-main {
    padding: 0 12px;
  }

  .dashboard-main .container {
    padding: 12px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 25px;
  }

  .dashboard-content h1 {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .dashboard-content > p {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .dashboard-card {
    padding: 18px 15px;
    min-height: 130px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
            user-select: none;
  }

  .dashboard-card:active {
    background-color: #f0f0f0;
    transform: scale(0.98);
  }

  .card-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
    margin-bottom: 12px;
  }

  .dashboard-card h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .dashboard-card p {
    font-size: 11px;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .dashboard-page {
    padding: 10px 0;
  }

  .dashboard-main {
    padding: 0 10px;
  }

  .dashboard-main .container {
    padding: 10px;
  }

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

  .dashboard-content h1 {
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 1.2;
  }

  .dashboard-content > p {
    font-size: 12px;
    margin-bottom: 18px;
    line-height: 1.3;
  }

  .dashboard-card {
    padding: 16px 12px;
    min-height: 120px;
    border-radius: 10px;
  }

  .card-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .dashboard-card h3 {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 600;
    line-height: 1.2;
  }

  .dashboard-card p {
    font-size: 11px;
    line-height: 1.3;
    color: #888;
  }

  .loading {
    padding: 40px 15px;
  }

  .loading p {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  /* Ultra-small screens */
  .dashboard-page {
    padding: 8px 0;
  }

  .dashboard-main {
    padding: 0 8px;
  }

  .dashboard-content h1 {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .dashboard-content > p {
    font-size: 11px;
    margin-bottom: 15px;
  }

  .dashboard-grid {
    gap: 10px;
    margin-bottom: 15px;
  }

  .dashboard-card {
    padding: 14px 10px;
    min-height: 110px;
  }

  .card-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .dashboard-card h3 {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .dashboard-card p {
    font-size: 10px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .dashboard-container {
  background: #1a1a1a;
}

:root.dark-mode .dashboard-content {
  background: transparent;
}

:root.dark-mode .dashboard-content h1 {
  color: #e8e8e8;
}

:root.dark-mode .dashboard-content p {
  color: #b0b0b0;
}

:root.dark-mode .dashboard-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-color: #404040;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .dashboard-card h3 {
  color: #667eea;
}

:root.dark-mode .dashboard-card p {
  color: #b0b0b0;
}

:root.dark-mode .card-icon {
  color: #667eea;
}

:root.dark-mode .loading {
  background: transparent;
  color: #b0b0b0;
}

/* Error Pages Styles */
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.error-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 60px 40px;
  max-width: 800px;
  text-align: center;
}

/* Error Icon */
.error-icon {
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.error-404,
.error-500 {
  font-size: 120px;
  font-weight: 900;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Error Content */
.error-content h1 {
  font-size: 42px;
  color: #212529;
  margin-bottom: 15px;
  font-weight: 700;
}

.error-subtitle {
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 30px;
  line-height: 1.6;
}

.error-details {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
  text-align: left;
}

.error-details p {
  color: #495057;
  line-height: 1.8;
  margin-bottom: 15px;
}

.error-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.error-steps li {
  padding: 10px 15px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 4px solid #667eea;
  color: #212529;
  font-size: 15px;
}

.error-suggestion {
  color: #212529;
  font-size: 16px;
  margin-bottom: 30px;
}

/* Quick Links */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  text-align: left;
}

.quick-link:hover {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.quick-link-icon {
  font-size: 36px;
  width: 60px;
  text-align: center;
}

.quick-link-title {
  display: block;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
}

.quick-link-desc {
  display: block;
  font-size: 14px;
  opacity: 0.9;
}

/* Error Actions */
.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn {
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #6c757d;
  border: 2px solid #6c757d;
}

.btn-outline:hover {
  background: #6c757d;
  color: white;
  transform: translateY(-2px);
}

/* Error Help */
.error-help {
  background: #e7f3ff;
  border-left: 4px solid #667eea;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.error-help p {
  color: #212529;
  font-size: 15px;
  margin-bottom: 10px;
}

.help-email {
  color: #667eea;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s;
}

.help-email:hover {
  color: #5568d3;
  text-decoration: underline;
}

.help-phone {
  font-size: 16px;
  color: #495057;
}

.help-phone a {
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
}

.help-phone a:hover {
  text-decoration: underline;
}

/* Not Found Specific */
.not-found .error-404 {
  -webkit-text-stroke: 2px #667eea;
}

/* Server Error Specific */
.server-error .error-500 {
  -webkit-text-stroke: 2px #dc3545;
}

.server-error .error-help {
  background: #f8d7da;
  border-left-color: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
  .error-page {
    padding: 20px 10px;
  }

  .error-container {
    padding: 40px 20px;
  }

  .error-icon .error-404,
  .error-icon .error-500 {
    font-size: 80px;
  }

  .error-content h1 {
    font-size: 32px;
  }

  .error-subtitle {
    font-size: 16px;
  }

  .quick-links {
    grid-template-columns: 1fr;
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }

  .error-steps li {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .error-container {
    padding: 30px 15px;
  }

  .error-icon .error-404,
  .error-icon .error-500 {
    font-size: 60px;
  }

  .error-content h1 {
    font-size: 28px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .error-container {
  background: #1a1a1a;
  color: #e8e8e8;
}

:root.dark-mode .error-content h1 {
  color: #e8e8e8;
}

:root.dark-mode .error-content p {
  color: #b0b0b0;
}

:root.dark-mode .error-icon {
  color: #667eea;
}

:root.dark-mode .error-icon .error-404 {
  color: #667eea;
  font-weight: 600;
}

:root.dark-mode .error-icon .error-500 {
  color: #ff6b6b;
  font-weight: 600;
}

:root.dark-mode .error-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

:root.dark-mode .error-action-btn {
  padding: 10px 30px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .error-action-btn.primary {
  background: #667eea;
  color: white;
}

:root.dark-mode .error-action-btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .error-action-btn.secondary {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

:root.dark-mode .error-action-btn.secondary:hover {
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .error-steps {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
}

:root.dark-mode .error-steps h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .error-steps li {
  color: #b0b0b0;
  padding: 8px 0;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .error-steps li:last-child {
  border-bottom: none;
}

:root.dark-mode .error-details {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #67c7ea;
  overflow-x: auto;
}

/* Auth Pages Styles */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.content-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Auth Header */
.auth-header {
  text-align: center;
  margin-bottom: 40px;
}

.auth-header h1 {
  font-size: 42px;
  color: #212529;
  margin-bottom: 15px;
  font-weight: 700;
}

.auth-header p {
  font-size: 18px;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

/* Auth Form */
.auth-form {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

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

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #495057;
  font-size: 15px;
}

.form-group input {
  width: 100%;
  padding: 14px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input.error {
  border-color: #dc3545;
}

.form-group input::placeholder {
  color: #adb5bd;
}

.form-hint {
  display: block;
  color: #6c757d;
  font-size: 13px;
  margin-top: 5px;
}

.error-text {
  display: block;
  color: #dc3545;
  font-size: 13px;
  margin-top: 5px;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  border-left: 4px solid #dc3545;
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  border-left: 4px solid #28a745;
}

/* Password Input Wrapper */
.password-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.password-input-wrapper input {
  width: 100%;
  padding: 14px;
  padding-right: 50px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s;
  box-sizing: border-box;
}

.password-input-wrapper input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10%;
  margin-top: -8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.toggle-password:hover {
  opacity: 0.7;
  transform: translateY(-50%) scale(1.1);
}

/* Password Requirements */
.password-requirements {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  border-left: 3px solid #667eea;
}

.password-requirements h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #495057;
}

.password-requirements ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.password-requirements li {
  padding: 5px 0;
  font-size: 13px;
  color: #6c757d;
  display: flex;
  align-items: center;
}

.requirement-met {
  color: #28a745 !important;
  font-weight: 600;
}

/* Back Link */
.back-link {
  display: block;
  text-align: center;
  padding: 10px;
  color: #667eea;
  text-decoration: none;
  margin-top: 15px;
  font-size: 14px;
  transition: color 0.3s;
}

.back-link:hover {
  color: #5568d3;
}

/* Verification Code Input */
.code-input {
  font-size: 32px;
  letter-spacing: 10px;
  text-align: center;
  font-weight: 700;
}

/* Submit Button */
.submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Auth Footer */
.auth-footer {
  text-align: center;
  padding-top: 30px;
  border-top: 2px solid #e9ecef;
}

.auth-footer p {
  color: #6c757d;
  font-size: 15px;
  margin-bottom: 10px;
}

.auth-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: color 0.3s;
}

.auth-link:hover {
  color: #5568d3;
  text-decoration: underline;
}

/* Success Page */
.success-page {
  text-align: center;
}

.success-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: successPop 0.5s ease;
}

@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-page h1 {
  font-size: 36px;
  color: #28a745;
  margin-bottom: 20px;
  font-weight: 700;
}

.success-message {
  font-size: 18px;
  color: #495057;
  line-height: 1.8;
  margin-bottom: 30px;
}

.success-details {
  background: #d4edda;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.success-details p {
  color: #155724;
  font-size: 16px;
  margin-bottom: 15px;
}

.success-details ul {
  margin: 0;
  padding-left: 20px;
  color: #155724;
}

.success-details li {
  margin-bottom: 10px;
}

.success-details .note {
  font-size: 14px;
  opacity: 0.9;
  font-style: italic;
}

.security-notice {
  background: #fff3cd;
  color: #856404;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-icon {
  font-size: 24px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

/* Help Section */
.help-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.help-section h3 {
  font-size: 20px;
  color: #212529;
  margin-bottom: 20px;
}

.help-options {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.help-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 10px;
  color: #212529;
  text-decoration: none;
  transition: all 0.3s;
}

.help-link:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.help-icon {
  font-size: 24px;
}

/* Verification Card */
.verification-card {
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.resend-section {
  text-align: center;
  padding-top: 20px;
  border-top: 2px solid #e9ecef;
}

.resend-section p {
  color: #6c757d;
  font-size: 15px;
  margin-bottom: 10px;
}

.resend-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s;
}

.resend-btn:hover {
  color: #5568d3;
  text-decoration: underline;
}

/* Info Card */
.info-card {
  background: #e7f3ff;
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid #667eea;
}

.info-card h3 {
  font-size: 20px;
  color: #212529;
  margin-bottom: 20px;
}

.email-tips {
  margin: 0;
  padding: 0;
}

.email-tips p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #495057;
  line-height: 1.6;
}

.tip-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  margin-right: 5px;
}

/* Password Tips */
.password-tips {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.password-tips h3 {
  font-size: 18px;
  color: #212529;
  margin-bottom: 20px;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips-list .tip-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 3px solid #28a745;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 10px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 3px solid #667eea;
}

/* Responsive Design */
@media (max-width: 768px) {
  .auth-page {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
  }

  .content-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .auth-header {
    margin-bottom: 20px;
    order: 1;
  }

  .auth-header h1 {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .auth-header p {
    font-size: 14px;
  }

  .auth-form {
    padding: 20px 15px;
    border-radius: 15px;
    order: 2;
    width: 100%;
    max-width: 100%;
  }

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

  .form-group label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .form-group input {
    padding: 16px 12px;
    font-size: 16px;
    border-radius: 6px;
  }

  .password-input-wrapper input {
    padding: 16px 12px;
    padding-right: 48px;
  }

  .toggle-password {
    width: 12%;
    min-width: 36px;
    height: 36px;
    font-size: 18px;
    right: 8px;
  }

  .code-input {
    font-size: 24px;
    letter-spacing: 8px;
  }

  .submit-btn {
    padding: 14px 12px;
    font-size: 16px;
    border-radius: 8px;
  }

  .form-hint {
    font-size: 12px;
  }

  .error-message,
  .success-message {
    padding: 12px 15px;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .success-icon {
    font-size: 60px;
  }

  .success-page h1 {
    font-size: 24px;
  }

  .help-options {
    flex-direction: column;
  }

  .action-buttons {
    flex-direction: column;
  }

  .back-link {
    font-size: 13px;
    padding: 8px 0;
  }

  .auth-footer {
    padding-top: 20px;
  }

  .auth-footer p {
    font-size: 14px;
  }

  .auth-link {
    font-size: 14px;
  }

  .password-requirements {
    padding: 12px;
    margin-top: 15px;
    font-size: 12px;
  }

  .password-requirements h4 {
    font-size: 13px;
  }

  .password-requirements li {
    font-size: 12px;
    padding: 3px 0;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .auth-page {
    padding: 15px 10px;
  }

  .auth-header h1 {
    font-size: 24px;
  }

  .auth-header p {
    font-size: 13px;
  }

  .auth-form {
    padding: 15px 12px;
  }

  .form-group input {
    padding: 14px 10px;
    font-size: 16px;
  }

  .password-input-wrapper input {
    padding: 14px 10px;
    padding-right: 45px;
  }

  .toggle-password {
    width: 14%;
    min-width: 40px;
    height: 40px;
    font-size: 16px;
    right: 6px;
  }

  .code-input {
    font-size: 20px;
    letter-spacing: 6px;
  }

  .submit-btn {
    padding: 12px 10px;
    font-size: 15px;
  }

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

  .content-container {
    max-width: 100%;
  }

  .help-section {
    padding: 20px;
    margin-top: 20px;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .auth-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

:root.dark-mode .content-container {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 15px;
  padding: 40px;
}

:root.dark-mode .auth-box h1 {
  color: #e8e8e8;
}

:root.dark-mode .auth-subtitle {
  color: #b0b0b0;
}

:root.dark-mode .form-group label {
  color: #d0d0d0;
}

:root.dark-mode .form-group input {
  background: #1a1a1a;
  border: 2px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .form-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .form-group input::placeholder {
  color: #707070;
}

:root.dark-mode .form-hint {
  color: #b0b0b0;
}

:root.dark-mode .error-text {
  color: #ff6b6b;
}

:root.dark-mode .error-message {
  background: rgba(255, 107, 107, 0.15);
  color: #ff9999;
  border: 1px solid #ff6b6b;
}

:root.dark-mode .code-input {
  color: #e8e8e8;
}

:root.dark-mode .auth-footer {
  border-top: 2px solid #404040;
}

:root.dark-mode .auth-footer p {
  color: #b0b0b0;
}

:root.dark-mode .success-page h1 {
  color: #4db84d;
}

:root.dark-mode .success-message {
  color: #b0b0b0;
}

:root.dark-mode .success-details {
  background: rgba(76, 184, 76, 0.15);
  border: 1px solid #4db84d;
}

:root.dark-mode .success-details p,
:root.dark-mode .success-details li {
  color: #4db84d;
}

:root.dark-mode .security-notice {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border: 1px solid #ffc107;
}

:root.dark-mode .btn-secondary {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

:root.dark-mode .btn-secondary:hover {
  background: #667eea;
  color: white;
}

:root.dark-mode .help-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .help-section h3 {
  color: #e8e8e8;
}

:root.dark-mode .help-link {
  background: #1a1a1a;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .help-link:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

:root.dark-mode .verification-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .resend-section {
  border-top: 2px solid #404040;
}

:root.dark-mode .resend-section p {
  color: #b0b0b0;
}

:root.dark-mode .info-card {
  background: rgba(102, 126, 234, 0.1);
  border-left-color: #667eea;
}

:root.dark-mode .info-card h3 {
  color: #e8e8e8;
}

:root.dark-mode .email-tips p {
  color: #b0b0b0;
}

:root.dark-mode .password-tips {
  background: #2d2d2d;
  border: 1px solid #404040;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .password-tips h3 {
  color: #e8e8e8;
}

:root.dark-mode .tips-list .tip-item {
  background: #1a1a1a;
  border-left-color: #4db84d;
  color: #b0b0b0;
}

:root.dark-mode .feature-list li {
  background: #1a1a1a;
  border-left-color: #667eea;
  color: #b0b0b0;
}

/* Medical Records Page Styles */
.medical-records-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.page-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.add-record-btn {
  background: white;
  color: #667eea;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s;
}

.add-record-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Filters */
.records-filters {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.records-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  align-items: end;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.filter-group select {
  width: 100%;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
}

.search-box {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

.search-box input {
  flex: 1 1;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
}

.search-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}

/* Stats */
.records-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-label {
  color: #6c757d;
  font-size: 14px;
}

/* Records List */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.record-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 25px;
  gap: 25px;
  align-items: start;
  transition: transform 0.3s, box-shadow 0.3s;
}

.record-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.record-type {
  font-size: 36px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 10px;
}

.record-main {
  flex: 1 1;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.record-header h3 {
  font-size: 20px;
  color: #212529;
  margin: 0;
}

.record-date {
  color: #6c757d;
  font-size: 14px;
}

.record-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
}

.detail-label {
  color: #6c757d;
  font-weight: 500;
  min-width: 80px;
}

.detail-value {
  color: #212529;
  font-weight: 600;
}

.type-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.type-badge.prescription {
  background: #d4edda;
  color: #155724;
}



.type-badge.scan {
  background: #fff3cd;
  color: #856404;
}

.type-badge.consultation {
  background: #e7f3ff;
  color: #6610f2;
}

.record-description {
  color: #6c757d;
  font-size: 15px;
  line-height: 1.6;
}

.record-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}

.action-btn:hover {
  border-color: #667eea;
  transform: translateY(-2px);
}

.action-btn.view-btn {
  border-color: #667eea;
  color: #667eea;
}

.action-btn.view-btn:hover {
  background: #667eea;
  color: white;
}

/* Empty State */
.loading-state {
  text-align: center;
  padding: 60px;
  font-size: 18px;
  color: #6c757d;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 20px;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-top: 40px;
}

.quick-action-btn {
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.quick-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.action-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.action-text {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

/* Modal */
.record-modal {
  display: none;
}

.record-modal.active {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.modal-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 2px solid #e9ecef;
}

.modal-header h2 {
  font-size: 24px;
  color: #212529;
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.3s;
}

.close-modal:hover {
  color: #dc3545;
}

.modal-body {
  padding: 25px;
}

.record-full-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-row {
  display: flex;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.detail-row .label {
  min-width: 100px;
}

.detail-row .value {
  flex: 1 1;
}

.detail-row .value.description {
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 25px;
  border-top: 2px solid #e9ecef;
}

/* Responsive Design */
@media (max-width: 768px) {
  .records-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .record-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .record-actions {
    flex-direction: column;
    width: 100%;
  }

  .action-btn {
    width: 100%;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 95%;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .medical-records-container {
  background: #1a1a1a;
}

:root.dark-mode .medical-records-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .medical-records-header p {
  color: #b0b0b0;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .search-input {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .search-input::placeholder {
  color: #909090;
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .record-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .record-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .record-header {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .record-header h3 {
  color: #667eea;
}

:root.dark-mode .record-date {
  color: #b0b0b0;
}

:root.dark-mode .record-content p {
  color: #e8e8e8;
}

:root.dark-mode .record-actions {
  border-top: 1px solid #404040;
}

:root.dark-mode .action-btn {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .action-btn.delete-btn {
  color: #ff6b6b;
}

:root.dark-mode .action-btn.delete-btn:hover {
  background: #3d2222;
  border-color: #ff6b6b;
}

:root.dark-mode .quick-actions {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .quick-actions h3 {
  color: #667eea;
}

:root.dark-mode .quick-action-btn {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  color: white;
  border: none;
}

:root.dark-mode .quick-action-btn:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}

:root.dark-mode .modal-background {
  background: rgba(0, 0, 0, 0.7);
}

:root.dark-mode .modal-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .modal-header h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .modal-close {
  color: #b0b0b0;
}

:root.dark-mode .modal-close:hover {
  color: #e8e8e8;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .modal-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .modal-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .modal-btn.cancel {
  background: #505050;
}

:root.dark-mode .modal-btn.cancel:hover {
  background: #606060;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Prescriptions Page Styles */
.prescriptions-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.page-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.add-prescription-btn {
  background: white;
  color: #667eea;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s;
}

.add-prescription-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Filters */
.prescriptions-filters {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.prescriptions-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  align-items: end;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.filter-group select {
  width: 100%;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
}

.search-box {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

.search-box input {
  flex: 1 1;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
}

.search-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}

/* Stats */
.prescriptions-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 5px;
}

.stat-label {
  color: #6c757d;
  font-size: 14px;
}

/* Prescriptions List */
.prescriptions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prescription-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  grid-gap: 25px;
  gap: 25px;
  align-items: start;
  transition: transform 0.3s, box-shadow 0.3s;
}

.prescription-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.prescription-doctor {
  text-align: center;
}

.doctor-avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doctor-info h4 {
  font-size: 16px;
  color: #212529;
  margin: 0;
}

.doctor-info p {
  color: #6c757d;
  font-size: 13px;
  margin: 0;
}

.prescription-main {
  flex: 1 1;
}

.prescription-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.prescription-header h3 {
  font-size: 18px;
  color: #212529;
  margin: 0;
}

.prescription-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.prescription-date {
  color: #6c757d;
  font-size: 14px;
}

.prescription-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.prescription-status.active {
  background: #d4edda;
  color: #155724;
}

.prescription-status.expired {
  background: #f8d7da;
  color: #721c24;
}

.prescription-status.completed {
  background: #e2e3e5;
  color: #383d41;
}

.prescription-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
}

.detail-label {
  color: #6c757d;
  font-weight: 500;
  min-width: 90px;
}

.detail-value {
  color: #212529;
  font-weight: 600;
}

.detail-item.full-width {
  flex-direction: column;
}

.detail-value.notes {
  line-height: 1.6;
}

/* Medications Section */
.medications-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.medications-section h4 {
  font-size: 16px;
  color: #212529;
  margin-bottom: 15px;
}

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

.medication-item {
  display: flex;
  gap: 15px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
}

.medication-name {
  flex: 1 1;
  font-weight: 600;
  color: #212529;
}

.medication-dosage {
  color: #6c757d;
}

.medication-duration {
  color: #6c757d;
  font-size: 12px;
}

/* Prescription Actions */
.prescription-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}

.action-btn:hover {
  border-color: #667eea;
  transform: translateY(-2px);
}

.action-btn.view-btn {
  border-color: #667eea;
  color: #667eea;
}

.action-btn.view-btn:hover {
  background: #667eea;
  color: white;
}

.action-btn.download-btn {
  border-color: #28a745;
  color: #28a745;
}

.action-btn.download-btn:hover {
  background: #28a745;
  color: white;
}

.action-btn.refill-btn {
  border-color: #ffc107;
  color: #212529;
}

.action-btn.refill-btn:hover {
  background: #ffc107;
  color: #212529;
}

/* Empty State */
.loading-state {
  text-align: center;
  padding: 60px;
  font-size: 18px;
  color: #6c757d;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 20px;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-top: 40px;
}

.quick-action-btn {
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.quick-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.action-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.action-text {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

/* Modal */
.prescription-modal {
  display: none;
}

.prescription-modal.active {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.modal-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 2px solid #e9ecef;
}

.modal-header h2 {
  font-size: 24px;
  color: #212529;
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.3s;
}

.close-modal:hover {
  color: #dc3545;
}

.modal-body {
  padding: 25px;
}

.prescription-full-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-row {
  display: flex;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.detail-row .label {
  min-width: 100px;
}

.detail-row .value {
  flex: 1 1;
}

.detail-row.full-width {
  flex-direction: column;
}

.medications-full h3 {
  color: #212529;
  margin-bottom: 15px;
}

.medications-full-item {
  padding: 10px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
}

.instructions {
  background: #d1ecf1;
  padding: 20px;
  border-radius: 10px;
  margin-top: 15px;
}

.instructions h4 {
  color: #0c5460;
  margin-bottom: 15px;
}

.instructions p {
  color: #212529;
  line-height: 1.8;
}

.notes {
  background: #fff3cd;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.notes h4 {
  color: #856404;
  margin-bottom: 10px;
}

.notes p {
  color: #212529;
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 25px;
  border-top: 2px solid #e9ecef;
}

/* Responsive Design */
@media (max-width: 768px) {
  .prescriptions-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .prescription-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .prescription-actions {
    flex-direction: column;
    width: 100%;
  }

  .action-btn {
    width: 100%;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 95%;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .prescriptions-container {
  background: #1a1a1a;
}

:root.dark-mode .prescriptions-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .prescriptions-header p {
  color: #b0b0b0;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .search-input {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .search-input::placeholder {
  color: #909090;
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .prescription-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .prescription-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .prescription-header {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .prescription-header h3 {
  color: #667eea;
}

:root.dark-mode .prescription-date {
  color: #b0b0b0;
}

:root.dark-mode .prescription-content p {
  color: #e8e8e8;
}

:root.dark-mode .prescription-content strong {
  color: #667eea;
}

:root.dark-mode .prescription-status {
  color: #b0b0b0;
}

:root.dark-mode .prescription-actions {
  border-top: 1px solid #404040;
}

:root.dark-mode .action-btn {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .action-btn.delete-btn {
  color: #ff6b6b;
}

:root.dark-mode .action-btn.delete-btn:hover {
  background: #3d2222;
  border-color: #ff6b6b;
}

:root.dark-mode .quick-actions {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .quick-actions h3 {
  color: #667eea;
}

:root.dark-mode .quick-action-btn {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  color: white;
  border: none;
}

:root.dark-mode .quick-action-btn:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}

:root.dark-mode .modal-background {
  background: rgba(0, 0, 0, 0.7);
}

:root.dark-mode .modal-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .modal-header h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .modal-close {
  color: #b0b0b0;
}

:root.dark-mode .modal-close:hover {
  color: #e8e8e8;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .modal-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .modal-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .modal-btn.cancel {
  background: #505050;
}

:root.dark-mode .modal-btn.cancel:hover {
  background: #606060;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Notifications Settings Page Styles */
.notifications-settings-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.page-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
}

/* Success Alert */
.success-alert {
  background: #d4edda;
  color: #155724;
  padding: 15px 25px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideDown 0.3s ease;
}

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

.success-icon {
  font-size: 24px;
}

.success-message {
  font-size: 16px;
}

/* Settings Sections */
.settings-section {
  background: white;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.settings-section h2 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

/* Settings List */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s;
}

.setting-item:hover {
  background: #e9ecef;
}

.setting-header {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1 1;
}

.setting-icon {
  font-size: 28px;
}

.setting-info {
  flex: 1 1;
}

.setting-info h3 {
  font-size: 18px;
  color: #212529;
  margin-bottom: 8px;
}

.setting-description {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.5;
}

/* Toggle Switch */
.setting-toggle {
  position: relative;
  width: 50px;
  height: 26px;
}

.setting-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6c757d;
  transition: 0.4s;
  border-radius: 13px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.setting-toggle input:checked + .toggle-slider {
  background-color: #667eea;
}

.setting-toggle input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Schedule Options */
.schedule-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.schedule-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-option label {
  font-weight: 600;
  color: #495057;
  font-size: 15px;
}

.schedule-option select {
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

/* History Actions */
.history-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.history-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.history-btn:hover {
  background: #667eea;
  border-color: #667eea;
  color: white;
  transform: translateY(-2px);
}

.btn-icon {
  font-size: 18px;
}

/* History Preview */
.history-preview {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.history-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.history-item:hover {
  background: #667eea;
  color: white;
  transform: translateX(5px);
}

.history-item.unread {
  border-left: 4px solid #667eea;
}

.history-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.history-content {
  flex: 1 1;
}

.history-title {
  font-weight: 600;
  color: inherit;
  font-size: 15px;
  margin-bottom: 5px;
}

.history-time {
  font-size: 13px;
  opacity: 0.8;
}

.view-all-btn {
  display: block;
  text-align: center;
  padding: 15px;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.view-all-btn:hover {
  color: #5568d3;
}

/* Settings Actions */
.settings-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.save-btn {
  padding: 15px 30px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.reset-btn {
  padding: 15px 30px;
  background: white;
  color: #6c757d;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.reset-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

/* Help Section */
.help-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.help-section h3 {
  font-size: 20px;
  color: #212529;
  margin-bottom: 15px;
}

.help-section p {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 20px;
}

.help-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.help-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #212529;
  text-decoration: none;
  transition: all 0.3s;
}

.help-link:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.help-icon {
  font-size: 20px;
}

.help-text {
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .setting-item {
    grid-template-columns: auto 1fr;
    gap: 15px;
  }

  .history-actions {
    flex-direction: column;
  }

  .history-btn {
    width: 100%;
    justify-content: center;
  }

  .settings-actions {
    flex-direction: column;
  }

  .save-btn,
  .reset-btn {
    width: 100%;
  }

  .help-links {
    flex-direction: column;
  }

  .setting-item {
    grid-template-columns: auto 1fr;
    gap: 15px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .notifications-settings {
  background: #1a1a1a;
}

:root.dark-mode .notifications-settings h1 {
  color: #e8e8e8;
}

:root.dark-mode .notifications-settings p {
  color: #b0b0b0;
}

:root.dark-mode .settings-container {
  gap: 20px;
}

:root.dark-mode .settings-sidebar {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

:root.dark-mode .sidebar-item {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .sidebar-item:last-child {
  border-bottom: none;
}

:root.dark-mode .sidebar-button {
  background: transparent;
  color: #b0b0b0;
  border: none;
  width: 100%;
  text-align: left;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

:root.dark-mode .sidebar-button:hover {
  background: #333333;
  color: #667eea;
}

:root.dark-mode .sidebar-button.active {
  background: #667eea;
  color: white;
}

:root.dark-mode .settings-content {
  background: transparent;
}

:root.dark-mode .settings-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .settings-section h2 {
  color: #667eea;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .settings-section p {
  color: #b0b0b0;
  margin-bottom: 15px;
}

:root.dark-mode .setting-group {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .setting-item:last-child {
  border-bottom: none;
}

:root.dark-mode .setting-item-info h3 {
  color: #e8e8e8;
  margin-bottom: 5px;
}

:root.dark-mode .setting-item-info p {
  color: #b0b0b0;
  font-size: 0.9rem;
}

:root.dark-mode .toggle-switch {
  width: 50px;
  height: 28px;
  background: #404040;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}

:root.dark-mode .toggle-switch.active {
  background: #667eea;
}

:root.dark-mode .toggle-switch::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.3s ease;
}

:root.dark-mode .toggle-switch.active::after {
  left: 24px;
}

:root.dark-mode .notification-history {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .notification-history h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .notification-item {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
}

:root.dark-mode .notification-item-title {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .notification-item-time {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .notification-item-text {
  color: #b0b0b0;
  margin-top: 8px;
}

:root.dark-mode .history-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .history-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

:root.dark-mode .save-btn,
:root.dark-mode .reset-btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .save-btn {
  background: #667eea;
  color: white;
}

:root.dark-mode .save-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .reset-btn {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .reset-btn:hover {
  background: #606060;
}

:root.dark-mode .help-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

:root.dark-mode .help-section h3 {
  color: #667eea;
  margin-bottom: 15px;
}

:root.dark-mode .help-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

:root.dark-mode .help-link {
  color: #667eea;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid #667eea;
  border-radius: 4px;
  transition: all 0.3s ease;
}

:root.dark-mode .help-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #7b8ff5;
  border-color: #7b8ff5;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
  text-align: center;
  padding: 40px;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Settings Page Styles */
.profile-settings-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  background: #f5f6fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #212529;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.page-header p {
  font-size: 1.1rem;
  color: #6c757d;
}

/* Alerts */
.success-alert {
  background: #d4edda;
  color: #155724;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 4px solid #28a745;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideDown 0.3s ease;
}

.success-icon {
  font-size: 20px;
  display: inline-block;
}

.success-message {
  font-weight: 500;
}

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

/* Tabs */
.settings-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e9ecef;
  overflow-x: auto;
  padding-bottom: 0;
}

.tab-btn {
  padding: 14px 20px;
  background: transparent;
  border: none;
  color: #6c757d;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}

.tab-btn:hover {
  color: #667eea;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

/* Settings Section */
.settings-section {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.3s ease;
}

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

.settings-section h2 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Settings Group */
.settings-group {
  padding: 25px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #667eea;
}

.settings-group h3 {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.group-description {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: -10px;
}

/* Setting Item */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

.setting-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.setting-info {
  flex: 1 1;
  margin-right: 20px;
}

.setting-label {
  display: block;
  font-weight: 600;
  color: #212529;
  margin-bottom: 4px;
  font-size: 15px;
}

.setting-description {
  display: block;
  color: #6c757d;
  font-size: 13px;
}

.setting-select {
  padding: 10px 14px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  color: #495057;
  background: white;
  cursor: pointer;
  min-width: 200px;
  transition: all 0.3s;
}

.setting-select:focus {
  outline: none;
  border-color: #667eea;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 56px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #667eea;
}

input:checked + .slider:before {
  transform: translateX(28px);
}

/* Session Management */
.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e9ecef;
}

.session-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1 1;
}

.device-icon {
  font-size: 24px;
}

.device-name {
  display: block;
  font-weight: 600;
  color: #212529;
  margin-bottom: 3px;
}

.device-location,
.device-time {
  display: block;
  font-size: 13px;
  color: #6c757d;
}

.device-time {
  margin-top: 3px;
}

.session-btn {
  padding: 8px 16px;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.session-btn:hover {
  background: #667eea;
  color: white;
}

.session-btn.current {
  background: #667eea;
  color: white;
  cursor: default;
}

.session-btn.current:hover {
  background: #667eea;
  color: white;
}

/* Data Boxes */
.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 15px;
}

.data-info {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1;
}

.data-icon {
  font-size: 32px;
  min-width: 50px;
  text-align: center;
}

.data-info h4 {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: #212529;
}

.data-info p {
  margin: 0;
  font-size: 13px;
  color: #6c757d;
}

/* Action Buttons */
.action-btn {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
  white-space: nowrap;
}

.action-btn:hover {
  background: #38b6ff;
  transform: translateY(-2px);
}

.action-btn.warning {
  background: #ffc107;
  color: #212529;
}

.action-btn.warning:hover {
  background: #ffb800;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.danger:hover {
  background: #c82333;
}

/* Link Button */
.link-button {
  padding: 0;
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
}

.link-button:hover {
  color: #38b6ff;
  text-decoration: underline;
}

/* Policy Info */
.policy-info {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.policy-info p {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Form Buttons */
.save-section-btn {
  padding: 14px 32px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-start;
}

.save-section-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.save-section-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  text-decoration: none;
  color: #212529;
  transition: all 0.3s;
  border: 2px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.quick-action:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.action-icon {
  font-size: 28px;
  min-width: 50px;
  text-align: center;
}

.action-title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}

.action-desc {
  display: block;
  font-size: 13px;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .profile-settings-page {
    padding: 0 15px;
  }

  .page-header {
    padding: 1.5rem 0;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .page-header p {
    font-size: 0.95rem;
  }

  .settings-tabs {
    overflow-x: auto;
  }

  .tab-btn {
    padding: 12px 16px;
    font-size: 13px;
  }

  .settings-section {
    padding: 25px;
  }

  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .setting-select {
    width: 100%;
    min-width: auto;
  }

  .data-box {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .session-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .session-btn {
    width: 100%;
    text-align: center;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #e8e8e8;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --accent-color: #667eea;
}

/* Dark Mode - Main Page */
:root.dark-mode .profile-settings-page {
  background: #1a1a1a;
}

:root.dark-mode .page-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .page-header p {
  color: #b0b0b0;
}

/* Dark Mode - Alerts */
:root.dark-mode .success-alert {
  background: rgba(40, 167, 69, 0.2);
  color: #4caf50;
  border-left-color: #4caf50;
}

/* Dark Mode - Tabs */
:root.dark-mode .settings-tabs {
  border-bottom-color: #404040;
}

:root.dark-mode .tab-btn {
  color: #b0b0b0;
}

:root.dark-mode .tab-btn:hover {
  color: #667eea;
}

:root.dark-mode .tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

/* Dark Mode - Settings Section */
:root.dark-mode .settings-section {
  background: #2d2d2d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .settings-section h2 {
  color: #e8e8e8;
  border-bottom-color: #404040;
}

/* Dark Mode - Settings Group */
:root.dark-mode .settings-group {
  background: #3a3a3a;
  border-left-color: #667eea;
}

:root.dark-mode .settings-group h3 {
  color: #e8e8e8;
}

:root.dark-mode .group-description {
  color: #b0b0b0;
}

/* Dark Mode - Setting Item */
:root.dark-mode .setting-item {
  border-bottom-color: #404040;
  color: #e8e8e8;
}

:root.dark-mode .setting-label {
  color: #e8e8e8;
}

:root.dark-mode .setting-description {
  color: #b0b0b0;
}

:root.dark-mode .setting-select {
  background: #2d2d2d;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .setting-select:focus {
  border-color: #667eea;
}

/* Dark Mode - Toggle Switch */
:root.dark-mode .slider {
  background-color: #404040;
}

:root.dark-mode input:checked + .slider {
  background-color: #667eea;
}

/* Dark Mode - Session Item */
:root.dark-mode .session-item {
  background: #3a3a3a;
  border-color: #404040;
}

:root.dark-mode .device-name {
  color: #e8e8e8;
}

:root.dark-mode .device-location,
:root.dark-mode .device-time {
  color: #b0b0b0;
}

:root.dark-mode .session-btn {
  border-color: #667eea;
  background: transparent;
  color: #667eea;
}

:root.dark-mode .session-btn:hover {
  background: #667eea;
  color: white;
}

:root.dark-mode .session-btn.current {
  background: #667eea;
  color: white;
}

/* Dark Mode - Data Boxes */
:root.dark-mode .data-box {
  background: #3a3a3a;
  border-color: #404040;
}

:root.dark-mode .data-info h4 {
  color: #e8e8e8;
}

:root.dark-mode .data-info p {
  color: #b0b0b0;
}

:root.dark-mode .action-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .action-btn:hover {
  background: #38b6ff;
}

:root.dark-mode .action-btn.warning {
  background: #ffc107;
  color: #1a1a1a;
}

:root.dark-mode .action-btn.warning:hover {
  background: #ffb800;
}

:root.dark-mode .action-btn.danger {
  background: #dc3545;
  color: white;
}

:root.dark-mode .action-btn.danger:hover {
  background: #c82333;
}

/* Dark Mode - Link Button */
:root.dark-mode .link-button {
  color: #667eea;
}

:root.dark-mode .link-button:hover {
  color: #38b6ff;
  text-decoration: underline;
}

/* Dark Mode - Policy Info */
:root.dark-mode .policy-info {
  background: #3a3a3a;
  border-left-color: #667eea;
}

:root.dark-mode .policy-info p {
  color: #e8e8e8;
}

/* Dark Mode - Quick Actions */
:root.dark-mode .quick-action {
  background: #2d2d2d;
  color: #e8e8e8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}

:root.dark-mode .quick-action:hover {
  border-color: #667eea;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .action-desc {
  color: #b0b0b0;
}

/* Dark Mode - Save Button */
:root.dark-mode .save-section-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

:root.dark-mode .save-section-btn:hover {
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

:root.dark-mode .save-section-btn:disabled {
  opacity: 0.6;
}

/* Family Page Styles */
.family-page {
  min-height: 100vh;
  background: white;
  padding: 20px;
}

.family-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header Section */
.family-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
  text-align: center;
}

.family-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.family-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

/* Stats Section */
.family-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #1971c2 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Family Filters */
.family-filters {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-box {
  flex: 1 1;
  min-width: 200px;
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
}

.filter-group,
.sort-group {
  min-width: 150px;
}

.filter-group select,
.sort-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s;
  background: white;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #667eea;
}

/* Family Grid */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  color: #6c757d;
}

.empty-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Family Member Card */
.family-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.family-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.member-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.member-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.member-info {
  flex: 1 1;
  min-width: 0;
}

.member-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
  word-break: break-word;
}

.member-relation {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.dependent-badge {
  display: inline-block;
  background: #ebfbee;
  color: #2f9e44;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* Member Details */
.member-details {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 8px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item i {
  width: 16px;
  text-align: center;
  color: #667eea;
}

/* Member Stats */
.member-stats {
  padding: 15px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  border-bottom: 1px solid #e9ecef;
}

.stat {
  text-align: center;
}

.stat label {
  display: block;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.stat p {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

/* Member Actions */
.member-actions {
  padding: 15px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  flex: 1 1;
  min-width: 70px;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn i {
  font-size: 11px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

.btn-danger {
  background: #ff6b6b;
  color: white;
}

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

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-lg {
  max-width: 600px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #212529;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
  .family-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .family-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box,
  .filter-group,
  .sort-group {
    width: 100%;
  }

  .family-grid {
    grid-template-columns: 1fr;
  }

  .member-stats {
    grid-template-columns: 1fr;
  }

  .member-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

/* Insurance Page Styles */
.insurance-page {
  min-height: 100vh;
  background: white;
  padding: 20px;
}

.insurance-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header Section */
.insurance-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
  text-align: center;
}

.insurance-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.insurance-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

/* Stats Section */
.insurance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #f59f00 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #1971c2 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Insurance Filters */
.insurance-filters {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-box {
  flex: 1 1;
  min-width: 200px;
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
}

.filter-group,
.sort-group {
  min-width: 150px;
}

.filter-group select,
.sort-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s;
  background: white;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #667eea;
}

/* Insurance Grid */
.insurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  color: #6c757d;
}

.empty-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Insurance Card */
.insurance-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.insurance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.insurance-header-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.insurance-provider-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.provider-info {
  flex: 1 1;
  min-width: 0;
}

.provider-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
  word-break: break-word;
}

.provider-status {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.status-badge {
  display: inline-block;
  background: #ebfbee;
  color: #2f9e44;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* Insurance Details */
.insurance-details {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6c757d;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row strong {
  color: #212529;
}

.detail-row i {
  width: 16px;
  text-align: center;
  color: #667eea;
}

/* Insurance Info */
.insurance-info {
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.info-label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  display: block;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
}

/* Insurance Actions */
.insurance-actions {
  padding: 15px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  flex: 1 1;
  min-width: 70px;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn i {
  font-size: 11px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-lg {
  max-width: 600px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #212529;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
  .insurance-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .insurance-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box,
  .filter-group,
  .sort-group {
    width: 100%;
  }

  .insurance-grid {
    grid-template-columns: 1fr;
  }

  .insurance-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

/* Patient Analytics Page - Modern Design */
.analytics-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.analytics-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Loading and Error States */
.loading,
.error {
  text-align: center;
  padding: 40px 20px;
  font-size: 16px;
  border-radius: 12px;
  margin: 20px 0;
}

.loading {
  background: white;
  color: #667eea;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.error {
  background: #ffe5e5;
  color: #d32f2f;
  box-shadow: 0 4px 20px rgba(211, 47, 47, 0.1);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 30px 20px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}

/* Header Section */
.analytics-header {
  margin-bottom: 50px;
  text-align: center;
}

.analytics-header h1 {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 15px 0;
  letter-spacing: -0.5px;
}

.analytics-header p {
  font-size: 18px;
  color: #6c757d;
  margin: 0 0 30px 0;
  font-weight: 500;
}

.period-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.period-selector select {
  padding: 12px 20px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  cursor: pointer;
  transition: all 0.3s ease;
}

.period-selector select:hover,
.period-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Overview Cards */
.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 50px;
}

.overview-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  gap: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.overview-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.overview-icon {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  flex-shrink: 0;
}

.overview-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.overview-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
}

.overview-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #fab005 100%);
}

.overview-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #4dabf7 100%);
}

.overview-content {
  flex: 1 1;
}

.overview-content h3 {
  font-size: 32px;
  font-weight: 800;
  color: #212529;
  margin: 0 0 8px 0;
  line-height: 1;
}

.overview-content p {
  font-size: 14px;
  color: #868e96;
  margin: 0 0 12px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trend {
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border-radius: 8px;
  width: -webkit-fit-content;
  width: fit-content;
}

.trend.positive {
  background: rgba(81, 207, 102, 0.1);
  color: #51cf66;
}

.trend.negative {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
}

.trend.neutral {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.trend i {
  font-size: 11px;
}

/* Analytics Grid & Cards */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 40px;
}

.analytics-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.analytics-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f2f5;
}

.card-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.btn-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}

.btn-link:hover {
  color: #764ba2;
  transform: translateX(4px);
}

.btn-link i {
  font-size: 11px;
}

.card-body {
  padding: 24px;
}

/* Chart Bars */
.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  gap: 12px;
}

.chart-bar {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.chart-bar .bar {
  width: 100%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px 8px 0 0;
  min-height: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.chart-bar .bar:hover {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.bar-label {
  font-size: 12px;
  font-weight: 700;
  color: #868e96;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bar-value {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  display: none;
}

.chart-bar:hover .bar-value {
  display: block;
}

/* Specialty List */
.specialty-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.specialty-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.specialty-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  transform: translateX(4px);
}

.specialty-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rank {
  font-weight: 800;
  font-size: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 30px;
}

.specialty-item .name {
  font-weight: 600;
  color: #212529;
  font-size: 15px;
}

.specialty-item .count {
  font-weight: 700;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
}

/* Trends List */
.trends-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.trend-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  transform: translateX(4px);
}

.trend-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.trend-info i {
  font-size: 18px;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.trend-info span {
  font-weight: 600;
  color: #212529;
}

.trend-values {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trend-values .current {
  font-size: 18px;
  font-weight: 800;
  color: #212529;
}

.trend-values .previous {
  font-size: 13px;
  color: #868e96;
  font-weight: 500;
}

.trend-values .change {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  min-width: 45px;
  text-align: center;
}

.trend-values .change.positive {
  background: rgba(81, 207, 102, 0.1);
  color: #51cf66;
}

.trend-values .change.negative {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
}

.trend-values .change.neutral {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
}

.activity-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  transform: translateX(4px);
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.activity-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.activity-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
}

.activity-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #fab005 100%);
}

.activity-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #4dabf7 100%);
}

.activity-content {
  flex: 1 1;
}

.activity-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.activity-content p {
  font-size: 12px;
  color: #868e96;
  margin: 0;
}

/* Insights Section */
.insights-section {
  margin-top: 50px;
}

.insights-header {
  text-align: center;
  margin-bottom: 40px;
}

.insights-header h2 {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 12px 0;
}

.insights-header p {
  font-size: 16px;
  color: #868e96;
  margin: 0;
  font-weight: 500;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 25px;
  gap: 25px;
}

.insight-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.insight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.insight-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin: 0 auto 20px;
}

.insight-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 12px 0;
}

.insight-card p {
  font-size: 14px;
  color: #868e96;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn i {
  font-size: 12px;
}

.btn.btn-link {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 10px 20px;
}

.btn.btn-link:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .analytics-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}

@media (max-width: 768px) {
  .analytics-header h1 {
    font-size: 32px;
  }

  .analytics-header p {
    font-size: 16px;
  }

  .analytics-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .overview-card {
    padding: 20px;
    gap: 12px;
  }

  .overview-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }

  .overview-content h3 {
    font-size: 26px;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .insights-header h2 {
    font-size: 26px;
  }
}

@media (max-width: 600px) {
  .analytics-page {
    padding: 12px;
  }

  .analytics-header {
    margin-bottom: 30px;
  }

  .analytics-header h1 {
    font-size: 26px;
  }

  .analytics-overview {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .overview-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .overview-content h3 {
    font-size: 24px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .trend-values {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .insight-card {
    padding: 24px;
  }
}

.doctor-schedule-page,
.schedule-page {
  background: white;
  min-height: 100vh;
  padding: 40px 20px;
}

.schedule-main {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
  flex-wrap: wrap;
  gap: 20px;
  color: white;
}

.header-content h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.header-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

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

.schedule-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.view-switcher {
  display: flex;
  gap: 10px;
}

.view-switcher .btn {
  padding: 8px 16px;
  border: none;
  background: white;
  color: #2c3e50;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.view-switcher .btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.week-navigation {
  display: flex;
  align-items: center;
  gap: 15px;
}

.week-navigation .btn-icon {
  padding: 8px 12px;
  border: none;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  color: #2c3e50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.week-navigation .btn-icon:hover {
  background: #f5f5f5;
}

.current-week h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
  white-space: nowrap;
}

.schedule-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.available {
  background: #667eea;
}

.stat-icon.booked {
  background: #f59e0b;
}

.stat-icon.total {
  background: #10b981;
}

.stat-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.stat-content p {
  font-size: 12px;
  color: #7f8c8d;
  margin: 2px 0 0 0;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.schedule-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

/* Schedule Card Header */
.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.schedule-number {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.schedule-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-active {
  background: #e8f5e9;
  color: #2e7d32;
}

/* Schedule Card Details - 4 Rows */
.schedule-details-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
  flex: 1 1;
}

.schedule-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #2c3e50;
}

.schedule-detail-row:last-child {
  border-bottom: none;
}

.schedule-detail-row i {
  color: #667eea;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.schedule-detail-row span {
  flex: 1 1;
}

/* Schedule Card Actions */
.schedule-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.schedule-actions .btn {
  flex: 1 1;
  padding: 8px 10px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  color: #d0d0d0;
  margin-bottom: 15px;
  display: block;
}

.empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.empty-state p {
  color: #95a5a6;
  font-size: 14px;
  margin: 0;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.schedule-modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.schedule-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #95a5a6;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #2c3e50;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Schedule Form */
.schedule-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: white;
  color: #2c3e50;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #2c3e50;
  font-weight: 400;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
}

/* Button Styles */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

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

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.btn-icon {
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  color: #2c3e50;
}

.btn-icon:hover {
  background: #f5f5f5;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  .schedule-page,
  .doctor-schedule-page {
    background: white;
  }

  .schedule-header {
    background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  }

  .schedule-card {
    background: white;
    color: #000000;
  }

  .schedule-card h4 {
    color: #000000;
  }

  .form-group label {
    color: #000000;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    background: white;
    color: #000000;
    border-color: #d0d0d0;
  }

  .modal-content {
    background: white;
  }

  .modal-header,
  .modal-footer {
    border-color: #e0e0e0;
  }

  .modal-header h2 {
    color: #000000;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .schedule-page,
  .doctor-schedule-page {
    padding: 20px 12px;
  }

  .schedule-header {
    flex-direction: column;
    text-align: left;
  }

  .schedule-controls {
    flex-direction: column;
    gap: 15px;
  }

  .view-switcher {
    width: 100%;
    justify-content: center;
  }

  .week-navigation {
    width: 100%;
    justify-content: space-between;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }

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

  .modal-content {
    max-width: 90%;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Doctor Patients Page Styles */
.doctor-patients-page {
  min-height: 100vh;
  background: white;
  padding: 16px;
}

.doctor-patients-main {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.container {
  width: 100%;
}

/* Header Section */
.patients-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
  text-align: center;
}

.patients-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.patients-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

/* Stats Section */
.patients-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #f59f00 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #1971c2 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Filter Section */
.patients-filters {
  background: white;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-box {
  flex: 1 1;
  min-width: 200px;
  position: relative;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
}

.filter-group,
.sort-group {
  min-width: 150px;
}

.filter-group select,
.sort-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s;
  background: white;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #667eea;
}

/* Patients Grid */
.patients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
}

/* Empty State */
.empty-state,
.loading-state,
.error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
}

.empty-state {
  color: #6c757d;
}

.loading-state {
  color: #667eea;
}

.error-state {
  color: #d63031;
}

.empty-state i,
.loading-state i,
.error-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.empty-state h3,
.loading-state h3,
.error-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.empty-state p,
.loading-state p,
.error-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state .btn {
  margin: 0 auto;
}

/* Patient Card */
.patient-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.patient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.patient-header {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
  text-align: center;
}

.patient-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.patient-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 8px;
}

.patient-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0;
  word-break: break-word;
}

.patient-details {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6c757d;
  justify-content: center;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-item i {
  color: #667eea;
  font-size: 11px;
}

.status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 8px;
}

.status-active {
  background: #ebfbee;
  color: #2f9e44;
}

.status-inactive {
  background: #ffe0e0;
  color: #d63031;
}

/* Patient Contact */
.patient-contact {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 8px;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item i {
  width: 16px;
  text-align: center;
  color: #667eea;
}

/* Patient Conditions */
.patient-conditions {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.patient-conditions h4 {
  font-size: 12px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.condition-badge {
  display: inline-block;
  background: #e7f5ff;
  color: #1971c2;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.no-conditions {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* Patient Stats */
.patient-stats {
  padding: 15px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  border-bottom: 1px solid #e9ecef;
}

.stat {
  text-align: center;
  padding: 0;
}

.stat label {
  display: block;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat p {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

/* Patient Actions */
.patient-actions {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.btn {
  flex: 1 1;
  min-width: 80px;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.btn i {
  font-size: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-lg {
  max-width: 600px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #212529;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Profile Overview */
.patient-profile-overview {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
  border-radius: 8px;
  margin-bottom: 20px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-info h3 {
  font-size: 22px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.profile-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-section {
  margin-bottom: 20px;
}

.profile-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e7f5ff;
  color: #1971c2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 2px 0;
}

.stat-content p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.quick-actions .btn {
  padding: 10px;
  font-size: 12px;
}

/* Responsive - Large Desktop */
@media (min-width: 1400px) {
  .patients-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
  }
}

/* Responsive - Desktop */
@media (max-width: 1399px) and (min-width: 1024px) {
  .patients-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }
}

/* Responsive - Tablet */
@media (max-width: 1023px) and (min-width: 769px) {
  .patients-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .doctor-patients-page {
    padding: 12px;
  }

  .doctor-patients-main {
    max-width: 100%;
  }

  .patients-header {
    padding: 16px 0;
    margin-bottom: 24px;
  }

  .patients-header h1 {
    font-size: 24px;
    margin: 0 0 8px 0;
  }

  .patients-header p {
    font-size: 14px;
  }

  .patients-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .stat-card {
    padding: 14px;
    gap: 12px;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .stat-content h3 {
    font-size: 20px;
  }

  .patient-stats,
  .profile-details {
    grid-template-columns: repeat(2, 1fr);
  }

  .patients-filters {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 12px;
    margin-bottom: 20px;
  }

  .search-box,
  .filter-group,
  .sort-group {
    width: 100%;
    min-width: 100%;
  }

  .search-box input,
  .filter-group select,
  .sort-group select {
    padding: 11px;
    font-size: 16px;
  }

  .patients-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .patient-card {
    border-radius: 8px;
  }

  .patient-header {
    padding: 18px 14px;
    gap: 10px;
  }

  .patient-avatar {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 6px;
  }

  .patient-info h3 {
    font-size: 15px;
    margin: 0;
  }

  .patient-details {
    font-size: 12px;
  }

  .patient-contact {
    padding: 12px 14px;
  }

  .contact-item {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .patient-conditions {
    padding: 12px 14px;
  }

  .patient-conditions h4 {
    font-size: 11px;
  }

  .condition-badge {
    padding: 3px 7px;
    font-size: 10px;
  }

  .patient-stats {
    padding: 12px 14px;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
  }

  .stat label {
    font-size: 10px;
    margin-bottom: 3px;
  }

  .stat p {
    font-size: 13px;
  }

  .patient-actions {
    padding: 12px 14px;
    gap: 8px;
  }

  .patient-actions .btn {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1 1;
    min-width: 70px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quick-actions .btn {
    padding: 10px;
    font-size: 12px;
    width: 100%;
  }

  /* Override circular elements */
  [class*="avatar"],
  .spinner,
  [class*="circle"] {
    border-radius: 5% !important;
    margin: auto !important;
  }

  .doctor-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .doctor-patients-page {
    padding: 8px;
  }

  .patients-header h1 {
    font-size: 20px;
    margin: 0 0 6px 0;
  }

  .patients-header p {
    font-size: 12px;
  }

  .patients-stats {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-content h3 {
    font-size: 18px;
  }

  .stat-content p {
    font-size: 12px;
  }

  .patients-filters {
    padding: 10px;
    gap: 10px;
    margin-bottom: 16px;
  }

  .search-box input,
  .filter-group select,
  .sort-group select {
    font-size: 16px;
    padding: 10px;
  }

  .patient-card {
    border-radius: 8px;
  }

  .patient-header {
    padding: 16px 12px;
    gap: 8px;
  }

  .patient-avatar {
    width: 45px;
    height: 45px;
    font-size: 18px;
    margin-bottom: 4px;
  }

  .patient-info h3 {
    font-size: 14px;
    margin: 0;
  }

  .patient-details {
    font-size: 11px;
  }

  .patient-contact {
    padding: 10px 12px;
  }

  .contact-item {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .patient-conditions {
    padding: 10px 12px;
  }

  .patient-conditions h4 {
    font-size: 10px;
  }

  .patient-stats {
    padding: 10px 12px;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
  }

  .stat label {
    font-size: 9px;
    margin-bottom: 2px;
  }

  .stat p {
    font-size: 12px;
  }

  .patient-actions {
    padding: 10px 12px;
    gap: 8px;
  }

  .patient-actions .btn {
    padding: 7px 10px;
    font-size: 11px;
    min-width: 60px;
  }

  .empty-state,
  .loading-state,
  .error-state {
    padding: 40px 12px;
  }

  .empty-state i,
  .loading-state i,
  .error-state i {
    font-size: 48px;
  }

  .empty-state h3,
  .loading-state h3,
  .error-state h3 {
    font-size: 18px;
  }
}

/* Doctor Appointments Page */

.doctor-appointments-page {
  min-height: 100vh;
  background: white;
  padding: 16px;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

.doctor-appointments-main {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Appointments Header */
.appointments-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
}

.appointments-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.appointments-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.appointments-header-right {
  display: flex;
  gap: 12px;
}

/* Appointments Stats */
.appointments-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.stat-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  width: 100%;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.primary {
  background: #667eea;
}

.stat-icon.success {
  background: #10b981;
}

.stat-icon.warning {
  background: #f59e0b;
}

.stat-icon.info {
  background: #3b82f6;
}

.stat-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.stat-content p {
  font-size: 12px;
  color: #7f8c8d;
  margin: 2px 0 0 0;
}

/* Appointments Filters */
.appointments-filters {
  background: white;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
}

.search-box {
  flex: 1 1;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 8px 12px;
}

.search-box i {
  color: #95a5a6;
  font-size: 14px;
}

.search-box input {
  flex: 1 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.filter-group,
.sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group select,
.sort-group select {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

/* Appointments List & Container */
.appointments-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.appointments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
}

.empty-state h3 {
  font-size: 20px;
  color: #2c3e50;
  margin: 10px 0;
}

.empty-state p {
  color: #95a5a6;
  font-size: 14px;
}

/* Appointment Card */
.appointment-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  width: 100%;
}

.appointment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.patient-info {
  display: flex;
  gap: 12px;
  flex: 1 1;
}

.patient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.patient-details h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.patient-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #7f8c8d;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item i {
  color: #667eea;
  font-size: 12px;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.status-badge.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.status-confirmed {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.status-completed {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.status-cancelled {
  background: #fee2e2;
  color: #7f1d1d;
}

/* Appointment Details */
.appointment-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.detail-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1 1;
  min-width: 150px;
}

.detail-item i {
  color: #667eea;
  font-size: 14px;
  margin-top: 2px;
  min-width: 14px;
}

.detail-item label {
  font-size: 12px;
  color: #7f8c8d;
  font-weight: 600;
  line-height: 1.2;
}

.detail-item p {
  font-size: 13px;
  color: #2c3e50;
  margin: 0;
}

/* Appointment Notes */
.appointment-notes {
  padding: 10px;
  background: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 12px;
}

.appointment-notes label {
  font-size: 12px;
  font-weight: 600;
  color: #7f8c8d;
}

.appointment-notes p {
  font-size: 13px;
  color: #2c3e50;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Appointment Actions */
.appointment-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.appointment-actions .btn {
  flex: 1 1;
  min-width: 100px;
  padding: 7px 10px;
  font-size: 12px;
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

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

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.btn-success {
  background: #10b981;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #95a5a6;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #2c3e50;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Appointment Form */
.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: white;
  color: #2c3e50;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input[type="date"],
.form-group input[type="time"] {
  background: white;
}

.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

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

/* Radio Group Styling */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #2c3e50;
}

.radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.radio-label span {
  -webkit-user-select: none;
          user-select: none;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  .doctor-appointments-page {
    background: white;
  }

  .appointment-card {
    background: white;
    color: #000000;
  }

  .patient-details h3 {
    color: #000000;
  }

  .detail-item p,
  .modal-header h2 {
    color: #000000;
  }

  .form-group label {
    color: #000000;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    background: white;
    color: #000000;
    border-color: #d0d0d0;
  }

  .radio-label {
    color: #000000;
  }

  .radio-label input[type="radio"] {
    accent-color: #667eea;
  }

  .modal-content {
    background: white;
  }

  .modal-header,
  .modal-footer {
    border-color: #e0e0e0;
  }

  .modal-close {
    color: #95a5a6;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .doctor-appointments-page {
    padding: 0;
    margin: 0;
  }

  .doctor-appointments-main {
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  .appointments-header {
    flex-direction: column;
    text-align: left;
    padding: 16px;
    margin: 0;
    margin-bottom: 16px;
    border-radius: 0;
  }

  .appointments-header h1 {
    font-size: 22px;
  }

  .appointments-stats {
    gap: 12px;
    margin: 0;
    margin-bottom: 16px;
    padding: 0 12px;
  }

  .stat-card {
    padding: 12px;
  }

  .appointments-filters {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 0;
  }

  .search-box {
    width: 100%;
    padding: 8px;
  }

  .filter-group,
  .sort-group {
    width: 100%;
  }

  .filter-group select,
  .sort-group select {
    width: 100%;
  }

  .appointments-list {
    padding: 0;
    margin: 0;
  }

  .appointment-card {
    margin: 0;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 0;
  }

  .appointment-header {
    padding: 0 0 12px 0;
    margin-bottom: 12px;
  }

  .detail-row {
    flex-direction: column;
    gap: 10px;
  }

  .detail-item {
    min-width: auto;
    padding: 8px 0;
  }

  .appointment-actions {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }

  .appointment-actions .btn {
    width: 100%;
    padding: 10px;
    font-size: 12px;
  }

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

  .modal-content {
    max-width: 90%;
  }

  .modal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal-close {
    align-self: flex-end;
    margin: -8px;
  }
}

@media (max-width: 480px) {
  .doctor-appointments-page {
    padding: 0;
  }

  .appointments-header {
    padding: 12px;
    margin-bottom: 12px;
  }

  .appointments-header h1 {
    font-size: 18px;
  }

  .appointments-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 8px;
    margin-bottom: 12px;
  }

  .stat-card {
    padding: 10px;
  }

  .appointments-filters {
    padding: 10px;
    gap: 8px;
    margin-bottom: 12px;
  }

  .search-box {
    padding: 6px;
  }

  .appointment-card {
    padding: 10px;
    margin-bottom: 10px;
  }

  .appointment-actions .btn {
    padding: 8px;
    font-size: 11px;
  }
}


/* Doctor Prescriptions Page Styles */
.doctor-prescriptions-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
}

.doctor-prescriptions-main {
  max-width: 1400px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

/* Header Section */
.prescriptions-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prescriptions-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.prescriptions-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
  flex: 1 1;
}

/* Stats Section */
.prescriptions-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: #e7f5ff;
  color: #1971c2;
}

.stat-icon.success {
  background: #ebfbee;
  color: #2f9e44;
}

.stat-icon.info {
  background: #e3f2fd;
  color: #1976d2;
}

.stat-icon.warning {
  background: #fff3e0;
  color: #f57c00;
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 4px 0 0 0;
}

/* Filters Section */
.prescriptions-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: space-between;
  align-items: center;
}

.search-box {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  min-width: 250px;
}

.search-box i {
  color: #6c757d;
}

.search-box input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #212529;
}

.search-box input::placeholder {
  color: #adb5bd;
}

.filter-group {
  display: flex;
  gap: 10px;
}

.filter-group select {
  padding: 10px 15px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  color: #212529;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-group select:hover {
  border-color: #667eea;
}

/* Loading State */
.loading-state,
.error-state,
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
}

.loading-state {
  color: #667eea;
}

.error-state {
  color: #d63031;
}

.empty-state {
  color: #6c757d;
}

.loading-state i,
.error-state i,
.empty-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.loading-state h3,
.error-state h3,
.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.loading-state p,
.error-state p,
.empty-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state .btn {
  margin: 0 auto;
}

/* Prescriptions Grid */
.prescriptions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

/* Prescription Card */
.prescription-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.prescription-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.prescription-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.patient-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.patient-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.patient-details h3 {
  font-size: 15px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.prescription-date {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-success {
  background: #ebfbee;
  color: #2f9e44;
}

.status-info {
  background: #e3f2fd;
  color: #1976d2;
}

.status-warning {
  background: #fff3e0;
  color: #f57c00;
}

.status-default {
  background: #e9ecef;
  color: #495057;
}

.prescription-diagnosis {
  padding: 15px 20px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #e9ecef;
}

.prescription-diagnosis i {
  color: #667eea;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.prescription-diagnosis label {
  display: block;
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.prescription-diagnosis p {
  font-size: 14px;
  color: #212529;
  margin: 0;
  font-weight: 600;
}

.prescription-medications {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.prescription-medications h4 {
  font-size: 12px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.medication-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 13px;
}

.medication-name {
  font-weight: 600;
  color: #212529;
}

.medication-dosage {
  color: #6c757d;
  font-size: 12px;
}

.more-medications {
  font-size: 12px;
  color: #667eea;
  margin: 4px 0 0 0;
  font-weight: 600;
  cursor: pointer;
}

.prescription-followup {
  padding: 15px 20px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #e9ecef;
}

.prescription-followup i {
  color: #28a745;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.prescription-followup label {
  display: block;
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.prescription-followup p {
  font-size: 14px;
  color: #212529;
  margin: 0;
  font-weight: 600;
}

.prescription-actions {
  padding: 15px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  flex: 1 1;
  min-width: 80px;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.btn i {
  font-size: 11px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-lg {
  max-width: 700px;
  width: 100%;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #212529;
}

.modal-body {
  padding: 20px;
}

/* Prescription Overview */
.prescription-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.overview-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.overview-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
  font-size: 16px;
  flex-shrink: 0;
}

.overview-label {
  font-size: 12px;
  color: #6c757d;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  font-weight: 600;
}

.overview-value {
  font-size: 14px;
  color: #212529;
  margin: 0;
  font-weight: 700;
}

/* Prescription Details Section */
.prescription-details-section {
  margin-bottom: 20px;
}

.prescription-details-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 15px 0;
}

/* Medications List */
.medications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.medication-detail {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.medication-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.medication-header h5 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.dosage-badge {
  display: inline-block;
  padding: 4px 10px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  color: #667eea;
  font-weight: 600;
}

.medication-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.info-item label {
  display: block;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.info-item p {
  font-size: 13px;
  color: #212529;
  margin: 0;
  font-weight: 600;
}

.instructions-content {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #28a745;
  font-size: 13px;
  color: #212529;
  line-height: 1.6;
  margin: 0;
}

.followup-info {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

.prescription-actions-section {
  display: flex;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
  margin-top: 20px;
}

.prescription-actions-section .btn {
  flex: 1 1;
  padding: 10px 12px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .prescriptions-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .prescriptions-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box,
  .filter-group {
    width: 100%;
  }

  .prescriptions-grid {
    grid-template-columns: 1fr;
  }

  .prescriptions-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .prescription-overview {
    grid-template-columns: 1fr;
  }

  .medication-info {
    grid-template-columns: 1fr;
  }

  .prescription-actions-section {
    flex-direction: column;
  }

  .prescription-actions-section .btn {
    width: 100%;
  }

  /* Override circular elements */
  [class*="avatar"],
  .spinner,
  [class*="circle"] {
    border-radius: 5% !important;
    margin: auto !important;
  }

  .doctor-avatar,
  .patient-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Doctor Earnings Page Styles */
.doctor-earnings-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
}

.doctor-earnings-main {
  max-width: 1400px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

/* Header Section */
.earnings-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
}

.earnings-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.earnings-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0 0 20px 0;
}

.period-selector select {
  padding: 10px 15px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  color: #212529;
  cursor: pointer;
  transition: all 0.3s;
}

.period-selector select:hover {
  border-color: #667eea;
}

/* Loading State */
.loading-state,
.error-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  color: #6c757d;
  margin-bottom: 40px;
}

.loading-state {
  color: #667eea;
}

.error-state {
  color: #d63031;
}

.loading-state i,
.error-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.loading-state h3,
.error-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.loading-state p,
.error-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state .btn {
  margin: 0 auto;
}

/* Overview Cards */
.earnings-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.overview-icon.primary {
  background: #e7f5ff;
  color: #1971c2;
}

.overview-icon.success {
  background: #ebfbee;
  color: #2f9e44;
}

.overview-icon.warning {
  background: #fff3e0;
  color: #f57c00;
}

.overview-icon.info {
  background: #e3f2fd;
  color: #1976d2;
}

.overview-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.overview-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 4px 0 10px 0;
}

.trend {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend.positive {
  color: #2f9e44;
}

.trend.negative {
  color: #d63031;
}

/* Grid Layout */
.earnings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

/* Earnings Card */
.earnings-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.earnings-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.card-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.period-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-link {
  color: #667eea;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}

.btn-link:hover {
  color: #38b6ff;
}

.card-body {
  padding: 20px;
}

/* Chart */
.chart-placeholder {
  width: 100%;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  height: 300px;
  margin-bottom: 10px;
}

.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.bar {
  width: 100%;
  background: linear-gradient(180deg, #667eea 0%, #38b6ff 100%);
  border-radius: 8px 8px 0 0;
  transition: all 0.3s;
  cursor: pointer;
  min-height: 20px;
}

.bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.bar-label {
  font-size: 12px;
  font-weight: 600;
  color: #212529;
}

.bar-value {
  font-size: 11px;
  color: #6c757d;
}

/* Breakdown List */
.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.breakdown-info {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1 1;
}

.breakdown-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
  font-size: 18px;
  flex-shrink: 0;
}

.breakdown-icon.video {
  color: #28a745;
}

.breakdown-details h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.breakdown-details p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.breakdown-amount {
  text-align: right;
}

.breakdown-amount h4 {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.breakdown-amount p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

/* Transactions List */
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.transaction-item:hover {
  background: #f0f3ff;
}

.transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
  font-size: 16px;
  flex-shrink: 0;
}

.transaction-info {
  flex: 1 1;
}

.transaction-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.transaction-info p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.transaction-amount {
  text-align: right;
}

.transaction-amount h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-success {
  background: #ebfbee;
  color: #2f9e44;
}

.status-warning {
  background: #fff3e0;
  color: #f57c00;
}

.status-danger {
  background: #ffe0e0;
  color: #d63031;
}

.status-info {
  background: #e3f2fd;
  color: #1976d2;
}

/* Metrics List */
.metrics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.metric-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.metric-info p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.metric-value h4 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

/* Actions */
.earnings-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn i {
  font-size: 13px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

/* Responsive */
@media (max-width: 768px) {
  .earnings-header {
    padding: 20px 0;
  }

  .earnings-header h1 {
    font-size: 28px;
  }

  .earnings-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .earnings-grid {
    grid-template-columns: 1fr;
  }

  .metrics-list {
    grid-template-columns: 1fr;
  }

  .chart-bars {
    height: 200px;
  }

  .earnings-actions {
    justify-content: stretch;
  }

  .earnings-actions .btn {
    flex: 1 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .earnings-overview {
    grid-template-columns: 1fr;
  }

  .overview-card {
    flex-direction: column;
    text-align: center;
  }

  .overview-icon {
    margin: 0 auto;
  }
}

/* Manager Appointments Page - Optimized Design */

.manager-appointments-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.manager-appointments-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Appointments Header */
.appointments-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.appointments-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.appointments-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

/* Appointments Stats */
.appointments-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid #10b981;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-card.pending {
  border-left-color: #f59e0b;
}

.stat-card.completed {
  border-left-color: #10b981;
}

.stat-card.cancelled {
  border-left-color: #ef4444;
}

.stat-card h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 8px 0;
}

.stat-card p {
  color: #6c757d;
  margin: 0;
  font-size: 14px;
}

/* Appointments Controls */
.appointments-controls {
  background: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-group label {
  font-size: 13px;
  font-weight: 600;
  color: #212529;
  text-transform: uppercase;
}

.control-group input,
.control-group select {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.control-group input:focus,
.control-group select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Appointments List */
.appointments-list {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.appointment-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
}

.appointment-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateX(4px);
}

.appointment-card.pending {
  border-left-color: #f59e0b;
}

.appointment-card.completed {
  border-left-color: #10b981;
}

.appointment-card.cancelled {
  border-left-color: #ef4444;
}

.appointment-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  gap: 16px;
}

.appointment-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1 1;
  min-width: 200px;
}

.patient-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.appointment-details h3 {
  margin: 0;
  font-size: 16px;
  color: #212529;
  font-weight: 700;
}

.appointment-details .doctor-name {
  margin: 4px 0 0 0;
  color: #6c757d;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-confirmed {
  background: #dbeafe;
  color: #1e40af;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-completed {
  background: #dcfce7;
  color: #15803d;
}

.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Appointment Info Grid */
.appointment-info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.info-item {
  display: flex;
  gap: 12px;
}

.info-item i {
  font-size: 18px;
  color: #667eea;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.info-item label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.info-item p {
  margin: 0;
  color: #212529;
  font-size: 14px;
  font-weight: 600;
}

/* Appointment Actions */
.appointment-actions {
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.appointment-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-confirm {
  background: #10b981;
  color: white;
}

.action-confirm:hover {
  background: #059669;
}

.action-reschedule {
  background: #3b82f6;
  color: white;
}

.action-reschedule:hover {
  background: #2563eb;
}

.action-cancel {
  background: #ef4444;
  color: white;
}

.action-cancel:hover {
  background: #dc2626;
}

.action-notes {
  background: #667eea;
  color: white;
}

.action-notes:hover {
  background: #5568d3;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.empty-state i {
  font-size: 56px;
  color: #ccc;
  margin-bottom: 16px;
}

.empty-state h3 {
  color: #212529;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.empty-state p {
  color: #6c757d;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .appointments-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .appointments-header h1 {
    font-size: 24px;
  }

  .appointment-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .appointment-info-grid {
    grid-template-columns: 1fr;
  }

  .appointments-controls {
    grid-template-columns: 1fr;
  }
}

/* Additional button styles */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
}

.btn-outline {
  background: #f0f0f0;
  color: #212529;
  border: 1px solid #e0e0e0;
}

.btn-outline:hover {
  background: #e0e0e0;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

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

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  animation: slidein 0.3s ease;
}

.modal-lg {
  max-width: 700px;
}

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

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #212529;
  font-weight: 700;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close:hover {
  color: #212529;
}

.modal-body {
  padding: 24px;
}

.appointment-details-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.overview-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.overview-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-label {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.overview-value {
  font-size: 14px;
  color: #212529;
  font-weight: 700;
  margin: 4px 0 0 0;
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
}

.form-group label i {
  margin-right: 8px;
  color: #667eea;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-hint {
  font-size: 13px;
  color: #6c757d;
  padding: 12px;
  background: #f8f9fa;
  border-left: 3px solid #667eea;
  border-radius: 4px;
  margin: 0;
}

.form-hint i {
  margin-right: 8px;
  color: #667eea;
}

/* Alert Styles */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  animation: slideDown 0.3s ease;
}

.alert i {
  margin-right: 10px;
  font-size: 16px;
}

.alert-danger {
  background: #fee;
  border: 1px solid #fcc;
  color: #c33;
}

.alert-success {
  background: #efe;
  border: 1px solid #cfc;
  color: #3c3;
}

.alert-warning {
  background: #ffe;
  border: 1px solid #ffc;
  color: #c90;
}

.alert-info {
  background: #eef;
  border: 1px solid #ccf;
  color: #33c;
}

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

/* Modal adjustments */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  background: #f8f9fa;
  border-top: 1px solid #e0e6ed;
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

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

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

/* Appointments Header Button */
.appointments-header .btn {
  margin-left: auto;
}

@media (max-width: 768px) {
  .appointments-header {
    flex-direction: column;
    align-items: stretch;
  }

  .appointments-header .btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .form-group input,
  .form-group select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Manager Revenue Page - Optimized Design */

.manager-revenue-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.manager-revenue-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Revenue Header */
.revenue-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}

.revenue-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.revenue-header p {
  margin: 0 0 20px 0;
  opacity: 0.9;
  font-size: 16px;
}

.period-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.period-selector select {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.period-selector select:hover {
  background: rgba(255, 255, 255, 0.3);
}

.period-selector select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
}

.period-selector select option {
  background: #2d3748;
  color: white;
}

/* Revenue Overview */
.revenue-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: white;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  gap: 16px;
}

.overview-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.overview-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.overview-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.overview-icon.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.overview-icon.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.overview-icon.info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.overview-content {
  flex: 1 1;
}

.overview-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 4px 0;
}

.overview-content p {
  color: #6c757d;
  margin: 0 0 12px 0;
  font-size: 14px;
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.trend.positive {
  color: #10b981;
}

.trend.negative {
  color: #ef4444;
}

.trend i {
  font-size: 12px;
}

/* Revenue Cards */
.revenue-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1200px) {
  .revenue-cards-container {
    grid-template-columns: 1fr;
  }
}

.revenue-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.revenue-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.card-header {
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.period-label {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 600;
}

.card-body {
  padding: 24px;
}

/* Top Doctors List */
.top-doctors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.doctor-item:hover {
  background: #f0f0f0;
}

.doctor-info {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 1 1;
}

.rank {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.doctor-details h4 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
}

.doctor-details p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
}

.doctor-metrics {
  display: flex;
  gap: 24px;
}

.metric label {
  font-size: 11px;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.metric p {
  margin: 0;
  font-size: 15px;
  color: #212529;
  font-weight: 700;
}

/* Specialization List */
.specialization-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.specialization-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.spec-info h4 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
}

.spec-info p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
}

.spec-revenue {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  gap: 16px;
}

.spec-revenue h4 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
  white-space: nowrap;
}

.revenue-bar {
  flex: 1 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #38b6ff 100%);
  border-radius: 3px;
}

/* Actions List */
.actions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #212529;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.action-content h4 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
}

.action-content p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
}

.action-item i:last-child {
  margin-left: auto;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .revenue-header {
    padding: 24px;
  }

  .revenue-header h1 {
    font-size: 24px;
  }

  .revenue-overview {
    grid-template-columns: 1fr;
  }

  .overview-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .period-label {
    margin-top: 8px;
  }

  .doctor-metrics {
    flex-direction: column;
  }

  .spec-revenue {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Button Styles */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9fa;
}

/* Revenue Actions */
.revenue-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
}

@media (max-width: 768px) {
  .revenue-actions {
    flex-direction: column;
  }

  .revenue-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Manager Settings Page - Optimized Design */

.manager-settings-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.manager-settings-main {
  max-width: 1200px;
  margin: 0 auto;
}

/* Settings Header */
.settings-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.settings-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.settings-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

/* Settings Container */
.settings-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 28px;
  gap: 28px;
}

/* Settings Sidebar */
.settings-sidebar {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  text-align: left;
}

.menu-item:hover {
  background: #f8f9fa;
  color: #3b82f6;
}

.menu-item.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.menu-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Settings Content */
.settings-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.settings-section {
  padding: 28px;
}

.settings-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 24px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-section h2 i {
  color: #3b82f6;
}

/* Form Styles */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

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

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #212529;
  text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

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

/* Hours Cards */
.hours-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #3b82f6;
}

.hours-card h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #212529;
  font-weight: 700;
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3b82f6;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Info Card */
.info-card {
  background: #dbeafe;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.info-card i {
  color: #3b82f6;
  font-size: 18px;
  flex-shrink: 0;
}

.info-card p {
  margin: 0;
  color: #1e40af;
  font-size: 13px;
  line-height: 1.6;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
  background: #f0f0f0;
  color: #212529;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* Tabs */
.tabs-container {
  display: flex;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 28px;
}

.tab-button {
  padding: 14px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}

.tab-button:hover {
  color: #3b82f6;
}

.tab-button.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.setting-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-info h4 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
}

.setting-info p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
}

/* Success Message */
.success-message {
  background: #dcfce7;
  color: #15803d;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #10b981;
  display: flex;
  align-items: center;
  gap: 12px;
}

.success-message i {
  font-size: 18px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .settings-container {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    position: static;
  }

  .sidebar-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 8px;
    gap: 8px;
  }

  .settings-header {
    padding: 24px;
  }

  .settings-header h1 {
    font-size: 24px;
  }

  .settings-section {
    padding: 20px;
  }

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

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .tabs-container {
    overflow-x: auto;
  }

  .tab-button {
    white-space: nowrap;
  }
}

/* Notification Toggles */
.notification-toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.toggle-info h3 {
  margin: 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
}

.toggle-info p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6c757d;
}

/* Password Field */
.password-field {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-size: 16px;
}

/* Section Divider */
.section-divider {
  height: 1px;
  background: #e9ecef;
  margin: 28px 0;
}

/* Success/Warning Messages */
.alert {
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.alert-success {
  background: #dcfce7;
  color: #15803d;
  border-left: 4px solid #10b981;
}

.alert-warning {
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.alert i {
  font-size: 18px;
  flex-shrink: 0;
}


/* Invite Doctors Page - Optimized Design */

.invite-doctors-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.invite-doctors-main {
  max-width: 1400px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

/* Invite Header */
.invite-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.header-content h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.header-content p {
  margin: 8px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
}

.btn-outline {
  background: white;
  color: #8b5cf6;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Alert Messages */
.alert {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  animation: slidedown 0.3s ease;
}

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

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.alert-success {
  background: #dcfce7;
  color: #15803d;
  border-left: 4px solid #10b981;
}

.alert i {
  font-size: 18px;
  flex-shrink: 0;
}

.alert p {
  margin: 0;
  font-size: 14px;
}

/* Invite Filters */
.invite-filters {
  background: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.search-box {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-box i {
  position: absolute;
  left: 14px;
  color: #6c757d;
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.filter-group,
.sort-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-group select,
.sort-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Invite Stats */
.invite-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid #8b5cf6;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  color: #6c757d;
  margin: 5px 0 0 0;
  font-size: 14px;
}

/* Doctors Grid */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.doctor-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.doctor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.doctor-card.invited {
  border: 2px solid #10b981;
}

.doctor-card.success {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
  }
}

.doctor-card-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

.doctor-avatar {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.doctor-name-title {
  flex: 1 1;
}

.doctor-name-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.doctor-name-title p {
  margin: 4px 0 0 0;
  opacity: 0.9;
  font-size: 12px;
}

.invited-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #10b981;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doctor-card-body {
  padding: 20px;
  flex: 1 1;
}

.spec-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #667eea;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.doctor-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.doctor-info-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.info-label {
  color: #6c757d;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.info-value {
  color: #212529;
  font-size: 14px;
  font-weight: 600;
}

.rating-value {
  color: #f59e0b;
}

.doctor-card-footer {
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.btn-invite {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-invite:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.btn-invite:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-invite.invited {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  grid-column: 1 / -1;
}

.empty-state i {
  font-size: 56px;
  color: #ccc;
  margin-bottom: 16px;
}

.empty-state h3 {
  color: #212529;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.empty-state p {
  color: #6c757d;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .invite-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .invite-header h1 {
    font-size: 24px;
  }

  .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .invite-filters {
    grid-template-columns: 1fr;
  }

  .search-box {
    grid-column: auto;
  }

  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .invite-stats {
    grid-template-columns: 1fr;
  }
}

/* Animation for loading spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Admin Users Page Styles */
.admin-users-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
}

.admin-users-main {
  max-width: 1400px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

/* Header Section */
.users-header {
  margin-bottom: 40px;
  padding: 30px 0;
  border-bottom: 2px solid #e9ecef;
  text-align: center;
}

.users-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px 0;
}

.users-header p {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

/* Stats Section */
.users-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #f59f00 100%);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #d63031 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #1971c2 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Filter Section */
.users-filters {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-group {
  flex: 1 1;
  min-width: 200px;
}

.search-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.search-group input:focus {
  outline: none;
  border-color: #667eea;
}

.filter-group,
.sort-group {
  min-width: 150px;
}

.filter-group select,
.sort-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s;
  background: white;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #667eea;
}

/* Users Grid */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  color: #6c757d;
}

.empty-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.empty-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* User Card */
.user-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.user-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.user-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  flex: 1 1;
  min-width: 0;
}

.user-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 8px 0;
  word-break: break-word;
}

.user-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.role-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.role-primary {
  background: #e7f5ff;
  color: #1971c2;
}

.role-success {
  background: #ebfbee;
  color: #2f9e44;
}

.role-danger {
  background: #ffe0e0;
  color: #d63031;
}

.role-warning {
  background: #fff3bf;
  color: #e67700;
}

.status-success {
  background: #ebfbee;
  color: #2f9e44;
}

.status-danger {
  background: #ffe0e0;
  color: #d63031;
}

.status-warning {
  background: #fff3bf;
  color: #e67700;
}

.status-info {
  background: #e7f5ff;
  color: #1971c2;
}

.user-details {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 8px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item i {
  width: 16px;
  text-align: center;
  color: #667eea;
}

/* User Stats */
.user-stats {
  padding: 15px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  border-bottom: 1px solid #e9ecef;
}

.stat {
  text-align: center;
}

.stat label {
  display: block;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.stat p {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

/* User Actions */
.user-actions {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  flex: 1 1;
  min-width: 80px;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn i {
  font-size: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover {
  background: #f8f9ff;
}

.btn-danger {
  background: #ff6b6b;
  color: white;
}

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

.btn-success {
  background: #51cf66;
  color: white;
}

.btn-success:hover {
  background: #37b24d;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  transition: color 0.3s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #212529;
}

.modal-body {
  padding: 20px;
}

.info-section {
  margin-bottom: 25px;
}

.info-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  color: #667eea;
}

.info-list {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #e9ecef;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-size: 13px;
  font-weight: 600;
  color: #6c757d;
}

.info-row .value {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  text-align: right;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-users-page {
    padding: 10px;
  }

  .users-header {
    padding: 20px 0;
  }

  .users-header h1 {
    font-size: 28px;
  }

  .users-filters {
    flex-direction: column;
  }

  .search-group,
  .filter-group,
  .sort-group {
    width: 100%;
  }

  .users-grid {
    grid-template-columns: 1fr;
  }

  .user-stats {
    grid-template-columns: 1fr;
  }

  .user-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal-content {
    max-width: 100%;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .admin-users-container {
  background: #1a1a1a;
}

:root.dark-mode .admin-users-container h1 {
  color: #e8e8e8;
}

:root.dark-mode .admin-users-container p {
  color: #b0b0b0;
}

:root.dark-mode .stat-card {
  background: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #404040;
}

:root.dark-mode .stat-card:hover {
  background: #333333;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

:root.dark-mode .stat-content h3 {
  color: #e8e8e8;
}

:root.dark-mode .stat-content p {
  color: #b0b0b0;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .search-input {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .search-input::placeholder {
  color: #909090;
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .users-table {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  overflow: hidden;
}

:root.dark-mode .users-table thead {
  background: #1a1a1a;
  border-bottom: 2px solid #404040;
}

:root.dark-mode .users-table thead th {
  color: #667eea;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  border-right: 1px solid #404040;
}

:root.dark-mode .users-table thead th:last-child {
  border-right: none;
}

:root.dark-mode .users-table tbody tr {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .users-table tbody tr:hover {
  background: #333333;
}

:root.dark-mode .users-table tbody td {
  color: #e8e8e8;
  padding: 15px;
  border-right: 1px solid #404040;
}

:root.dark-mode .users-table tbody td:last-child {
  border-right: none;
}

:root.dark-mode .user-avatar {
  background: #667eea;
  color: white;
}

:root.dark-mode .user-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

:root.dark-mode .user-status.active {
  background: rgba(51, 150, 51, 0.2);
  color: #4db84d;
}

:root.dark-mode .user-status.inactive {
  background: rgba(150, 51, 51, 0.2);
  color: #cc6666;
}

:root.dark-mode .user-role {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

:root.dark-mode .user-role.admin {
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
}

:root.dark-mode .user-role.doctor {
  background: rgba(75, 192, 192, 0.2);
  color: #4bb0c0;
}

:root.dark-mode .user-role.patient {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

:root.dark-mode .user-actions {
  display: flex;
  gap: 8px;
}

:root.dark-mode .action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #333333;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 0.85rem;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .action-btn.delete {
  color: #ff6b6b;
}

:root.dark-mode .action-btn.delete:hover {
  background: #3d2222;
  border-color: #ff6b6b;
}

:root.dark-mode .action-btn.edit {
  color: #667eea;
}

:root.dark-mode .action-btn.edit:hover {
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

:root.dark-mode .modal-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .modal-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
}

:root.dark-mode .modal-header h2 {
  color: #667eea;
}

:root.dark-mode .modal-body {
  padding: 20px;
}

:root.dark-mode .form-group {
  margin-bottom: 15px;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group select,
:root.dark-mode .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #404040;
  border-radius: 4px;
  background: #333333;
  color: #e8e8e8;
  font-family: inherit;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group select:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .modal-footer {
  border-top: 1px solid #404040;
  padding-top: 15px;
}

:root.dark-mode .btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .btn.save {
  background: #667eea;
  color: white;
}

:root.dark-mode .btn.save:hover {
  background: #7b8ff5;
}

:root.dark-mode .btn.cancel {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .btn.cancel:hover {
  background: #606060;
}

:root.dark-mode .empty-state {
  text-align: center;
  color: #b0b0b0;
  padding: 40px 20px;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
  font-size: 48px;
  margin-bottom: 15px;
}

:root.dark-mode .loading {
  text-align: center;
  padding: 40px;
  color: #b0b0b0;
}

:root.dark-mode .error-message {
  background: #3d2222;
  color: #ff6b6b;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #ff6b6b;
  margin-bottom: 20px;
}

:root.dark-mode .success-message {
  background: #223d2d;
  color: #4db84d;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #4db84d;
  margin-bottom: 20px;
}

/* Mobile - Override circular elements */
@media (max-width: 768px) {
  [class*="avatar"],
  .spinner,
  [class*="circle"] {
    border-radius: 5% !important;
    margin: auto !important;
  }

  .doctor-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Admin Doctors Page Styles */

.admin-doctors-page {
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
  padding: 20px 0;
}

.admin-doctors-main {
  max-width: 1400px;
  margin: 0 auto;
}

.admin-doctors-main .container {
  padding: 20px;
}

/* Header Section */
.doctors-header {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.doctors-header > div {
  text-align: center;
  flex: 1 1;
}

.doctors-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
}

.doctors-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.btn-add-doctor {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-add-doctor:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(81, 207, 102, 0.4);
}

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

.btn-add-doctor i {
  font-size: 18px;
}

/* Stats Section */
.doctors-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #ffd43b 0%, #f59f00 100%);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #d63031 100%);
}

.stat-icon.info {
  background: linear-gradient(135deg, #74c0fc 0%, #1971c2 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 5px 0 0 0;
}

/* Filters Section */
.doctors-filters {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  align-items: end;
}

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

.filter-group label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.filter-group input,
.filter-group select {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Doctors Grid */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.doctor-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doctor-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: #667eea;
}

/* Doctor Image Section - Full Width */
.doctor-image-section {
  width: 100%;
}

.doctor-image-container {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: white;
}

.doctor-image-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #64b5f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
  font-weight: 700;
}

/* Action Icons at Top Right */
.doctor-action-icons {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
}

.icon-btn.email-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
}

.icon-btn.email-btn:hover {
  background: white;
  transform: scale(1.1);
}

.icon-btn.phone-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #f5576c;
}

.icon-btn.phone-btn:hover {
  background: white;
  transform: scale(1.1);
}

/* Doctor Card Content */
.doctor-card-content {
  width: 100%;
  padding: 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.doctor-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}

/* Specializations Row */
.specializations-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.specialization-tag {
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
}

.view-all-btn {
  font-size: 12px;
  color: #667eea;
  background: transparent;
  border: 1px solid #667eea;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-all-btn:hover {
  background: #667eea;
  color: white;
}

/* Hospital Row */
.hospital-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hospital-name {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Experience Row */
.experience-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
}

.experience-row i {
  color: #667eea;
  font-size: 14px;
}

/* Card Actions */
.card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.card-actions .btn {
  flex: 1 1;
  padding: 10px 12px;
  font-size: 13px;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #f8f9fa;
}

.btn-success {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  grid-column: 1 / -1;
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.btn-danger {
  background: #f5576c;
  color: white;
  grid-column: 1 / -1;
}

.btn-danger:hover {
  background: #e83e52;
  box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}

/* Doctor Card Action Sections */
.pending-actions,
.verified-actions,
.suspended-actions,
.rejected-actions {
  padding: 15px 20px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: 1fr;
}

.pending-actions {
  grid-template-columns: repeat(3, 1fr);
}

.verified-actions,
.suspended-actions,
.rejected-actions {
  grid-template-columns: repeat(2, 1fr);
}

.pending-actions .btn,
.verified-actions .btn,
.suspended-actions .btn,
.rejected-actions .btn {
  grid-column: auto;
}

/* Modal Styles */
.doctor-details-modal-wrapper,
.add-doctor-modal-wrapper,
.add-hospital-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
  /* Specific widths are set per modal class below */
}

/* Override all other .modal-content rules with specific admin modal classes */
.modal-content.add-doctor-modal {
  max-width: 1000px !important;
  max-height: 85vh !important;
}

.modal-content.add-hospital-modal {
  max-width: 800px !important;
  max-height: 85vh !important;
}

/* Doctor Details Modal (using .modal.modal-xl) */
.modal.modal-xl {
  max-width: 800px !important;
  max-height: 90vh !important;
}

.doctor-modal {
  /* DEPRECATED: Use doctor-details-modal-wrapper instead */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.doctor-modal-content {
  /* DEPRECATED: Use modal-content with add-doctor-modal class instead */
  background: white;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: all 0.3s ease;
}

.modal-close:hover {
  color: #1a1a1a;
}

.modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1 1;
  scrollbar-width: thin;
  scrollbar-color: #ddd #f5f5f5;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

.info-section {
  margin-bottom: 20px;
}

.info-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-row-label {
  color: #666;
  font-weight: 500;
}

.info-row-value {
  color: #1a1a1a;
  font-weight: 600;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Add Doctor Modal Styles */
.add-doctor-form {
  overflow-y: auto;
  padding: 0;
}

/* Hospital Location Filters - Using same styling as homepage */
.hospital-location-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  background: transparent;
  align-items: flex-end;
  margin-bottom: 20px;
}

/* Map Location Selection Styles */
.map-location-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.map-location-toggle button {
  flex: 1 1;
  padding: 10px 15px;
  border: 2px solid #ddd;
  background: white;
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 14px;
}

.map-location-toggle button:hover {
  border-color: #667eea;
}

.map-location-toggle button.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.map-container {
  height: 400px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-location-info {
  padding: 12px;
  background: #e8f4f8;
  border: 1px solid #667eea;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.map-location-info strong {
  color: #333;
  font-weight: 600;
}

.add-hospital-form {
  overflow-y: auto;
  padding: 0;
}

.form-section {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 15px;
}

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.form-group small {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* Email Input Container */
.email-input-container {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  transition: border-color 0.2s;
  background-color: #fff;
}

.email-input-container:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.email-username-input {
  flex: 1 1;
  border: none !important;
  padding: 10px 12px !important;
  font-size: 14px;
  font-family: inherit;
  box-shadow: none !important;
}

.email-username-input:focus {
  outline: none;
}

.email-domain {
  padding: 10px 12px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  background-color: #f5f5f5;
  border-left: 1px solid #e0e0e0;
  border-radius: 0 6px 6px 0;
  -webkit-user-select: none;
          user-select: none;
  font-size: 14px;
}

/* Dark Mode */
:root.dark-mode .email-input-container {
  background-color: #2a2a2a;
  border-color: #404040;
}

:root.dark-mode .email-domain {
  background-color: #222;
  border-left-color: #404040;
  color: #b0b0b0;
}

:root.dark-mode .email-username-input {
  background-color: #2a2a2a;
  color: #e8e8e8;
}

/* Phone Input Container */
.phone-input-container {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  transition: border-color 0.2s;
  background-color: #fff;
}

.phone-input-container:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.phone-prefix {
  padding: 10px 12px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  border-radius: 6px 0 0 6px;
  -webkit-user-select: none;
          user-select: none;
  font-size: 14px;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.phone-number-input {
  flex: 1 1;
  border: none !important;
  padding: 10px 12px !important;
  font-size: 14px;
  font-family: inherit;
  box-shadow: none !important;
}

.phone-number-input:focus {
  outline: none;
}

/* Dark Mode Phone Input */
:root.dark-mode .phone-input-container {
  background-color: #2a2a2a;
  border-color: #404040;
}

:root.dark-mode .phone-prefix {
  background-color: #222;
  border-right-color: #404040;
  color: #b0b0b0;
}

:root.dark-mode .phone-number-input {
  background-color: #2a2a2a;
  color: #e8e8e8;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.checkbox-item:hover {
  background-color: #f5f5f5;
}

.checkbox-item input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.checkbox-item input[type="checkbox"]:checked {
  accent-color: #667eea;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.empty-state p {
  font-size: 16px;
  margin: 0;
}

/* Responsive Design */
/* Responsive Design */
@media (max-width: 1024px) {
  .doctors-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Modals remain at full size on tablet */
  .modal-content.add-doctor-modal {
    max-width: 95vw !important;
    max-height: 95vh !important;
  }

  .modal-content.add-hospital-modal {
    max-width: 90vw !important;
    max-height: 90vh !important;
  }
}

@media (max-width: 768px) {
  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .filters-grid {
    grid-template-columns: 1fr;
  }

  .doctors-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .doctor-card-actions {
    grid-template-columns: 1fr;
  }

  .btn-success,
  .btn-danger {
    grid-column: 1;
  }

  .doctors-header {
    flex-direction: column;
    text-align: center;
  }

  .doctors-header h1 {
    font-size: 24px;
  }

  .btn-add-doctor {
    width: 100%;
    justify-content: center;
  }

  /* Mobile modals - make them full width with padding */
  .doctor-details-modal-wrapper,
  .add-doctor-modal-wrapper,
  .add-hospital-modal-wrapper {
    padding: 10px !important;
  }

  .modal-content.add-doctor-modal {
    max-width: 100% !important;
    max-height: 95vh !important;
    width: 100% !important;
  }

  .modal-content.add-hospital-modal {
    max-width: 100% !important;
    max-height: 95vh !important;
    width: 100% !important;
  }

  .modal.modal-xl {
    max-width: 100% !important;
    max-height: 95vh !important;
    width: 100% !important;
  }

  .modal-header {
    padding: 15px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .modal-header h2 {
    font-size: 18px;
    flex: 1 1;
  }

  .modal-body {
    padding: 15px;
    max-height: calc(95vh - 100px);
  }

  .modal-footer {
    padding: 15px;
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }

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

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

  .form-group label {
    font-size: 13px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hospital-location-filters {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hospital-list {
    max-height: 200px;
  }

  /* Map responsive styles */
  .map-container {
    height: 300px !important;
  }

  .map-location-toggle button {
    padding: 10px 12px;
    font-size: 13px;
  }

  .map-location-info {
    font-size: 12px;
    padding: 10px;
  }

  .email-input-container,
  .phone-input-container {
    flex-direction: column;
  }

  .email-domain,
  .phone-prefix {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    width: 100%;
  }

  .email-username-input,
  .phone-number-input {
    width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .doctors-stats-grid {
    grid-template-columns: 1fr;
  }

  .doctors-header h1 {
    font-size: 20px;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .doctor-card-stats {
    flex-direction: column;
    gap: 10px;
  }

  .stat {
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
  }

  .stat:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* Extra small devices - maximize screen usage */
  .doctor-details-modal-wrapper,
  .add-doctor-modal-wrapper,
  .add-hospital-modal-wrapper {
    padding: 5px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .modal-content.add-doctor-modal,
  .modal-content.add-hospital-modal,
  .modal.modal-xl {
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 8px;
  }

  .modal-header {
    padding: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    border-bottom: 1px solid #f0f0f0;
  }

  .modal-header h2 {
    font-size: 16px;
  }

  .modal-close {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }

  .modal-body {
    padding: 12px;
    overflow-y: auto;
  }

  .modal-footer {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #f0f0f0;
  }

  .modal-footer .btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  .form-section {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
  }

  .form-section h3 {
    font-size: 14px;
    margin: 0 0 12px 0;
  }

  .info-section h4 {
    font-size: 12px;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  .checkbox-item {
    padding: 6px;
    font-size: 13px;
  }

  .checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }

  .hospital-location-filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hospital-search-input {
    padding: 10px;
    font-size: 14px;
  }

  .hospital-list {
    max-height: 150px;
  }

  /* Small screen map styles */
  .map-container {
    height: 250px !important;
  }

  .map-location-toggle {
    gap: 8px;
    margin-bottom: 15px;
  }

  .map-location-toggle button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .map-location-info {
    font-size: 11px;
    padding: 8px;
  }

  .hospital-item {
    padding: 8px 10px;
    font-size: 13px;
  }

  .btn-refresh-hospitals,
  .btn-add-hospital {
    padding: 8px 10px;
    font-size: 11px;
  }

  /* Input fields - larger touch targets */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px; /* iOS touch target standard */
  }

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

  .detail-row {
    flex-direction: column;
    gap: 4px;
  }

  .detail-label,
  .detail-value {
    font-size: 13px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .admin-doctors-container {
  background: #1a1a1a;
}

:root.dark-mode .admin-doctors-container h1 {
  color: #e8e8e8;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .doctor-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .doctor-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .doctor-avatar {
  background: #667eea;
  color: white;
}

:root.dark-mode .doctor-info h3 {
  color: #e8e8e8;
}

:root.dark-mode .doctor-info p {
  color: #b0b0b0;
}

:root.dark-mode .doctor-specialization {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

:root.dark-mode .doctor-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

:root.dark-mode .doctor-status.active {
  background: rgba(51, 150, 51, 0.2);
  color: #4db84d;
}

:root.dark-mode .doctor-status.inactive {
  background: rgba(150, 51, 51, 0.2);
  color: #cc6666;
}

:root.dark-mode .doctor-status.pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

:root.dark-mode .doctor-rating {
  color: #ffc107;
}

:root.dark-mode .doctor-actions {
  border-top: 1px solid #404040;
}

:root.dark-mode .action-btn {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .action-btn.primary {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .action-btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .action-btn.danger {
  color: #ff6b6b;
}

:root.dark-mode .action-btn.danger:hover {
  background: #3d2222;
  border-color: #ff6b6b;
}

:root.dark-mode .stat-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .stat-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .stat-value {
  color: #667eea;
}

:root.dark-mode .stat-label {
  color: #b0b0b0;
}

:root.dark-mode .stat {
  border-top: 1px solid #404040;
  color: #b0b0b0;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Dark Mode Modal Wrappers */
:root.dark-mode .doctor-details-modal-wrapper,
:root.dark-mode .add-doctor-modal-wrapper,
:root.dark-mode .add-hospital-modal-wrapper {
  background: rgba(0, 0, 0, 0.8);
}

:root.dark-mode .modal {
  background: #2d2d2d;
  color: #e8e8e8;
}

:root.dark-mode .modal-header {
  border-bottom-color: #404040;
}

:root.dark-mode .modal-header h2 {
  color: #e8e8e8;
}

:root.dark-mode .modal-body {
  color: #b0b0b0;
  scrollbar-color: #404040 #1a1a1a;
}

:root.dark-mode .modal-body::-webkit-scrollbar-track {
  background: #1a1a1a;
}

:root.dark-mode .modal-body::-webkit-scrollbar-thumb {
  background: #404040;
}

:root.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
  background: #505050;
}

:root.dark-mode .modal-footer {
  border-top-color: #404040;
}

:root.dark-mode .info-section h4 {
  color: #888;
}

:root.dark-mode .info-row {
  color: #b0b0b0;
}

/* Dark Mode Map Location Styles */
:root.dark-mode .map-location-toggle button {
  background: #2d2d2d;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .map-location-toggle button:hover {
  border-color: #667eea;
}

:root.dark-mode .map-location-toggle button.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

:root.dark-mode .map-container {
  border-color: #404040;
  background: #1a1a1a;
}

:root.dark-mode .map-location-info {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #b0b0b0;
}

:root.dark-mode .map-location-info strong {
  color: #667eea;
}

/* Hospital Selection Styles */
.hospital-search-container {
  margin-bottom: 12px;
}

.hospital-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.hospital-search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-refresh-hospitals {
  background-color: #667eea;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-refresh-hospitals:hover {
  background-color: #7b8ff5;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

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

.btn-refresh-hospitals i {
  font-size: 12px;
}

.btn-refresh-hospitals i.fa-sync-alt {
  transition: transform 0.6s ease;
}

.btn-refresh-hospitals:hover i.fa-sync-alt {
  transform: rotate(180deg);
}

.btn-add-hospital {
  background-color: #38b6ff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-hospital:hover {
  background-color: #20a4e8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 182, 255, 0.3);
}

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

.btn-add-hospital i {
  font-size: 12px;
}

.hospital-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px;
  background-color: #f9f9f9;
}

.hospital-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
  margin-bottom: 4px;
}

.hospital-item:hover {
  background-color: #f0f0f0;
}

.hospital-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  -webkit-user-select: none;
          user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.checkbox-label:hover {
  color: #667eea;
}

/* Specialization Selection */
.specialization-search-container {
  margin-bottom: 12px;
}

.specialization-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.specialization-search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.specialization-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px;
  background-color: #f9f9f9;
}

.specialization-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
  margin-bottom: 4px;
}

.specialization-item:hover {
  background-color: #f0f0f0;
}

.specialization-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

/* Modal Overview Specializations - Multiple Tags */
.overview-value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag-item {
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
}

/* Dark Mode Hospital Selection */
:root.dark-mode .hospital-search-input {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e8e8e8;
}

:root.dark-mode .hospital-search-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .btn-refresh-hospitals {
  background-color: #667eea;
  border-color: #667eea;
  color: white;
}

:root.dark-mode .btn-refresh-hospitals:hover {
  background-color: #7b8ff5;
  border-color: #7b8ff5;
}

:root.dark-mode .btn-add-hospital {
  background-color: #38b6ff;
  border-color: #38b6ff;
  color: white;
}

:root.dark-mode .btn-add-hospital:hover {
  background-color: #20a4e8;
  border-color: #20a4e8;
}

:root.dark-mode .hospital-list {
  background-color: #1e1e1e;
  border-color: #404040;
}

:root.dark-mode .hospital-item {
  color: #b0b0b0;
}

:root.dark-mode .hospital-item:hover {
  background-color: #2a2a2a;
}

:root.dark-mode .hospital-item input[type="checkbox"]:hover {
  accent-color: #38b6ff;
}

/* Dark Mode Specialization Selection */
:root.dark-mode .specialization-search-input {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e8e8e8;
}

:root.dark-mode .specialization-search-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .specialization-list {
  background-color: #1e1e1e;
  border-color: #404040;
}

:root.dark-mode .specialization-item {
  color: #b0b0b0;
}

:root.dark-mode .specialization-item:hover {
  background-color: #2a2a2a;
}

:root.dark-mode .specialization-item input[type="checkbox"] {
  accent-color: #667eea;
}

:root.dark-mode .tag-item {
  color: #7b8ff5;
  background: rgba(102, 126, 234, 0.15);
}

:root.dark-mode .hospital-item:hover {
  background-color: #2a2a2a;
}

:root.dark-mode .checkbox-label {
  color: #b0b0b0;
}

:root.dark-mode .checkbox-label:hover {
  color: #667eea;
}

/* Responsive Hospital Selection */
@media (max-width: 768px) {
  .hospital-list {
    max-height: 200px;
  }
  
  .hospital-item {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* Dark Mode Mobile Styles */
@media (max-width: 768px) {
  :root.dark-mode .modal-header,
  :root.dark-mode .modal-footer,
  :root.dark-mode .form-section {
    background-color: #1a1a1a;
    border-color: #404040;
  }

  :root.dark-mode .form-group input,
  :root.dark-mode .form-group select,
  :root.dark-mode .form-group textarea {
    background-color: #2a2a2a;
    color: #e8e8e8;
    border-color: #404040;
  }

  :root.dark-mode .form-group input:focus,
  :root.dark-mode .form-group select:focus,
  :root.dark-mode .form-group textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  }

  :root.dark-mode .modal-body::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  :root.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: #404040;
  }

  :root.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
    background: #505050;
  }
}
/* Admin Hospitals Page Styles */

/* Page Layout */
.admin-hospitals-page {
  padding: 20px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.admin-hospitals-main {
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.hospitals-header {
  margin-bottom: 30px;
  animation: slideInDown 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hospitals-header > div {
  flex: 1 1;
}

.hospitals-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.hospitals-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.btn-add-hospital {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.btn-add-hospital:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

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

/* Stats Section */
.hospitals-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  cursor: default;
}

.stat-card:hover {
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.stat-card.warning {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
  border-color: #ffc107;
}

.stat-card.success {
  background: linear-gradient(135deg, #e6f7ef 0%, #d4edda 100%);
  border-color: #28a745;
}

.stat-card.info {
  background: linear-gradient(135deg, #e6f5ff 0%, #d1ecf1 100%);
  border-color: #17a2b8;
}

.stat-icon {
  font-size: 28px;
  opacity: 0.8;
  min-width: 50px;
  text-align: center;
}

.stat-icon.primary {
  color: #667eea;
}

.stat-icon.warning {
  color: #ffc107;
}

.stat-icon.success {
  color: #28a745;
}

.stat-icon.info {
  color: #17a2b8;
}

.stat-content h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.stat-content p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Hospital Grid */
.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-top: 20px;
  animation: fadeIn 0.6s ease;
}

@media (max-width: 768px) {
  .hospitals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Hospital Approval Card */
.hospital-approval-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8ecf1;
  transition: all 0.3s ease;
}

.hospital-approval-card:hover {
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.12);
  border-color: #667eea;
  transform: translateY(-2px);
}

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hospital-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}

.hospital-title-section {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hospital-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

.status-label {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.status-label.status-danger {
  background: #ffe5e5;
  color: #dc3545;
}

.status-label.status-warning {
  background: #fff3cd;
  color: #856404;
}

.status-label.status-success {
  background: #d4edda;
  color: #155724;
}

.status-label.status-info {
  background: #d1ecf1;
  color: #0c5460;
}

.hospital-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.map-btn:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.map-btn i {
  font-size: 13px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.meta-value {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.hospital-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  padding: 12px 0;
}

.detail-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.detail-row .detail-item {
  flex: 1 1;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.detail-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

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

.detail-label {
  margin: 0;
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.detail-value {
  margin: 0;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  line-height: 1.4;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1 1;
  min-width: 100px;
  justify-content: center;
}

.view-btn {
  background: #e8ecf1;
  color: #667eea;
}

.view-btn:hover {
  background: #d1daea;
  color: #5568d3;
}

.edit-btn {
  background: #fff3cd;
  color: #856404;
}

.edit-btn:hover {
  background: #ffe69c;
  color: #654321;
}

.approve-btn {
  background: #d4edda;
  color: #155724;
}

.approve-btn:hover {
  background: #c3e6cb;
  color: #0e4014;
}

.reject-btn {
  background: #ffe5e5;
  color: #dc3545;
}

.reject-btn:hover {
  background: #ffc9cc;
  color: #bd2130;
}

.delete-btn {
  background: #f8d7da;
  color: #721c24;
}

.delete-btn:hover {
  background: #f5c6cb;
  color: #491217;
}

/* Status Badges */
.status-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-block;
}

.status-badge.status-danger {
  background-color: #ffe5e5;
  color: #dc3545;
}

.status-badge.status-warning {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.status-success {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.status-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  border: 2px dashed #e0e7ff;
}

.empty-state i {
  font-size: 48px;
  color: #667eea;
  opacity: 0.7;
  margin-bottom: 16px;
  display: block;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.empty-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #999;
}

.empty-state.error {
  border-color: #ffcccc;
  background: #fff5f5;
}

.empty-state.error i {
  color: #dc3545;
}

.empty-state.error h3 {
  color: #dc3545;
}

.empty-state.error p {
  color: #856404;
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

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

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.error-message {
  background-color: #ffeaea;
  border: 1px solid #ffb3b3;
  border-radius: 8px;
  padding: 12px 16px;
  color: #c33;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.error-message i {
  color: #dc3545;
  font-size: 16px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.modal {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  color: white;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading i.fa-spinner {
  animation: spin 1s linear infinite;
}

/* Add Hospital Form Styles */
.add-hospital-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
}

.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.form-label-with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.form-label-with-actions label {
  margin: 0;
}

.form-label-with-actions .action-buttons-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.form-label-with-actions .btn-refresh-hospitals,
.form-label-with-actions .btn-add-doctor {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #ddd;
  background: white;
  color: #333;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-label-with-actions .btn-refresh-hospitals:hover,
.form-label-with-actions .btn-add-doctor:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.form-label-with-actions .btn-add-doctor {
  background: #e8f4f8;
  border-color: #17a2b8;
  color: #17a2b8;
}

.form-label-with-actions .btn-add-doctor:hover {
  background: #d1e8f0;
  border-color: #138496;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input:disabled,
.form-group select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
  -webkit-user-select: none;
          user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.modal-footer .btn {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-footer .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-footer .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.modal-footer .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-footer .btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.modal-footer .btn-outline:hover:not(:disabled) {
  background: #f8f9ff;
}

.modal-footer .btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Email Input Container */
.email-input-container {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  transition: border-color 0.2s;
  background-color: #fff;
}

.email-input-container:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.email-username-input {
  flex: 1 1;
  border: none !important;
  padding: 10px 12px !important;
  font-size: 14px;
  font-family: inherit;
  box-shadow: none !important;
}

.email-username-input:focus {
  outline: none;
}

.email-domain {
  padding: 10px 12px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  background-color: #f5f5f5;
  border-left: 1px solid #e0e0e0;
  border-radius: 0 6px 6px 0;
  -webkit-user-select: none;
          user-select: none;
  font-size: 14px;
}

/* Phone Input Container */
.phone-input-container {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  transition: border-color 0.2s;
  background-color: #fff;
}

.phone-input-container:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.phone-prefix {
  padding: 10px 12px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  border-radius: 6px 0 0 6px;
  -webkit-user-select: none;
          user-select: none;
  font-size: 14px;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.phone-number-input {
  flex: 1 1;
  border: none !important;
  padding: 10px 12px !important;
  font-size: 14px;
  font-family: inherit;
  box-shadow: none !important;
}

.phone-number-input:focus {
  outline: none;
}

/* Specializations and Search */
.search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.specializations-list,
.hospital-list {
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  padding: 0;
}

.specialization-item,
.hospital-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.specialization-item:last-child,
.hospital-item:last-child {
  border-bottom: none;
}

.specialization-item:hover,
.hospital-item:hover {
  background-color: #f8f9fa;
}

.specialization-item input[type="checkbox"],
.hospital-item input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #0066cc;
}

.specialization-item label,
.hospital-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  flex: 1 1;
}

.no-data {
  padding: 20px 12px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hospitals-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Location Methods Layout */
.location-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 15px;
}

.location-method {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-method h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.location-hint {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #666;
  font-style: italic;
}

.hospital-map-container {
  width: 100%;
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.hospital-map-container .leaflet-container {
  height: 100%;
  width: 100%;
}

/* Hospital Filters */
.hospitals-filters {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f9f9f9;
  flex: 1 1;
  min-width: 250px;
}

.filter-search i {
  color: #999;
  font-size: 14px;
}

.filter-search .search-input {
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: 14px;
  width: 100%;
  outline: none;
}

.filter-selects {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  min-width: 150px;
}

.filter-select:hover:not(:disabled) {
  border-color: #667eea;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1);
}

.filter-select:disabled {
  background: #f0f0f0;
  cursor: not-allowed;
  color: #999;
}

.filter-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-clear-filters {
  padding: 8px 15px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-clear-filters:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.2);
}

/* Responsive Design */

@media (max-width: 600px) {
  .hospitals-header h1 {
    font-size: 24px;
  }

  .hospitals-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters-grid {
    grid-template-columns: 1fr;
  }

  .hospital-stats.modern-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal {
    max-width: 95%;
  }
}

@media (max-width: 480px) {
  .hospitals-header h1 {
    font-size: 20px;
  }

  .hospitals-stats {
    grid-template-columns: 1fr;
  }

  .hospital-stats.modern-stats {
    grid-template-columns: 1fr;
  }

  .btn-sm {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* Admin Blog Posts Management Styles */

.admin-blog-posts {
  width: 100%;
  padding: 20px;
}

.content-header {
  margin-bottom: 30px;
}

.content-header h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.content-header .subtitle {
  color: #666;
  font-size: 14px;
}

/* Alerts */
.alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
}

.alert-error {
  background-color: #fee;
  color: #c33;
  border-left: 4px solid #c33;
}

.alert-success {
  background-color: #efe;
  color: #3c3;
  border-left: 4px solid #3c3;
}

/* Controls */
.blog-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.search-form {
  display: flex;
  gap: 10px;
  flex: 1 1;
  min-width: 250px;
}

.search-input {
  flex: 1 1;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  transition: box-shadow 0.3s;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

.search-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #45a049;
}

.status-filter {
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Table Container */
.blog-table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  margin-bottom: 25px;
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.blog-table thead {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
}

.blog-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
}

.blog-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.blog-table tbody tr:hover {
  background-color: #f9f9f9;
}

.blog-table td {
  padding: 15px;
  color: #555;
}

.title-cell {
  max-width: 300px;
}

.title-text {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  word-break: break-word;
}

.preview-text {
  color: #999;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Badge */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.published {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.draft {
  background-color: #e2e3e5;
  color: #383d41;
}

.status-badge.deleted {
  background-color: #f8d7da;
  color: #721c24;
}

/* Actions */
.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.edit-btn {
  background-color: #2196F3;
  color: white;
}

.edit-btn:hover {
  background-color: #0b7dda;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #da190b;
}

/* Loading/Empty States */
.loading,
.no-posts {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 16px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.pagination-btn {
  padding: 8px 16px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

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

.page-info {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 25px;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-textarea {
  resize: vertical;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
  background-color: #f9f9f9;
}

.btn-cancel,
.btn-save {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.btn-cancel:hover {
  background-color: #eee;
}

.btn-save {
  background-color: #4CAF50;
  color: white;
}

.btn-save:hover:not(:disabled) {
  background-color: #45a049;
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-blog-posts {
    padding: 15px;
  }

  .blog-controls {
    flex-direction: column;
  }

  .search-form {
    flex-direction: column;
  }

  .blog-table {
    font-size: 12px;
  }

  .blog-table th,
  .blog-table td {
    padding: 10px 8px;
  }

  .title-cell {
    max-width: 150px;
  }

  .preview-text {
    display: none;
  }

  .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .modal-body {
    padding: 15px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-save {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .content-header h2 {
    font-size: 22px;
  }

  .blog-table {
    font-size: 11px;
  }

  .blog-table th,
  .blog-table td {
    padding: 8px 6px;
  }

  .action-btn {
    min-width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .title-text {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .actions-cell {
    gap: 4px;
  }
}

.admin-reports-page {
  padding: 30px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  color: white;
}

.header-content h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
}

.report-count {
  display: flex;
  gap: 15px;
}

.badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* Report Types Tabs */
.report-types-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow-x: auto;
}

.type-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.type-tab i {
  font-size: 16px;
}

.type-tab:hover {
  background: #efefef;
}

.type-tab.active {
  background: white;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid #667eea;
}

.type-tab.active i {
  color: #667eea;
}

/* Reports Container */
.reports-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 30px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  color: #333;
  margin: 10px 0;
}

/* Reports List */
.reports-list {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.report-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
  position: relative;
}

.report-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.report-title-info h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.report-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-type {
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.report-reason {
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

.report-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  color: white;
}

.priority-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.report-body {
  margin: 12px 0;
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}

.reporter-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999;
}

.reporter-info i {
  font-size: 18px;
  color: #667eea;
}

.separator {
  margin: 0 4px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
  transform: scale(1.02);
}

.btn-secondary {
  background: #e0e0e0;
  color: #333;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.pagination button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.pagination button:hover:not(:disabled) {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  color: #666;
  font-weight: 500;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
}

.close-btn:hover {
  transform: scale(1.2);
}

.modal-body {
  padding: 24px;
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-section h4 {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-section p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.text-muted {
  color: #999;
  font-size: 12px;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e0e0e0;
  justify-content: flex-end;
}

/* Alert Styles */
.alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #dc2626;
}

.alert i {
  font-size: 18px;
}

.error-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
}

.error-content p {
  margin: 0;
  line-height: 1.5;
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  color: white;
}

.loading-spinner i {
  font-size: 48px;
  margin-bottom: 20px;
}

.loading-spinner p {
  font-size: 16px;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .detail-row {
    grid-template-columns: 1fr;
  }

  .modal-content {
    max-width: 90%;
  }

  .report-types-tabs {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .admin-reports-page {
    padding: 20px 10px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .header-content h1 {
    font-size: 24px;
  }

  .reports-container {
    padding: 16px;
  }

  .report-card {
    padding: 16px;
  }

  .report-header {
    flex-direction: column;
    gap: 12px;
  }

  .report-status {
    justify-content: flex-start;
  }

  .report-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal-content {
    max-height: 95vh;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    padding: 16px;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .report-types-tabs {
    padding: 12px;
    gap: 6px;
  }

  .type-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .header-content h1 {
    font-size: 20px;
  }

  .report-meta {
    flex-direction: column;
    gap: 6px;
  }

  .report-footer {
    font-size: 12px;
  }

  .btn-sm {
    width: 100%;
  }

  .detail-row {
    gap: 12px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .type-tab span {
    display: none;
  }

  .type-tab i {
    margin: 0;
  }
}

/* Admin Analytics Page Styles */

.admin-analytics-page {
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
  padding: 20px 0;
}

.admin-analytics-main {
  max-width: 1400px;
  margin: 0 auto;
}

.admin-analytics-main .container {
  padding: 20px;
}

/* Loading State */
.loading-state,
.error-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  color: #6c757d;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-state {
  color: #667eea;
}

.error-state {
  color: #d63031;
}

.loading-state i,
.error-state i {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 15px;
  display: block;
}

.loading-state h3,
.error-state h3 {
  font-size: 24px;
  color: #212529;
  margin: 0 0 10px 0;
}

.loading-state p,
.error-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state .btn {
  margin: 0 auto;
}

/* Header Section */
.analytics-header {
  margin-bottom: 30px;
  text-align: center;
}

.analytics-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
}

.analytics-header p {
  font-size: 16px;
  color: #666;
  margin: 0 0 15px 0;
}

.period-selector select {
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #333;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  max-width: 200px;
  transition: all 0.3s ease;
}

.period-selector select:hover,
.period-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.period-selector select option {
  background: white;
  color: #333;
}

/* Analytics Overview Cards */
.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.overview-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.overview-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.overview-icon.success {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.overview-icon.warning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.overview-icon.info {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.overview-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 5px 0;
}

.overview-content p {
  font-size: 14px;
  color: #999;
  margin: 0 0 10px 0;
}

.trend {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.trend.positive {
  color: #11998e;
}

.trend.negative {
  color: #f5576c;
}

.trend i {
  font-size: 10px;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.analytics-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.analytics-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.period-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.card-body {
  padding: 20px;
}

/* Chart Placeholder */
.chart-placeholder {
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-bottom: 20px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  gap: 10px;
}

.chart-bar-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}

.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bar:hover {
  filter: brightness(1.1);
}

.bar.patients {
  background: linear-gradient(180deg, #667eea 0%, #38b6ff 100%);
}

.bar.doctors {
  background: linear-gradient(180deg, #11998e 0%, #38ef7d 100%);
}

.bar.hospitals {
  background: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
}

.bar-label {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  font-weight: 500;
}

/* Chart Legend */
.chart-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 13px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
}

.legend-item.patients i {
  color: #667eea;
}

.legend-item.doctors i {
  color: #11998e;
}

.legend-item.hospitals i {
  color: #f093fb;
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: #f8f9fa;
}

.data-table th {
  padding: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  border-bottom: 1px solid #e0e0e0;
}

.data-table td {
  padding: 12px;
  font-size: 14px;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

/* Summary Stats */
.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 15px;
  gap: 15px;
  margin-top: 20px;
}

.summary-stat {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
}

.summary-stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
}

.summary-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #667eea;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analytics-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-header h1 {
    font-size: 24px;
  }

  .chart-bars {
    height: 150px;
  }

  .overview-card {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .analytics-overview {
    grid-template-columns: 1fr;
  }

  .analytics-header h1 {
    font-size: 20px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 8px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .admin-analytics {
  background: #1a1a1a;
}

:root.dark-mode .analytics-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .analytics-header p {
  color: #b0b0b0;
}

:root.dark-mode .filter-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .analytics-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .analytics-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .card-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .card-header h3 {
  color: #667eea;
}

:root.dark-mode .card-period {
  color: #b0b0b0;
  font-size: 0.9rem;
}

:root.dark-mode .chart-container {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .summary-stats {
  gap: 15px;
}

:root.dark-mode .stat-item {
  background: #1a1a1a;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

:root.dark-mode .stat-item.completed {
  border-left-color: #4db84d;
}

:root.dark-mode .stat-item.pending {
  border-left-color: #ffc107;
}

:root.dark-mode .stat-item.cancelled {
  border-left-color: #ff6b6b;
}

:root.dark-mode .stat-item.revenue {
  border-left-color: #4bb0c0;
}

:root.dark-mode .stat-label {
  color: #b0b0b0;
  font-size: 0.9rem;
}

:root.dark-mode .stat-value {
  color: #e8e8e8;
  font-weight: 600;
  font-size: 1.5rem;
}

:root.dark-mode .stat-change {
  color: #4db84d;
  font-size: 0.85rem;
}

:root.dark-mode .stat-change.negative {
  color: #ff6b6b;
}

:root.dark-mode .data-table {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  overflow: hidden;
}

:root.dark-mode .data-table thead {
  background: #1a1a1a;
  border-bottom: 2px solid #404040;
}

:root.dark-mode .data-table thead th {
  color: #667eea;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  border-right: 1px solid #404040;
}

:root.dark-mode .data-table thead th:last-child {
  border-right: none;
}

:root.dark-mode .data-table tbody tr {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .data-table tbody tr:hover {
  background: #333333;
}

:root.dark-mode .data-table tbody td {
  color: #e8e8e8;
  padding: 15px;
  border-right: 1px solid #404040;
}

:root.dark-mode .data-table tbody td:last-child {
  border-right: none;
}

:root.dark-mode .empty-state {
  text-align: center;
  color: #b0b0b0;
  padding: 40px 20px;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
  font-size: 48px;
  margin-bottom: 15px;
}

:root.dark-mode .loading {
  text-align: center;
  padding: 40px;
  color: #b0b0b0;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.metric-card {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.metric-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.metric-content h4 {
  margin: 0 0 5px 0;
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.metric-content p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

/* Full Width Card */
.analytics-card.full-width {
  grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    flex-direction: column;
  }

  .metric-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

:root.dark-mode .metrics-grid {
  margin-top: 20px;
}

:root.dark-mode .metric-card {
  background: #2d2d2d;
  border-left-color: #667eea;
}

:root.dark-mode .metric-content h4 {
  color: #b0b0b0;
}

:root.dark-mode .metric-content p {
  color: #e8e8e8;
}

/* Admin Settings Page Styles */

.admin-settings-page {
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
  padding: 20px 0;
}

.admin-settings-main {
  max-width: 1400px;
  margin: 0 auto;
}

.admin-settings-main .container {
  padding: 20px;
}

/* Header Section */
.settings-header {
  margin-bottom: 30px;
}

.settings-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
}

.settings-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* Settings Container */
.settings-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-gap: 30px;
  gap: 30px;
}

/* Settings Sidebar */
.settings-sidebar {
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.sidebar-menu {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-item {
  width: 100%;
  padding: 15px 20px;
  border: none;
  background: white;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 4px solid transparent;
}

.menu-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.menu-item:hover {
  background: #f8f9fa;
  color: #667eea;
}

.menu-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #667eea;
  font-weight: 600;
  border-left-color: #667eea;
}

/* Settings Content */
.settings-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  animation: fadeIn 0.3s ease;
}

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

/* Settings Section */
.settings-section {
  animation: slideIn 0.3s ease;
}

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

.settings-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

/* Form Styles */
form {
  margin: 0;
}

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

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

/* Social Inputs */
.social-inputs {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-group i {
  font-size: 18px;
  color: #667eea;
  width: 30px;
  text-align: center;
}

.input-group input {
  flex: 1 1;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.input-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Toggle Switch */
.toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.toggle-group:last-child {
  border-bottom: none;
}

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

.toggle-label-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.toggle-label-desc {
  font-size: 12px;
  color: #999;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #667eea;
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* Alternative class names for switch components */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #667eea;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Toggles List & Items */
.toggles-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.toggle-item:hover {
  background: #f0f1f5;
  border-color: #d0d0d0;
}

.toggle-info {
  flex: 1 1;
}

.toggle-info h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.toggle-info p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* Buttons */
.button-group {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled,
.btn-primary:disabled:hover {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #f8f9fa;
}

/* Alert Messages */
.alert {
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.alert i {
  flex-shrink: 0;
  font-size: 18px;
}

.alert.info {
  background: rgba(79, 172, 254, 0.1);
  color: #4facfe;
  border-left: 4px solid #4facfe;
}

.alert.success {
  background: rgba(17, 153, 142, 0.1);
  color: #11998e;
  border-left: 4px solid #11998e;
}

.alert.warning {
  background: rgba(240, 147, 251, 0.1);
  color: #f093fb;
  border-left: 4px solid #f093fb;
}

.alert.danger {
  background: rgba(245, 87, 108, 0.1);
  color: #f5576c;
  border-left: 4px solid #f5576c;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .settings-container {
    grid-template-columns: 200px 1fr;
    gap: 20px;
  }

  .settings-sidebar {
    top: 80px;
  }

  .menu-item {
    padding: 12px 15px;
    font-size: 13px;
  }

  .menu-item i {
    font-size: 14px;
  }

  .settings-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .settings-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .settings-sidebar {
    position: relative;
    top: 0;
  }

  .sidebar-menu {
    display: flex;
    flex-wrap: wrap;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .menu-item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(50% - 6px);
    border-bottom: 1px solid #f0f0f0;
    border-left: none;
    padding: 12px;
    min-height: 45px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .menu-item.active {
    border-bottom: none;
    border-left: none;
    background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
    color: white;
  }

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

  .settings-header h1 {
    font-size: 24px;
  }

  .button-group {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .settings-header h1 {
    font-size: 20px;
  }

  .settings-content {
    padding: 15px;
  }

  .menu-item {
    font-size: 12px;
  }

  .toggle-group {
    padding: 12px 0;
  }

  .toggle-label-title {
    font-size: 13px;
  }

  .toggle-label-desc {
    font-size: 11px;
  }

  .form-group label {
    font-size: 13px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .admin-settings {
  background: #1a1a1a;
}

:root.dark-mode .admin-settings h1 {
  color: #e8e8e8;
}

:root.dark-mode .admin-settings p {
  color: #b0b0b0;
}

:root.dark-mode .settings-sidebar {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .settings-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

:root.dark-mode .settings-nav-item {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .settings-nav-item:last-child {
  border-bottom: none;
}

:root.dark-mode .settings-nav-button {
  background: transparent;
  color: #b0b0b0;
  border: none;
  width: 100%;
  text-align: left;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

:root.dark-mode .settings-nav-button:hover {
  background: #333333;
  color: #667eea;
}

:root.dark-mode .settings-nav-button.active {
  background: #667eea;
  color: white;
}

:root.dark-mode .settings-content {
  background: transparent;
}

:root.dark-mode .settings-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

:root.dark-mode .settings-section h2 {
  color: #667eea;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .settings-section p {
  color: #b0b0b0;
  margin-bottom: 15px;
}

:root.dark-mode .form-group {
  margin-bottom: 20px;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group select,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: inherit;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group select:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group input::placeholder,
:root.dark-mode .form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .form-help {
  color: #b0b0b0;
  font-size: 0.85rem;
  margin-top: 5px;
}

:root.dark-mode .toggle-group {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:root.dark-mode .toggle-label {
  flex: 1 1;
}

:root.dark-mode .toggle-label-title {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .toggle-label-desc {
  color: #b0b0b0;
  font-size: 0.85rem;
  margin-top: 3px;
}

:root.dark-mode .toggle-switch {
  width: 50px;
  height: 28px;
  background: #404040;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}

:root.dark-mode .toggle-switch.active {
  background: #667eea;
}

:root.dark-mode .toggle-switch::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.3s ease;
}

:root.dark-mode .toggle-switch.active::after {
  left: 24px;
}

:root.dark-mode .button-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

:root.dark-mode .btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .btn.primary {
  background: #667eea;
  color: white;
}

:root.dark-mode .btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .btn.secondary {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .btn.secondary:hover {
  background: #606060;
}

:root.dark-mode .btn.danger {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

:root.dark-mode .btn.danger:hover {
  background: rgba(255, 107, 107, 0.2);
}

:root.dark-mode .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:root.dark-mode .success-message {
  background: #223d2d;
  color: #4db84d;
  border-left: 4px solid #4db84d;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

:root.dark-mode .error-message {
  background: #3d2222;
  color: #ff6b6b;
  border-left: 4px solid #ff6b6b;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

:root.dark-mode .info-message {
  background: #223d3d;
  color: #67c7ea;
  border-left: 4px solid #67c7ea;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Admin Contacts Management Styles */
.admin-contacts-page {
  min-height: calc(100vh - 80px);
  background: #f8f9fa;
  padding: 0;
}

.admin-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  margin-bottom: 30px;
}

.admin-header h1 {
  font-size: 32px;
  margin-bottom: 10px;
  margin: 0 0 10px 0;
}

.admin-header p {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.admin-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 30px 20px;
}

/* Filters Section */
.filters-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box {
  margin-bottom: 15px;
}

.search-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  padding: 10px 20px;
  border: 2px solid #dee2e6;
  background: white;
  color: #6c757d;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.filter-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Contacts Container */
.contacts-container {
  display: grid;
  grid-template-columns: 350px 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.contacts-list {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 800px;
  overflow-y: auto;
}

.contact-item {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

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

.contact-item:hover {
  background: #f8f9fa;
}

.contact-item.selected {
  background: #e8efff;
  border-left: 4px solid #667eea;
}

.contact-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.contact-name-email h4 {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 3px 0;
}

.contact-name-email p {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.new {
  background: #cfe2ff;
  color: #084298;
}

.status-badge.read {
  background: #fff3cd;
  color: #664d03;
}

.status-badge.replied {
  background: #d1e7dd;
  color: #0f5132;
}

.status-badge.emailed {
  background: #cfe2ff;
  color: #084298;
  border: 1px solid #b6d4fe;
}

.contact-message-preview {
  font-size: 13px;
  color: #6c757d;
  margin: 8px 0;
  line-height: 1.4;
}

.contact-date {
  font-size: 11px;
  color: #adb5bd;
  margin: 0;
}

.loading,
.no-contacts {
  padding: 40px 20px;
  text-align: center;
  color: #6c757d;
}

.no-contacts {
  font-size: 15px;
}

/* Contact Detail */
.contact-detail {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.contact-detail-content {
  padding: 30px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e9ecef;
}

.detail-header h2 {
  font-size: 24px;
  color: #212529;
  margin: 0;
}

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background: #c82333;
}

.contact-detail-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row label {
  font-weight: 600;
  color: #212529;
  min-width: 100px;
}

.info-row a,
.info-row span {
  color: #667eea;
  text-decoration: none;
  word-break: break-all;
}

.info-row a:hover {
  text-decoration: underline;
}

.contact-message {
  margin-bottom: 30px;
}

.contact-message h3,
.contact-reply h3,
.reply-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 12px 0;
}

.contact-message p {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.6;
  color: #495057;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.contact-reply {
  background: #d1e7dd;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  border-left: 4px solid #198754;
}

.contact-reply p {
  background: transparent;
  padding: 0;
  color: #0f5132;
  margin-bottom: 8px;
}

.contact-reply p:last-child {
  margin-bottom: 0;
}

.reply-date {
  font-size: 12px;
  color: #0f5132;
  margin-top: 10px !important;
}

.reply-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.reply-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 12px;
  transition: border-color 0.3s;
}

.reply-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.send-reply-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.send-reply-btn:hover {
  background: #218838;
}

.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #adb5bd;
  font-size: 16px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .contacts-container {
    grid-template-columns: 300px 1fr;
  }

  .contact-detail-content {
    padding: 20px;
  }

  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .delete-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 25px;
    margin-bottom: 20px;
  }

  .admin-header h1 {
    font-size: 24px;
  }

  .admin-header p {
    font-size: 14px;
  }

  .admin-content {
    padding: 0 15px 20px 15px;
  }

  .contacts-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contacts-list {
    max-height: 300px;
  }

  .filter-buttons {
    gap: 8px;
  }

  .filter-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .contact-item {
    padding: 12px;
  }

  .contact-detail-content {
    padding: 15px;
  }

  .contact-message p {
    padding: 12px;
    font-size: 13px;
  }

  .reply-textarea {
    font-size: 13px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .admin-header {
    padding: 20px;
  }

  .admin-header h1 {
    font-size: 20px;
  }

  .admin-header p {
    font-size: 13px;
  }

  .admin-content {
    padding: 0 10px 15px 10px;
  }

  .filters-section {
    padding: 15px;
    margin-bottom: 15px;
  }

  .search-input {
    padding: 10px;
    font-size: 14px;
  }

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

  .filter-btn {
    width: 100%;
    padding: 10px;
  }

  .contacts-list {
    max-height: 250px;
  }

  .contact-item {
    padding: 10px;
  }

  .contact-message-preview {
    font-size: 12px;
  }

  .detail-header h2 {
    font-size: 20px;
  }

  .delete-btn {
    width: 100%;
    padding: 10px;
  }

  .contact-detail-info {
    padding: 15px;
  }

  .info-row {
    flex-direction: column;
    font-size: 13px;
  }

  .info-row label {
    margin-bottom: 4px;
  }

  .contact-message h3,
  .contact-reply h3,
  .reply-section h3 {
    font-size: 14px;
  }

  .contact-message p {
    padding: 10px;
    font-size: 12px;
  }

  .reply-section {
    padding: 15px;
  }

  .reply-textarea {
    padding: 8px;
    font-size: 12px;
  }

  .send-reply-btn {
    width: 100%;
    padding: 10px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .admin-contacts-page {
  background: #1a1a1a;
}

:root.dark-mode .filters-section,
:root.dark-mode .contacts-list,
:root.dark-mode .contact-detail {
  background: #2d2d2d;
  border: 1px solid #404040;
}

:root.dark-mode .search-input {
  background: #333333;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .search-input:focus {
  border-color: #667eea;
}

:root.dark-mode .filter-btn {
  background: #333333;
  color: #b0b0b0;
  border-color: #404040;
}

:root.dark-mode .filter-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .filter-btn.active {
  background: #667eea;
  color: white;
}

:root.dark-mode .contact-item {
  border-bottom-color: #404040;
  color: #e8e8e8;
}

:root.dark-mode .contact-item:hover {
  background: #333333;
}

:root.dark-mode .contact-item.selected {
  background: #404040;
  border-left-color: #667eea;
}

:root.dark-mode .contact-name-email h4 {
  color: #e8e8e8;
}

:root.dark-mode .contact-name-email p {
  color: #b0b0b0;
}

:root.dark-mode .contact-message-preview {
  color: #b0b0b0;
}

:root.dark-mode .contact-date {
  color: #666666;
}

:root.dark-mode .no-contacts,
:root.dark-mode .loading {
  color: #b0b0b0;
}

:root.dark-mode .detail-header {
  border-bottom-color: #404040;
}

:root.dark-mode .detail-header h2 {
  color: #e8e8e8;
}

:root.dark-mode .contact-detail-info {
  background: #333333;
  border: 1px solid #404040;
}

:root.dark-mode .info-row label {
  color: #e8e8e8;
}

:root.dark-mode .contact-message,
:root.dark-mode .reply-section {
  color: #e8e8e8;
}

:root.dark-mode .contact-message h3,
:root.dark-mode .contact-reply h3,
:root.dark-mode .reply-section h3 {
  color: #e8e8e8;
}

:root.dark-mode .contact-message p {
  background: #333333;
  color: #b0b0b0;
  border: 1px solid #404040;
}

:root.dark-mode .contact-reply {
  background: rgba(25, 135, 84, 0.1);
  border-left-color: #28a745;
}

:root.dark-mode .contact-reply p {
  color: #4db84d;
}

:root.dark-mode .reply-textarea {
  background: #333333;
  color: #e8e8e8;
  border-color: #404040;
}

:root.dark-mode .reply-textarea:focus {
  border-color: #667eea;
}

:root.dark-mode .no-selection {
  color: #666666;
}

@media (max-width: 768px) {
  .post-card {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .post-featured-image {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
    order: 1;
  }
  .post-header {
    width: 100%;
    order: 2;
  }
  .post-content {
    width: 100%;
    order: 3;
  }
  .post-footer {
    width: 100%;
    order: 4;
  }
}
/* ===== FORUM PAGE - MODERN REDESIGN ===== */

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  --primary-color: #667eea;
  --secondary-color: #38b6ff;
  --success-color: #28a745;
  --text-primary: #1a1a1a;
  --text-secondary: #666;
  --text-muted: #999;
  --bg-light: #f9fafb;
  --bg-lighter: #f5f7fa;
  --border-color: #e1e5e9;
}

/* ===== FORUM CONTAINER ===== */
.forum {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
}

/* ===== HERO/HEADER SECTION ===== */
.forum-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.forum-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.forum-hero {
  text-align: center;
  padding: 60px 20px 40px;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.forum-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -1px;
}

.forum-hero p {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.95;
}

/* Quick Links */
.forum-hero-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.hero-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-link:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero-icon {
  font-size: 18px;
}

.hero-text {
  font-weight: 500;
}

/* User Stats */
.user-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #38b6ff;
}

.stat-label {
  font-size: 12px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Forum Actions (Search & New Post) */
.forum-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.new-post-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.new-post-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.new-post-btn:active {
  transform: translateY(-1px);
}

.my-blogs-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.my-blogs-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.my-blogs-btn:active {
  transform: translateY(-1px);
}

/* Search Form */
.search-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  padding: 10px 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  flex: 0 1 350px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.search-form:focus-within {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.search-icon {
  font-size: 18px;
  margin-right: 8px;
  opacity: 0.8;
}

.search-input {
  background: transparent;
  border: none;
  color: white;
  padding: 8px;
  font-size: 16px;
  flex: 1 1;
  outline: none;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== QUICK CATEGORY FILTERS ===== */
.quick-category-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  overflow-x: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.quick-category-filters::-webkit-scrollbar {
  height: 4px;
}

.quick-category-filters::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.quick-category-filters::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.filter-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.quick-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-filter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.quick-filter-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.filter-icon {
  font-size: 16px;
}

.filter-name {
  font-size: 13px;
}

/* ===== MAIN CONTENT LAYOUT ===== */
.forum-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-gap: 24px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* ===== SIDEBAR ===== */
.forum-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  height: -webkit-fit-content;
  height: fit-content;
}

.categories-section,
.trending-section,
.forum-stats-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.categories-section:hover,
.trending-section:hover,
.forum-stats-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.categories-section h3,
.trending-section h3,
.forum-stats-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1a1a1a;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Categories List */
.categories-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 14px;
  color: #666;
  color: var(--text-secondary);
  font-weight: 500;
}

.category-btn:hover {
  background: #f9fafb;
  background: var(--bg-light);
  color: #667eea;
  color: var(--primary-color);
  border-color: #667eea;
  border-color: var(--primary-color);
}

.category-btn.active {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  color: var(--primary-color);
  border-color: #667eea;
  border-color: var(--primary-color);
  font-weight: 600;
}

.cat-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.cat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
}

.cat-name {
  font-weight: 600;
  color: inherit;
}

.cat-count {
  font-size: 12px;
  background: #f9fafb;
  background: var(--bg-light);
  color: #666;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 8px;
  width: -webkit-fit-content;
  width: fit-content;
}

/* Trending Section */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.trending-item:hover {
  border-color: #667eea;
  border-color: var(--primary-color);
  background: #f8f7ff;
  transform: translateX(4px);
}

.trending-rank {
  font-size: 18px;
  font-weight: 700;
  color: #667eea;
  color: var(--primary-color);
  min-width: 30px;
}

.trending-content h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
  color: var(--text-primary);
  line-height: 1.3;
}

.trending-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #999;
  color: var(--text-muted);
}

/* Forum Stats Card */
.forum-stats-card {
  background: rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.15);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.stat-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  text-align: center;
}

.stat-icon {
  font-size: 20px;
}

.stat-text {
  font-size: 12px;
  color: #666;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ===== MAIN FORUM CONTENT ===== */
.forum-main {
  background: white;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Filters & Sorting */
.forum-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e1e5e9;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, #f9fafb 0%, #f5f7fa 100%);
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%);
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #666;
  color: var(--text-secondary);
}

.sort-options select {
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-options select:hover {
  border-color: #667eea;
  border-color: var(--primary-color);
}

.sort-options select:focus {
  outline: none;
  border-color: #667eea;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.results-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  color: var(--text-secondary);
  font-weight: 500;
}

.count-badge {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
}

/* Loading State */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
  color: var(--text-secondary);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f9fafb;
  border: 4px solid var(--bg-light);
  border-top-color: #667eea;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #666;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 24px;
  color: #1a1a1a;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 24px;
  color: #999;
  color: var(--text-muted);
}

/* ===== POSTS LIST ===== */
.posts-list {
  display: flex;
  flex-direction: column;
}

.post-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid #e1e5e9;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
  position: relative;
  background: white;
}

.post-card:last-child {
  border-bottom: none;
}

.post-card:hover {
  background: linear-gradient(135deg, #f9fafb 0%, #f5f7fa 100%);
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%);
}

.post-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.post-badge.pinned {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
}

/* Post Header */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
  color: var(--text-primary);
}

.post-meta {
  font-size: 13px;
  color: #999;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.doctor-badge {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.post-category {
  display: flex;
  align-items: center;
}

.category-tag {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Post Featured Image */
.post-featured-image {
  width: 180px;
  height: 180px;
  margin: 0;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / 4;
}

.post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Post Content */
.post-content {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  grid-column: 2;
  grid-row: 2;
}

.post-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
}

.post-content h3 a {
  color: #1a1a1a;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-content h3 a:hover {
  color: #667eea;
  color: var(--primary-color);
}

.post-content p {
  color: #666;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  color: var(--primary-color);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Post Footer */
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e1e5e9;
  border-top: 1px solid var(--border-color);
  grid-column: 2;
  grid-row: 3;
}

.post-stats {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #38b6ff;
  font-weight: 600;
}

.stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Responsive Post Card Layout */
@media (max-width: 768px) {
  .post-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .post-featured-image {
    width: 100%;
    height: 200px;
    grid-column: 1;
    grid-row: 1;
  }
  .post-header {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }
  .post-content {
    grid-column: 1;
    grid-row: 3;
  }
  .post-footer {
    grid-column: 1;
    grid-row: 4;
    padding-top: 12px;
    border-top: 1px solid #e1e5e9;
    border-top: 1px solid var(--border-color);
  }
}

.vote-btn {
  background: #f9fafb;
  background: var(--bg-light);
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  color: #666;
  color: var(--text-secondary);
}

.vote-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.read-more {
  color: #667eea;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.read-more:hover {
  background: rgba(102, 126, 234, 0.08);
  text-decoration: none;
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 30px;
  border-top: 1px solid #e1e5e9;
  border-top: 1px solid var(--border-color);
  background: linear-gradient(135deg, #f9fafb 0%, #f5f7fa 100%);
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%);
}

.pagination-btn {
  background: white;
  color: #667eea;
  color: var(--primary-color);
  border: 1px solid #667eea;
  border: 1px solid var(--primary-color);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.pagination-btn:disabled {
  background: #f9fafb;
  background: var(--bg-light);
  color: #999;
  color: var(--text-muted);
  border-color: #e1e5e9;
  border-color: var(--border-color);
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
  color: var(--text-secondary);
  font-weight: 600;
}

.page-info strong {
  color: #667eea;
  color: var(--primary-color);
}

/* ===== MODAL STYLES ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.new-post-modal {
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e1e5e9;
  border-bottom: 1px solid var(--border-color);
  background: rgba(102, 126, 234, 0.08);
}

.modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  color: var(--text-primary);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f9fafb;
  background: var(--bg-light);
  color: #1a1a1a;
  color: var(--text-primary);
}

/* ===== FORM STYLES ===== */
.new-post-form {
  padding: 24px;
}

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

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a1a;
  color: var(--text-primary);
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.form-group small {
  font-size: 12px;
  color: #999;
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
}

.tag-input-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tag-input-form input {
  flex: 1 1;
}

.add-tag-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.add-tag-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Image Upload Styles */
.image-upload-area {
  border: 2px dashed #e1e5e9;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(102, 126, 234, 0.02);
}

.image-upload-area:hover {
  border-color: #667eea;
  border-color: var(--primary-color);
  background: rgba(102, 126, 234, 0.05);
}

.image-input {
  display: none;
}

.image-upload-label {
  display: block;
  cursor: pointer;
  font-weight: 600;
  color: #667eea;
  color: var(--primary-color);
  transition: all 0.2s ease;
}

.image-upload-label:hover span {
  transform: scale(1.05);
}

.image-upload-label span {
  display: inline-block;
  transition: all 0.2s ease;
}

.image-preview {
  position: relative;
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  max-height: 240px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 240px;
}

.remove-image-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-image-btn:hover {
  background: rgba(255, 0, 0, 1);
  transform: scale(1.1);
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tags-list .tag {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  color: var(--primary-color);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.remove-tag {
  background: none;
  border: none;
  color: #667eea;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-tag:hover {
  background: #667eea;
  background: var(--primary-color);
  color: white;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e1e5e9;
  border-top: 1px solid var(--border-color);
}

.cancel-btn,
.submit-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.cancel-btn {
  background: #f9fafb;
  background: var(--bg-light);
  border: 1px solid #e1e5e9;
  border: 1px solid var(--border-color);
  color: #666;
  color: var(--text-secondary);
}

.cancel-btn:hover {
  background: #e1e5e9;
  background: var(--border-color);
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  background: var(--primary-gradient);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.submit-btn:disabled {
  background: #999;
  background: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .forum-content {
    grid-template-columns: 280px 1fr;
    gap: 20px;
    padding: 24px 16px;
  }
}

@media (max-width: 768px) {
  .forum-hero h1 {
    font-size: 36px;
  }

  .forum-hero p {
    font-size: 16px;
  }

  .user-stats {
    flex-wrap: wrap;
    gap: 24px;
  }

  .forum-hero-links {
    gap: 12px;
  }

  .hero-link {
    padding: 10px 16px;
    font-size: 14px;
  }

  .forum-actions {
    flex-direction: column;
    gap: 12px;
  }

  .search-form {
    flex: 1 1;
    min-width: 100%;
  }

  .quick-category-filters {
    padding: 12px;
    gap: 6px;
  }

  .filter-label {
    font-size: 12px;
  }

  .quick-filter-btn {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
  }

  .filter-icon {
    font-size: 14px;
  }

  .forum-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .forum-sidebar {
    position: static;
  }

  .forum-filters {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .post-header {
    flex-direction: column;
    gap: 12px;
  }

  .post-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .post-stats {
    justify-content: center;
    flex-wrap: wrap;
  }

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

  .modal-content {
    max-width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .forum-hero h1 {
    font-size: 28px;
  }

  .forum-hero p {
    font-size: 14px;
  }

  .user-stats {
    gap: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 10px;
  }

  .forum-content {
    padding: 16px 12px;
  }

  .post-card {
    padding: 16px 12px;
  }

  .post-header {
    margin-bottom: 12px;
  }

  .post-content h3 {
    font-size: 16px;
  }

  .hero-badge {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Override circular elements */
  [class*="avatar"],
  .spinner,
  [class*="circle"] {
    border-radius: 5% !important;
    margin: auto !important;
  }

  .doctor-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== ACCESSIBILITY ===== */
.post-card:focus-within {
  outline: 2px solid #667eea;
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.category-btn:focus,
.vote-btn:focus,
.pagination-btn:focus {
  outline: 2px solid #667eea;
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
  .forum-header,
  .forum-sidebar,
  .forum-actions,
  .post-footer,
  .pagination,
  .modal-overlay {
    display: none;
  }

  .forum-content {
    grid-template-columns: 1fr;
  }

  .post-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* Forum Post Detail Styles */
.forum-post {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Post Detail */
.post-detail {
  padding: 30px;
}

.post-detail .post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e5e9;
}

.post-detail .post-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.post-detail .author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f3f4;
}

.post-detail .author-info h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.post-detail .post-time {
  font-size: 14px;
  color: #666;
}

.post-detail .doctor-badge {
  background: #007bff;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 12px;
}

.post-detail .post-actions {
  display: flex;
  gap: 8px;
}

.post-detail .action-btn {
  background: #f1f3f4;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-detail .action-btn:hover {
  background: #e3e6ea;
}

.post-detail .action-btn.vote-btn.active {
  background: #007bff;
  color: white;
}

.post-detail .vote-btn.upvote.active:hover {
  background: #28a745;
}

.post-detail .vote-btn.downvote.active:hover {
  background: #dc3545;
}

.post-detail .post-content {
  margin-bottom: 24px;
}

.post-detail .post-content h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
  color: #1a1a1a;
}

.post-detail .post-category {
  margin-bottom: 20px;
}

.post-detail .category-tag {
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* Featured Image */
.post-detail .featured-image {
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 400px;
}

.post-detail .featured-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.post-detail .post-body {
  margin-bottom: 20px;
}

.post-detail .post-body p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.post-detail .post-body p:last-child {
  margin-bottom: 0;
}

.post-detail .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.post-detail .tag {
  background: #e3f2fd;
  color: #007bff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.post-detail .post-stats {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #e1e5e9;
  font-size: 14px;
  color: #666;
}

/* Replies Section */
.replies-section {
  border-top: 1px solid #e1e5e9;
}

.replies-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;
}

.replies-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.new-reply-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  font-size: 14px;
}

.new-reply-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.replies-list {
  padding: 0 30px 30px;
}

/* Reply Item */
.reply-item {
  margin: 20px 0;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.reply-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reply-item.level-1 {
  margin-left: 40px;
  border-color: #c3d9e7;
}

.reply-item.level-2 {
  margin-left: 80px;
  border-color: #a8c5d8;
}

.reply-item.level-3 {
  margin-left: 120px;
  border-color: #8db1c9;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;
}

.reply-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reply-item .author-avatar {
  width: 40px;
  height: 40px;
}

.reply-author h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #1a1a1a;
}

.reply-time {
  font-size: 13px;
  color: #666;
}

.reply-actions {
  display: flex;
  gap: 4px;
}

.reply-actions .action-btn {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.reply-actions .action-btn:hover {
  background: #e3e6ea;
}

.reply-content {
  padding: 16px;
}

.reply-content p {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e1e5e9;
}

.reply-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #666;
}

/* Reply Form */
.reply-form {
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #e1e5e9;
}

.reply-form.main-reply {
  margin: 20px 30px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
}

.reply-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}

.reply-form textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.reply-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}

.cancel-btn {
  background: #f1f3f4;
  border: 1px solid #e1e5e9;
  color: #666;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #e3e6ea;
}

.submit-btn {
  background: #007bff;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.submit-btn:hover:not(:disabled) {
  background: #0056b3;
}

.submit-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.no-replies {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.no-replies p {
  font-size: 16px;
  margin: 0;
}

/* Report Modal */
.report-modal {
  max-width: 500px;
}

.report-disclaimer {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0;
}

.report-disclaimer p {
  font-size: 13px;
  color: #856404;
  margin: 0;
  line-height: 1.4;
}

/* Report Form */
.report-form {
  padding: 24px;
}

.report-form select,
.report-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

.report-form select:focus,
.report-form textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.report-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* Loading and Not Found States */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  font-size: 18px;
  color: #666;
}

.not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  font-size: 18px;
  color: #666;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .forum-post {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .post-detail {
    padding: 20px;
  }

  .post-detail .post-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .post-detail .post-actions {
    justify-content: center;
  }

  .post-detail .post-content h1 {
    font-size: 24px;
  }

  .replies-header {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .replies-list {
    padding: 0 20px 20px;
  }

  .reply-item.level-1,
  .reply-item.level-2,
  .reply-item.level-3 {
    margin-left: 20px;
  }

  .reply-header {
    flex-direction: column;
    gap: 12px;
  }

  .reply-actions {
    justify-content: flex-start;
  }

  .reply-form-actions {
    flex-direction: column;
  }

  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .post-detail {
    padding: 15px;
  }

  .post-detail .author-avatar {
    width: 50px;
    height: 50px;
  }

  .post-detail .post-content h1 {
    font-size: 20px;
  }

  .post-detail .post-body p {
    font-size: 15px;
  }

  .replies-header {
    padding: 15px;
  }

  .replies-list {
    padding: 0 15px 15px;
  }

  .reply-item {
    margin: 15px 0;
  }

  .reply-header,
  .reply-content {
    padding: 12px;
  }

  .reply-footer {
    padding: 10px 12px;
  }
}

/* Accessibility */
.forum-post:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.action-btn:focus,
.new-reply-btn:focus,
.cancel-btn:focus,
.submit-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Print-friendly styles */
@media print {
  .forum-post {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .post-actions,
  .reply-actions,
  .replies-header,
  .reply-form {
    display: none;
  }

  .reply-item {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .reply-item.level-1,
  .reply-item.level-2,
  .reply-item.level-3 {
    margin-left: 20px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .forum-post-container {
  background: #1a1a1a;
}

:root.dark-mode .post-breadcrumb {
  color: #b0b0b0;
}

:root.dark-mode .post-breadcrumb a {
  color: #667eea;
}

:root.dark-mode .post-breadcrumb a:hover {
  color: #7b8ff5;
}

:root.dark-mode .post-detail-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .post-detail-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .post-detail-header .post-meta {
  color: #b0b0b0;
}

:root.dark-mode .post-detail-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  color: #e8e8e8;
}

:root.dark-mode .post-body {
  color: #e8e8e8;
}

:root.dark-mode .post-author-info {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .post-author-avatar {
  background: #667eea;
  color: white;
}

:root.dark-mode .post-author-name {
  color: #e8e8e8;
}

:root.dark-mode .post-author-badge {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

:root.dark-mode .post-actions {
  border-top: 1px solid #404040;
  padding-top: 15px;
  margin-top: 15px;
}

:root.dark-mode .action-btn {
  background: #333333;
  color: #b0b0b0;
  border: 1px solid #404040;
}

:root.dark-mode .action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .upvote-btn.voted,
:root.dark-mode .downvote-btn.voted {
  color: #667eea;
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .reply-form {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

:root.dark-mode .reply-form h3 {
  color: #667eea;
}

:root.dark-mode .reply-form-group {
  margin-bottom: 15px;
}

:root.dark-mode .reply-form-group label {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .reply-form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  font-family: inherit;
}

:root.dark-mode .reply-form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .reply-form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .reply-submit-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .reply-submit-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .replies-section {
  margin-top: 30px;
}

:root.dark-mode .replies-header {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
}

:root.dark-mode .reply-item {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .reply-item:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .reply-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

:root.dark-mode .reply-author {
  color: #667eea;
}

:root.dark-mode .reply-meta {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .reply-body {
  color: #e8e8e8;
}

:root.dark-mode .reply-actions {
  border-top: 1px solid #404040;
  padding-top: 10px;
  margin-top: 10px;
}

:root.dark-mode .reply-action-btn {
  background: #333333;
  color: #b0b0b0;
  border: 1px solid #404040;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
  font-size: 0.85rem;
}

:root.dark-mode .reply-action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .reply-upvote.voted,
:root.dark-mode .reply-downvote.voted {
  color: #667eea;
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .reply-item.level-1,
:root.dark-mode .reply-item.level-2,
:root.dark-mode .reply-item.level-3 {
  margin-left: 20px;
  background: #333333;
}

:root.dark-mode .empty-replies {
  color: #b0b0b0;
  text-align: center;
  padding: 30px;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}
/* ===== User Blog Posts Page ===== */
.user-blog-posts-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
  padding: 20px;
}

/* Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}

.header-content h1 {
  font-size: 32px;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.header-content p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.btn-back {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-4px);
}

/* Alerts */
.alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  animation: slideIn 0.3s ease;
}

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

.alert-error {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert i {
  font-size: 18px;
}

/* Filters */
.filters-section {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.status-filter {
  padding: 10px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.status-filter:hover,
.status-filter:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  outline: none;
}

/* Loading State */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f2f5;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-container p {
  color: #666;
  font-size: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state i {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 20px;
  display: block;
}

.empty-state h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 12px;
}

.empty-state p {
  color: #999;
  font-size: 16px;
  margin-bottom: 24px;
}

/* Blogs Grid */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.blog-card {
  background: white;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.blog-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.blog-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
  flex: 1 1;
  line-height: 1.4;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.draft {
  background: #fff3cd;
  color: #856404;
}

.blog-excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.blog-stats {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #999;
}

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

.stat i {
  color: #667eea;
}

.blog-card-actions {
  display: flex;
  gap: 8px;
}

.btn-action {
  flex: 1 1;
  padding: 10px 12px;
  border: 1px solid #e1e5e9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.btn-action:hover {
  border-color: #667eea;
  color: #667eea;
  background: #f8f9ff;
}

.btn-comments {
  color: #38b6ff;
}

.btn-comments:hover {
  border-color: #38b6ff;
  color: #38b6ff;
}

.btn-edit {
  color: #ffc107;
}

.btn-edit:hover {
  border-color: #ffc107;
  color: #ffc107;
}

.btn-delete {
  color: #dc3545;
}

.btn-delete:hover {
  border-color: #dc3545;
  color: #dc3545;
}

.btn-read-more {
  color: #667eea;
  background: linear-gradient(135deg, #667eea15 0%, #38b6ff15 100%);
}

.btn-read-more:hover {
  border-color: #667eea;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

/* Blog Title as Link */
.blog-title-link {
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.blog-title-link:hover {
  color: #667eea;
  text-decoration: underline;
}

/* Blog Card Image */
.blog-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin: 12px 0;
  background: #f0f0f0;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

.pagination-btn {
  padding: 10px 20px;
  border: 1px solid #e1e5e9;
  background: white;
  color: #667eea;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

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

.page-info {
  color: #666;
  font-weight: 600;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.modal-content.modal-lg {
  max-width: 800px;
}

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

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  color: #333;
  background: #f5f5f5;
  border-radius: 6px;
}

.modal-body {
  padding: 24px;
  max-height: calc(90vh - 140px);
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-textarea {
  resize: vertical;
}

/* Buttons */
.btn-primary,
.btn-cancel,
.btn-save,
.btn-outline,
.btn-reply {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-cancel,
.btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-cancel:hover,
.btn-outline:hover {
  background: #f8f9ff;
}

.btn-save {
  background: #28a745;
  color: white;
}

.btn-save:hover:not(:disabled) {
  background: #218838;
}

.btn-reply {
  background: none;
  border: none;
  color: #667eea;
  padding: 8px 12px;
  font-size: 13px;
  margin-top: 12px;
}

.btn-reply:hover {
  color: #38b6ff;
}

/* Comments Section */
.comments-section {
  padding: 24px;
}

.no-comments {
  text-align: center;
  padding: 40px;
  color: #999;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.comment-header strong {
  color: #333;
}

.comment-date {
  color: #999;
}

.comment-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.nested-replies {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #e1e5e9;
}

.nested-reply {
  padding: 12px;
  background: white;
  border-radius: 6px;
  margin-top: 8px;
}

.nested-reply .comment-header strong::before {
  content: "↳ ";
  color: #999;
}

.reply-form {
  margin-top: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
}

.reply-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}

.reply-textarea:focus {
  outline: none;
  border-color: #667eea;
}

.reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.reply-actions .btn-outline {
  padding: 8px 16px;
  font-size: 13px;
}

.reply-actions .btn-primary {
  padding: 8px 16px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .header-content h1 {
    font-size: 24px;
  }

  .blogs-grid {
    grid-template-columns: 1fr;
  }

  .blog-card-actions {
    flex-direction: column;
  }

  .btn-action {
    width: 100%;
  }

  .modal-content {
    max-height: 95vh;
  }

  .pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px;
  }

  .header-content h1 {
    font-size: 20px;
  }

  .header-content p {
    font-size: 14px;
  }

  .user-blog-posts-page {
    padding: 10px;
  }
}

.view-blog-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.blog-container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.blog-header {
  padding: 30px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.btn-back {
  background: transparent;
  color: #0066cc;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: #f0f0f0;
  color: #0052a3;
}

.blog-meta {
  display: flex;
  gap: 15px;
  align-items: center;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.active {
  background: #e8f5e9;
  color: #4caf50;
}

.status-badge.draft {
  background: #fff3e0;
  color: #ff9800;
}

.status-badge.closed {
  background: #ffebee;
  color: #f44336;
}

.blog-date {
  color: #666;
  font-size: 13px;
}

/* Alerts */
.alert {
  margin: 20px 30px 0;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: slideDown 0.3s ease;
}

.alert i {
  margin-top: 2px;
  font-size: 18px;
}

.alert-error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
}

.alert-success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #66bb6a;
}

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

/* Blog Content */
.blog-content {
  padding: 40px 30px;
}

.blog-title {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.featured-image {
  margin: 30px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.featured-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
}

.featured-image.no-image {
  background: #f5f5f5;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-image-placeholder {
  text-align: center;
  color: #999;
}

.no-image-placeholder i {
  font-size: 48px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.5;
}

.category-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: #f5f5f5;
  border-radius: 20px;
  margin: 20px 0;
  font-size: 14px;
  color: #666;
}

.category-icon {
  font-size: 16px;
}

.blog-body {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin: 30px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog-body p {
  margin: 16px 0;
}

.blog-stats {
  display: flex;
  gap: 30px;
  padding: 20px 0;
  margin: 30px 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  color: #666;
  font-size: 14px;
}

.blog-stats .stat {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-stats i {
  color: #0066cc;
}

.blog-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.btn-edit,
.btn-delete {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: all 0.3s ease;
}

.btn-edit {
  background: #0066cc;
  color: white;
}

.btn-edit:hover {
  background: #0052a3;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-delete {
  background: #ffebee;
  color: #f44336;
}

.btn-delete:hover {
  background: #ef5350;
  color: white;
}

/* Comments Section */
.comments-section {
  padding: 40px 30px;
  border-top: 2px solid #f0f0f0;
  background: #fafafa;
}

.comments-section h2 {
  font-size: 24px;
  margin: 0 0 30px 0;
  color: #333;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #0066cc;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.comment-header strong {
  color: #333;
  font-size: 14px;
}

.comment-date {
  color: #999;
  font-size: 12px;
  white-space: nowrap;
}

.comment-content {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

.btn-reply {
  background: transparent;
  color: #0066cc;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: all 0.3s ease;
}

.btn-reply:hover {
  background: #f0f0f0;
}

.reply-form {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.reply-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.reply-textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.reply-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-outline {
  padding: 8px 16px;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: #e0e0e0;
}

.btn-primary {
  padding: 8px 16px;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
  background: #0052a3;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nested-replies {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 2px solid #e0e0e0;
}

.nested-reply {
  padding: 12px;
  background: #f9f9f9;
  border-radius: 4px;
  margin-bottom: 10px;
}

.nested-reply .comment-header {
  margin-bottom: 8px;
}

.nested-reply .comment-content {
  margin-bottom: 0;
  font-size: 13px;
}

.no-comments {
  text-align: center;
  padding: 40px;
  color: #999;
}

.no-comments p {
  font-size: 16px;
  margin: 0;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  text-align: center;
  background: white;
  border-radius: 12px;
  margin: 0 auto;
  max-width: 500px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #0066cc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.error-container i {
  font-size: 48px;
  color: #f44336;
  margin-bottom: 16px;
}

.error-container h2 {
  color: #333;
  margin: 16px 0 8px 0;
}

.error-container p {
  color: #666;
  margin: 0 0 20px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-container {
    margin: 20px;
  }

  .blog-content {
    padding: 20px;
  }

  .blog-title {
    font-size: 24px;
  }

  .blog-stats {
    flex-direction: column;
    gap: 12px;
  }

  .blog-actions {
    flex-direction: column;
  }

  .btn-edit,
  .btn-delete {
    width: 100%;
    justify-content: center;
  }

  .comments-section {
    padding: 20px;
  }

  .comment-item {
    padding: 16px;
  }

  .nested-replies {
    padding-left: 12px;
  }
}

/* Reviews Page Styles */
.reviews-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

.reviews-header {
  text-align: center;
  margin-bottom: 3rem;
}

.reviews-header h1 {
  font-size: 2.5rem;
  color: #212529;
  margin-bottom: 0.5rem;
}

.reviews-header p {
  font-size: 1.1rem;
  color: #6c757d;
}

.reviews-controls {
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sort-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.3s;
}

.sort-select:focus {
  outline: none;
  border-color: #667eea;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.no-reviews {
  text-align: center;
  padding: 3rem;
  background: #f8f9fa;
  border-radius: 12px;
}

.no-reviews p {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

.review-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s;
}

.review-card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.doctor-info h3 {
  font-size: 1.3rem;
  color: #212529;
  margin-bottom: 0.5rem;
}

.doctor-specialization {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.rating-value {
  color: #667eea;
  font-weight: 600;
  font-size: 0.95rem;
}

.btn-delete {
  padding: 0.5rem 1rem;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.btn-delete:hover {
  background: #ff5252;
}

.review-comment {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.review-date {
  color: #adb5bd;
  font-size: 0.9rem;
}

.error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .reviews-header h1 {
    font-size: 2rem;
  }

  .review-header {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-delete {
    width: 100%;
  }
}

.summary-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 30px;
}

.summary-card {
  text-align: center;
}

.summary-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.summary-number {
  font-size: 48px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 5px;
}

.summary-label {
  color: #6c757d;
  font-size: 16px;
}

.rating-distribution {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e9ecef;
}

.rating-distribution h3 {
  font-size: 24px;
  color: #212529;
  margin-bottom: 20px;
}

.rating-bars {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rating-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 15px;
  gap: 15px;
  align-items: center;
}

.star-label {
  font-weight: 600;
  color: #212529;
  font-size: 14px;
}

.bar-container {
  flex: 1 1;
  height: 20px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 10px;
  transition: width 0.3s;
}

.bar-label {
  font-weight: 600;
  color: #6c757d;
  font-size: 14px;
  min-width: 40px;
  text-align: right;
}

/* Reviews Section */
.reviews-section {
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.reviews-header h2 {
  font-size: 24px;
  color: #212529;
  margin: 0;
}

.reviews-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sort-select {
  padding: 10px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.write-review-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.write-review-btn:hover {
  transform: translateY(-2px);
}

/* Reviews List */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

/* Review Card */
.review-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e9ecef;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.reviewer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.reviewer-details h3 {
  font-size: 18px;
  color: #212529;
  margin-bottom: 5px;
}

.reviewer-details p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.review-date {
  color: #6c757d;
  font-size: 14px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: #f8f9fa;
  border-radius: 20px;
}

.stars {
  color: #ffc107;
  font-size: 20px;
}

.rating-value {
  font-weight: 700;
  color: #212529;
  font-size: 16px;
}

.review-content {
  margin-bottom: 20px;
}

.review-title {
  font-size: 20px;
  color: #212529;
  margin-bottom: 15px;
  font-weight: 600;
}

.review-text {
  color: #495057;
  line-height: 1.8;
  font-size: 16px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.review-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.review-image:hover {
  transform: scale(1.05);
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 2px solid #e9ecef;
}

.review-meta {
  display: flex;
  gap: 20px;
  color: #6c757d;
  font-size: 14px;
}

.review-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  color: #6c757d;
}

.action-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.action-btn.helpful {
  border-color: #667eea;
  color: #667eea;
}

.action-btn.helpful:hover {
  background: #667eea;
  color: white;
}

.action-btn.report {
  border-color: #dc3545;
  color: #dc3545;
}

.action-btn.report:hover {
  background: #dc3545;
  color: white;
}

/* Write Review Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  padding: 40px;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.modal-header h2 {
  font-size: 28px;
  color: #212529;
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.3s;
}

.close-modal:hover {
  color: #dc3545;
}

.write-review-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.form-group label {
  font-weight: 600;
  color: #495057;
  font-size: 15px;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
}

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

.rating-select {
  display: flex;
  gap: 10px;
}

.rating-option {
  padding: 15px 20px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.rating-option:hover {
  border-color: #667eea;
}

.rating-option.selected {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.rating-option .stars {
  font-size: 18px;
}

.submit-btn {
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.empty-state-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 20px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.pagination-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #6c757d;
  transition: all 0.3s;
}

.pagination-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.pagination-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .review-header {
    flex-direction: column;
    gap: 20px;
  }

  .review-footer {
    flex-direction: column;
    gap: 15px;
  }

  .modal-content {
    padding: 30px 20px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .reviews-container {
  background: #1a1a1a;
}

:root.dark-mode .page-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .page-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .page-header p {
  color: #b0b0b0;
}

:root.dark-mode .filters-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .summary-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .summary-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .summary-value {
  color: #667eea;
}

:root.dark-mode .summary-label {
  color: #b0b0b0;
}

:root.dark-mode .summary-change {
  color: #4db84d;
}

:root.dark-mode .summary-change.negative {
  color: #ff6b6b;
}

:root.dark-mode .review-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .review-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .review-header {
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

:root.dark-mode .review-author {
  color: #e8e8e8;
}

:root.dark-mode .review-date {
  color: #b0b0b0;
}

:root.dark-mode .review-title {
  color: #667eea;
}

:root.dark-mode .review-content {
  color: #e8e8e8;
}

:root.dark-mode .review-rating {
  color: #ffc107;
}

:root.dark-mode .review-footer {
  border-top: 1px solid #404040;
  padding-top: 15px;
  margin-top: 15px;
}

:root.dark-mode .review-action-btn {
  background: #333333;
  color: #b0b0b0;
  border: 1px solid #404040;
}

:root.dark-mode .review-action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .review-action-btn.helpful {
  color: #667eea;
}

:root.dark-mode .review-action-btn.helpful.active {
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

:root.dark-mode .modal-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .modal-header h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .form-group {
  margin-bottom: 20px;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  font-family: inherit;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .rating-input {
  gap: 10px;
}

:root.dark-mode .star-btn {
  background: transparent;
  border: 1px solid #404040;
  color: #b0b0b0;
  font-size: 24px;
  padding: 8px 12px;
  border-radius: 4px;
}

:root.dark-mode .star-btn:hover {
  color: #ffc107;
  border-color: #ffc107;
}

:root.dark-mode .star-btn.active {
  color: #ffc107;
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}

:root.dark-mode .modal-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .modal-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .modal-btn.cancel {
  background: #505050;
}

:root.dark-mode .modal-btn.cancel:hover {
  background: #606060;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Patient Appointments Page */

.patient-appointments-page {
  min-height: 100vh;
  background: white;
  padding: 40px 20px;
}

.patient-appointments-main {
  max-width: 1200px;
  margin: 0 auto;
}

.page-container {
  width: 100%;
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: 80px 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-state p {
  color: #6c757d;
  font-size: 16px;
}

/* Page Header */
.appointments-page-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.appointments-page-header h1 {
  font-size: 36px;
  color: white;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.appointments-page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin: 0;
}

/* Error Banner */
.error-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.error-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.error-content {
  flex: 1 1;
  font-size: 14px;
}

.error-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.error-close:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* Appointments Stats */
.appointments-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: #667eea;
}

.stat-icon.success {
  background: #10b981;
}

.stat-icon.danger {
  background: #dc3545;
}

.stat-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #212529;
}

.stat-content p {
  font-size: 13px;
  color: #6c757d;
  margin: 2px 0 0 0;
}

/* Filters Section */
.appointments-filters {
  background: white;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #e0e0e0;
}

.search-box {
  flex: 1 1;
  min-width: 250px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 8px 12px;
}

.search-icon {
  color: #95a5a6;
  font-size: 16px;
}

.search-box input {
  flex: 1 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: #212529;
}

.search-box input::placeholder {
  color: #95a5a6;
}

.filter-group,
.sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group select,
.sort-group select {
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  color: #212529;
  transition: border-color 0.3s;
}

.filter-group select:focus,
.sort-group select:focus {
  outline: none;
  border-color: #667eea;
}

/* Appointments List */
.appointments-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.empty-state h3 {
  font-size: 20px;
  color: #212529;
  margin: 10px 0;
  font-weight: 600;
}

.empty-state p {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 20px;
}

.btn-book-now {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-book-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Appointment Card */
.appointment-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.appointment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.card-fee {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #667eea;
  text-align: right;
}

.doctor-info {
  display: flex;
  gap: 12px;
  flex: 1 1;
}

.doctor-avatar {
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.doctor-details h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: #212529;
}

.doctor-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}

.specialty {
  font-size: 12px;
  color: #6c757d;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.hospital-info {
  margin-top: 4px;
}

.hospital-info label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin: 0;
  display: block;
}

.hospital-info p {
  font-size: 12px;
  color: #212529;
  margin: 2px 0 0 0;
  font-weight: 500;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.status-badge.status-success {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.status-info {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.status-warning {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.status-danger {
  background: #fee2e2;
  color: #7f1d1d;
}

.serial-number {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Appointment Details */
.appointment-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.detail-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.detail-item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex: 1 1;
  min-width: 150px;
}

.detail-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.detail-item label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  margin: 0;
}

.detail-item p {
  font-size: 13px;
  color: #212529;
  margin: 2px 0 0 0;
  font-weight: 500;
}

/* Appointment Actions */
.appointment-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #d0d0d0;
  color: #212529;
}

.btn-outline:hover {
  background: #f5f5f5;
  border-color: #667eea;
  color: #667eea;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: none;
}

.btn-danger:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive */
@media (max-width: 1400px) {
  .appointments-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .appointments-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .patient-appointments-page {
    padding: 20px 10px;
  }

  .appointments-page-header h1 {
    font-size: 24px;
  }

  .appointments-filters {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
    min-width: auto;
  }

  .filter-group,
  .sort-group {
    width: 100%;
  }

  .filter-group select,
  .sort-group select {
    width: 100%;
  }

  .appointments-stats {
    grid-template-columns: 1fr;
  }

  .appointments-list {
    grid-template-columns: 1fr;
  }

  .appointment-header {
    flex-wrap: wrap;
    align-items: center;
  }

  .doctor-info {
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
  }

  .doctor-avatar {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .detail-row {
    flex-direction: column;
  }

  .detail-item {
    width: 100%;
  }

  .appointment-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .patient-appointments-page {
    padding: 10px;
  }

  .appointments-page-header h1 {
    font-size: 20px;
  }

  .appointments-page-header p {
    font-size: 13px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-content h3 {
    font-size: 16px;
  }

  .stat-content p {
    font-size: 12px;
  }

  .appointment-card {
    padding: 12px;
  }

  .doctor-details h3 {
    font-size: 13px;
  }

  .specialty {
    font-size: 12px;
  }

  .detail-item label {
    font-size: 11px;
  }

  .detail-item p {
    font-size: 13px;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.appointments-modal-content {
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

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

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

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-group label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.detail-group p {
  font-size: 15px;
  color: #212529;
  margin: 0;
  font-weight: 500;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.modal-footer .btn {
  flex: 1 1;
  justify-content: center;
}

/* Responsive Modal */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-header h2 {
    font-size: 18px;
  }

  .modal-body {
    padding: 16px;
    gap: 12px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Keep avatar on the left, not centered for appointment cards */
  .doctor-info {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .doctor-avatar {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
}


/* Book Appointment Page */

.book-appointment-page {
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
  min-height: 100vh;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 0 30px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
  animation: slideDown 0.5s ease-out;
}

.page-header h1 {
  font-size: 32px;
  color: #1a202c;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 16px;
  color: #718096;
}

/* Booking Layout */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 40px;
}

/* Doctor Info Card */
.doctor-info-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  animation: slideInLeft 0.5s ease-out;
}

.doctor-info-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.doctor-header-section {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e8f0;
}

.doctor-avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.doctor-details h2 {
  font-size: 24px;
  color: #1a202c;
  margin: 0 0 5px;
  font-weight: 700;
}

.doctor-details .specializations {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  margin: 0 0 5px;
}

.doctor-details .experience {
  font-size: 13px;
  color: #718096;
  margin: 0;
}

/* Fees Info */
.fees-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.fee-item:not(:last-child) {
  border-bottom: 1px solid #d2d8e8;
  margin-bottom: 10px;
}

.fee-label {
  color: #4a5568;
  font-weight: 500;
  font-size: 14px;
}

.fee-value {
  color: #667eea;
  font-weight: 700;
  font-size: 16px;
}

/* Symptoms Section */
.symptoms-section {
  margin-top: 20px;
}

.symptoms-section h4 {
  color: #2d3748;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.symptoms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.symptom-tag {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

/* Booking Form Card */
.booking-form-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: slideInRight 0.5s ease-out;
}

.booking-form-card h2 {
  font-size: 24px;
  color: #1a202c;
  margin: 0 0 30px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.booking-form-card h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 2px;
}

/* Form Group */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #2d3748;
  background-color: white;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:disabled {
  background-color: #f7fafc;
  color: #a0aec0;
  cursor: not-allowed;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Hospital Schedule Info */
.hospital-schedule-info {
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  border-left: 4px solid #667eea;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 25px;
  display: flex;
  gap: 20px;
}

.schedule-item {
  flex: 1 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-item .label {
  font-weight: 600;
  color: #2d3748;
  font-size: 13px;
}

.schedule-item .value {
  color: #667eea;
  font-weight: 600;
  font-size: 13px;
}

/* Booking Summary */
.booking-summary {
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  border-left: 4px solid #667eea;
}

.booking-summary h4 {
  color: #2d3748;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #4a5568;
}

.summary-item:not(.total) {
  border-bottom: 1px solid #d2d8e8;
}

.summary-item span:first-child {
  font-weight: 500;
  color: #2d3748;
}

.summary-item span:last-child {
  color: #4a5568;
  font-weight: 500;
}

.summary-item.total {
  padding: 15px 0 0 0;
  border-top: 2px solid #d2d8e8;
  font-weight: 700;
  color: #1a202c;
}

.summary-item.total span:first-child {
  font-weight: 700;
}

.summary-item.total span:last-child {
  color: #667eea;
  font-size: 18px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.btn-primary,
.btn-secondary {
  flex: 1 1;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #e2e8f0;
  color: #2d3748;
  border: 2px solid #cbd5e0;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #cbd5e0;
  transform: translateY(-2px);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error and Loading States */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  background: white;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  font-size: 18px;
  color: #667eea;
  font-weight: 600;
  animation: pulse 1.5s infinite;
}

.error-container h2 {
  color: #e53e3e;
  margin-bottom: 15px;
}

.error-container p {
  color: #718096;
  margin-bottom: 25px;
}

.error-container .btn-primary {
  width: 200px;
}

.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.error-actions button {
  min-width: 150px;
}

/* No Hospitals State */
.no-hospitals-container {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.message-card {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-top: 30px;
}

.message-card h3 {
  color: #2d3748;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.message-card p {
  color: #718096;
  line-height: 1.6;
  margin-bottom: 10px;
}

.message-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

.message-actions button {
  min-width: 200px;
}

/* No Hospitals Section */
.no-hospitals-section {
  animation: slideDown 0.3s ease-out;
}

.message-card {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border: 2px solid #cbd5e0;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-top: 30px;
}

.message-card .icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  display: block;
}

.message-card h3 {
  color: #2d3748;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 700;
}

.message-card p {
  color: #718096;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 1rem;
}

.alternative-options {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin: 30px 0;
  text-align: left;
}

.alternative-options h4 {
  color: #2d3748;
  margin-bottom: 15px;
  font-weight: 600;
}

.alternative-options ul {
  list-style: none;
  padding: 0;
}

.alternative-options li {
  color: #4a5568;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  line-height: 1.6;
}

.alternative-options li:last-child {
  border-bottom: none;
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

/* Dark Mode */
:root.dark-mode .book-appointment-page {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

:root.dark-mode .page-header {
  border-bottom-color: rgba(102, 126, 234, 0.2);
}

:root.dark-mode .page-header h1 {
  color: #f7fafc;
}

:root.dark-mode .page-header p {
  color: #cbd5e0;
}

:root.dark-mode .doctor-info-card,
:root.dark-mode .booking-form-card {
  background: #2d3748;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .doctor-info-card:hover,
:root.dark-mode .booking-form-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

:root.dark-mode .doctor-header-section {
  border-bottom-color: #4a5568;
}

:root.dark-mode .doctor-details h2 {
  color: #f7fafc;
}

:root.dark-mode .fee-item {
  border-bottom-color: #4a5568;
}

:root.dark-mode .fee-label {
  color: #cbd5e0;
}

:root.dark-mode .fees-info,
:root.dark-mode .hospital-schedule-info {
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .symptoms-section h4,
:root.dark-mode .booking-summary h4,
:root.dark-mode .form-group label {
  color: #e2e8f0;
}

:root.dark-mode .form-control {
  background-color: #1a202c;
  border-color: #4a5568;
  color: #f7fafc;
}

:root.dark-mode .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .form-control:disabled {
  background-color: #1a202c;
  color: #718096;
}

:root.dark-mode .booking-summary {
  background: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .summary-item {
  color: #cbd5e0;
}

:root.dark-mode .summary-item-span:first-child {
  color: #e2e8f0;
}

:root.dark-mode .btn-secondary {
  background-color: #4a5568;
  color: #f7fafc;
  border-color: #718096;
}

:root.dark-mode .btn-secondary:hover:not(:disabled) {
  background-color: #718096;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .doctor-avatar-large {
    width: 100px;
    height: 100px;
  }

  .doctor-header-section {
    gap: 15px;
  }

  .hospital-schedule-info {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .book-appointment-page {
    padding: 20px 15px;
  }

  .page-header {
    margin-bottom: 30px;
    padding: 25px 0 20px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .booking-layout {
    gap: 20px;
  }

  .doctor-info-card,
  .booking-form-card {
    padding: 20px;
  }

  .doctor-header-section {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .doctor-avatar-large {
    width: 90px;
    height: 90px;
    margin: 0 auto;
  }

  .doctor-details h2 {
    font-size: 20px;
  }

  .booking-summary {
    padding: 15px;
  }

  .summary-item {
    font-size: 13px;
    padding: 8px 0;
  }

  .booking-form-card h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .btn-primary,
  .btn-secondary {
    padding: 12px 16px;
    font-size: 13px;
  }

  .symptoms-list {
    gap: 6px;
  }

  .symptom-tag {
    padding: 5px 10px;
    font-size: 11px;
  }

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

  .form-control {
    padding: 10px 12px;
    font-size: 13px;
  }

  textarea.form-control {
    min-height: 80px;
  }

  .hospital-schedule-info {
    padding: 12px;
  }

  .schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 15px 0;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .doctor-info-card,
  .booking-form-card {
    padding: 15px;
    border-radius: 12px;
  }

  .doctor-avatar-large {
    width: 80px;
    height: 80px;
  }

  .doctor-details h2 {
    font-size: 18px;
  }

  .booking-form-card h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* Modern Date/Time Picker Styles */
.date-picker-wrapper {
  position: relative;
}

.date-select {
  -webkit-appearance: none;
          appearance: none;
  padding: 12px 40px 12px 16px;
  border: 2px solid #e0e7ff;
  border-radius: 12px;
  font-size: 15px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #1a202c;
}

.date-select:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.date-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.date-select:disabled {
  background-color: #f7fafc;
  color: #a0aec0;
  cursor: not-allowed;
  border-color: #cbd5e0;
}

.date-picker-wrapper .select-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
}

/* Time Picker Styles */
.time-picker-wrapper {
  margin-top: 10px;
}

.working-hours-display {
  padding: 10px 14px;
  background-color: #f0f4ff;
  border-left: 4px solid #667eea;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.working-hours-display::before {
  content: '🕐';
  font-size: 16px;
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.time-slot {
  padding: 12px 8px;
  border: 2px solid #e0e7ff;
  border-radius: 10px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-slot:hover {
  border-color: #667eea;
  background-color: #f0f4ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.time-slot.selected {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
  font-weight: 600;
}

.time-slot.selected::before {
  content: '✓ ';
  margin-right: 4px;
}

.time-selection-message {
  padding: 20px;
  background-color: #f7fafc;
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  text-align: center;
  color: #718096;
  font-size: 14px;
  margin-top: 12px;
  font-weight: 500;
}

/* Responsive Time Slots */
@media (max-width: 768px) {
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
  }

  .time-slot {
    padding: 10px 6px;
    font-size: 13px;
  }

  .time-slot.selected::before {
    content: '✓';
    margin-right: 2px;
  }

  .date-picker-wrapper .select-icon {
    font-size: 16px;
  }

  .form-group label {
    font-size: 13px;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 12px;
    padding: 10px 12px;
  }

  .fee-item,
  .summary-item {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .time-slots-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Live Chat Page */

.live-chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f0f2f5;
}

.breadcrumbs-section {
  padding: 20px;
  background: white;
  border-bottom: 1px solid #e9ecef;
}

/* Chat Container */
.chat-container {
  display: flex;
  flex: 1 1;
  overflow: hidden;
}

/* Sidebar */
.chat-sidebar {
  width: 320px;
  background: white;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.sidebar-toggle-btn {
  display: none;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

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

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h2 {
  font-size: 20px;
  color: #1a202c;
  margin: 0;
  font-weight: 700;
}

.btn-new-chat {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-new-chat:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Search Box */
.search-box {
  padding: 8px 16px;
  position: relative;
  border-bottom: 1px solid #e9ecef;
}

.search-input {
  width: 100%;
  padding: 6px 12px 6px 36px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #2d3748;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-icon {
  position: absolute;
  left: 28px;
  top: 22px;
  font-size: 14px;
  color: #a0aec0;
}

/* Conversations List */
.conversations-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
}

.conversation-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 4px;
}

.conversation-item:hover {
  background-color: #f0f2f5;
}

.conversation-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-left: 4px solid #667eea;
}

.conversation-item.unread {
  background-color: #fef3c7;
}

/* Conversation Avatar */
.conversation-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-text {
  color: white;
  font-weight: 700;
  font-size: 14px;
}

.online-indicator {
  width: 12px;
  height: 12px;
  background: #51cf66;
  border: 3px solid white;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Conversation Info */
.conversation-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.conversation-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.conversation-time {
  font-size: 11px;
  color: #a0aec0;
}

.conversation-preview {
  font-size: 12px;
  color: #718096;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unread Badge */
.unread-badge {
  background: #667eea;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Conversation Actions */
.conversation-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Delete Conversation Button */
.btn-delete-conversation {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-item:hover .btn-delete-conversation {
  opacity: 1;
  background-color: #fed7d7;
}

.btn-delete-conversation:hover {
  background-color: #fc8181;
  transform: scale(1.1);
}

/* No Results */
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #a0aec0;
  font-size: 13px;
}

/* Chat Content */
.chat-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.no-conversation {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a0aec0;
  padding: 40px 20px;
  gap: 16px;
}

.no-conversation p {
  margin: 0;
  font-size: 14px;
  order: 3;
}

.no-conversation .btn-send {
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 0;
  order: 2;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

/* Chat Header */
.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text h2 {
  font-size: 14px;
  color: #1a202c;
  margin: 0 0 2px;
  font-weight: 700;
}

.header-text p {
  font-size: 11px;
  color: #a0aec0;
  margin: 0;
}

/* Chat Header Actions */
.chat-header-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border: none;
  background-color: #f0f2f5;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background-color: #e2e8f0;
  transform: translateY(-2px);
}

/* Messages Container */
.messages-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-group {
  display: flex;
  animation: slideUp 0.3s ease;
}

.message-group.sender {
  justify-content: flex-end;
}

.message-group.receiver {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 60%;
  padding: 12px 16px;
  border-radius: 12px;
  animation: fadeIn 0.3s ease;
}

.message-group.sender .message-bubble {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.message-group.receiver .message-bubble {
  background: #f0f2f5;
  color: #1a202c;
}

.message-text {
  margin: 0 0 4px 0;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
}

/* Message Input */
/* Connection Status Indicator */
.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.connection-status.connected {
  color: #10b981;
  background: #ecfdf5;
}

.connection-status.disconnected {
  color: #f59e0b;
  background: #fffbeb;
}

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

.connection-status.connected .status-dot {
  background: #10b981;
  animation: pulse 2s infinite;
}

.connection-status.disconnected .status-dot {
  background: #f59e0b;
}

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

.message-input-form {
  padding: 16px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.input-actions {
  display: flex;
  gap: 8px;
}

.btn-attach,
.btn-emoji {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px;
}

.btn-attach:hover,
.btn-emoji:hover {
  transform: scale(1.2);
}

.message-input {
  flex: 1 1;
  padding: 10px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #2d3748;
  resize: none;
  max-height: 100px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.message-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-send {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}

.btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Dark Mode */
:root.dark-mode .live-chat-page {
  background: #1a202c;
}

:root.dark-mode .breadcrumbs-section {
  background: #2d3748;
  border-bottom-color: #4a5568;
}

:root.dark-mode .chat-sidebar {
  background: #2d3748;
  border-right-color: #4a5568;
}

:root.dark-mode .sidebar-header {
  border-bottom-color: #4a5568;
}

:root.dark-mode .sidebar-header h2 {
  color: #f7fafc;
}

:root.dark-mode .search-input {
  background: #1a202c;
  border-color: #4a5568;
  color: #f7fafc;
}

:root.dark-mode .conversations-list {
  background: #2d3748;
}

:root.dark-mode .conversation-item:hover {
  background-color: rgba(102, 126, 234, 0.1);
}

:root.dark-mode .conversation-item.unread {
  background-color: rgba(255, 212, 59, 0.2);
}

:root.dark-mode .conversation-avatar {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

:root.dark-mode .conversation-name {
  color: #f7fafc;
}

:root.dark-mode .conversation-preview {
  color: #cbd5e0;
}

:root.dark-mode .chat-content {
  background: #2d3748;
}

:root.dark-mode .chat-header {
  background: #2d3748;
  border-bottom-color: #4a5568;
}

:root.dark-mode .header-text h2 {
  color: #f7fafc;
}

:root.dark-mode .btn-icon {
  background-color: #1a202c;
  color: #f7fafc;
}

:root.dark-mode .btn-icon:hover {
  background-color: #4a5568;
}

:root.dark-mode .messages-container {
  background: #2d3748;
}

:root.dark-mode .message-group.receiver .message-bubble {
  background: #4a5568;
  color: #f7fafc;
}

:root.dark-mode .connection-status.connected {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

:root.dark-mode .connection-status.disconnected {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

:root.dark-mode .message-input-form {
  background: #2d3748;
  border-top-color: #4a5568;
}

:root.dark-mode .message-input {
  background: #1a202c;
  border-color: #4a5568;
  color: #f7fafc;
}

:root.dark-mode .message-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Dark Mode Mobile Adjustments */
@media (max-width: 600px) {
  :root.dark-mode .chat-sidebar {
    border-bottom-color: #4a5568;
  }

  :root.dark-mode .search-input {
    background: #1a202c;
    border-color: #4a5568;
    color: #f7fafc;
  }

  :root.dark-mode .chat-content {
    background: #2d3748;
  }

  :root.dark-mode .messages-container {
    background: #2d3748;
  }

  :root.dark-mode .message-input-form {
    background: #2d3748;
    border-top-color: #4a5568;
  }

  :root.dark-mode .message-input {
    background: #1a202c;
    border-color: #4a5568;
    color: #f7fafc;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .chat-sidebar {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .live-chat-page {
    height: auto;
    min-height: 100vh;
  }

  .sidebar-toggle-btn {
    display: flex;
  }

  .chat-container {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
    height: auto;
    max-height: 350px;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }

  .chat-sidebar.hide-on-mobile {
    display: none;
  }

  .chat-content {
    height: auto;
    min-height: 400px;
    flex: 1 1;
  }

  .message-bubble {
    max-width: 85%;
  }

  .message-input-form {
    flex-wrap: wrap;
  }

  .chat-header-actions {
    gap: 4px;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .sidebar-header {
    padding: 12px 16px;
  }

  .chat-header {
    padding: 12px 16px;
  }

  .messages-container {
    padding: 12px 16px;
    gap: 8px;
  }

  .message-input-form {
    padding: 12px 16px;
  }

  .conversation-item {
    padding: 10px 8px;
  }

  .conversation-avatar {
    width: 44px;
    height: 44px;
  }

  .avatar-text {
    font-size: 12px;
  }

  .conversation-name {
    font-size: 12px;
  }

  .conversation-preview {
    font-size: 11px;
  }

  .header-avatar {
    width: 40px;
    height: 40px;
  }

  .header-text h2 {
    font-size: 13px;
  }

  .header-text p {
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .live-chat-page {
    height: auto;
    min-height: 100vh;
  }

  .breadcrumbs-section {
    padding: 12px 16px;
  }

  .chat-container {
    flex-direction: column;
    height: auto;
  }

  .chat-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }

  .chat-sidebar.hide-on-mobile {
    display: none;
  }

  .conversations-list {
    max-height: 250px;
    overflow-y: auto;
  }

  .chat-content {
    height: auto;
    min-height: 350px;
    flex: 1 1;
  }

  .sidebar-header {
    padding: 10px 16px;
  }

  .sidebar-header h2 {
    font-size: 14px;
  }

  .btn-new-chat {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .search-box {
    padding: 8px 12px;
  }

  .search-input {
    padding: 6px 10px 6px 32px;
    font-size: 12px;
  }

  .search-icon {
    left: 24px;
    top: 20px;
    font-size: 12px;
  }

  .chat-header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chat-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1;
    min-width: 0;
  }

  .header-avatar {
    width: 36px;
    height: 36px;
  }

  .header-text h2 {
    font-size: 12px;
  }

  .header-text p {
    font-size: 9px;
  }

  .chat-header-actions {
    gap: 6px;
  }

  .btn-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .message-bubble {
    max-width: 88%;
    padding: 10px 14px;
  }

  .message-text {
    font-size: 12px;
  }

  .message-time {
    font-size: 10px;
  }

  .messages-container {
    padding: 10px 12px;
    gap: 8px;
    min-height: 300px;
  }

  .message-input-form {
    padding: 10px 12px;
    gap: 6px;
  }

  .message-input {
    padding: 8px 12px;
    font-size: 12px;
    max-height: 80px;
  }

  .btn-send {
    padding: 8px 16px;
    font-size: 12px;
  }

  .btn-attach,
  .btn-emoji {
    font-size: 16px;
    padding: 4px;
  }

  .input-actions {
    gap: 4px;
  }

  .conversation-item {
    padding: 8px 6px;
    margin-bottom: 2px;
  }

  .conversation-avatar {
    width: 40px;
    height: 40px;
  }

  .avatar-text {
    font-size: 11px;
  }

  .conversation-name {
    font-size: 11px;
  }

  .conversation-preview {
    font-size: 10px;
  }

  .conversation-time {
    font-size: 9px;
  }

  .unread-badge {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .connection-status {
    padding: 6px 12px;
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .live-chat-page {
    height: auto;
    min-height: 100vh;
  }

  .breadcrumbs-section {
    padding: 8px 12px;
  }

  .chat-header {
    padding: 8px 12px;
    gap: 6px;
  }

  .chat-header-info {
    gap: 6px;
  }

  .sidebar-toggle-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .header-avatar {
    width: 32px;
    height: 32px;
  }

  .header-text h2 {
    font-size: 11px;
  }

  .header-text p {
    font-size: 8px;
  }

  .chat-header-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
  }

  .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
    padding: 4px;
  }

  .message-bubble {
    max-width: 90%;
    padding: 8px 12px;
  }

  .message-text {
    font-size: 11px;
    line-height: 1.3;
  }

  .message-time {
    font-size: 9px;
  }

  .messages-container {
    padding: 8px 10px;
    gap: 6px;
    min-height: 250px;
  }

  .message-input-form {
    padding: 8px 10px;
    gap: 5px;
  }

  .message-input {
    padding: 6px 10px;
    font-size: 11px;
    max-height: 60px;
  }

  .btn-send {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .btn-attach,
  .btn-emoji {
    font-size: 14px;
    padding: 3px;
  }

  .input-actions {
    gap: 2px;
  }

  .sidebar-header {
    padding: 8px 12px;
    gap: 6px;
  }

  .sidebar-header h2 {
    font-size: 13px;
  }

  .btn-new-chat {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .search-box {
    padding: 6px 10px;
  }

  .search-input {
    padding: 5px 8px 5px 28px;
    font-size: 11px;
  }

  .search-icon {
    left: 18px;
    top: 16px;
    font-size: 10px;
  }

  .conversation-item {
    padding: 6px 4px;
    gap: 8px;
  }

  .conversation-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .avatar-text {
    font-size: 10px;
  }

  .conversation-name {
    font-size: 10px;
  }

  .conversation-preview {
    font-size: 9px;
  }

  .conversation-time {
    font-size: 8px;
  }

  .conversation-header {
    margin-bottom: 2px;
  }

  .unread-badge {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .online-indicator {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .no-results {
    padding: 16px 10px;
    font-size: 11px;
  }

  .connection-status {
    padding: 4px 10px;
    font-size: 10px;
  }

  .status-dot {
    width: 6px;
    height: 6px;
  }

  .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }

  .no-conversation {
    padding: 16px 10px;
  }
}

/* Activity Log Page */

.activity-log-page {
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
  min-height: 100vh;
}

.page-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Page Header */
.page-header {
  margin-bottom: 40px;
  padding: 40px 0 30px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
  animation: slideDown 0.5s ease-out;
}

.page-header h1 {
  font-size: 32px;
  color: #1a202c;
  margin: 0 0 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

/* Stats Section */
.stats-section {
  display: block;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.stat-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.total {
  background: #dbeafe;
}

.stat-icon.appointment {
  background: #dcfce7;
}

.stat-icon.completed {
  background: #dcfce7;
}

.stat-icon.scheduled {
  background: #fef3c7;
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #718096;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filters Section */
.filters-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 250px;
}

.filter-group label {
  font-weight: 600;
  color: #2d3748;
  font-size: 13px;
  white-space: nowrap;
}

.filter-select {
  flex: 1 1;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #2d3748;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Timeline */
.activity-timeline {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: slideUp 0.5s ease-out;
}

.timeline-items {
  position: relative;
}

.timeline-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.timeline-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline-item:hover {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-bottom: 1px solid #667eea;
}

/* Timeline Marker */
.timeline-marker {
  position: relative;
  width: 60px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  position: relative;
  z-index: 2;
}

.timeline-line {
  width: 2px;
  flex: 1 1;
  background: linear-gradient(to bottom, #667eea, transparent);
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

/* Timeline Content */
.timeline-content {
  flex: 1 1;
  padding-top: 8px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}

.activity-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-success {
  background-color: #dcfce7;
  color: #166534;
}

.badge-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-info {
  background-color: #dbeafe;
  color: #1e40af;
}

.activity-description {
  font-size: 13px;
  color: #718096;
  margin: 0 0 12px;
}

/* Activity Details */
.activity-details {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-key {
  font-size: 11px;
  color: #a0aec0;
  font-weight: 600;
  text-transform: capitalize;
}

.detail-value {
  font-size: 12px;
  color: #1a202c;
  font-weight: 600;
}

/* Activity Footer */
.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #a0aec0;
}

.activity-type {
  background-color: #e9ecef;
  color: #4a5568;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.activity-time {
  font-weight: 500;
  color: #718096;
}

/* Status-based styling */
.timeline-item.status-completed .marker-icon {
  background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
}

.timeline-item.status-scheduled .marker-icon {
  background: linear-gradient(135deg, #ffd43b 0%, #ffb913 100%);
}

.timeline-item.status-resolved .marker-icon {
  background: linear-gradient(135deg, #74c0fc 0%, #339af0 100%);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 40px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 18px;
  color: #1a202c;
  margin: 0 0 10px;
  font-weight: 700;
}

.empty-state p {
  font-size: 13px;
  color: #718096;
  margin: 0;
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Dark Mode */
:root.dark-mode .activity-log-page {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

:root.dark-mode .stat-item,
:root.dark-mode .filters-section,
:root.dark-mode .activity-timeline {
  background: #2d3748;
}

:root.dark-mode .page-header {
  border-bottom-color: rgba(102, 126, 234, 0.2);
}

:root.dark-mode .page-header h1 {
  color: #f7fafc;
}

:root.dark-mode .page-header p {
  color: #cbd5e0;
}

:root.dark-mode .stat-number {
  color: #f7fafc;
}

:root.dark-mode .stat-label {
  color: #cbd5e0;
}

:root.dark-mode .filter-select {
  background: #1a202c;
  border-color: #4a5568;
  color: #f7fafc;
}

:root.dark-mode .filter-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .filter-group label {
  color: #e2e8f0;
}

:root.dark-mode .timeline-item {
  border-bottom-color: #4a5568;
}

:root.dark-mode .timeline-item:hover {
  background-color: rgba(102, 126, 234, 0.1);
  border-bottom-color: #667eea;
}

:root.dark-mode .activity-title {
  color: #f7fafc;
}

:root.dark-mode .activity-description {
  color: #cbd5e0;
}

:root.dark-mode .activity-details {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid #4a5568;
}

:root.dark-mode .detail-value {
  color: #f7fafc;
}

:root.dark-mode .activity-type {
  background-color: #4a5568;
  color: #cbd5e0;
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 25px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .stats-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .filters-section {
    flex-direction: column;
  }

  .filter-group {
    min-width: auto;
    width: 100%;
  }

  .activity-timeline {
    padding: 20px;
  }

  .timeline-item {
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .timeline-marker {
    width: 50px;
  }

  .marker-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .activity-title {
    font-size: 14px;
  }

  .activity-details {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .activity-header {
    flex-wrap: wrap;
  }

  .status-badge {
    padding: 4px 8px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }

  .stat-item {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .activity-timeline {
    padding: 12px;
  }

  .timeline-item {
    gap: 10px;
  }

  .timeline-marker {
    width: 45px;
  }

  .marker-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .activity-title {
    font-size: 13px;
  }

  .activity-description {
    font-size: 12px;
  }

  .activity-footer {
    flex-direction: column;
    gap: 4px;
  }

  .detail-key,
  .detail-value {
    font-size: 11px;
  }
}

/* About Us Page Styles */
.about-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  flex: 1 1;
}

.hero-section {
  text-align: center;
  margin-bottom: 60px;
  padding: 60px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 10px;
}

.hero-section h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.hero-subtitle {
  font-size: 20px;
  opacity: 0.9;
  margin: 0;
}

.about-section {
  margin-bottom: 60px;
}

.about-section h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #212529;
}

.about-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #6c757d;
  margin-bottom: 15px;
}

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-top: 30px;
}

.offering-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  transition: all 0.3s;
}

.offering-card-link:hover {
  text-decoration: none;
}

.offering-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  width: 100%;
}

.offering-card-link:hover .offering-card {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.offering-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.offering-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #212529;
}

.offering-card p {
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

.values-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-top: 30px;
}

.value-item {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #212529;
}

.value-item p {
  color: #6c757d;
  margin: 0;
}

.stats-section {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 60px 40px;
  border-radius: 10px;
  color: white;
}

.stats-section h2 {
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 40px;
  gap: 40px;
  margin-top: 40px;
}

.stat-card {
  text-align: center;
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
}

.partners-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.partners-list li {
  padding: 10px 0;
  color: #6c757d;
  font-size: 16px;
  padding-left: 25px;
  position: relative;
}

.partners-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  justify-content: center;
}

.btn {
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  display: inline-block;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .about-section h2 {
    font-size: 24px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .action-buttons {
    flex-direction: column;
  }

  .offerings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .offering-card {
    padding: 20px;
  }

  .offering-card-link:hover .offering-card {
    transform: translateY(-3px);
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .about-container {
  background: #1a1a1a;
}

:root.dark-mode .hero-section {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .hero-section h1 {
  color: #e8e8e8;
}

:root.dark-mode .hero-subtitle {
  color: #b0b0b0;
}

:root.dark-mode .hero-cta {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .hero-cta:hover {
  background: #7b8ff5;
}

:root.dark-mode .about-section {
  background: transparent;
}

:root.dark-mode .about-section h2 {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .about-section p {
  color: #b0b0b0;
}

:root.dark-mode .stats-grid {
  gap: 20px;
}

:root.dark-mode .stat-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 8px;
  text-align: center;
}

:root.dark-mode .stat-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .stat-number {
  color: #667eea;
  font-size: 32px;
  font-weight: 600;
}

:root.dark-mode .stat-label {
  color: #b0b0b0;
}

:root.dark-mode .mission-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 30px;
}

:root.dark-mode .mission-section h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .mission-section p {
  color: #b0b0b0;
}

:root.dark-mode .team-grid {
  gap: 20px;
}

:root.dark-mode .team-member-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
}

:root.dark-mode .team-member-card:hover {
  border-color: #667eea;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .team-member-avatar {
  background: #667eea;
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root.dark-mode .team-member-name {
  color: #e8e8e8;
  font-weight: 600;
}

:root.dark-mode .team-member-role {
  color: #667eea;
  font-size: 0.9rem;
}

:root.dark-mode .team-member-bio {
  color: #b0b0b0;
  font-size: 0.85rem;
}

:root.dark-mode .values-section {
  background: transparent;
}

:root.dark-mode .values-section h2 {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .value-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .value-card h3 {
  color: #667eea;
}

:root.dark-mode .value-card p {
  color: #b0b0b0;
}

:root.dark-mode .cta-section {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
}

:root.dark-mode .cta-section h2 {
  color: white;
}

:root.dark-mode .cta-section p {
  color: rgba(255, 255, 255, 0.9);
}

:root.dark-mode .cta-btn {
  background: white;
  color: #667eea;
  border: none;
  padding: 12px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

:root.dark-mode .cta-btn:hover {
  background: #f0f0f0;
}

/* Contact Page Styles */
.contact-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 50px;
}

.contact-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white;
}

.contact-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
  gap: 40px;
}

/* Direct Contact Section */
.direct-contact-section h2,
.contact-form-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #212529;
}

.direct-contact-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  color: white;
  min-height: 60px;
}

.facebook-btn {
  background: #1877f2;
}

.facebook-btn:hover {
  background: #166fe5;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(24, 119, 242, 0.3);
}

.whatsapp-btn {
  background: #25d366;
}

.whatsapp-btn:hover {
  background: #20ba5a;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(37, 211, 102, 0.3);
}

.contact-button i {
  font-size: 24px;
}

/* Contact Form */
.contact-form-section {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

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

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

.form-group label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #212529;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.submit-btn {
  background: #667eea;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
}

.submit-btn:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #28a745;
  font-weight: 500;
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
  }

  .contact-header h1 {
    font-size: 28px;
  }

  .contact-header p {
    font-size: 16px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .contact-container {
  background: #1a1a1a;
}

:root.dark-mode .contact-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .contact-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .contact-header p {
  color: #b0b0b0;
}

:root.dark-mode .form-container {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  border-left: 4px solid #28a745;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-page {
    padding: 20px 15px;
  }

  .contact-header {
    padding: 30px 20px;
    margin-bottom: 30px;
  }

  .contact-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .contact-header p {
    font-size: 16px;
  }

  .contact-content {
    gap: 25px;
  }

  .direct-contact-buttons {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-button {
    min-height: 55px;
    font-size: 16px;
  }

  .contact-form-section {
    padding: 20px;
  }

  .direct-contact-section h2,
  .contact-form-section h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .form-group input,
  .form-group textarea {
    padding: 11px;
    font-size: 16px;
  }

  .submit-btn {
    padding: 11px 25px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .contact-page {
    padding: 15px 10px;
  }

  .contact-header {
    padding: 20px 15px;
    margin-bottom: 20px;
    border-radius: 12px;
  }

  .contact-header h1 {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .contact-header p {
    font-size: 14px;
  }

  .direct-contact-section h2,
  .contact-form-section h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .contact-button {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    min-height: 50px;
    font-size: 15px;
  }

  .contact-button i {
    font-size: 22px;
  }

  .contact-form-section {
    padding: 15px;
    border-radius: 8px;
  }

  .contact-form {
    gap: 15px;
  }

  .form-group label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .form-group input,
  .form-group textarea {
    padding: 10px;
    font-size: 15px;
  }

  .submit-btn {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 42px;
  }

  .success-message {
    padding: 12px;
    font-size: 13px;
    border-left-width: 3px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .contact-page {
  background: transparent;
}

:root.dark-mode .contact-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

:root.dark-mode .contact-header h1 {
  color: white;
}

:root.dark-mode .contact-header p {
  color: rgba(255, 255, 255, 0.9);
}

:root.dark-mode .direct-contact-section h2,
:root.dark-mode .contact-form-section h2 {
  color: #e8e8e8;
}

:root.dark-mode .direct-contact-buttons {
  gap: 15px;
}

:root.dark-mode .facebook-btn {
  background: #1877f2;
}

:root.dark-mode .facebook-btn:hover {
  background: #166fe5;
}

:root.dark-mode .whatsapp-btn {
  background: #25d366;
}

:root.dark-mode .whatsapp-btn:hover {
  background: #20ba5a;
}

:root.dark-mode .contact-form-section {
  background: #2d2d2d;
  border: 1px solid #404040;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group input::placeholder,
:root.dark-mode .form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .submit-btn {
  background: #667eea;
}

:root.dark-mode .submit-btn:hover:not(:disabled) {
  background: #7b8ff5;
}

:root.dark-mode .success-message {
  background: rgba(40, 167, 69, 0.2);
  color: #4db84d;
  border-left-color: #4db84d;
}

/* Help Center Styles */
.help-center-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.help-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 40px;
}

.help-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white;
}

.help-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.search-section {
  margin-bottom: 40px;
}

.search-input {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
  padding: 15px 20px;
  border: 2px solid #dee2e6;
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
}

.help-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 60px;
}

.help-sidebar h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #212529;
}

.category-list {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.category-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  text-align: left;
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.category-btn:hover {
  background: #f8f9fa;
}

.category-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.category-icon {
  font-size: 18px;
}

.category-name {
  flex: 1 1;
}

.quick-contact {
  margin-top: 40px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 10px;
  text-align: center;
}

.quick-contact h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.quick-contact p {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 15px;
}

.help-main h2 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #212529;
}

.help-topics-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-topic-card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.help-topic-card:hover {
  transform: translateY(-3px);
}

.help-topic-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #212529;
}

.help-topic-card p {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 15px;
}

.topic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.topic-views,
.topic-category {
  background: #f8f9fa;
  padding: 5px 12px;
  border-radius: 20px;
}

.no-results {
  text-align: center;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 8px;
}

.popular-topics {
  margin-top: 60px;
}

.popular-topics h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #212529;
}

.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.popular-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform 0.3s;
  display: block;
}

.popular-card:hover {
  transform: translateY(-5px);
}

.popular-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #212529;
}

.popular-card p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 1024px) {
  .help-content {
    grid-template-columns: 1fr;
  }

  .category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: static;
  }

  .category-btn {
    width: auto;
    flex: 1 1;
    min-width: 200px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .help-center-container {
  background: #1a1a1a;
}

:root.dark-mode .help-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .help-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .help-header p {
  color: #b0b0b0;
}

:root.dark-mode .search-container {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .search-bar {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .search-bar::placeholder {
  color: #909090;
}

:root.dark-mode .search-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .search-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .help-content {
  gap: 20px;
}

:root.dark-mode .category-list {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .category-btn {
  background: transparent;
  color: #b0b0b0;
  border: 1px solid transparent;
}

:root.dark-mode .category-btn:hover {
  background: #333333;
  color: #667eea;
  border-color: #667eea;
}

:root.dark-mode .category-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

:root.dark-mode .help-articles {
  gap: 15px;
}

:root.dark-mode .article-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

:root.dark-mode .article-card:hover {
  border-color: #667eea;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}

:root.dark-mode .article-card h3 {
  color: #667eea;
}

:root.dark-mode .article-card p {
  color: #b0b0b0;
}

:root.dark-mode .article-card .read-more {
  color: #667eea;
}

:root.dark-mode .article-card .read-more:hover {
  color: #7b8ff5;
}

:root.dark-mode .article-modal {
  background: rgba(0, 0, 0, 0.7);
}

:root.dark-mode .modal-content {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #e8e8e8;
}

:root.dark-mode .modal-header {
  border-bottom: 1px solid #404040;
}

:root.dark-mode .modal-header h2 {
  color: #667eea;
}

:root.dark-mode .modal-close {
  color: #b0b0b0;
}

:root.dark-mode .modal-close:hover {
  color: #e8e8e8;
}

:root.dark-mode .modal-body {
  color: #b0b0b0;
  line-height: 1.6;
}

:root.dark-mode .modal-body h3 {
  color: #667eea;
}

:root.dark-mode .modal-body p {
  color: #b0b0b0;
}

:root.dark-mode .modal-body code {
  background: #1a1a1a;
  color: #67c7ea;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

:root.dark-mode .modal-body pre {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
}

:root.dark-mode .modal-body pre code {
  color: #67c7ea;
}

:root.dark-mode .modal-footer {
  border-top: 1px solid #404040;
}

:root.dark-mode .modal-footer .btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .modal-footer .btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
  text-align: center;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

/* FAQ Page Styles */
.faq-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.faq-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white;
}

.faq-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.search-section {
  margin-bottom: 50px;
}

.faq-content {
  margin-bottom: 60px;
}

.faq-category {
  margin-bottom: 50px;
}

.faq-category h2 {
  font-size: 24px;
  margin-bottom: 25px;
  color: #212529;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.faq-question:hover {
  background: #f8f9fa;
}

.faq-question.active {
  background: #667eea;
  color: white;
}

.faq-question span:first-child {
  flex: 1 1;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
}

.faq-toggle {
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.3s;
}

.faq-answer {
  padding: 20px 25px;
  background: #f8f9fa;
  color: #6c757d;
  line-height: 1.8;
  font-size: 15px;
  border-top: 1px solid #dee2e6;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.no-results p {
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 20px;
}

.need-help {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 60px 40px;
  border-radius: 10px;
  text-align: center;
}

.need-help h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.need-help p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 30px;
}

.help-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
  display: inline-block;
}

.btn-primary {
  background: white;
  color: #667eea;
  border: none;
}

.btn-primary:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: #667eea;
}

@media (max-width: 768px) {
  .faq-header h1 {
    font-size: 28px;
  }

  .faq-header p {
    font-size: 16px;
  }

  .faq-category h2 {
    font-size: 20px;
  }

  .faq-question {
    padding: 15px 20px;
  }

  .faq-answer {
    padding: 15px 20px;
  }

  .help-actions {
    flex-direction: column;
  }

  .need-help h2 {
    font-size: 24px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .faq-container {
  background: #1a1a1a;
}

:root.dark-mode .faq-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .faq-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .faq-header p {
  color: #b0b0b0;
}

:root.dark-mode .search-container {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .search-input {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .search-input::placeholder {
  color: #909090;
}

:root.dark-mode .search-btn {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .search-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .faq-content {
  gap: 30px;
}

:root.dark-mode .faq-category {
  background: transparent;
}

:root.dark-mode .faq-category h2 {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

:root.dark-mode .faq-question {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

:root.dark-mode .faq-question:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .faq-question h3 {
  color: #667eea;
}

:root.dark-mode .faq-question.active {
  background: #333333;
}

:root.dark-mode .faq-question.active h3 {
  color: #7b8ff5;
}

:root.dark-mode .faq-toggle {
  color: #667eea;
}

:root.dark-mode .faq-answer {
  background: #1a1a1a;
  border-left: 3px solid #667eea;
  color: #b0b0b0;
}

:root.dark-mode .faq-answer.show {
  display: block;
}

:root.dark-mode .need-help {
  background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  margin-top: 40px;
}

:root.dark-mode .need-help h2 {
  color: white;
}

:root.dark-mode .need-help p {
  color: rgba(255, 255, 255, 0.9);
}

:root.dark-mode .help-actions {
  gap: 10px;
  margin-top: 20px;
}

:root.dark-mode .help-actions .btn {
  padding: 12px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  border: none;
}

:root.dark-mode .help-actions .btn.primary {
  background: white;
  color: #667eea;
}

:root.dark-mode .help-actions .btn.primary:hover {
  background: #f0f0f0;
}

:root.dark-mode .help-actions .btn.secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

:root.dark-mode .help-actions .btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
  text-align: center;
  padding: 40px;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}

.emergencies-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.emergency-hero {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a4a 100%);
  color: white;
  padding: 60px 40px;
  border-radius: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.emergency-hero h1 {
  font-size: 36px;
  margin-bottom: 16px;
  font-weight: 700;
}

.emergency-hero p {
  font-size: 18px;
  opacity: 0.95;
  margin: 0;
}

.status-message {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
}

.status-message.success {
  background: #d4edda;
  color: #155724;
  border-left: 4px solid #28a745;
}

.status-message.error {
  background: #f8d7da;
  color: #721c24;
  border-left: 4px solid #dc3545;
}

.emergency-form-section {
  background: white;
  padding: 40px;
  border-radius: 12px;
  border: 2px solid #f0f0f0;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.emergency-form-section h2 {
  font-size: 24px;
  margin-bottom: 24px;
  color: #1a1a2e;
}

.emergency-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.form-group label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.required {
  color: #dc3545;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #ff6b6b;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #ee5a4a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
}

.btn-secondary:hover:not(:disabled) {
  background: #e0e0e0;
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.requests-history {
  background: white;
  padding: 40px;
  border-radius: 12px;
  border: 2px solid #f0f0f0;
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 24px;
  margin: 0;
  color: #1a1a2e;
}

.requests-grid {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.request-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
  transition: all 0.3s;
}

.request-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

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

.request-header h3 {
  margin: 0;
  color: #1a1a2e;
  font-size: 16px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.approved {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.request-description {
  margin: 0 0 12px 0;
  color: #555;
  font-size: 14px;
}

.request-details {
  font-size: 13px;
  color: #666;
}

.request-details p {
  margin: 6px 0;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.emergency-info {
  background: #f8f9fa;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.emergency-info h2 {
  font-size: 24px;
  margin-bottom: 24px;
  color: #1a1a2e;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.info-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.info-card h3 {
  margin-top: 0;
  color: #1a1a2e;
  font-size: 16px;
}

.info-card p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.info-card a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.info-card a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .emergency-hero {
    padding: 40px 24px;
  }

  .emergency-hero h1 {
    font-size: 28px;
  }

  .emergency-hero p {
    font-size: 16px;
  }

  .emergency-form-section,
  .requests-history,
  .emergency-info {
    padding: 24px;
  }

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

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .section-header button {
    width: 100%;
  }
}

:root.dark-mode .emergency-form-section,
:root.dark-mode .requests-history {
  background: #2d2d2d;
  border-color: #404040;
}

:root.dark-mode .emergency-form-section h2,
:root.dark-mode .requests-history h2,
:root.dark-mode .emergency-info h2,
:root.dark-mode .request-header h3,
:root.dark-mode .request-card {
  color: #e0e0e0;
}

:root.dark-mode .form-group label {
  color: #bbb;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group textarea {
  background: #1a1a1a;
  border-color: #404040;
  color: #e0e0e0;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group textarea:focus {
  border-color: #667eea;
}

:root.dark-mode .btn-secondary {
  background: #404040;
  color: #e0e0e0;
}

:root.dark-mode .btn-secondary:hover {
  background: #505050;
}

:root.dark-mode .request-card {
  background: #1a1a1a;
  border-color: #404040;
}

:root.dark-mode .request-description,
:root.dark-mode .request-details,
:root.dark-mode .empty-state p,
:root.dark-mode .loading {
  color: #aaa;
}

:root.dark-mode .emergency-info {
  background: #1a1a1a;
}

:root.dark-mode .info-card {
  background: #2d2d2d;
  border-color: #404040;
}

:root.dark-mode .info-card h3 {
  color: #e0e0e0;
}

:root.dark-mode .info-card p {
  color: #aaa;
}

/* Emergency Numbers Page Styles */
.emergency-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.emergency-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 40px;
}

.emergency-header h1 {
  font-size: 36px;
  margin-bottom: 15px;
  color: white;
}

.emergency-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.emergency-alert {
  background: #f8d7da;
  color: #721c24;
  padding: 15px 25px;
  border-radius: 10px;
  margin-bottom: 40px;
  text-align: center;
  border-left: 5px solid #dc3545;
}

.emergency-alert p {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
}

.emergency-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 60px;
}

.emergency-sidebar h2,
.emergency-main h2 {
  font-size: 24px;
  margin-bottom: 25px;
  color: #212529;
}

.category-list {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.category-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  text-align: left;
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.category-btn:hover {
  background: #f8f9fa;
}

.category-btn.active {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.quick-dial {
  margin-top: 40px;
  text-align: center;
}

.quick-dial h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #212529;
}

.quick-dial-btn {
  width: 100%;
  font-size: 32px;
  font-weight: bold;
  padding: 20px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 10px;
}

.quick-dial-btn:hover {
  background: #c82333;
  transform: scale(1.05);
}

.emergency-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.emergency-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.emergency-card:hover {
  transform: translateY(-5px);
}

.emergency-card.high {
  border-left: 5px solid #dc3545;
}

.emergency-card.medium {
  border-left: 5px solid #ffc107;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-header h3 {
  font-size: 18px;
  margin: 0;
  color: #212529;
}

.priority-badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.priority-badge.urgent {
  background: #dc3545;
  color: white;
}

.priority-badge.standard {
  background: #ffc107;
  color: #212529;
}

.phone-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #212529;
}

.call-btn {
  background: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.call-btn:hover {
  background: #218838;
  transform: scale(1.05);
}

.emergency-card .description {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 15px;
}

.availability {
  display: flex;
  align-items: center;
  gap: 10px;
}

.available-badge {
  background: #d4edda;
  color: #155724;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.hours-badge {
  background: #fff3cd;
  color: #856404;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.emergency-tips {
  margin-top: 60px;
}

.emergency-tips h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #212529;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.tip-card {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 30px;
  border-radius: 10px;
}

.tip-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.tip-card p {
  opacity: 0.9;
  line-height: 1.6;
  font-size: 15px;
  margin: 0;
}

.related-services {
  margin-top: 60px;
}

.related-services h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #212529;
}

.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.related-link {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform 0.3s;
  display: block;
}

.related-link:hover {
  transform: translateY(-5px);
}

.link-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.related-link h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #212529;
}

.related-link p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 1024px) {
  .emergency-content {
    grid-template-columns: 1fr;
  }

  .category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: static;
  }

  .category-btn {
    width: auto;
    flex: 1 1;
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .emergency-header h1 {
    font-size: 28px;
  }

  .emergency-cards {
    grid-template-columns: 1fr;
  }
}
/* ===== DARK MODE STYLES ===== */
:root.dark-mode .emergency-page {
  background: #1a1a1a;
}

:root.dark-mode .emergency-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .emergency-header p {
  color: #b0b0b0;
}

:root.dark-mode .emergency-alert {
  background: rgba(220, 53, 69, 0.15);
  color: #ff9999;
  border-left-color: #dc3545;
}

:root.dark-mode .category-btn {
  background: #2d2d2d;
  border-color: #404040;
  color: #e8e8e8;
}

:root.dark-mode .category-btn:hover {
  background: #3a3a3a;
}

:root.dark-mode .category-btn.active {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

:root.dark-mode .quick-dial h3 {
  color: #e8e8e8;
}

:root.dark-mode .emergency-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .card-header h3 {
  color: #e8e8e8;
}

:root.dark-mode .phone-number {
  background: #1a1a1a;
  border: 1px solid #404040;
}

:root.dark-mode .number {
  color: #e8e8e8;
}

:root.dark-mode .emergency-card .description {
  color: #b0b0b0;
}

:root.dark-mode .emergency-tips h2 {
  color: #e8e8e8;
}

:root.dark-mode .related-services h2 {
  color: #e8e8e8;
}

:root.dark-mode .related-link {
  background: #2d2d2d;
  border: 1px solid #404040;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .related-link h3 {
  color: #e8e8e8;
}

:root.dark-mode .related-link p {
  color: #b0b0b0;
}

:root.dark-mode .emergency-sidebar h2,
:root.dark-mode .emergency-main h2 {
  color: #e8e8e8;
}
/* Support Page Styles */
.support-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.support-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 50px;
}

.support-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white;
}

.support-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 60px;
}

.support-option {
  background: white;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s;
}

.support-option:hover {
  transform: translateY(-5px);
}

.option-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.support-option h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #212529;
}

.support-option p {
  color: #6c757d;
  margin-bottom: 15px;
}

.option-link {
  display: block;
  color: #667eea;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 10px;
}

.option-time {
  display: block;
  font-size: 14px;
  color: #28a745;
  font-weight: 500;
}

.support-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 60px;
}

.support-form-section h2,
.support-sidebar h2 {
  font-size: 24px;
  margin-bottom: 25px;
  color: #212529;
}

.support-form {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

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

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #212529;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.form-group small {
  display: block;
  margin-top: 5px;
  color: #6c757d;
  font-size: 13px;
}

.submit-btn {
  background: #667eea;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  background: #5568d3;
  transform: translateY(-2px);
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}

.quick-help-links {
  margin-bottom: 30px;
}

.quick-link {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.quick-link:hover {
  transform: translateX(5px);
  background: #f8f9fa;
}

.quick-link.emergency {
  border-left: 5px solid #dc3545;
}

.quick-link-icon {
  font-size: 32px;
}

.quick-link h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #212529;
}

.quick-link p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.support-hours {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.support-hours h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #212529;
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.hour-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #dee2e6;
}

.hours-note {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

.ticket-status {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ticket-status h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #212529;
}

.ticket-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 16px;
}

.check-ticket-btn {
  width: 100%;
  background: #667eea;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
}

.check-ticket-btn:hover {
  background: #5568d3;
}

.common-issues {
  margin-top: 60px;
}

.common-issues h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  color: #212529;
}

.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.issue-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.issue-card:hover {
  transform: translateY(-5px);
}

.issue-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #212529;
}

.issue-card p {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 14px;
}

.issue-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.issue-link:hover {
  color: #5568d3;
}

@media (max-width: 1024px) {
  .support-content {
    grid-template-columns: 1fr;
  }

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

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .support-container {
  background: #1a1a1a;
}

:root.dark-mode .support-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .support-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .support-header p {
  color: #b0b0b0;
}

:root.dark-mode .support-content {
  gap: 20px;
}

:root.dark-mode .support-form {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .support-form h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .form-group {
  margin-bottom: 20px;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group select,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: inherit;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group select:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group input::placeholder,
:root.dark-mode .form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .form-group button {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .form-group button:hover {
  background: #7b8ff5;
}

:root.dark-mode .support-sidebar {
  background: transparent;
}

:root.dark-mode .support-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

:root.dark-mode .support-card h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

:root.dark-mode .support-card p {
  color: #b0b0b0;
  margin-bottom: 10px;
}

:root.dark-mode .support-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

:root.dark-mode .support-link:hover {
  color: #7b8ff5;
}

:root.dark-mode .faq-item {
  background: #1a1a1a;
  border: 1px solid #404040;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

:root.dark-mode .faq-item:hover {
  border-color: #667eea;
}

:root.dark-mode .faq-item h4 {
  color: #667eea;
}

:root.dark-mode .contact-support h3 {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

:root.dark-mode .contact-option {
  background: #1a1a1a;
  border-left: 3px solid #667eea;
  padding: 12px;
  margin-bottom: 10px;
}

:root.dark-mode .contact-option strong {
  color: #e8e8e8;
}

:root.dark-mode .contact-option a {
  color: #667eea;
}

:root.dark-mode .contact-option a:hover {
  color: #7b8ff5;
}

:root.dark-mode .issue-tracking {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 15px;
}

:root.dark-mode .issue-tracking h4 {
  color: #667eea;
}

:root.dark-mode .issue-link {
  color: #667eea;
}

:root.dark-mode .issue-link:hover {
  color: #7b8ff5;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}

/* Legal Pages Shared Styles */
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-container {
  flex: 1 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.legal-page {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.legal-page h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: #212529;
}

.last-updated {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 30px;
}

.policy-section {
  margin-bottom: 40px;
}

.policy-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #212529;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.policy-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #495057;
}

.policy-section p,
.policy-section ul,
.policy-section ol {
  color: #6c757d;
  line-height: 1.8;
  font-size: 16px;
}

.policy-section ul,
.policy-section ol {
  margin: 15px 0;
  padding-left: 30px;
}

.policy-section li {
  margin-bottom: 10px;
}

.important-notice {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
}

.important-notice p {
  margin: 0;
  color: #856404;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-size: 16px;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
}

@media (max-width: 768px) {
  .legal-page {
    padding: 25px 20px;
  }

  .legal-page h1 {
    font-size: 28px;
  }

  .policy-section h2 {
    font-size: 20px;
  }

  .action-buttons {
    flex-direction: column;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .legal-page {
  background: #1a1a1a;
  color: #e8e8e8;
}

:root.dark-mode .legal-page h1 {
  color: #e8e8e8;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .legal-page h2 {
  color: #667eea;
}

:root.dark-mode .legal-page h3 {
  color: #667eea;
}

:root.dark-mode .legal-page p {
  color: #b0b0b0;
}

:root.dark-mode .legal-page li {
  color: #b0b0b0;
}

:root.dark-mode .legal-page a {
  color: #667eea;
}

:root.dark-mode .legal-page a:hover {
  color: #7b8ff5;
}

:root.dark-mode .legal-page strong {
  color: #e8e8e8;
}

:root.dark-mode .legal-page em {
  color: #b0b0b0;
}

:root.dark-mode .policy-section {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

:root.dark-mode .policy-section h2 {
  border-bottom: 1px solid #404040;
  color: #667eea;
}

:root.dark-mode .last-updated {
  background: #333333;
  border: 1px solid #404040;
  color: #b0b0b0;
  padding: 10px 15px;
  border-radius: 4px;
}

:root.dark-mode .table-of-contents {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
}

:root.dark-mode .table-of-contents h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .table-of-contents a {
  color: #667eea;
}

:root.dark-mode .table-of-contents a:hover {
  color: #7b8ff5;
}

:root.dark-mode .action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

:root.dark-mode .action-buttons .btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  border: none;
}

:root.dark-mode .action-buttons .btn.primary {
  background: #667eea;
  color: white;
}

:root.dark-mode .action-buttons .btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .action-buttons .btn.secondary {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .action-buttons .btn.secondary:hover {
  background: #606060;
}

/* Doctor Registration Page Styles */
.registration-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
}

.registration-page {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 60px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 10px;
}

.page-header h1 {
  font-size: 42px;
  margin-bottom: 10px;
  font-weight: 700;
  color: white;
}

.page-header p {
  font-size: 18px;
  opacity: 0.9;
  margin: 0;
  color: white;
}

/* Progress Steps */
.progress-container {
  margin-bottom: 40px;
}

.progress-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.progress-step {
  display: flex;
  flex: 1 1;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: white;
  border-radius: 10px;
  border: 2px solid #e9ecef;
  transition: all 0.3s;
}

.progress-step.active {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-color: transparent;
  font-weight: 600;
}

.progress-step.active .step-number {
  background: white;
  color: #667eea;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.step-label {
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  transition: width 0.3s ease;
}

/* Registration Steps */
.registration-form-container {
  background: white;
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.registration-step {
  display: none;
  animation: slideIn 0.3s ease;
}

.registration-step.active {
  display: block;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.registration-step h2 {
  font-size: 28px;
  color: #212529;
  margin-bottom: 30px;
  font-weight: 600;
}

.form-section {
  margin-bottom: 40px;
}

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

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 600;
  color: #495057;
  font-size: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

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

/* Checkbox Grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.checkbox-item input {
  width: 20px;
  height: 20px;
  margin-right: 0;
  cursor: pointer;
}

/* Consultation Types */
.consultation-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 30px;
}

.consultation-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s;
}

.consultation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.consultation-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.consultation-card h3 {
  font-size: 20px;
  color: #212529;
  margin-bottom: 10px;
}

.consultation-card p {
  color: #6c757d;
  line-height: 1.6;
  font-size: 14px;
}

/* Review Section */
.review-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 40px;
}

.review-summary {
  background: white;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.review-section h3 {
  font-size: 20px;
  color: #212529;
  margin-bottom: 20px;
  font-weight: 600;
}

.review-details {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.review-details li {
  padding: 10px 15px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  margin-bottom: 10px;
}

.review-details strong {
  color: #212529;
  font-weight: 600;
}

.review-image {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #e9ecef;
  margin-bottom: 15px;
}

/* Review Actions */
.review-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.review-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.review-checkbox input {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.review-checkbox span {
  color: #6c757d;
  font-size: 13px;
}

.review-checkbox a {
  color: #667eea;
  font-weight: 600;
}

.review-checkbox a:hover {
  text-decoration: underline;
}

.review-buttons {
  display: flex;
  gap: 15px;
}

.back-btn {
  padding: 12px 24px;
  background: white;
  border: 2px solid #e9ecef;
  color: #6c757d;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background: #f8f9fa;
  border-color: #667eea;
  color: #667eea;
  }

.submit-btn {
  padding: 12px 30px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sidebar */
.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.sidebar-sticky {
    background: white;
    padding: 25px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

.sidebar-sticky h3 {
  font-size: 18px;
  color: #212529;
  margin-bottom: 20px;
  font-weight: 600;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  color: #495057;
  transition: all 0.3s;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.sidebar-link:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
  transform: translateY(-2px);
}

.sidebar-link-icon {
  font-size: 20px;
}

/* Requirements & Benefits */
.requirements-list {
  margin-top: 20px;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #28a745;
}

.requirement-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.requirement-item span {
  color: #495057;
  font-size: 14px;
}

.requirement-item strong {
  color: #212529;
}

.benefits-list {
  margin-top: 20px;
}

.benefit-item {
  display: flex;
  align-items: start;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.benefit-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.benefit-item strong {
  color: #212529;
}

.benefit-item p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

.benefit-item div {
  color: #495057;
  font-size: 14px;
}

/* Contact Info */
.contact-info {
  background: #d4edda;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #667eea;
  margin-top: 20px;
}

.contact-info p {
  color: #155724;
  font-size: 14px;
  margin: 0;
}

.contact-info a {
  color: #667eea;
  font-weight: 600;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Buttons */
.continue-btn,
.back-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.continue-btn:hover,
.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.submit-btn {
  padding: 15px 40px;
}

/* File Upload */
.profile-upload {
  margin-top: 20px;
}

.upload-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #495057;
  font-size: 15px;
}

.upload-icon {
  font-size: 24px;
}

.file-input {
  width: 100%;
  padding: 10px;
  background: #f8f9fa;
  border: 2px dashed #667eea;
  border-radius: 8px;
  font-size: 14px;
}

.preview-container {
  margin-top: 20px;
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.preview-image {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #e9ecef;
}

.upload-guidelines {
  background: white;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #667eea;
}

.upload-guidelines h4 {
  color: #212529;
  margin-bottom: 10px;
}

.upload-guidelines ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 20px;
}

.upload-guidelines li {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }

  .page-header p {
    font-size: 16px;
  }

  .progress-steps {
    flex-wrap: wrap;
    justify-content: center;
  }

  .progress-step {
    min-width: 120px;
  }

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

  .form-group {
    grid-column: 1fr;
  }

  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .consultation-types {
    grid-template-columns: 1fr;
  }

  .review-actions {
    flex-direction: column;
  }

  .sidebar {
    position: static;
  }

  .requirements-list,
  .benefits-list {
    grid-template-columns: 1fr;
  }

  .requirement-item,
  .benefit-item {
    flex-direction: column;
    gap: 8px;
    align-items: start;
  }

  .benefit-item strong {
    margin-bottom: 5px;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .registration-container {
  background: #1a1a1a;
}

:root.dark-mode .registration-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .registration-header h1 {
  color: #e8e8e8;
}

:root.dark-mode .registration-header p {
  color: #b0b0b0;
}

:root.dark-mode .progress-bar {
  background: #404040;
}

:root.dark-mode .progress-fill {
  background: linear-gradient(90deg, #667eea 0%, #5568d3 100%);
}

:root.dark-mode .registration-form {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .form-section h2 {
  color: #667eea;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .form-group {
  margin-bottom: 20px;
}

:root.dark-mode .form-group label {
  color: #e8e8e8;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group select,
:root.dark-mode .form-group textarea {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: inherit;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group select:focus,
:root.dark-mode .form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .form-group input::placeholder,
:root.dark-mode .form-group textarea::placeholder {
  color: #909090;
}

:root.dark-mode .file-upload {
  background: #333333;
  border: 2px dashed #404040;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: #b0b0b0;
}

:root.dark-mode .file-upload:hover {
  border-color: #667eea;
  background: #3a3a3a;
}

:root.dark-mode .checkbox-group,
:root.dark-mode .radio-group {
  gap: 15px;
}

:root.dark-mode .checkbox-item,
:root.dark-mode .radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

:root.dark-mode .checkbox-item input,
:root.dark-mode .radio-item input {
  accent-color: #667eea;
}

:root.dark-mode .checkbox-item label,
:root.dark-mode .radio-item label {
  color: #b0b0b0;
}

:root.dark-mode .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

:root.dark-mode .btn {
  padding: 10px 30px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

:root.dark-mode .btn.primary {
  background: #667eea;
  color: white;
}

:root.dark-mode .btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .btn.secondary {
  background: #505050;
  color: #e8e8e8;
}

:root.dark-mode .btn.secondary:hover {
  background: #606060;
}

:root.dark-mode .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:root.dark-mode .sidebar {
  background: transparent;
}

:root.dark-mode .sidebar-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

:root.dark-mode .sidebar-card h3 {
  color: #667eea;
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

:root.dark-mode .requirement-item,
:root.dark-mode .benefit-item {
  color: #b0b0b0;
}

:root.dark-mode .requirement-item strong,
:root.dark-mode .benefit-item strong {
  color: #e8e8e8;
}

:root.dark-mode .verification-steps {
  background: #1a1a1a;
  border-left: 3px solid #667eea;
  padding: 15px;
}

:root.dark-mode .step-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #404040;
}

:root.dark-mode .step-item:last-child {
  border-bottom: none;
}

:root.dark-mode .step-number {
  background: #667eea;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

:root.dark-mode .step-text {
  color: #b0b0b0;
}

:root.dark-mode .error-message {
  background: #3d2222;
  color: #ff6b6b;
  border: 1px solid #550000;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

:root.dark-mode .success-message {
  background: #223d2d;
  color: #4db84d;
  border: 1px solid #004400;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

:root.dark-mode .loading {
  color: #b0b0b0;
}
/* Location Pages Component Styles */

.location-pages {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Location Hero Section */
.location-hero {
  text-align: center;
  padding: 60px 0 40px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  margin-bottom: 40px;
  border-radius: 0 0 30px 30px;
}

.location-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.location-hero p {
  font-size: 20px;
  margin-bottom: 0;
  opacity: 0.9;
}

/* Location Search Section */
.location-search {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.location-select,
.specialization-select {
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  min-width: 200px;
  background: white;
}

.search-btn,
.filter-btn {
  padding: 12px 24px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-btn:hover,
.filter-btn:hover {
  background: #218838;
}

/* Divisions Grid */
.divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 60px;
}

.division-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.division-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.division-card h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.division-card p {
  color: #666;
  margin-bottom: 16px;
}

.cities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.city-link {
  display: inline-block;
  padding: 6px 12px;
  background: #f1f3f4;
  color: #007bff;
  text-decoration: none;
  border-radius: 16px;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.city-link:hover {
  background: #e3f2fd;
  text-decoration: none;
}

.more-cities {
  color: #666;
  font-size: 14px;
  padding: 6px 0;
}

.view-division-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.view-division-btn:hover {
  background: #0056b3;
  text-decoration: none;
  color: white;
}

/* Location Header */
.location-header {
  text-align: center;
  padding: 40px 0 30px;
}

.location-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.location-header p {
  font-size: 18px;
  color: #666;
  margin-bottom: 0;
}

/* Location Filters */
.location-filters {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.specialization-filter {
  padding: 10px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  min-width: 200px;
  background: white;
}

/* Sections */
.doctors-section,
.hospitals-section {
  margin-bottom: 60px;
}

.doctors-section h2,
.hospitals-section h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #1a1a1a;
}

/* Doctors Grid */
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.doctor-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.doctor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: #f8f9fa;
}

.doctor-info {
  flex: 1 1;
}

.doctor-info h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.doctor-info .specialization {
  font-size: 14px;
  color: #007bff;
  font-weight: 500;
  margin-bottom: 4px;
}

.doctor-info .hospital {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.doctor-info .experience {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.view-doctor-btn,
.view-hospital-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.view-doctor-btn:hover,
.view-hospital-btn:hover {
  background: #0056b3;
  text-decoration: none;
  color: white;
}

/* Hospitals Grid */
.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.hospital-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hospital-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hospital-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f8f9fa;
}

.hospital-info {
  padding: 20px;
}

.hospital-info h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.hospital-info .type {
  font-size: 14px;
  color: #007bff;
  font-weight: 500;
  margin-bottom: 8px;
}

.hospital-info .address {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* No Results */
.no-results {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-results h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.no-results p {
  font-size: 16px;
  color: #666;
  margin-bottom: 0;
}

/* Loading State */
.loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  .location-hero h1 {
    font-size: 32px;
  }
  
  .location-hero p {
    font-size: 16px;
  }
  
  .location-search {
    flex-direction: column;
    align-items: center;
  }
  
  .location-select,
  .specialization-select {
    width: 100%;
    max-width: 300px;
  }
  
  .divisions-grid {
    grid-template-columns: 1fr;
  }
  
  .doctors-grid {
    grid-template-columns: 1fr;
  }
  
  .hospitals-grid {
    grid-template-columns: 1fr;
  }
  
  .doctor-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .doctor-avatar {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
  
  .location-hero {
    padding: 40px 0 30px;
  }
  
  .division-card {
    padding: 20px;
  }
  
  .doctor-card {
    padding: 20px;
  }
  
  .hospital-info {
    padding: 16px;
  }
}

/* Accessibility */
.doctor-card:focus-within,
.hospital-card:focus-within,
.division-card:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Print-friendly styles */
@media print {
  .location-search,
  .location-filters {
    display: none;
  }
  
  .location-hero {
    background: white;
    color: black;
  }
  
  .doctor-card,
  .hospital-card {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ===== DARK MODE STYLES ===== */
:root.dark-mode .location-container {
  background: #1a1a1a;
}

:root.dark-mode .location-hero {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border-bottom: 1px solid #404040;
}

:root.dark-mode .location-hero h1 {
  color: #e8e8e8;
}

:root.dark-mode .location-hero p {
  color: #b0b0b0;
}

:root.dark-mode .location-search {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .search-form {
  display: flex;
  gap: 10px;
}

:root.dark-mode .search-form input {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  flex: 1 1;
  padding: 10px 12px;
  border-radius: 4px;
}

:root.dark-mode .search-form input::placeholder {
  color: #909090;
}

:root.dark-mode .search-form button {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .search-form button:hover {
  background: #7b8ff5;
}

:root.dark-mode .location-filters {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .filter-group label {
  color: #e8e8e8;
}

:root.dark-mode .filter-group input,
:root.dark-mode .filter-group select {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
}

:root.dark-mode .filter-group input:focus,
:root.dark-mode .filter-group select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:root.dark-mode .filter-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

:root.dark-mode .filter-btn:hover {
  background: #7b8ff5;
}

:root.dark-mode .location-results {
  gap: 20px;
}

:root.dark-mode .result-card {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
}

:root.dark-mode .result-card:hover {
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

:root.dark-mode .result-card h3 {
  color: #667eea;
}

:root.dark-mode .result-card p {
  color: #b0b0b0;
}

:root.dark-mode .result-meta {
  border-top: 1px solid #404040;
  padding-top: 10px;
  margin-top: 10px;
  color: #b0b0b0;
}

:root.dark-mode .result-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #404040;
}

:root.dark-mode .result-action-btn {
  background: #333333;
  color: #e8e8e8;
  border: 1px solid #404040;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

:root.dark-mode .result-action-btn:hover {
  background: #404040;
  border-color: #667eea;
  color: #667eea;
}

:root.dark-mode .result-action-btn.primary {
  background: #667eea;
  color: white;
  border: none;
}

:root.dark-mode .result-action-btn.primary:hover {
  background: #7b8ff5;
}

:root.dark-mode .map-container {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 8px;
  height: 400px;
}

:root.dark-mode .empty-state {
  color: #b0b0b0;
  text-align: center;
  padding: 40px;
}

:root.dark-mode .empty-state-icon {
  color: #667eea;
  opacity: 0.5;
}
.doctor-invitations {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.invitations-header {
  margin-bottom: 30px;
}

.invitations-header h1 {
  font-size: 28px;
  color: #333;
  margin: 0 0 10px 0;
}

.invitations-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  animation: slideIn 0.3s ease-out;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

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

.invitations-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e9ecef;
  overflow-x: auto;
  padding-bottom: 0;
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.tab-btn:hover {
  color: #667eea;
}

.invitations-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Request Section */
.request-section {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.request-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 24px 0;
}

/* Request Form Styling */
.request-form {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid #e8eef7;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 0;
}

/* Form Group Container */
.hospital-selector,
.message-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Form Labels */
.hospital-selector label,
.message-input label {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

/* Select Dropdown */
.hospital-selector select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dde3f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background-color: #ffffff;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23667eea%27 stroke-width=%272%27%3e%3cpath d=%27M6 9l6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 36px;
}

.hospital-selector select:hover {
  border-color: #c0c8e0;
  background-color: #f8f9ff;
}

.hospital-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background-color: #ffffff;
}

/* Textarea */
.message-input textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dde3f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background-color: #ffffff;
  color: #2c3e50;
  resize: vertical;
  min-height: 100px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.message-input textarea:hover {
  border-color: #c0c8e0;
  background-color: #f8f9ff;
}

.message-input textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background-color: #ffffff;
}

.message-input textarea::placeholder {
  color: #999;
}

/* Submit Button */
.request-btn {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #6c76d6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.request-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5f79e0 0%, #6370ca 100%);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.request-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.request-btn:disabled {
  background: linear-gradient(135deg, #d0d8e8 0%, #c5cfe0 100%);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Invitations List */
.invitations-list,
.requests-list,
.connected-list {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.invitations-list h2,
.requests-list h2,
.connected-list h2 {
  font-size: 18px;
  color: #333;
  margin: 0 0 20px 0;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.invitations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.invitation-card,
.request-card,
.connection-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.invitation-card:hover,
.request-card:hover,
.connection-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.invitation-header,
.request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #e3f2fd;
  color: #1976d2;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.hospital-details,
.hospital-info {
  margin-bottom: 12px;
}

.hospital-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
}

.hospital-info,
.hospital-address,
.hospital-phone,
.from-info {
  font-size: 13px;
  color: #666;
  margin: 5px 0;
}

.invitation-message,
.request-message {
  font-size: 13px;
  color: #666;
  margin: 10px 0;
  line-height: 1.4;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
}

:root.dark-mode .invitation-message,
:root.dark-mode .request-message {
  background: #404040;
  color: #b0b0b0;
}

.invitation-date,
.request-date {
  font-size: 12px;
  color: #999;
  margin: 10px 0;
}

.invitation-actions,
.connection-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.accept-btn,
.reject-btn,
.cancel-btn,
.schedule-btn,
.info-btn {
  flex: 1 1;
  min-width: 100px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.accept-btn {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.accept-btn:hover:not(:disabled) {
  background: #c3e6cb;
}

.reject-btn,
.cancel-btn {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.reject-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: #f5c6cb;
}

.schedule-btn,
.info-btn {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.schedule-btn:hover:not(:disabled),
.info-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.status-info,
.accept-status {
  padding: 10px 12px;
  background: #d1ecf1;
  color: #0c5460;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
}

/* Dark Mode */
:root.dark-mode .doctor-invitations {
  color: #e0e0e0;
}

:root.dark-mode .invitations-header h1 {
  color: #fff;
}

:root.dark-mode .invitations-header p {
  color: #b0b0b0;
}

:root.dark-mode .invitations-tabs {
  border-bottom-color: #404040;
}

:root.dark-mode .tab-btn {
  color: #b0b0b0;
}

:root.dark-mode .tab-btn.active {
  color: #667eea;
}

:root.dark-mode .request-section,
:root.dark-mode .invitations-list,
:root.dark-mode .requests-list,
:root.dark-mode .connected-list {
  background: #2a2a2a;
  border-color: #404040;
}

:root.dark-mode .request-section h2,
:root.dark-mode .invitations-list h2,
:root.dark-mode .requests-list h2,
:root.dark-mode .connected-list h2 {
  color: #fff;
}

:root.dark-mode .hospital-selector label,
:root.dark-mode .message-input label {
  color: #e0e0e0;
}

:root.dark-mode .hospital-selector select,
:root.dark-mode .message-input textarea {
  background: #3a3a3a;
  border-color: #404040;
  color: #e0e0e0;
}

:root.dark-mode .hospital-selector select:focus,
:root.dark-mode .message-input textarea:focus {
  border-color: #667eea;
}

:root.dark-mode .invitation-card,
:root.dark-mode .request-card,
:root.dark-mode .connection-card {
  background: #3a3a3a;
  border-color: #404040;
}

:root.dark-mode .hospital-name {
  color: #fff;
}

:root.dark-mode .hospital-info,
:root.dark-mode .hospital-address,
:root.dark-mode .hospital-phone,
:root.dark-mode .from-info {
  color: #b0b0b0;
}

:root.dark-mode .invitation-date,
:root.dark-mode .request-date {
  color: #808080;
}

@media (max-width: 768px) {
  .invitations-grid {
    grid-template-columns: 1fr;
  }

  .invitation-actions,
  .connection-actions {
    flex-direction: column;
  }

  .accept-btn,
  .reject-btn,
  .cancel-btn,
  .schedule-btn,
  .info-btn {
    width: 100%;
  }

  .tab-btn {
    padding: 10px 15px;
    font-size: 13px;
  }

  /* Mobile-friendly hospital selector */
  .hospital-selector,
  .message-input {
    width: 100%;
  }

  .hospital-selector select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 14px 44px 14px 16px;
  }

  .hospital-selector select option {
    padding: 10px;
    word-wrap: break-word;
  }

  /* Mobile form styling */
  .request-form {
    padding: 20px;
    gap: 18px;
    border-radius: 14px;
  }

  .hospital-selector label,
  .message-input label {
    font-size: 14px;
  }

  .request-btn {
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
  }

  .message-input textarea {
    min-height: 80px;
    font-size: 16px;
    padding: 12px 14px;
  }
}

.hospital-invitations {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.invitations-header {
  margin-bottom: 30px;
}

.invitations-header h1 {
  font-size: 28px;
  color: #333;
  margin: 0 0 10px 0;
}

.invitations-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  animation: slideIn 0.3s ease-out;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

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

.invitations-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e9ecef;
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.tab-btn:hover {
  color: #667eea;
}

.invitations-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Invite Section */
.invite-section {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.invite-section h2 {
  font-size: 18px;
  color: #333;
  margin: 0 0 20px 0;
}

.invite-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.doctor-selector,
.message-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor-selector label,
.message-input label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.doctor-selector select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
}

.doctor-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.message-input textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.3s;
}

.message-input textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.invite-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-start;
}

.invite-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.invite-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Invitations List */
.invitations-list,
.connected-list {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.invitations-list h2,
.connected-list h2 {
  font-size: 18px;
  color: #333;
  margin: 0 0 20px 0;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.invitations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.invitation-card,
.connection-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.invitation-card:hover,
.connection-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

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

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.doctor_request {
  background: #e3f2fd;
  color: #1976d2;
}

.status-badge.hospital_invite {
  background: #f3e5f5;
  color: #7b1fa2;
}

.invitation-details {
  margin-bottom: 15px;
}

.doctor-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.invitation-message {
  font-size: 13px;
  color: #666;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.invitation-date {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.invitation-actions,
.connection-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.accept-btn,
.reject-btn,
.revoke-btn,
.schedule-btn,
.view-btn {
  flex: 1 1;
  min-width: 100px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.accept-btn {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.accept-btn:hover:not(:disabled) {
  background: #c3e6cb;
}

.reject-btn,
.revoke-btn {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.reject-btn:hover:not(:disabled),
.revoke-btn:hover:not(:disabled) {
  background: #f5c6cb;
}

.schedule-btn,
.view-btn {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.schedule-btn:hover:not(:disabled),
.view-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

/* Connection Card */
.doctor-info {
  margin-bottom: 12px;
}

.experience {
  font-size: 13px;
  color: #666;
  margin: 5px 0 0 0;
}

.connected-date {
  font-size: 12px;
  color: #999;
  margin: 10px 0;
}

/* Dark Mode */
:root.dark-mode .hospital-invitations {
  color: #e0e0e0;
}

:root.dark-mode .invitations-header h1 {
  color: #fff;
}

:root.dark-mode .invitations-header p {
  color: #b0b0b0;
}

:root.dark-mode .invitations-tabs {
  border-bottom-color: #404040;
}

:root.dark-mode .tab-btn {
  color: #b0b0b0;
}

:root.dark-mode .tab-btn.active {
  color: #667eea;
}

:root.dark-mode .invite-section,
:root.dark-mode .invitations-list,
:root.dark-mode .connected-list {
  background: #2a2a2a;
  border-color: #404040;
}

:root.dark-mode .invite-section h2,
:root.dark-mode .invitations-list h2,
:root.dark-mode .connected-list h2 {
  color: #fff;
}

:root.dark-mode .doctor-selector label,
:root.dark-mode .message-input label {
  color: #e0e0e0;
}

:root.dark-mode .doctor-selector select,
:root.dark-mode .message-input textarea {
  background: #3a3a3a;
  border-color: #404040;
  color: #e0e0e0;
}

:root.dark-mode .doctor-selector select:focus,
:root.dark-mode .message-input textarea:focus {
  border-color: #667eea;
}

:root.dark-mode .invitation-card,
:root.dark-mode .connection-card {
  background: #3a3a3a;
  border-color: #404040;
}

:root.dark-mode .doctor-name {
  color: #fff;
}

:root.dark-mode .invitation-message {
  color: #b0b0b0;
}

:root.dark-mode .invitation-date,
:root.dark-mode .connected-date {
  color: #808080;
}

@media (max-width: 768px) {
  .invitations-grid {
    grid-template-columns: 1fr;
  }

  .invitation-actions,
  .connection-actions {
    flex-direction: column;
  }

  .accept-btn,
  .reject-btn,
  .revoke-btn,
  .schedule-btn,
  .view-btn {
    width: 100%;
  }
}

.my-hospitals-page {
  min-height: 100vh;
  background: white;
  padding: 40px 20px;
}

.my-hospitals-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.header-content h1 {
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 8px;
  font-weight: 700;
}

.header-content p {
  color: #7f8c8d;
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #667eea;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 8px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-left: 4px solid #28a745;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-left: 4px solid #dc3545;
}

/* Pending Invitations Section */
.invitations-section {
  background: white;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid #fff3cd;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e67e22;
}

.section-header h2 i {
  color: #e67e22;
}

.section-subtitle {
  display: block;
  color: #7f8c8d;
  font-size: 14px;
  margin-top: 4px;
  font-weight: 400;
}

.invitations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.invitation-card {
  background: white;
  border: 2px solid #fff3cd;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.invitation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff9800, #f57c00);
}

.invitation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(230, 126, 34, 0.15);
  border-color: #ff9800;
}

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

.invitation-status {
  display: flex;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.invitation-date {
  color: #95a5a6;
  font-size: 12px;
  font-weight: 500;
}

.invitation-body h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invitation-body h3 i {
  color: #e67e22;
}

.invitation-body .location {
  margin: 8px 0;
  color: #7f8c8d;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.invitation-body .location i {
  color: #e67e22;
}

.invitation-type {
  margin: 8px 0 0 0;
  padding: 6px 0;
  color: #667eea;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.invitation-type i {
  color: #667eea;
}

.invitation-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.btn-accept,
.btn-reject {
  flex: 1 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-accept {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.btn-accept:hover:not(:disabled) {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

.btn-reject {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.btn-reject:hover:not(:disabled) {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.btn-accept:disabled,
.btn-reject:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 80px 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.empty-state i {
  font-size: 72px;
  color: #e0e0e0;
  margin-bottom: 24px;
  display: block;
}

.empty-state h2 {
  color: #2c3e50;
  font-size: 24px;
  margin-bottom: 12px;
}

.empty-state p {
  color: #7f8c8d;
  font-size: 16px;
  margin-bottom: 24px;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.hospital-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.hospital-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.hospital-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 12px 16px;
  color: white;
}

.hospital-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.hospital-header h3 {
  margin: 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.hospital-info {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.info-icon {
  font-size: 14px;
  color: #667eea;
  min-width: 18px;
  margin-top: 1px;
}

.info-content {
  flex: 1 1;
}

.info-label {
  display: none;
}

.info-value {
  color: #2c3e50;
  font-size: 13px;
  font-weight: 500;
  word-break: break-word;
  margin: 0;
}

.hospital-footer {
  padding: 8px 12px;
  border-top: 1px solid #f0f0f0;
  background: #f8f9fa;
  display: flex;
  gap: 12px;
}

.btn-action {
  flex: 1 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s;
}

.btn-view {
  background: #f0f2f5;
  color: #667eea;
}

.btn-view:hover {
  background: #e0e3eb;
}

.btn-remove {
  background: #ff6b6b;
  color: white;
}

.btn-remove:hover {
  background: #ff5252;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 32px 32px 24px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

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

.modal-body {
  padding: 32px;
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid #667eea;
}

.detail-section h4::before {
  content: '';
  width: 4px;
  height: 24px;
  background: #667eea;
  border-radius: 2px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #7f8c8d;
  font-weight: 500;
  font-size: 14px;
}

.detail-value {
  color: #2c3e50;
  font-weight: 600;
  font-size: 14px;
}

.modal-footer {
  padding: 20px 32px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #f8f9fa;
}

.btn-footer {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-footer.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-footer.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-footer.secondary {
  background: #f0f2f5;
  color: #2c3e50;
}

.btn-footer.secondary:hover {
  background: #e0e3eb;
}

.loading {
  text-align: center;
  padding: 60px 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #f0f2f5;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

.loading p {
  color: #7f8c8d;
  margin: 0;
  font-size: 16px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hospital-card,
  .empty-state,
  .loading {
    background: white;
  }

  .hospital-header,
  .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  }

  .hospital-card:hover {
    border-color: #667eea;
  }

  .hospital-footer,
  .modal-footer {
    background: #1f1f2e;
    border-color: #404050;
  }

  .info-value,
  .detail-label,
  .detail-value,
  .modal-header h2 {
    color: #000000;
  }

  .info-label,
  .stat-label,
  .loading p {
    color: #a0a0b0;
  }

  .btn-view {
    background: #404050;
    color: #a0c4ff;
  }

  .btn-view:hover {
    background: #505060;
  }

  .btn-footer.secondary {
    background: #404050;
    color: #e0e0e0;
  }

  .btn-footer.secondary:hover {
    background: #505060;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .my-hospitals-container {
    padding: 0;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
  }

  .hospitals-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal {
    max-width: 95vw;
  }

  .modal-header,
  .modal-body {
    padding: 24px;
  }
}

.my-doctors-page {
  min-height: 100vh;
  background: white;
  padding: 40px 20px;
}

.my-doctors-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.header-content > div {
  flex: 1 1;
}

.header-content h1 {
  color: white;
  font-size: 32px;
  margin-bottom: 8px;
  font-weight: 700;
}

.header-content p {
  color: white;
  font-size: 16px;
}

.btn-add-doctor-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: #667eea;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0;
}

.btn-add-doctor-header:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.btn-add-doctor-header i {
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #667eea;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 8px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-left: 4px solid #28a745;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-left: 4px solid #dc3545;
}

.empty-state {
  text-align: center;
  padding: 80px 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.empty-state i {
  font-size: 72px;
  color: #e0e0e0;
  margin-bottom: 24px;
  display: block;
}

.empty-state h2 {
  color: #2c3e50;
  font-size: 24px;
  margin-bottom: 12px;
}

.empty-state p {
  color: #7f8c8d;
  font-size: 16px;
  margin-bottom: 24px;
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.doctor-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.doctor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.doctor-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 16px 20px;
  color: white;
}

.doctor-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.doctor-header h3 {
  margin: 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.doctor-info {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.info-icon {
  font-size: 14px;
  color: #667eea;
  min-width: 18px;
  margin-top: 1px;
}

.info-content {
  flex: 1 1;
}

.info-label {
  font-size: 11px;
  color: #95a5a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.info-value {
  color: #2c3e50;
  font-size: 13px;
  font-weight: 500;
  word-break: break-word;
}

.info-value.highlight {
  color: #667eea;
  font-weight: 600;
}

.specializations-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tag {
  background: #f0f2f5;
  color: #667eea;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.doctor-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  background: #f8f9fa;
  display: flex;
  gap: 12px;
}

.btn-action {
  flex: 1 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s;
}

.btn-view {
  background: #f0f2f5;
  color: #667eea;
}

.btn-view:hover {
  background: #e0e3eb;
}

.btn-remove {
  background: #ff6b6b;
  color: white;
}

.btn-remove:hover {
  background: #ff5252;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  padding: 32px 32px 24px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

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

.modal-body {
  padding: 32px;
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid #667eea;
}

.detail-section h4::before {
  content: '';
  width: 4px;
  height: 24px;
  background: #667eea;
  border-radius: 2px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #7f8c8d;
  font-weight: 500;
  font-size: 14px;
}

.detail-value {
  color: #2c3e50;
  font-weight: 600;
  font-size: 14px;
}

.detail-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.detail-section ul li {
  background: linear-gradient(135deg, #f0f2f5 0%, #e8eaef 100%);
  padding: 12px 14px;
  border-radius: 8px;
  color: #2c3e50;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.modal-footer {
  padding: 20px 32px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #f8f9fa;
}

.btn-footer {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-footer.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-footer.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-footer.secondary {
  background: #f0f2f5;
  color: #2c3e50;
}

.btn-footer.secondary:hover {
  background: #e0e3eb;
}

.loading {
  text-align: center;
  padding: 60px 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #f0f2f5;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

.loading p {
  color: #7f8c8d;
  margin: 0;
  font-size: 16px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal.modal-lg {
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.modal-header h2 {
  margin: 0;
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 24px;
}

.modal-body.add-doctor-form {
  padding: 24px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  background: #f9f9f9;
}

/* Form Styles */
.form-section {
  margin-bottom: 24px;
}

.form-section:last-of-type {
  margin-bottom: 0;
}

.form-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row.full-width {
  grid-template-columns: 1fr;
}

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  color: #2c3e50;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.phone-input-container,
.email-input-container {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.phone-prefix,
.email-domain {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f5f5f5;
  color: #7f8c8d;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
}

.phone-number-input,
.email-username-input {
  flex: 1 1;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
}

.phone-number-input:focus,
.email-username-input:focus {
  outline: none;
}

.specialization-search-container {
  margin-bottom: 12px;
}

.specialization-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 0;
}

.specialization-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
}

.specialization-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.specialization-item:hover {
  background: #f5f5f5;
}

.specialization-item input {
  margin-right: 8px;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0;
}

.checkbox-label input {
  margin-right: 8px;
  cursor: pointer;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline {
  background: white;
  color: #667eea;
  border: 1px solid #667eea;
}

.btn-outline:hover:not(:disabled) {
  background: #f5f7ff;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

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

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .doctor-card,
  .empty-state,
  .loading {
    background: white;
  }

  .doctor-header,
  .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  }

  .doctor-card:hover {
    border-color: #667eea;
  }

  .doctor-footer,
  .modal-footer {
    background: #1f1f2e;
    border-color: #404050;
  }

  .info-value,
  .detail-label,
  .detail-value,
  .modal-header h2 {
    color: #000000;
  }

  .info-label,
  .stat-label,
  .loading p {
    color: #a0a0b0;
  }

  .tag {
    background: #404050;
    color: #a0c4ff;
  }

  .btn-view {
    background: #404050;
    color: #a0c4ff;
  }

  .btn-view:hover {
    background: #505060;
  }

  .detail-section ul li {
    background: #404050;
    color: #e0e0e0;
  }

  .btn-footer.secondary {
    background: #404050;
    color: #e0e0e0;
  }

  .btn-footer.secondary:hover {
    background: #505060;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .my-doctors-container {
    padding: 0;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
  }

  .header-content {
    flex-direction: column;
    align-items: stretch !important;
  }

  .btn-add-doctor-header {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }

  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal {
    max-width: 95vw;
  }

  .modal.modal-lg {
    max-width: 95vw;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }

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

  .detail-section ul {
    grid-template-columns: 1fr;
  }

  .phone-input-container,
  .email-input-container {
    flex-direction: column;
  }

  .phone-prefix,
  .email-domain {
    border-bottom: 1px solid #ddd;
  }
}


/* Manager Schedules Page - Professional Design */

.manager-schedules-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 20px;
}

.manager-schedules-main {
  max-width: 1400px;
  margin: 0 auto;
}

/* Schedules Header */
.schedules-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  padding: 40px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.schedules-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.schedules-header p {
  margin: 8px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
}

/* Add Schedule Button */
.btn-add-schedule {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-add-schedule:hover {
  background: white;
  color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

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

/* Hospital Selector */
.hospital-selector {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hospital-selector label {
  font-weight: 600;
  color: #212529;
  font-size: 14px;
  text-transform: uppercase;
}

.hospital-dropdown {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  min-width: 250px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hospital-dropdown:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Schedules Stats */
.schedules-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
  display: flex;
  gap: 16px;
  align-items: center;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-card.pending,
.stat-card.warning {
  border-left-color: #f59e0b;
}

.stat-card.approved,
.stat-card.success {
  border-left-color: #10b981;
}

.stat-card.rejected,
.stat-card.danger {
  border-left-color: #ef4444;
}

.stat-card .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.stat-content p {
  color: #6c757d;
  margin: 4px 0 0 0;
  font-size: 13px;
  font-weight: 600;
}

/* Alerts */
.alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  animation: slidedown 0.3s ease;
}

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

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.alert-success {
  background: #dcfce7;
  color: #15803d;
  border-left: 4px solid #10b981;
}

.alert button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

/* Tabs */
.schedules-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  background: white;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.tab-btn {
  padding: 12px 20px;
  border: none;
  background: #f0f0f0;
  color: #212529;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-btn:hover {
  background: #e0e0e0;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
}

/* Schedules Content */
.schedules-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Filters */
.schedules-filters {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-end;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box i {
  position: absolute;
  left: 12px;
  color: #6c757d;
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-group select {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Schedules List */
.schedules-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.schedule-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
}

.schedule-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateX(4px);
}

.schedule-card.pending {
  border-left-color: #f59e0b;
}

.schedule-card.approved {
  border-left-color: #10b981;
}

.schedule-card.rejected {
  border-left-color: #ef4444;
}

/* Schedule Header */
.schedule-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  gap: 16px;
}

.schedule-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1 1;
  min-width: 200px;
}

.doctor-avatar {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  margin-top:10px;
}

.schedule-details h3 {
  margin: 0;
  font-size: 16px;
  color: #212529;
  font-weight: 700;
}

.schedule-details .specialty {
  margin: 4px 0 0 0;
  color: #6c757d;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Status Badge */
.status-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-success {
  background: #dcfce7;
  color: #15803d;
}

.status-warning {
  background: #fef3c7;
  color: #92400e;
}

.status-danger {
  background: #fee2e2;
  color: #991b1b;
}

.status-default {
  background: #f0f0f0;
  color: #212529;
}

/* Schedule Grid */
.schedule-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.info-item {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 8px;
  min-width: auto;
  flex-shrink: auto;
}

.info-item i {
  font-size: 18px;
  color: #667eea;
  width: 24px;
  flex-shrink: 0;
}

.info-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

.info-item p {
  margin: 0;
  color: #212529;
  font-size: 15px;
  font-weight: 600;
}

/* Schedule Actions */
.schedule-actions {
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
}

.btn-success {
  background: #10b981;
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

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

.btn-outline {
  background: #f0f0f0;
  color: #212529;
  border: 1px solid #e0e0e0;
}

.btn-outline:hover {
  background: #e0e0e0;
}

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

.btn-outline.btn-danger:hover {
  background: #fee2e2;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 14px;
}

/* Rejection Reason */
.rejection-reason {
  padding: 12px 20px;
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
  font-size: 13px;
  border-radius: 0 0 12px 0;
  margin-top: 0;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.empty-state i {
  font-size: 56px;
  color: #ccc;
  margin-bottom: 16px;
}

.empty-state h3 {
  color: #212529;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.empty-state p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

/* Form Container */
.schedule-form-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-card {
  max-width: 700px;
  margin: 0 auto;
}

.form-card h2 {
  margin: 0 0 24px 0;
  font-size: 24px;
  color: #212529;
  font-weight: 700;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #212529;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.form-actions .btn {
  flex: 1 1;
  justify-content: center;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  animation: slidein 0.3s ease;
  min-width: 400px;
}

.modal-lg {
  max-width: 700px;
}

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

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #212529;
  font-weight: 700;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #212529;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Schedule Details Overview */
.schedule-details-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.overview-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.overview-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.overview-label {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.overview-value {
  font-size: 14px;
  color: #212529;
  font-weight: 700;
  margin: 4px 0 0 0;
}

/* Info Sections */
.schedule-info-sections {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.info-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #212529;
  font-weight: 700;
  text-transform: uppercase;
}

.info-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  align-items: center;
}

.info-row .label {
  font-weight: 600;
  color: #6c757d;
  font-size: 13px;
}

.info-row .value {
  color: #212529;
  font-weight: 600;
  font-size: 14px;
}

.rejection-text {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1240px) {
  .schedules-list {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (max-width: 1024px) {
  .schedules-list {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (max-width: 768px) {
  .schedules-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .schedules-header {
    padding: 24px;
  }

  .schedules-header h1 {
    font-size: 24px;
  }

  .schedules-tabs {
    flex-direction: column;
  }

  .tab-btn {
    flex: 1 1;
    justify-content: center;
  }

  .schedule-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .schedules-filters {
    grid-template-columns: 1fr;
  }

  .hospital-dropdown {
    min-width: auto;
    width: 100%;
  }

  .schedule-actions {
    flex-direction: column;
  }

  .schedule-actions button {
    width: 100%;
    justify-content: center;
  }

  .modal {
    min-width: auto;
    width: 100%;
  }

  .form-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .schedules-list {
    grid-template-columns: 1fr;
  }

  .schedules-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .schedules-stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .schedule-details-overview {
    grid-template-columns: 1fr;
  }

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

/* Dark Mode Support */
:root.dark-mode .manager-schedules-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

:root.dark-mode .schedules-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
}

:root.dark-mode .stat-card,
:root.dark-mode .schedule-card,
:root.dark-mode .schedules-content,
:root.dark-mode .schedule-form-container,
:root.dark-mode .hospital-selector,
:root.dark-mode .schedules-tabs,
:root.dark-mode .modal {
  background: #2d2d2d;
  color: #e0e0e0;
  border-color: #404040;
}

:root.dark-mode .stat-card h3,
:root.dark-mode .schedule-details h3,
:root.dark-mode .form-card h2,
:root.dark-mode .modal-header h2 {
  color: #ffffff;
}

:root.dark-mode .schedule-grid {
  color: #e0e0e0;
}

:root.dark-mode .info-item label,
:root.dark-mode .stat-content p {
  color: #a0a0a0;
}

:root.dark-mode .form-group input,
:root.dark-mode .form-group select,
:root.dark-mode .form-group textarea,
:root.dark-mode .search-box input,
:root.dark-mode .filter-group select,
:root.dark-mode .hospital-dropdown {
  background: #3a3a3a;
  border-color: #505050;
  color: #e0e0e0;
}

:root.dark-mode .form-group input:focus,
:root.dark-mode .form-group select:focus,
:root.dark-mode .form-group textarea:focus,
:root.dark-mode .search-box input:focus,
:root.dark-mode .filter-group select:focus,
:root.dark-mode .hospital-dropdown:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

:root.dark-mode .schedule-actions {
  background: #3a3a3a;
  border-top-color: #404040;
}

:root.dark-mode .empty-state {
  background: #3a3a3a;
}

:root.dark-mode .empty-state h3 {
  color: #ffffff;
}

:root.dark-mode .overview-item {
  background: #3a3a3a;
}

:root.dark-mode .info-row {
  background: #3a3a3a;
}

/* Add Schedule Modal */
.add-schedule-modal {
  max-width: 600px;
  width: 100%;
}

.add-schedule-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #38b6ff 100%);
  color: white;
  border-bottom: none;
}

.add-schedule-modal .modal-header h2 {
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
}

.add-schedule-modal .modal-header i {
  font-size: 24px;
}

.add-schedule-modal .modal-close {
  color: white;
}

.add-schedule-modal .modal-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.add-schedule-modal .modal-body {
  padding: 30px 24px;
}

.add-schedule-modal .form-group {
  margin-bottom: 20px;
}

.add-schedule-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.add-schedule-modal .alert {
  margin-bottom: 20px;
}

.add-schedule-modal .modal-footer {
  padding: 20px 24px;
  background: #f8f9fa;
  gap: 12px;
  justify-content: flex-end;
}

.add-schedule-modal .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .add-schedule-modal {
    max-width: 100%;
  }

  .add-schedule-modal .form-row {
    grid-template-columns: 1fr;
  }

  .modal {
    min-width: auto;
    width: 95%;
  }
}

/* Alert Styles */
.alert {
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.alert-danger {
  background: #fee2e2;
  border-left-color: #ef4444;
  color: #991b1b;
}

.alert-success {
  background: #dcfce7;
  border-left-color: #10b981;
  color: #15803d;
}

.alert-warning {
  background: #fef3c7;
  border-left-color: #f59e0b;
  color: #92400e;
}

.alert i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

:root.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
  color: #fca5a5;
}

:root.dark-mode .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-left-color: #10b981;
  color: #86efac;
}