/* -------------------------
   Layout: Base / Utilities
   ------------------------- */
:root {
  --background-color: #C0C0C0;
}

body {
  font-family: 'Inter', sans-serif;
  display: flex;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent scrolling when overlaying sidebar on mobile */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

.table, th, tr, td {
  background-color: var(--background-color)!important;
}
input, select, textarea {
  background-color: var(--background-color)!important;
}
.card, .card-body {
  background-color: var(--background-color);
}
section, .section .section-title {
  background-color: var(--background-color)!important;
}

.table .accordion-body {
  background-color:var(--background-color) !important;
}
/* Optional: Table Integration */
.table tr.accordion-button {
  background-color: var(--background-color) !important;
}

/* Modals */
.modal-content {
  background-color: var(--background-color);
  color: var(--default-color);
}

input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
  background-color: var(--background-color);
}

/* Dark background for progress container */
.progress {
  background-color: var(--background-color) !important;
  border-radius: 8px;
}

/* Accent color progress indicator */
.progress-bar {
  background-color: var(--background-color, #00b894) !important;
  color: #fff;
}

/* -------------------------
   Sidebar
   ------------------------- */
.main-sidebar {
  width: 260px;
  background-color: #1f2937; /* slate-800 */
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
  transition: left 0.28s ease, width 0.28s ease, transform 0.28s ease;
  z-index: 1030;
}

/* Collapsed on desktop (move out of view) */
.main-sidebar.collapsed {
  width: 0;
  overflow: hidden;
  left: -260px;
}

/* Mobile hidden by default, shown when .active is applied */
@media (max-width: 991px) {
  .main-sidebar {
    left: -260px;
  }
  .main-sidebar.active {
    left: 0;
  }
}

/* Brand */
.brand-link {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.brand-link img { height: 30px; margin-right: 10px; }
  
/* Sidebar nav */
.sidebar { 
  padding: 1rem 0.5rem; 
  top: 60px;
  left: 0;
  bottom: 0;
  width: 260px; /* changed from 300px */
  z-index: 996;
  transition: all 0.3s;
  overflow-y: auto;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
}
.sidebar a {
  display: block;
  padding: 0.75rem 1rem;
  color: #cbd5e1; /* slate-300 */
  border-radius: 8px;
  text-decoration: none;
  margin: 2px 0;
  transition: background 0.18s, color 0.18s;
}
.sidebar a:hover,
.sidebar a.active {
  background-color: #374151; /* slate-700 */
  color: #fff;
}
.sidebar .nav-header {
  font-size: .75rem;
  text-transform: uppercase;
  color: #9ca3af;
  padding: .75rem 1rem .25rem;
}

/* -------------------------
   Main content / wrapper
   ------------------------- */
/* content-wrapper accounts for the fixed sidebar width */
.content-wrapper {
  margin-left: 260px;
  flex: 1;
  background-color: var(--background-color); /* #f9fafb;*/
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.28s ease, width 0.28s ease;
  width: calc(100% - 260px) !important;
  box-sizing: border-box;
}

/* When sidebar collapsed / hidden on desktop — take full width */
.content-wrapper.expanded {
  margin-left: 0!important;
  width: 100% !important;
}

/* -------------------------
   Responsive (Mobile ≤ 991px)
   ------------------------- */
@media (max-width: 991px) {
  /* Sidebar hidden by default on mobile */
  .main-sidebar {
    left: -260px;
    width: 260px;
    position: fixed;
    height: 100%;
  }

  /* Sidebar visible when active */
  .main-sidebar.active {
    left: 0;
  }

  /* Content wrapper must always take full width on mobile */
  .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    transition: filter 0.3s ease;
  }

  /* Dim content slightly when sidebar is open */
  .content-wrapper.dimmed {
    filter: brightness(0.8);
  }
}


/* Dim overlay for mobile when sidebar is active */
.content-wrapper.dimmed::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1025;
  pointer-events: none; /* allow clicks to be handled by JS if needed */
}

/* Small helper to ensure internal dashboard elements expand */
.dashboard-content,
main,
.container-fullwidth-override {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* -------------------------
   Header / topbar
   ------------------------- */
header.header {
  background-color: var(--background-color);
  border-bottom: 1px solid #e5e7eb;
  z-index: 1020;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .30rem 1rem;
}

/* -------------------------
   Footer
   ------------------------- */
footer.footer {
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

/* -------------------------
   Toggle button
   ------------------------- */
.sidebar-toggle {
  font-size: 1.5rem;
  cursor: pointer;
  color: #374151;
  margin-right: 1rem;
  position: relative;
  z-index: 1040; /* sits above content, below sidebar when needed */
}

/* Mobile: make sure toggle is always visible and elevated above sidebar */
@media (max-width: 991px) {
  .sidebar-toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    padding: 6px 10px;
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
    z-index: 1041; /* above sidebar (1030) */
  }
}

/* -------------------------
   Header search tweaks (responsive)
   ------------------------- */
.header .search-bar { min-width: 360px; padding: 0 20px; }

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0 0 15px rgba(1,41,112,0.08);
    background: var(--background-color);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all .28s ease;
  }
  .header .search-bar.header-search-visible {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

/* Search form inputs */
.header .search-form { width: 100%; }
.header .search-form input {
  border: 1px solid rgba(1,41,112,0.12);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  font-size: 14px;
  color: #012970;
  width: 100%;
  transition: box-shadow .18s ease;
}
.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px rgba(1,41,112,0.12);
  border-color: rgba(1,41,112,0.24);
}
.header .search-form button {
  border: 0; padding: 0; margin-left: -30px; background: none;
}

/* Sidebar toggle button dark-mode appearance */
body.dark-mode .sidebar-toggle {
    background-color: #333;
    color: #fff;
    border-color: #555;
}

body.dark-mode .sidebar-toggle:hover {
    background-color: #444;
    border-color: #666;
}

/* More specific: collapse detail panels inside table */
table tr.collapse td > .p-2.bg-light,
table tr.collapse td > .p-2.bg-light .p-2.bg-light {
  background-color: var(--background-color) !important;
}

/* Make wrapper .border use subtle dark border */
.border {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Ensure collapsed row <td> itself doesn't stay white */
table tr.collapse td {
  background-color: var(--background-color) !important;
}
/* -------------------------
   Utility: override Bootstrap container width limits if present
   ------------------------- */
/* If you keep using .container inside the content, but you still want the inner area to expand fully
   when the sidebar is collapsed, apply this helper class to the immediate inner wrapper:
   <div id="resultSection" class="dashboard-content"> ... </div>
*/