/* =============================================================
   Webzeq Unified Stylesheet — Dashboard + Modern Login
   ============================================================= */

/* --- 1. CSS Variables --- */
:root {
  --wz-bg: #f7f7fb;
  --wz-surface: #ffffff;
  --wz-border: #e5e7eb;
  --wz-text: #1f2937;
  --wz-muted: #6b7280;
  --wz-primary: #3b82f6;
  --wz-primary-600: #1d4ed8;
  --wz-primary-700: #1e40af;
  --wz-shadow: 0 10px 20px rgba(2, 6, 23, .06), 0 2px 6px rgba(2, 6, 23, .04);
}

/* --- 2. Global Base & Typography --- */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--wz-bg);
  color: var(--wz-text); /* Ensure base body text uses the dynamic variable */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
::selection { background: rgba(37,99,235,.15); }

/* NEW: Global Text and Headings */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3 {
  color: var(--wz-text);
}
/* New class for secondary text (like lead paragraphs and description text) */
.wz-text-secondary {
    color: var(--wz-muted) !important;
}

a, a:hover {
  /* Inherit text color by default unless specialized */
  color: inherit;
}
/* Ensure links in the body use the primary color */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.wz-footer-text):not(.wz-text-main) {
  color: var(--wz-primary);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.wz-footer-text):not(.wz-text-main):hover {
  color: var(--wz-primary-700);
}


/* --- 3. Shared UI Components --- */

/* Buttons */
.btn-primary {
  background: var(--wz-primary);
  border-color: var(--wz-primary);
}
.btn-primary:hover {
  background: var(--wz-primary-600);
  border-color: var(--wz-primary-600);
}

/* Cards */
.card {
  border: 1px solid var(--wz-border);
  background: var(--wz-surface);
  box-shadow: var(--wz-shadow);
  border-radius: 1rem;
  /* Ensure text inside cards is dynamic */
  color: var(--wz-text); 
}

/* Forms & Alerts */
.form-control:focus {
  border-color: var(--wz-primary);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}
.alert-danger {
  background: #fef2f2;
  border-color: #fee2e2;
  color: #7f1d1d;
}

/* New: Theme-aware Alert for light/info boxes (e.g., "No logs found") */
.alert-info {
    --bs-alert-bg: var(--wz-bg);
    --bs-alert-border-color: var(--wz-border);
    --bs-alert-color: var(--wz-text);
}


/* Tables (Bootstrap table overrides) */
.table {
    --bs-table-color: var(--wz-text); /* Text color in table */
    --bs-table-bg: var(--wz-surface); /* Background of table cells/rows */
    --bs-table-border-color: var(--wz-border); /* Border color */
    color: var(--wz-text); /* Fallback to enforce text color */
}
.table thead {
    color: var(--wz-text);
    border-bottom-color: var(--wz-border);
}
.table-hover tbody tr:hover {
    --bs-table-bg-hover: var(--wz-bg); /* Use page background for hover */
}
/* Ensure nested elements in tables like links also use the theme color */
.table a {
    color: var(--wz-primary);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--wz-bg); /* Use page background for stripe color */
}
/* NEW: Table header for System Info */
.table-light, .table-light thead, .table-light th {
    --bs-table-bg: var(--wz-bg);
    --bs-table-color: var(--wz-text);
    border-color: var(--wz-border);
}

/* NEW: Styles for Preferences Selectors */
.theme-option {
    border: 1px solid var(--wz-border) !important;
    background: var(--wz-surface) !important;
    color: var(--wz-text) !important;
    box-shadow: none !important;
}
.theme-option[data-active="true"] {
    border-color: var(--wz-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5) !important; /* Tailwind blue-500 shadow */
}
.theme-option:hover {
    border-color: var(--wz-primary);
}
.theme-option[data-active="true"] {
    /* Use a slightly darker background for active selection in dark mode for contrast */
    background: var(--wz-bg) !important; 
}


/* --- 4. Header & Footer (Global Layout) --- */

/* NEW: Custom class for the feature box background in Overview */
.wz-feature-bg {
  background: var(--wz-bg) !important;
  border: 1px solid var(--wz-border);
}

/* NEW: Custom classes to use CSS variables for background/border */
.wz-nav-bg {
  background: var(--wz-surface) !important;
  border-color: var(--wz-border) !important;
  color: var(--wz-text); /* Ensure all text inside inherits the correct color */
}

.wz-sidebar-bg {
  background: var(--wz-surface) !important;
  border-color: var(--wz-border) !important;
  color: var(--wz-text); /* Ensure all text inside inherits the correct color */
}

/* Footer text class fix */
.wz-footer-text {
    color: var(--wz-muted) !important;
}

/* Navbar Default Style */
.navbar.bg-white {
  background: linear-gradient(180deg,#ffffff,#f9fafb);
  border-bottom: 1px solid var(--wz-border);
}
/* Overridden by .wz-nav-bg on live elements */

/* Footer Default Style (Sticky Footer via Body Flex) */
footer {
  /* background: linear-gradient(180deg,#f9fafb,#ffffff); - Removed gradient */
  border-top: 1px solid var(--wz-border);
  margin-top: auto;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--wz-muted); /* Footer base text should be muted */
}
/* Footer background now controlled by .wz-nav-bg */


/* Responsive Fix: Sticky Header/Footer on Small Screens (Dashboard View) */
@media (max-width: 991.98px) {
  /* Fix Navbar to the top of the viewport */
  .navbar.bg-white {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Ensure it stays above content */
  }

  /* Add padding to body to prevent content from hiding under the fixed header */
  body {
    padding-top: 60px; /* Adjust this value if your navbar is not 60px tall */
  }

  /* Footer uses position: sticky, which works well in a scrolling container */
  footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Reset the margin-top: auto set by the global body flex to work with sticky position */
    margin-top: 0; 
  }
}


/* --- 5. Dashboard & Navigation Fixes --- */

/* Navbar Width Fixes (Prevent Wrapping) */
.navbar,
.navbar-expand-lg .navbar-collapse {
  flex-wrap: nowrap !important;
}
.navbar-nav {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
/* Navbar Main Text Color fix */
.wz-text-main {
    color: var(--wz-text) !important;
}

/* Sidebar Width */
.sidebar,
#sidebar {
  width: 260px !important;
  min-width: 260px !important;
}

/* Sidebar Menu Items */
.sidebar .nav-link,
#sidebar .nav-link {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 0;
  color: var(--wz-text); /* Ensure nav links use main text color */
}
/* Muted text in sidebar */
.sidebar .section-title,
#mobileSidebar .section-title {
    color: var(--wz-muted) !important;
}


/* Active Nav Link Consolidation (Applies to main dashboard links) */
.nav-link.active,
a.nav-link.active {
  background-color: var(--wz-primary);
  color: #fff !important; /* Retained !important to ensure override */
}
.nav-link.active i {
    color: #fff !important; /* Ensure icons in active links are white */
}


/* Offcanvas (Mobile Menu) Fixes */
.offcanvas-backdrop {
  z-index: 1040 !important; /* Below the offcanvas itself */
}
.offcanvas {
  z-index: 1055 !important; /* Above the backdrop */
}
.offcanvas-body {
  pointer-events: auto !important; /* Re-enable link clicks */
}
.offcanvas .nav-link.active {
  background-color: var(--wz-primary);
  color: #fff !important;
}
.offcanvas .nav-link.active i {
  color: #fff !important;
}

/* Dropdown Menu Text Colors */
.dropdown-menu {
  background-color: var(--wz-surface);
  border-color: var(--wz-border);
}
.dropdown-menu .dropdown-item {
  color: var(--wz-text);
}
.dropdown-menu .dropdown-item:hover {
  background-color: var(--wz-bg);
}
.dropdown-menu .dropdown-divider {
  border-top-color: var(--wz-border);
}


/* --- 6. Login Page (Auth) --- */

body.auth-login {
  background: #fff !important; /* pure white page background */
  min-height: 100vh;
  /* Override global body flex settings if necessary, though min-height: 100vh is key */
}

.login-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

/* Login Left Side (Desktop Only) */
.login-left {
  display: none;
}
@media (min-width:768px) {
  .login-left {
    display: flex;
    flex: 1;
    background: linear-gradient(135deg,var(--wz-primary-600),var(--wz-primary-700));
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem;
  }
  .login-left h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  .login-left p {
    font-size: 1.1rem;
    max-width: 380px;
    line-height: 1.6;
    opacity: .9;
  }
}

/* Login Right Side (Form Area) */
.login-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.login-right .card {
  width: 100%;
  max-width: 420px;
  padding: 2rem;
}

/* Login Footer */
.login-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--wz-text); /* Use dynamic text color for auth footer */
  margin-top: 2rem;
}
.login-footer hr {
  margin-bottom: 1.5rem;
}
.login-footer a:hover {
  text-decoration: underline;
}

/* Login Page Background/Footer/HR Overrides (Consolidated) */
body.auth-login footer,
body.auth-login .login-footer {
  background: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
body.auth-login .login-footer hr {
  border: none !important;
  margin: 0 !important;
}


/* Login Page Responsive */
@media (max-width:767.98px){
  .login-wrapper{ flex-direction:column; }
  .login-left{ display:none; }
  .login-right .card{ margin:1rem; }
}

/* --- 7. Settings Page Enhancements --- */

/* Match dashboard table spacing on settings page */
.container.settings-container {
  padding-left: 1.5rem;   /* same as Bootstrap container default */
  padding-right: 1.5rem;
  max-width: 100% !important; /* Make settings container full width */
}

.settings-container .card {
  border-radius: 1rem;
  overflow: hidden;
}

.settings-container .row.g-0 {
  margin: 0;  /* no collapse, keep clean edges */
}

.settings-container .col-md-3 {
  padding: 1.25rem 0 1.25rem 1.25rem;  /* left side breathing space */
}

.settings-container .col-md-9 {
  padding: 1.25rem;
}

/* Settings Tabs */
#settingsTabs .nav-link {
  border-radius: 0;
  text-align: left;
  padding: 0.75rem 1rem;
}
#settingsTabs .nav-link.active {
  background-color: var(--wz-primary);
  color: #fff;
}
#settingsTabs .nav-link i {
  width: 1.2rem;
}

/* Content Max Widths */
#content-identity form,
#content-menus ul {
  max-width: 640px;
}
.list-group-item a.btn {
  min-width: 90px;
}

/* Overview Landing Page Enhancements 
.container.settings-container .card-body {
  max-width: 960px;
  margin: 0 auto;
}*/

.container.settings-container h1 {
  font-size: 2.2rem;
}

.container.settings-container .lead {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Final Settings Container Width Overrides */
.container.settings-container {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.settings-container .card-body {
  max-width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Alerts in Settings */
.alert {
  border-radius: 0.75rem;
  font-weight: 500;
  box-shadow: var(--wz-shadow);
}
.alert-success {
  background: #ecfdf5;
  border-color: #d1fae5;
  color: #065f46;
}

/* New: Theme-aware Alert for light/info boxes (e.g., "No logs found") */
.alert-info {
    --bs-alert-bg: var(--wz-bg);
    --bs-alert-border-color: var(--wz-border);
    --bs-alert-color: var(--wz-text);
}


/* --- 8. Pagination Styling --- */
.wz-pagination .page-link {
  color: var(--wz-primary);
  background: var(--wz-surface); /* Use surface color for background */
  border: 1px solid var(--wz-border);
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

.wz-pagination .page-link:hover {
  background: var(--wz-primary);
  color: #fff;
  border-color: var(--wz-primary);
}

.wz-pagination .page-item.active .page-link {
  background: var(--wz-primary);
  color: #fff;
  border-color: var(--wz-primary);
}

.wz-pagination .page-item.disabled .page-link {
  color: var(--wz-muted);
  background: var(--wz-bg); /* Use background color for disabled state */
  border-color: var(--wz-border);
  pointer-events: none;
}

.wz-pagination {
  margin-bottom: 0.5rem;
}

/* =============================================================
   Global Theme & Density Modes
   ============================================================= */

/* --- Light (Default) --- */
html.theme-light {
  --wz-bg: #f7f7fb;
  --wz-surface: #ffffff;
  --wz-border: #e5e7eb;
  --wz-text: #1f2937;
  --wz-muted: #6b7280;
}

/* --- Dark --- */
html.theme-dark {
  --wz-bg: #0f172a;
  --wz-surface: #1e293b;
  --wz-border: #334155;
  --wz-text: #f1f5f9;
  --wz-muted: #94a3b8;
}

/* --- Auto (system preference) --- */
@media (prefers-color-scheme: dark) {
  html.theme-auto {
    --wz-bg: #0f172a;
    --wz-surface: #1e293b;
    --wz-border: #334155;
    --wz-text: #f1f5f9;
    --wz-muted: #94a3b8;
  }
}

/* --- Dyslexia Friendly --- */
html.theme-dyslexia {
  --wz-bg: #fffbea;
  --wz-surface: #fff9e6;
  --wz-border: #facc15;
  --wz-text: #1e3a8a;
  --wz-muted: #4338ca;
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* --- Comfortable vs Compact --- */
html.density-comfortable body {
  font-size: 1rem;
  line-height: 1.6;
}

html.density-compact body {
  font-size: 0.9rem;
  line-height: 1.4;

}
html.density-compact .form-control,
html.density-compact .btn,
html.density-compact .card-body {
  padding: 0.25rem 0.5rem !important;
}

/* This controls the text font size and colour to white */
.login-heading {
    color: white;
    font-weight: bold;
    font-size: 5vw;
    min-inline-size: 32px; 
}