/* ==========================================================================
   Upraj Solutions — Theme Tokens & Base Typography
   Non-destructive layer. Loads AFTER Bootstrap and header defaults.
   ========================================================================== */

/* -------- Fonts (Inter + Manrope for a corporate-clean, non-generic feel) -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  /* Brand blues — extended from existing #0044ff / #00b7ff palette */
  --u-blue-50:   #eef4ff;
  --u-blue-100:  #dbe6ff;
  --u-blue-200:  #b6cbff;
  --u-blue-300:  #86a8ff;
  --u-blue-400:  #4d7dff;
  --u-blue-500:  #0044ff;   /* PRIMARY */
  --u-blue-600:  #0035cc;
  --u-blue-700:  #002a9e;
  --u-blue-800:  #001f75;
  --u-cyan-400:  #00b7ff;   /* Accent gradient stop */
  --u-cyan-300:  #7ad6ff;
  --u-accent:    #f5b301;   /* Warm accent (retains existing warning-yellow feel) */

  /* Semantic */
  --u-success:   #10b981;
  --u-warning:   #f59e0b;
  --u-danger:    #ef4444;
  --u-info:      #0ea5e9;

  /* Surfaces — LIGHT (default) */
  --u-bg:            #f4f7ff;
  --u-bg-soft:       #eaf1ff;
  --u-surface:       #ffffff;
  --u-surface-2:     #f8faff;
  --u-border:        #e3e9f5;
  --u-border-strong: #ced7ea;

  /* Text */
  --u-text:        #0f172a;
  --u-text-soft:   #334155;
  --u-text-muted:  #64748b;
  --u-text-invert: #ffffff;

  /* Glass — balanced frosted look */
  --u-glass-bg:      rgba(255, 255, 255, 0.62);
  --u-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --u-glass-border:  rgba(255, 255, 255, 0.55);
  --u-glass-blur:    18px;
  --u-glass-tint:    rgba(0, 68, 255, 0.06);

  /* Spacing scale — 8px */
  --u-space-1: 4px;
  --u-space-2: 8px;
  --u-space-3: 12px;
  --u-space-4: 16px;
  --u-space-5: 24px;
  --u-space-6: 32px;
  --u-space-7: 48px;
  --u-space-8: 64px;

  /* Radii */
  --u-radius-xs: 6px;
  --u-radius-sm: 10px;
  --u-radius-md: 14px;
  --u-radius-lg: 20px;
  --u-radius-xl: 28px;
  --u-radius-pill: 999px;

  /* Shadows — softer, layered */
  --u-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --u-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --u-shadow-md: 0 10px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -2px rgba(15, 23, 42, .06);
  --u-shadow-lg: 0 24px 48px -12px rgba(0, 68, 255, .18), 0 8px 16px -4px rgba(15, 23, 42, .08);
  --u-shadow-glow: 0 0 0 3px rgba(0, 68, 255, .15);

  /* Motion */
  --u-ease:      cubic-bezier(.2, .8, .2, 1);
  --u-dur-fast:  140ms;
  --u-dur:       220ms;
  --u-dur-slow:  360ms;

  /* Layout */
  --u-nav-h: 56px;
  --u-sidebar-w: 260px;
  --u-sidebar-w-collapsed: 74px;

  /* Type scale */
  --u-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --u-font-display: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* -------- DARK MODE overrides -------- */
html[data-theme="dark"] {
  --u-bg:            #0a1229;
  --u-bg-soft:       #0e1737;
  --u-surface:       #121c3d;
  --u-surface-2:     #172449;
  --u-border:        rgba(255, 255, 255, .08);
  --u-border-strong: rgba(255, 255, 255, .16);

  --u-text:        #e8eeff;
  --u-text-soft:   #c6d0ea;
  --u-text-muted:  #8b98bd;
  --u-text-invert: #0a1229;

  --u-glass-bg:        rgba(18, 28, 61, 0.55);
  --u-glass-bg-strong: rgba(18, 28, 61, 0.72);
  --u-glass-border:    rgba(255, 255, 255, 0.10);
  --u-glass-tint:      rgba(0, 183, 255, 0.08);

  --u-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --u-shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --u-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, .55);
  --u-shadow-lg: 0 24px 56px -12px rgba(0, 30, 100, .55);
}

/* -------- BASE — non-destructive: only sets properties existing rules missed */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--u-font-body) !important;
  background: var(--u-bg) !important;
  color: var(--u-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  transition: background var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
  /* The global navbar is fixed; reserve its exact height on every page. */
  padding-top: var(--u-nav-h);
}

/* Ambient gradient background (very subtle, only when logged into shell pages) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 68, 255, .08), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0, 183, 255, .07), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(0, 68, 255, .05), transparent 60%);
  pointer-events: none;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 183, 255, .10), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0, 68, 255, .18), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(0, 183, 255, .06), transparent 60%);
}

h1, h2, h3, h4, h5, .u-display {
  font-family: var(--u-font-display);
  letter-spacing: -0.02em;
  color: var(--u-text);
}

/* Text helpers — layer on top of Bootstrap */
.text-muted { color: var(--u-text-muted) !important; }
.text-primary { color: var(--u-blue-500) !important; }

/* Focus ring — accessible */
:where(button, .btn, a, input, textarea, select, .form-control, .form-select):focus-visible {
  outline: none !important;
  box-shadow: var(--u-shadow-glow) !important;
  border-color: var(--u-blue-500) !important;
}

/* Selection */
::selection {
  background: rgba(0, 68, 255, .18);
  color: var(--u-text);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--u-blue-300), var(--u-blue-500));
  border-radius: var(--u-radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--u-blue-600); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   FINAL DARK MODE READABILITY FIXES
   ========================================================= */

html[data-theme="dark"] body {
    background: var(--u-bg) !important;
    color: var(--u-text) !important;
}

/* Normal text */
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    color: inherit;
}

/* Bootstrap text-muted */
html[data-theme="dark"] .text-muted {
    color: var(--u-text-muted) !important;
}

/* Bootstrap text-dark becomes readable */
html[data-theme="dark"] .text-dark:not(.badge):not(.btn):not(.bg-warning):not(.bg-info) {
    color: var(--u-text) !important;
}

/* White backgrounds */
html[data-theme="dark"] .bg-white {
    background-color: var(--u-surface) !important;
    color: var(--u-text) !important;
}

/* Cards */
html[data-theme="dark"] .card {
    background-color: var(--u-surface) !important;
    color: var(--u-text) !important;
    border-color: var(--u-border) !important;
}

/* Card headings */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer {
    color: var(--u-text) !important;
}

/* Tables */
html[data-theme="dark"] .table {
    color: var(--u-text) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--u-text-soft) !important;
    background-color: var(--u-surface) !important;
    border-color: var(--u-border) !important;
}

html[data-theme="dark"] .table-light > :not(caption) > * > * {
    background-color: var(--u-surface-2) !important;
    color: var(--u-text) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    color: var(--u-text) !important;
    background-color: rgba(0, 183, 255, .08) !important;
}

/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    background-color: var(--u-surface-2) !important;
    color: var(--u-text) !important;
    border-color: var(--u-border-strong) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--u-text-muted) !important;
}

html[data-theme="dark"] .form-select option {
    background-color: var(--u-surface);
    color: var(--u-text);
}

/* Navbar brand */
.custom-navbar .navbar-brand,
.custom-navbar .navbar-brand:visited,
.custom-navbar .navbar-brand:hover,
.custom-navbar .navbar-brand:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* Navbar icons */
.custom-navbar .nav-link,
.custom-navbar .nav-link i,
.custom-navbar .navbar-toggler,
.custom-navbar .navbar-toggler-icon,
.custom-navbar .u-theme-toggle {
    color: #fff !important;
}

/* Navbar dropdown */
html[data-theme="dark"] .custom-navbar .dropdown-menu {
    background: var(--u-surface) !important;
    border-color: var(--u-border-strong) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-item {
    color: var(--u-text) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-item:hover,
html[data-theme="dark"] .custom-navbar .dropdown-item:focus {
    background: var(--u-blue-500) !important;
    color: #fff !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-header {
    color: var(--u-text-muted) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-divider {
    border-color: var(--u-border) !important;
}

/* Navbar mobile */
@media (max-width: 991.98px) {

    html[data-theme="dark"] .custom-navbar .navbar-collapse {
        background: var(--u-surface) !important;
        border-color: var(--u-border-strong) !important;
    }

    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link {
        color: var(--u-text) !important;
    }

    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link:hover,
    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link.active {
        background: var(--u-blue-500) !important;
        color: #fff !important;
    }
}

/* Links */
html[data-theme="dark"] a:not(.btn):not(.navbar-brand) {
    color: var(--u-cyan-300);
}

html[data-theme="dark"] a:not(.btn):not(.navbar-brand):hover {
    color: #fff;
}

/* Close buttons */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: var(--u-text-soft) !important;
}

/* List groups */
html[data-theme="dark"] .list-group-item {
    background-color: var(--u-surface) !important;
    color: var(--u-text) !important;
    border-color: var(--u-border) !important;
}

/* Bootstrap alerts */
html[data-theme="dark"] .alert {
    color: var(--u-text) !important;
}

/* HR */
html[data-theme="dark"] hr {
    border-color: var(--u-border) !important;
}
/* =========================================================
   CAPTCHA - DARK MODE READABILITY
   ========================================================= */

html[data-theme="dark"] .captcha-container,
html[data-theme="dark"] .captcha-box,
html[data-theme="dark"] #captcha,
html[data-theme="dark"] #captchaImage {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] #captchaInput,
html[data-theme="dark"] input[name="captcha"],
html[data-theme="dark"] input[placeholder="Enter Captcha"] {
    background: #182545 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] #captchaInput::placeholder,
html[data-theme="dark"] input[name="captcha"]::placeholder,
html[data-theme="dark"] input[placeholder="Enter Captcha"]::placeholder {
    color: #aebbd6 !important;
    opacity: 1 !important;
}

/* =========================================================
   DARK MODE - DASHBOARD CHART READABILITY
   ========================================================= */

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .admin-section,
html[data-theme="dark"] .card {
    color: #e8eefc !important;
}

/* Any normal HTML text around charts */
html[data-theme="dark"] .dashboard-card h1,
html[data-theme="dark"] .dashboard-card h2,
html[data-theme="dark"] .dashboard-card h3,
html[data-theme="dark"] .dashboard-card h4,
html[data-theme="dark"] .dashboard-card h5,
html[data-theme="dark"] .dashboard-card h6,
html[data-theme="dark"] .chart-card h1,
html[data-theme="dark"] .chart-card h2,
html[data-theme="dark"] .chart-card h3,
html[data-theme="dark"] .chart-card h4,
html[data-theme="dark"] .chart-card h5,
html[data-theme="dark"] .chart-card h6 {
    color: #e8eefc !important;
}

/* Chart containers */
html[data-theme="dark"] .chart-container {
    color: #e8eefc !important;
}
/* Guest-only extension stylesheet.
   Kept intentionally small after consolidating shared theme tokens into theme.css.
*/

/* Optional override point if guest navbar CTA appears too dense on smaller devices. */
@media (max-width: 768px) {
  .custom-navbar .btn {
    min-width: 0;
  }
}

/* Navbar icons */
.custom-navbar .nav-link,
.custom-navbar .nav-link i,
.custom-navbar .navbar-toggler,
.custom-navbar .navbar-toggler-icon,
.custom-navbar .u-theme-toggle {
    color: #fff !important;
}

/* Navbar dropdown */
html[data-theme="dark"] .custom-navbar .dropdown-menu {
    background: var(--u-surface) !important;
    border-color: var(--u-border-strong) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-item {
    color: var(--u-text) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-item:hover,
html[data-theme="dark"] .custom-navbar .dropdown-item:focus {
    background: var(--u-blue-500) !important;
    color: #fff !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-header {
    color: var(--u-text-muted) !important;
}

html[data-theme="dark"] .custom-navbar .dropdown-divider {
    border-color: var(--u-border) !important;
}

/* Navbar mobile */
@media (max-width: 991.98px) {

    html[data-theme="dark"] .custom-navbar .navbar-collapse {
        background: var(--u-surface) !important;
        border-color: var(--u-border-strong) !important;
    }

    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link {
        color: var(--u-text) !important;
    }

    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link:hover,
    html[data-theme="dark"] .custom-navbar .navbar-collapse .nav-link.active {
        background: var(--u-blue-500) !important;
        color: #fff !important;
    }
}

/* Links */
html[data-theme="dark"] a:not(.btn):not(.navbar-brand) {
    color: var(--u-cyan-300);
}

html[data-theme="dark"] a:not(.btn):not(.navbar-brand):hover {
    color: #fff;
}

/* Close buttons */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: var(--u-text-soft) !important;
}

/* List groups */
html[data-theme="dark"] .list-group-item {
    background-color: var(--u-surface) !important;
    color: var(--u-text) !important;
    border-color: var(--u-border) !important;
}

/* Bootstrap alerts */
html[data-theme="dark"] .alert {
    color: var(--u-text) !important;
}

/* HR */
html[data-theme="dark"] hr {
    border-color: var(--u-border) !important;
}
/* =========================================================
   CAPTCHA - DARK MODE READABILITY
   ========================================================= */

html[data-theme="dark"] .captcha-container,
html[data-theme="dark"] .captcha-box,
html[data-theme="dark"] #captcha,
html[data-theme="dark"] #captchaImage {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] #captchaInput,
html[data-theme="dark"] input[name="captcha"],
html[data-theme="dark"] input[placeholder="Enter Captcha"] {
    background: #182545 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] #captchaInput::placeholder,
html[data-theme="dark"] input[name="captcha"]::placeholder,
html[data-theme="dark"] input[placeholder="Enter Captcha"]::placeholder {
    color: #aebbd6 !important;
    opacity: 1 !important;
}

/* =========================================================
   DARK MODE - DASHBOARD CHART READABILITY
   ========================================================= */

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .admin-section,
html[data-theme="dark"] .card {
    color: #e8eefc !important;
}

/* Any normal HTML text around charts */
html[data-theme="dark"] .dashboard-card h1,
html[data-theme="dark"] .dashboard-card h2,
html[data-theme="dark"] .dashboard-card h3,
html[data-theme="dark"] .dashboard-card h4,
html[data-theme="dark"] .dashboard-card h5,
html[data-theme="dark"] .dashboard-card h6,
html[data-theme="dark"] .chart-card h1,
html[data-theme="dark"] .chart-card h2,
html[data-theme="dark"] .chart-card h3,
html[data-theme="dark"] .chart-card h4,
html[data-theme="dark"] .chart-card h5,
html[data-theme="dark"] .chart-card h6 {
    color: #e8eefc !important;
}

/* Chart containers */
html[data-theme="dark"] .chart-container {
    color: #e8eefc !important;
}
/* ==========================================================================
   Upraj Solutions — Component Layer
   Buttons, Cards, Tables, Forms, Modals, Alerts, Badges, KPI, Charts
   All rules layered on top of existing Bootstrap without breaking classes.
   ========================================================================== */

/* -------------------------------------------------- BUTTONS */
.btn {
  font-family: var(--u-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--u-radius-sm);
  padding: 0.55rem 1.15rem;
  transition:
    transform var(--u-dur-fast) var(--u-ease),
    box-shadow var(--u-dur) var(--u-ease),
    background-color var(--u-dur) var(--u-ease),
    border-color var(--u-dur) var(--u-ease),
    color var(--u-dur) var(--u-ease);
  will-change: transform;
  border-width: 1px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--u-blue-500) 0%, var(--u-blue-600) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 68, 255, .55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--u-blue-600) 0%, var(--u-blue-700) 100%);
  box-shadow: 0 14px 28px -8px rgba(0, 68, 255, .65);
  color: #fff;
}

.btn-outline-primary {
  color: var(--u-blue-500);
  border-color: var(--u-blue-500);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--u-blue-500);
  border-color: var(--u-blue-500);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(0, 68, 255, .45);
}

.btn-warning {
  background: linear-gradient(135deg, #fbbf24, var(--u-accent));
  border-color: transparent;
  color: #1a1300;
  box-shadow: 0 8px 20px -8px rgba(245, 179, 1, .5);
}
.btn-warning:hover { color: #1a1300; box-shadow: 0 12px 26px -8px rgba(245, 179, 1, .6); }

.btn-success { background: linear-gradient(135deg, #10b981, #059669); border-color: transparent; color: #fff; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, #dc2626); border-color: transparent; color: #fff; }
.btn-secondary { background: var(--u-surface-2); color: var(--u-text); border-color: var(--u-border); }
.btn-outline-secondary { color: var(--u-text-soft); border-color: var(--u-border-strong); background: transparent; }
.btn-outline-secondary:hover { background: var(--u-surface-2); color: var(--u-text); border-color: var(--u-border-strong); }

.btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1.05rem; }

/* Custom pill CTA for landing (used by class .btn-learn) */
.btn-learn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--u-radius-pill);
  background: linear-gradient(135deg, #fff, #eef4ff);
  color: var(--u-blue-600);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 68, 255, .4);
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.btn-learn:hover { transform: translateY(-2px); color: var(--u-blue-700); box-shadow: 0 16px 32px -10px rgba(0, 68, 255, .55); }

/* -------------------------------------------------- CARDS */
.card {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-md) !important;
  box-shadow: var(--u-shadow-sm);
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
  color: var(--u-text);
}
.card:hover, .card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--u-shadow-md);
  border-color: var(--u-blue-200);
}
.card-body { color: var(--u-text); }
.card-title { color: var(--u-text); font-family: var(--u-font-display); font-weight: 700; }
.card-text { color: var(--u-text-soft); }
.card-header {
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-border);
  font-weight: 600;
  color: var(--u-text);
}

/* Glass card variant */
.u-glass {
  background: var(--u-glass-bg) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(140%);
  border: 1px solid var(--u-glass-border) !important;
  box-shadow: var(--u-shadow-md);
}
.u-glass-strong {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(calc(var(--u-glass-blur) + 6px)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--u-glass-blur) + 6px)) saturate(160%);
  border: 1px solid var(--u-glass-border) !important;
}

/* -------------------------------------------------- KPI CARDS (dashboard) */
.u-kpi {
  position: relative;
  padding: 1.25rem 1.25rem;
  border-radius: var(--u-radius-md);
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  overflow: hidden;
  isolation: isolate;
}
.u-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 68, 255, .06), transparent 60%);
  z-index: -1;
  transition: opacity var(--u-dur) var(--u-ease);
}
.u-kpi__label { color: var(--u-text-muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.u-kpi__value { color: var(--u-text); font-family: var(--u-font-display); font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; }
.u-kpi__delta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; }
.u-kpi__delta.up { color: var(--u-success); }
.u-kpi__delta.down { color: var(--u-danger); }
.u-kpi__icon {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 8px 18px -6px rgba(0, 68, 255, .5);
}

/* -------------------------------------------------- TABLES */
.table {
  --bs-table-bg: transparent;
  color: var(--u-text);
  border-color: var(--u-border);
  border-collapse: separate;
  border-spacing: 0;
}
.table > :not(caption) > * > * {
  background: transparent;
  color: var(--u-text);
  border-color: var(--u-border);
  padding: 0.85rem 1rem;
}
.table thead th,
.table > thead > tr > th {
  background: var(--u-surface-2) !important;
  color: var(--u-text-soft) !important;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--u-border-strong) !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table tbody tr {
  transition: background var(--u-dur-fast) var(--u-ease);
}
.table tbody tr:hover td { background: var(--u-blue-50) !important; }
html[data-theme="dark"] .table tbody tr:hover td { background: rgba(0, 183, 255, 0.06) !important; }

.table-light > :not(caption) > * > * {
  background: var(--u-surface-2) !important;
  color: var(--u-text-soft) !important;
}
.table-bordered > :not(caption) > * > * { border-color: var(--u-border) !important; }

/* Wrap tables in .u-table-wrap for glass container + rounded corners */
.u-table-wrap {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-md);
  overflow: hidden;
  box-shadow: var(--u-shadow-sm);
}
.u-table-wrap > .table { margin: 0; }

/* -------------------------------------------------- FORMS */
.form-label { color: var(--u-text-soft); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.form-control,
.form-select {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border-strong) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: 0.6rem 0.85rem;
  font-size: .95rem;
  transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease);
}
.form-control::placeholder { color: var(--u-text-muted); opacity: .7; }
.form-control:focus, .form-select:focus {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border-color: var(--u-blue-500) !important;
  box-shadow: var(--u-shadow-glow) !important;
}
.form-control:disabled, .form-select:disabled {
  background: var(--u-surface-2) !important;
  color: var(--u-text-muted) !important;
  cursor: not-allowed;
}
textarea.form-control { min-height: 92px; }

/* Input group */
.input-group-text {
  background: var(--u-surface-2);
  border: 1px solid var(--u-border-strong);
  color: var(--u-text-soft);
}

/* Search-style input */
.u-search {
  position: relative;
}
.u-search input {
  padding-left: 2.4rem;
}
.u-search::before {
  content: "\F52A"; /* bi-search */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--u-text-muted);
  pointer-events: none;
}

/* -------------------------------------------------- BADGES / CHIPS */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--u-radius-pill); padding: .35em .7em; }
.badge.bg-primary   { background: var(--u-blue-500) !important; }
.badge.bg-secondary { background: var(--u-text-muted) !important; }
.badge.bg-success   { background: var(--u-success) !important; }
.badge.bg-danger    { background: var(--u-danger) !important; }
.badge.bg-warning   { background: var(--u-warning) !important; color: #1a1300; }
.badge.bg-info      { background: var(--u-info) !important; }

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--u-radius-pill);
  background: var(--u-blue-50);
  color: var(--u-blue-700);
  border: 1px solid var(--u-blue-100);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--u-dur) var(--u-ease);
  user-select: none;
}
.u-chip:hover { background: var(--u-blue-100); }
.u-chip.active { background: var(--u-blue-500); color: #fff; border-color: var(--u-blue-500); box-shadow: 0 6px 14px -6px rgba(0, 68, 255, .5); }
html[data-theme="dark"] .u-chip { background: rgba(0, 183, 255, .08); color: var(--u-cyan-300); border-color: rgba(0, 183, 255, .18); }
html[data-theme="dark"] .u-chip.active { background: var(--u-blue-500); color: #fff; }

/* -------------------------------------------------- ALERTS */
.alert {
  border-radius: var(--u-radius-sm);
  border: 1px solid transparent;
  padding: 0.85rem 1rem;
  font-weight: 500;
}
.alert-success { background: rgba(16, 185, 129, .1); color: #065f46; border-color: rgba(16, 185, 129, .25); }
.alert-danger  { background: rgba(239, 68, 68, .1);  color: #7f1d1d; border-color: rgba(239, 68, 68, .25); }
.alert-warning { background: rgba(245, 158, 11, .12); color: #78350f; border-color: rgba(245, 158, 11, .3); }
.alert-info    { background: rgba(14, 165, 233, .1); color: #075985; border-color: rgba(14, 165, 233, .25); }
html[data-theme="dark"] .alert-success { color: #6ee7b7; }
html[data-theme="dark"] .alert-danger  { color: #fca5a5; }
html[data-theme="dark"] .alert-warning { color: #fcd34d; }
html[data-theme="dark"] .alert-info    { color: #7dd3fc; }

/* -------------------------------------------------- MODALS */
.modal-content {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-lg) !important;
  box-shadow: var(--u-shadow-lg);
  /* Do not clip dropdowns, date pickers, autocomplete panels, or close
     controls rendered inside ordinary Bootstrap modals. */
  overflow: visible;
}
.modal-header {
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff;
  border-bottom: 0 !important;
  padding: 1rem 1.25rem;
}
.modal-header .modal-title { color: #fff; font-family: var(--u-font-display); font-weight: 700; }
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }
.modal-header .btn-close:hover { opacity: 1; }

/* Reset the ones that already had bg-primary */
.modal-header.bg-primary { background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400)) !important; }

.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--u-border); background: var(--u-surface-2); }

/* Modal geometry and scrolling intentionally remain owned by Bootstrap. */

/* Dark mode modal */
html[data-theme="dark"] .modal-content { background: var(--u-surface) !important; }

/* Popup stacking remains owned by Bootstrap + page-specific modules. Page-specific
   viewers may opt into a higher layer without placing their backdrop above
   the popup itself. */

/* -------------------------------------------------- DROPDOWNS (glass) */
.dropdown-menu {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  border: 1px solid var(--u-glass-border) !important;
  border-radius: var(--u-radius-md) !important;
  box-shadow: var(--u-shadow-md);
  padding: .35rem;
  color: var(--u-text) !important;
}
.dropdown-item {
  color: var(--u-text) !important;
  border-radius: var(--u-radius-xs);
  padding: .55rem .75rem;
  font-weight: 500;
  transition: background var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--u-blue-500) !important;
  color: #fff !important;
  text-shadow: none;
}
.dropdown-item.text-dark { color: var(--u-text) !important; }
.dropdown-item.text-danger:hover { background: var(--u-danger) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--u-border); }
.dropdown-header { color: var(--u-text-muted); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* -------------------------------------------------- NAV TABS */
.nav-tabs { border-bottom: 1px solid var(--u-border); }
.nav-tabs .nav-link {
  color: var(--u-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: .75rem 1rem;
  font-weight: 600;
  background: transparent !important;
  transition: color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.nav-tabs .nav-link:hover { color: var(--u-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--u-blue-500) !important;
  border-bottom-color: var(--u-blue-500) !important;
  background: transparent !important;
}
/* Preserve the black-tab #accountTabs / #accessTabs styling if the app expects it */
#accountTabs .nav-link, #accessTabs .nav-link { color: var(--u-text) !important; }
#accountTabs .nav-link.active, #accessTabs .nav-link.active { color: var(--u-blue-500) !important; }

/* -------------------------------------------------- LIST GROUP */
.list-group-item {
  background: transparent;
  border-color: var(--u-border);
  color: var(--u-text);
}
.list-group-item:hover { background: var(--u-blue-50); color: var(--u-blue-700); }
html[data-theme="dark"] .list-group-item:hover { background: rgba(0, 183, 255, .08); color: var(--u-cyan-300); }

/* -------------------------------------------------- ACCORDION (CRM sidebar uses this) */
.accordion-item { background: transparent !important; }
.accordion-button {
  background: transparent !important;
  color: var(--u-text) !important;
  font-weight: 600;
  border-radius: var(--u-radius-sm) !important;
  padding: .7rem .85rem !important;
}
.accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(0, 68, 255, .12), transparent) !important;
  color: var(--u-blue-500) !important;
  box-shadow: none !important;
}
.accordion-button:focus { box-shadow: var(--u-shadow-glow) !important; }
.accordion-button::after {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334155'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c6d0ea'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}

/* -------------------------------------------------- CHART CONTAINER */
.u-chart-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-md);
  padding: 1.25rem;
  box-shadow: var(--u-shadow-sm);
}
.u-chart-card h5 { font-family: var(--u-font-display); font-weight: 700; margin-bottom: .35rem; }
.u-chart-card .u-chart-sub { color: var(--u-text-muted); font-size: .85rem; }
.u-chart-canvas { position: relative; margin-top: 1rem; height: 260px; }

/* Chart.js overrides — best-effort, since colors are set in JS. Provide CSS var hooks */
canvas { max-width: 100%; }

/* -------------------------------------------------- ACTIVITY FEED */
.u-feed { display: flex; flex-direction: column; gap: .85rem; }
.u-feed__item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .75rem;
  border-radius: var(--u-radius-sm);
  border: 1px solid var(--u-border);
  background: var(--u-surface);
  transition: border-color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.u-feed__item:hover { border-color: var(--u-blue-200); transform: translateX(2px); }
.u-feed__dot {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 10px -3px rgba(0, 68, 255, .5);
}
.u-feed__body { flex: 1 1 auto; min-width: 0; }
.u-feed__title { color: var(--u-text); font-weight: 600; }
.u-feed__meta { color: var(--u-text-muted); font-size: .8rem; }

/* -------------------------------------------------- TOASTS */
.toast {
  border-radius: var(--u-radius-md) !important;
  border: 1px solid var(--u-glass-border) !important;
  background: var(--u-glass-bg-strong) !important;
  color: var(--u-text) !important;
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
  box-shadow: var(--u-shadow-lg) !important;
}
.toast.bg-dark { background: rgba(15, 23, 42, .92) !important; color: #fff !important; }

/* -------------------------------------------------- CAROUSEL CAPTION (landing) */
#homeCarousel .carousel-caption {
  background: var(--u-glass-bg-strong);
  border: 1px solid var(--u-glass-border);
  color: var(--u-text) !important;
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
  box-shadow: var(--u-shadow-lg);
  bottom: 2rem;
  max-width: 720px;
  left: 5%;
  right: auto;
  text-align: left;
}
#homeCarousel .carousel-caption h2 { color: var(--u-text) !important; font-family: var(--u-font-display); }
#homeCarousel .carousel-caption p  { color: var(--u-text-soft) !important; }

/* -------------------------------------------------- ANIMATIONS */
@keyframes uFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.u-anim-fade-up { animation: uFadeUp .6s var(--u-ease) both; }

@keyframes uPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 68, 255, .35); }
  50%      { box-shadow: 0 0 0 12px rgba(0, 68, 255, 0); }
}
.u-pulse { animation: uPulse 2s infinite; }

/* Card zoom-img hover (landing "Our Core Services") */
.zoom-img { transition: transform .6s var(--u-ease); }
.card-hover:hover .zoom-img,
.card:hover .zoom-img { transform: scale(1.08); }
/* ==========================================================================
   Upraj Solutions — Layout Layer
   Navbar (glass), Sidebar, Grid containers, Landing hero, Sections
   ========================================================================== */

/* -------------------------------------------------- FIXED GLASS NAVBAR */
.custom-navbar {
  position: fixed !important;
  top: 0;
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030;
  height: 56px !important;
  min-height: 56px !important;

  /* Override existing solid gradient with glassmorphism on top of a subtle blue wash */
  background:
    linear-gradient(135deg, rgba(0, 68, 255, 0.92) 0%, rgba(0, 183, 255, 0.85) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px -12px rgba(0, 30, 100, .35);
  overflow: visible;
  transition: background var(--u-dur) var(--u-ease);
}

.navbar.custom-navbar {
  height: 56px !important;
  min-height: 56px !important;
}

/* Keep every fixed CRM element aligned with the actual navigation bar. */
.custom-navbar > .container,
.custom-navbar > .container-fluid {
  height: 100%;
  min-height: 0;
}

/* Kill the noisy dot-wave animation from legacy CSS */
.custom-navbar::before,
.custom-navbar::after { display: none !important; }

/* crm.js sets `nav.style.position = "fixed"; top: 0` (inline). We keep those
   values but ensure our other navbar rules (padding, background, blur) stay in
   effect above them. */
.custom-navbar[style*="position: fixed"],
nav.custom-navbar {
  background: linear-gradient(135deg, rgba(0, 68, 255, 0.92) 0%, rgba(0, 183, 255, 0.85) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 8px 24px -12px rgba(0, 30, 100, .35) !important;
}

.custom-navbar .container-fluid {
  padding: .55rem 2rem !important;
  gap: 0.5rem;
}

/* Give breathing room between the right-side action items */
.custom-navbar .navbar-nav.ms-auto,
.custom-navbar .navbar-nav:last-child {
  gap: .35rem;
  align-items: center;
}
.custom-navbar .navbar-nav > .nav-item { display: flex; align-items: center; }
.custom-navbar .navbar-nav > .nav-item + .nav-item { margin-left: .15rem; }
/* Profile dropdown text has proper padding-right and doesn't touch edge */
.custom-navbar #profileDropdown,
.custom-navbar .dropdown-toggle.nav-link {
  padding-right: .6rem !important;
  padding-left: .75rem !important;
  border-radius: var(--u-radius-sm);
}
.custom-navbar #profileDropdown:hover,
.custom-navbar .dropdown-toggle.nav-link:hover {
  background: rgba(255,255,255,.14);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--u-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .18);
  letter-spacing: -0.01em;
}
.navbar-brand::before {
  content: "U";
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
  color: var(--u-blue-600);
  font-family: var(--u-font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 6px 14px -4px rgba(0,0,0,.25);
}

.custom-navbar .nav-link {
  position: relative;
  color: rgba(255, 255, 255, .92) !important;
  font-weight: 500;
  padding: .5rem .85rem !important;
  border-radius: var(--u-radius-sm);
  transition: background var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
  text-shadow: none;
}
.custom-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
  text-shadow: none;
}
.custom-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .18);
  text-shadow: none;
  text-decoration: none;
}
.custom-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, var(--u-accent));
}

/* Navbar toggler (mobile) */
.custom-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .35rem .55rem;
  border-radius: var(--u-radius-sm);
}
.custom-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

/* Notification badge tweak */
#notifCount {
  min-width: 18px;
  height: 18px;
  font-size: .7rem;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

/* Dark-mode navbar: subtly deeper glass */
html[data-theme="dark"] .custom-navbar {
  background: linear-gradient(135deg, rgba(0, 30, 100, 0.85) 0%, rgba(0, 90, 160, 0.75) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* -------------------------------------------------- THEME TOGGLE BUTTON */
.u-theme-toggle {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: var(--u-radius-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  transition: background var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
  margin-right: .5rem;
}
.u-theme-toggle:hover { background: rgba(255, 255, 255, .24); transform: rotate(-12deg); }
.u-theme-toggle .bi-sun-fill,
.u-theme-toggle .bi-moon-stars-fill { font-size: 1rem; line-height: 1; }
html[data-theme="light"] .u-theme-toggle .bi-sun-fill  { display: inline-block; }
html[data-theme="light"] .u-theme-toggle .bi-moon-stars-fill { display: none; }
html[data-theme="dark"]  .u-theme-toggle .bi-sun-fill  { display: none; }
html[data-theme="dark"]  .u-theme-toggle .bi-moon-stars-fill { display: inline-block; }

/* -------------------------------------------------- FOOTER */
.footer-fixed,
footer.navbar.fixed-bottom,
.custom-footer {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
  color: var(--u-text) !important;
  border-top: 1px solid var(--u-glass-border) !important;
  padding: 12px 0 !important;
  font-size: .9rem;
  box-shadow: 0 -8px 20px -8px rgba(15, 23, 42, .1) !important;
}
.footer-fixed a,
footer.navbar.fixed-bottom a { color: var(--u-blue-500) !important; font-weight: 600; }
.footer-fixed a:hover,
footer.navbar.fixed-bottom a:hover { color: var(--u-blue-700) !important; text-shadow: none; }

/* -------------------------------------------------- LANDING HERO / SECTIONS */
#homeCarousel .carousel-item img {
  height: 68vh;
  min-height: 420px;
  object-fit: cover;
  filter: brightness(.78) saturate(1.05);
}
#homeCarousel { border-radius: var(--u-radius-lg); overflow: hidden; box-shadow: var(--u-shadow-lg); margin-inline: auto; }

/* Section paddings — enforce breathing room */
section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
section .container { position: relative; z-index: 1; }

/* Hero-like sections (existing use inline blue gradient) — soften with glass overlay */
section[style*="linear-gradient"] {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
section[style*="linear-gradient"]::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 300px at 15% 10%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(500px 300px at 85% 90%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
section[style*="linear-gradient"] h1,
section[style*="linear-gradient"] h2,
section[style*="linear-gradient"] p { color: #fff; }

/* Service cards on landing */
.card.card-hover {
  border-radius: var(--u-radius-lg) !important;
  overflow: hidden;
}
.card.card-hover .ratio > img { transition: transform .6s var(--u-ease); }
.card.card-hover:hover .ratio > img { transform: scale(1.06); }

/* Trust badges on landing (bg-white text-dark rounded-4 p-4) */
section .bg-white.text-dark {
  background: var(--u-glass-bg-strong) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-glass-border);
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
}

/* -------------------------------------------------- PAGE CONTAINER */
.container.mt-3, .container.mt-4 {
  padding-inline: 1.25rem;
}

/* -------------------------------------------------- FLOATING ACTION BAR (contactbtn) */
.u-fab {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 1050;
}
.u-fab .btn { border-radius: var(--u-radius-pill); box-shadow: var(--u-shadow-lg); }

/* -------------------------------------------------- PORTFOLIO GRID */
.u-portfolio-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.u-portfolio-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.u-portfolio-view {
  display: inline-flex;
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-radius-sm);
  overflow: hidden;
  background: var(--u-surface);
}
.u-portfolio-view button {
  background: transparent;
  border: 0;
  color: var(--u-text-soft);
  padding: .45rem .8rem;
  cursor: pointer;
  transition: background var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}
.u-portfolio-view button.active {
  background: var(--u-blue-500);
  color: #fff;
}
.u-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.u-portfolio-list { display: flex; flex-direction: column; gap: .75rem; }
.u-portfolio-item {
  position: relative;
  border-radius: var(--u-radius-md);
  overflow: hidden;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  box-shadow: var(--u-shadow-sm);
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.u-portfolio-item:hover { transform: translateY(-4px); box-shadow: var(--u-shadow-md); border-color: var(--u-blue-200); }
.u-portfolio-item__media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--u-blue-100), var(--u-blue-50));
  display: grid; place-items: center;
  color: var(--u-blue-500);
  font-size: 2.2rem;
}
.u-portfolio-item__body { padding: 1rem 1.15rem 1.15rem; }
.u-portfolio-item__title { font-family: var(--u-font-display); font-weight: 700; color: var(--u-text); margin-bottom: .25rem; }
.u-portfolio-item__meta  { color: var(--u-text-muted); font-size: .85rem; }
.u-portfolio-item__reveal {
  position: absolute; inset: auto 0 -100% 0;
  padding: .8rem 1.15rem;
  background: linear-gradient(180deg, transparent, rgba(0, 68, 255, .92));
  color: #fff;
  transition: bottom var(--u-dur) var(--u-ease);
}
.u-portfolio-item:hover .u-portfolio-item__reveal { bottom: 0; }


/* ==========================================================================
   REPORTS PAGE (/modules/reports.php) — inline <style> overrides
   ==========================================================================
   The reports page defines its OWN :root vars and its OWN `body.dark`
   dark mode. We remap them to our design tokens so it stays consistent
   with the rest of the app and syncs with the navbar theme toggle.
   ========================================================================== */

/* Re-map the reports page's local vars to our tokens.
   These win because they live outside :root and are scoped to specific
   elements the reports page uses. */
.filter-bar,
.chart-grid .chart-card,
.table-responsive {
  --primary:      var(--u-blue-500);
  --primary-dark: var(--u-blue-600);
  --bg:           var(--u-bg);
  --text:         var(--u-text);
  --card-bg:      var(--u-glass-bg-strong);
  --border:       var(--u-border);
  --radius:       var(--u-radius-md);
  --shadow:       var(--u-shadow-sm);
  --transition:   var(--u-dur) var(--u-ease);
}

/* Filter bar — sticky offset must match our real navbar height */
.filter-bar {
  top: calc(var(--u-nav-h) + 8px) !important;
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-md) !important;
  padding: .85rem 1rem !important;
  gap: .5rem !important;
}
.filter-bar label { color: var(--u-text-soft) !important; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.filter-bar button {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border-strong) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: .5rem 1rem !important;
  font-weight: 600;
  transition: background var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.filter-bar button:hover {
  background: var(--u-blue-50) !important;
  color: var(--u-blue-700) !important;
  border-color: var(--u-blue-500) !important;
}
html[data-theme="dark"] .filter-bar button:hover {
  background: rgba(0, 183, 255, .1) !important;
  color: var(--u-cyan-300) !important;
}
.filter-bar button.active {
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-blue-600)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 14px -6px rgba(0, 68, 255, .55) !important;
}
.filter-bar select {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border-strong) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: .5rem .8rem !important;
}

/* Chart grid — use glass card look */
.chart-grid .chart-card {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-md) !important;
  padding: 1.25rem !important;
  box-shadow: var(--u-shadow-sm) !important;
  color: var(--u-text);
}
.chart-grid .chart-card h3, .chart-grid .chart-card h4 { color: var(--u-text); font-family: var(--u-font-display); font-weight: 700; }

/* Data tables — reports.php wraps each table in .table-responsive */
.table-responsive {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-md) !important;
  padding: 1rem !important;
  box-shadow: var(--u-shadow-sm) !important;
}
.table-responsive table { color: var(--u-text); }
.table-responsive th {
  background: var(--u-surface-2) !important;
  color: var(--u-text-soft) !important;
  border: 1px solid var(--u-border) !important;
  padding: .7rem .85rem !important;
}
.table-responsive td {
  color: var(--u-text) !important;
  border: 1px solid var(--u-border) !important;
  padding: .6rem .85rem !important;
}
.table-responsive tr:hover td {
  background: var(--u-blue-50) !important;
}
html[data-theme="dark"] .table-responsive tr:hover td { background: rgba(0, 183, 255, .06) !important; }

/* Reports page has its own 🌙 button — restyle it as a matching pill */
#darkModeToggle {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border-strong) !important;
  border-radius: var(--u-radius-pill) !important;
  padding: .5rem 1rem !important;
  font-weight: 600 !important;
  transition: background var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
  box-shadow: var(--u-shadow-sm);
}
#darkModeToggle:hover {
  background: var(--u-blue-500) !important;
  color: #fff !important;
  border-color: var(--u-blue-500) !important;
  transform: translateY(-1px);
}

/* Shimmer loader skeleton — match theme */
.skeleton {
  background: linear-gradient(90deg,
    var(--u-surface-2) 25%,
    var(--u-bg-soft) 50%,
    var(--u-surface-2) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--u-radius-md) !important;
}
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 75%) !important;
  background-size: 200% 100% !important;
}

/* Reports uses `body.dark` for its dark theme. Bridge it to our data-theme
   by also honouring html[data-theme=dark] body when reports.php doesn't
   set the class. And vice versa — if `body.dark` is present we still
   apply our tokens. */
body.dark { background: var(--u-bg) !important; color: var(--u-text) !important; }

/* When our data-theme is dark, ensure reports content inherits dark surfaces */
html[data-theme="dark"] .chart-grid .chart-card,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .filter-bar { color: var(--u-text); }
html[data-theme="dark"] .table-responsive th { background: rgba(255,255,255,.04) !important; }
html[data-theme="dark"] .table-responsive td { border-color: rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .table-responsive th { border-color: rgba(255,255,255,.08) !important; }
/* Responsive layout is maintained in ui-shell.css. */