/* FIX: Screen z-index layering - Ensures active screens appear on top */
#login-screen { position: relative; z-index: 1; }
#register-screen { position: relative; z-index: 1; }
#main-screen { position: relative; z-index: 1; }
#owner-panel { position: relative; z-index: 1; }
#doctor-panel { position: relative; z-index: 1; }
#admin-panel { position: relative; z-index: 1; }
#technician-panel { position: relative; z-index: 1; }

/* Auth screens should be behind when not active */
#login-screen.active,
#register-screen.active { 
  z-index: 10;
  position: relative;
}

/* Main screens should be on top when active */
#main-screen.active,
#owner-panel.active,
#doctor-panel.active,
#admin-panel.active,
#technician-panel.active { 
  z-index: 100;
  position: relative;
}

/* Ensure proper display */
.screen { display: none; position: relative; }
.screen.active { display: block !important; position: relative; }

/* Modals always on top */
.modal { z-index: 1000; }
.modal.active { z-index: 1000; }

/* ============================================================================ */
/* LIGHT THEME — darker gradients & lines                                       */
/* Makes the light theme background, dividers, card outlines and shadows more   */
/* visible/contrasty instead of the previous near-invisible pale grey.          */
/* ============================================================================ */

body:not(.dark-theme) {
  background: linear-gradient(160deg, #e7ebf3 0%, #eef1f8 42%, #dfe5f0 100%) fixed;
}

/* Structural dividers */
body:not(.dark-theme) .header {
  box-shadow: 0 1px 0 #c7cfdd, 0 2px 16px rgba(99, 102, 241, 0.08);
}
body:not(.dark-theme) .tabs-container {
  border-bottom: 1.5px solid #ccd4e2;
}
body:not(.dark-theme) .sidebar {
  border-right: 1px solid #d3d9e6;
  background: #eef1f7;
}
body:not(.dark-theme) .sidebar-settings-group {
  border-top: 1px solid #d3d9e6;
}

/* Cards & panels get a firmer outline and a deeper shadow */
body:not(.dark-theme) .card {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08), 0 0 0 1px #ccd3e0;
}
body:not(.dark-theme) .card:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.16), 0 0 0 1px rgba(99, 102, 241, 0.25);
}
body:not(.dark-theme) .form-card {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12), 0 0 0 1px #ccd3e0;
}
body:not(.dark-theme) .modal-content {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
}
body:not(.dark-theme) .archive-search-bar {
  border-color: #ccd3e0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
body:not(.dark-theme) .notification-item,
body:not(.dark-theme) .feat-toggle,
body:not(.dark-theme) .admin-feat-item,
body:not(.dark-theme) .xray-item {
  border-color: #ccd3e0;
}

/* Inputs / selects / textareas — clearer outline */
body:not(.dark-theme) input,
body:not(.dark-theme) select,
body:not(.dark-theme) textarea,
body:not(.dark-theme) .autocomplete-input {
  border-color: #ccd3e0;
}

/* Tables */
body:not(.dark-theme) th {
  border-color: #ccd3e0;
  background: #edf0f7;
}
body:not(.dark-theme) td {
  border-color: #dbe0ea;
}

/* Buttons — deeper gradients for more visual weight */
body:not(.dark-theme) .btn-primary {
  background: linear-gradient(135deg, #5457e5, #4338ca);
  box-shadow: 0 2px 10px rgba(67, 56, 202, 0.35);
}
body:not(.dark-theme) .btn-primary:hover {
  background: linear-gradient(135deg, #6d70f0, #4f46e5);
  box-shadow: 0 5px 18px rgba(67, 56, 202, 0.45);
}
body:not(.dark-theme) .btn-secondary {
  background: #eaeef5;
  border-color: #c5cddc;
}
body:not(.dark-theme) .stat-card {
  background: linear-gradient(135deg, #05c294 0%, #039069 100%);
}

/* Generic inline-styled borders/backgrounds used throughout admin/owner/
   technician calendar & list views (mirrors the dark-theme attribute-selector
   pattern above, so these darken consistently without touching every JS file) */
body:not(.dark-theme) [style*="border: 1px solid #e2e8f0"],
body:not(.dark-theme) [style*="border:1px solid #e2e8f0"],
body:not(.dark-theme) [style*="border-color:#e2e8f0"],
body:not(.dark-theme) [style*="border-color: #e2e8f0"] {
  border-color: #c3cbdb !important;
}
body:not(.dark-theme) [style*="border: 1px solid #eef1f6"],
body:not(.dark-theme) [style*="border:1px solid #eef1f6"] {
  border-color: #ccd3e0 !important;
}