/**
 * File: app.css
 * Path: /assets/css/app.css
 * Purpose: Global shared styles. CSS custom properties, typography, base layout,
 *          navigation, hero, feature cards, pricing, testimonials, FAQ, footer.
 * Design: Futuristic dark-first. Black base, yellow/orange/purple accents.
 *         Sharp edges + glass morphism layers. Zero gradient blobs.
 * Dependencies: Bootstrap 5.3 (loaded before)
 */

/* ─── @font-face: Gordita (unchanged) ──────────────────────────────────── */
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-BlackItalic.woff2') format('woff2'); font-weight:900; font-style:italic; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-BoldItalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-MediumItalic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-RegularItalic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Gordita'; src:url('../fonts/Gordita-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }

/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --c-black:          #000000;
  --c-yellow:         #ffcc00;
  --c-orange:         #ff6600;
  --c-purple:         #9900cc;
  --c-white:          #ffffff;

  /* Semantic aliases */
  --color-primary:        var(--c-yellow);
  --color-primary-dark:   #e6b800;
  --color-accent:         var(--c-orange);
  --color-accent2:        var(--c-purple);
  --color-success:        #00e676;
  --color-warning:        var(--c-yellow);
  --color-danger:         var(--c-orange);
  --color-info:           var(--c-purple);

  /* Surfaces */
  --bg-base:          #050505;
  --bg-secondary:     #0d0d0d;
  --bg-card:          #111111;
  --bg-card-hover:    #161616;
  --bg-glass:         rgba(255,255,255,0.04);
  --bg-glass-hover:   rgba(255,255,255,0.07);
  --sidebar-bg:       #0a0a0a;

  /* Text */
  --text-primary:     #f0f0f0;
  --text-secondary:   #a0a0a0;
  --text-muted:       #606060;
  --text-inverse:     #000000;

  /* Borders */
  --border-color:     rgba(255,255,255,0.08);
  --border-bright:    rgba(255,255,255,0.14);
  --border-accent:    rgba(255,204,0,0.35);

  /* Radius */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;

  /* Shadows */
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:        0 10px 40px rgba(0,0,0,0.6);
  --shadow-glow-y:    0 0 24px rgba(255,204,0,0.18);
  --shadow-glow-o:    0 0 24px rgba(255,102,0,0.2);
  --shadow-glow-p:    0 0 24px rgba(153,0,204,0.2);

  /* Typography */
  --font-family:      'Gordita', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base:   0.9375rem;
  --line-height-base: 1.65;

  /* Transitions */
  --ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --transition:       0.22s var(--ease);

  /* Soft tints for badge backgrounds */
  --primary-soft:     rgba(255,204,0,0.1);
  --orange-soft:      rgba(255,102,0,0.1);
  --purple-soft:      rgba(153,0,204,0.1);
  --success-soft:     rgba(0,230,118,0.1);
  --danger-soft:      rgba(255,102,0,0.1);
}

/* ─── Light Theme Override ──────────────────────────────────────────────── */
/* Applied when <html data-theme="light"> — all three contexts share this.  */
[data-theme="light"] {
  /* Surfaces */
  --bg-base:          #f4f4f6;
  --bg-secondary:     #eaeaed;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f9f9fb;
  --bg-glass:         rgba(0,0,0,0.03);
  --bg-glass-hover:   rgba(0,0,0,0.055);
  --sidebar-bg:       #ffffff;

  /* Text */
  --text-primary:     #0f0f10;
  --text-secondary:   #4a4a55;
  --text-muted:       #3c3c3c;
  --text-inverse:     #ffffff;

  /* Borders */
  --border-color:     rgba(0,0,0,0.08);
  --border-bright:    rgba(0,0,0,0.13);
  --border-accent:    rgba(153,0,204,0.3);

  /* Shadows — lighter for light bg */
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:        0 10px 40px rgba(0,0,0,0.12);
  --shadow-glow-y:    0 0 24px rgba(255,204,0,0.22);
  --shadow-glow-o:    0 0 24px rgba(255,102,0,0.18);
  --shadow-glow-p:    0 0 24px rgba(153,0,204,0.18);

  /* Tints */
  --primary-soft:     rgba(255,204,0,0.12);
  --orange-soft:      rgba(255,102,0,0.10);
  --purple-soft:      rgba(153,0,204,0.08);
  --success-soft:     rgba(0,200,100,0.10);
  --danger-soft:      rgba(255,50,50,0.10);
}

h1, h2, h3, h4, h5, h6{
    letter-spacing: -0.03em !important;
}

span, div, p{
    letter-spacing: -0.02em !important;
}

/* ── Light-theme base ───────────────────────────────────────────────────── */
[data-theme="light"] body  { background: var(--bg-base); color: var(--text-primary); }
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6   { color: var(--text-primary); }
[data-theme="light"] footer h6   { color: #fff; }

/* ── Light-theme Bootstrap shims ────────────────────────────────────────── */
[data-theme="light"] .text-muted     { color: var(--text-muted) !important; }
[data-theme="light"] .bg-light       { background: var(--bg-secondary) !important; }
[data-theme="light"] .bg-white       { background: var(--bg-card)      !important; }
[data-theme="light"] .bg-dark        { background: #1a1a1a             !important; }
[data-theme="light"] .bg-dark-subtle { background: #e8e8eb             !important; }

/* Subtle tint overrides for light theme — make them visible on white */
[data-theme="light"] .bg-primary-subtle   { background: rgba(153,0,204,0.07)  !important; }
[data-theme="light"] .bg-success-subtle   { background: rgba(0,180,80,0.10)   !important; }
[data-theme="light"] .bg-warning-subtle   { background: rgba(255,160,0,0.10)  !important; }
[data-theme="light"] .bg-danger-subtle    { background: rgba(220,38,38,0.08)  !important; }
[data-theme="light"] .bg-info-subtle      { background: rgba(153,0,204,0.07)  !important; }
[data-theme="light"] .bg-secondary-subtle { background: rgba(0,0,0,0.05)      !important; }

/* ── Light-theme alerts ─────────────────────────────────────────────────── */
[data-theme="light"] .alert-danger  { background: #fff0ee; border-color: rgba(220,38,38,0.25); color: #c0392b; }
[data-theme="light"] .alert-success { background: #edfbf3; border-color: rgba(0,160,80,0.3);   color: #1a7a3c; }
[data-theme="light"] .alert-warning { background: #fffbea; border-color: rgba(200,140,0,0.3);  color: #8a6200; }
[data-theme="light"] .alert-info    { background: #f7eeff; border-color: rgba(153,0,204,0.25); color: #7a00a8; }
[data-theme="light"] .btn-close     { filter: none; opacity: 0.6; }

/* ── Light-theme nav ────────────────────────────────────────────────────── */
[data-theme="light"] .prolio-nav {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] .prolio-nav .nav-link       { color: var(--text-secondary) !important; }
[data-theme="light"] .prolio-nav .nav-link:hover,
[data-theme="light"] .prolio-nav .nav-link.active {
  color: var(--text-primary) !important;
  background: var(--bg-glass-hover);
}
[data-theme="light"] .prolio-nav .navbar-toggler-icon { filter: none; }

/* ── Light-theme hero ───────────────────────────────────────────────────── */
[data-theme="light"] .hero-section             { background: var(--bg-base); }
[data-theme="light"] .hero-section::before {
  background: radial-gradient(ellipse at center, rgba(153,0,204,0.06) 0%, transparent 65%);
}
[data-theme="light"] .hero-section::after {
  background: radial-gradient(ellipse at center, rgba(255,204,0,0.06) 0%, transparent 65%);
}
[data-theme="light"] .hero-map-svg {
  background: #f8f8fb;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg);
}
[data-theme="light"] .hero-float-pill {
  background: rgba(255,255,255,0.96);
  border-color: var(--border-bright);
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .hero-float-pill strong { color: var(--text-primary); }

/* ── Light-theme problem cards ──────────────────────────────────────────── */
[data-theme="light"] .problem-card {
  background: #ffffff;
  border-color: var(--border-color);
}
[data-theme="light"] .problem-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-bright);
}

/* ── Light-theme feature & pricing cards ────────────────────────────────── */
[data-theme="light"] .feature-card {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
}
[data-theme="light"] .feature-card:hover {
  border-color: var(--border-accent) !important;
}
[data-theme="light"] .pricing-card {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
}
[data-theme="light"] .pricing-featured {
  border-color: var(--c-yellow) !important;
}
[data-theme="light"] .testimonial-card {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
}

/* ── Light-theme "Who it's for" / bg-primary sections ───────────────────── */
/* These dark gradient sections intentionally stay dark in both themes. */
section.bg-primary {
    background: linear-gradient(135deg, #1a0033 0%, #0d0d0d 50%, #1a1000 100%);
}

[data-theme="light"] section.bg-primary {
  background: linear-gradient(135deg, #e4e2e5 0%, #fcfcfc 50%, #fff2dd 100%) !important;
}

/* ── Light-theme FAQ / accordion ────────────────────────────────────────── */
[data-theme="light"] #faq                     { background: var(--bg-secondary) !important; }
[data-theme="light"] .accordion-item          { border-color: var(--border-color) !important; }
[data-theme="light"] .accordion-button        { background: transparent !important; color: var(--text-primary) !important; }
[data-theme="light"] .accordion-button::after { filter: none; opacity: 0.6; }
[data-theme="light"] .accordion-button:not(.collapsed)::after { filter: none; opacity: 1; }
[data-theme="light"] .accordion-body          { color: var(--text-secondary); }
/* FAQ section inside bg-light (the home.php class is .bg-light) */
[data-theme="light"] .accordion-button.text-dark { color: var(--text-primary) !important; }

/* ── Light-theme comparison table ───────────────────────────────────────── */
[data-theme="light"] .comparison-table thead th    { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="light"] .comparison-table tbody td,
[data-theme="light"] .comparison-table tbody th    { background: #fff; color: var(--text-secondary); }
[data-theme="light"] .comparison-table tr:hover td { background: var(--bg-secondary) !important; }

/* ── Light-theme cards (Bootstrap .card) ────────────────────────────────── */
[data-theme="light"] .card             { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
[data-theme="light"] .card-header,
[data-theme="light"] .card-footer      { background: var(--bg-secondary); border-color: var(--border-color); }

/* ── Light-theme tables ─────────────────────────────────────────────────── */
[data-theme="light"] .table {
  color: var(--text-secondary);
  --bs-table-color: var(--text-secondary);
  --bs-table-border-color: var(--border-color);
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(0,0,0,0.025);
  --bs-table-striped-bg: rgba(0,0,0,0.015);
}
[data-theme="light"] .table thead th  { color: var(--text-muted); border-color: var(--border-color) !important; }
[data-theme="light"] .table td,
[data-theme="light"] .table th        { border-color: var(--border-color) !important; }

/* ── Light-theme forms ──────────────────────────────────────────────────── */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select     { background: #fff; border-color: var(--border-bright); color: var(--text-primary); }
[data-theme="light"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: #fff;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,0.15);
  color: var(--text-primary);
}
[data-theme="light"] .input-group-text {
  background: var(--bg-secondary);
  border-color: var(--border-bright);
  color: var(--text-secondary);
}
[data-theme="light"] .form-label      { color: var(--text-secondary); }
[data-theme="light"] .form-check-label { color: var(--text-secondary); }
[data-theme="light"] .form-select option { background: #fff; color: var(--text-primary); }

/* ── Light-theme modals ─────────────────────────────────────────────────── */
[data-theme="light"] .modal-content   { background: #fff; border-color: var(--border-bright); }
[data-theme="light"] .modal-header    { border-color: var(--border-color); }
[data-theme="light"] .modal-footer    { border-color: var(--border-color); }
[data-theme="light"] .modal-title     { color: var(--text-primary); }

/* ── Light-theme dropdowns ──────────────────────────────────────────────── */
[data-theme="light"] .dropdown-menu   { background: #fff; border-color: var(--border-bright); box-shadow: var(--shadow-lg); }
[data-theme="light"] .dropdown-item   { color: var(--text-secondary); }
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="light"] .dropdown-divider { border-color: var(--border-color); }

/* ── Light-theme toasts ─────────────────────────────────────────────────── */
[data-theme="light"] .toast         { background: #fff; border-color: var(--border-bright); color: var(--text-primary); }
[data-theme="light"] .toast-header  { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }

/* ── Light-theme sidebar ─────────────────────────────────────────────────  */
[data-theme="light"] .portal-sidebar,
[data-theme="light"] .admin-sidebar {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .sidebar-brand,
[data-theme="light"] .admin-brand       { border-color: var(--border-color) !important; }
[data-theme="light"] .sidebar-footer    { background: transparent; border-color: var(--border-color) !important; }
[data-theme="light"] .sidebar-section-label,
[data-theme="light"] .admin-sidebar-label { color: var(--text-muted); }

[data-theme="light"] .sidebar-nav .nav-link,
[data-theme="light"] .admin-nav-link       { color: var(--text-secondary); }
[data-theme="light"] .sidebar-nav .nav-link:hover,
[data-theme="light"] .admin-nav-link:hover  { background: var(--bg-glass-hover); color: var(--text-primary); }
[data-theme="light"] .sidebar-nav .nav-link.active { background: var(--primary-soft); color: var(--c-yellow) !important; }
[data-theme="light"] .admin-nav-link.active         { background: var(--purple-soft);  color: var(--c-purple) !important; }
[data-theme="light"] .sidebar-nav .nav-link-highlight {
  border-color: rgba(153,0,204,0.25);
  color: var(--c-purple) !important;
}

[data-theme="light"] .sidebar-footer div   { color: #4a4a55 !important; }
[data-theme="light"] .sidebar-footer i   { color: #4a4a55 !important; }
[data-theme="light"] .sidebar-footer a   { color: #4a4a55 !important; border: 1px solid #4a4a55 !important;  }

/* ── Light-theme topbars ─────────────────────────────────────────────────  */
[data-theme="light"] .portal-topbar,
[data-theme="light"] .admin-topbar {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .topbar-title,
[data-theme="light"] .admin-page-title { color: var(--text-primary); }

/* ── Light-theme portal / admin content areas ───────────────────────────── */
[data-theme="light"] .portal-body,
[data-theme="light"] .portal-content,
[data-theme="light"] .admin-body,
[data-theme="light"] .admin-content    { background: var(--bg-base); }

[data-theme="light"] .portal-topbar .text-muted,
[data-theme="light"] .admin-topbar .text-muted { color: var(--text-muted) !important; }

/* ── Light-theme portal metric & investment cards ────────────────────────  */
[data-theme="light"] .metric-card,
[data-theme="light"] .investment-card,
[data-theme="light"] .doc-card,
[data-theme="light"] .report-type-card,
[data-theme="light"] .admin-kpi-card   { background: #ffffff; border-color: var(--border-color); }
[data-theme="light"] .metric-value     { color: var(--text-primary); }
[data-theme="light"] .metric-label     { color: var(--text-muted); }

/* ── Light-theme schedule timeline ──────────────────────────────────────── */
[data-theme="light"] .schedule-timeline { background: #ffffff; border-color: var(--border-color); }
[data-theme="light"] .schedule-timeline .border-bottom { border-color: var(--border-color) !important; }
[data-theme="light"] .schedule-timeline .timeline-row:hover { background: var(--bg-secondary); }

/* ── Light-theme upload dropzone ─────────────────────────────────────────  */
[data-theme="light"] .upload-dropzone {
  border-color: rgba(153,0,204,0.25) !important;
  background: rgba(153,0,204,0.02) !important;
}
[data-theme="light"] .upload-dropzone:hover,
[data-theme="light"] .upload-dropzone.drag-over {
  background: rgba(153,0,204,0.04) !important;
  border-color: rgba(153,0,204,0.4) !important;
}

/* ── Light-theme progress bars ──────────────────────────────────────────── */
[data-theme="light"] .progress         { background: rgba(0,0,0,0.08); }

/* ── Light-theme admin KPI card hover accent ────────────────────────────── */
[data-theme="light"] .admin-kpi-card:hover { border-color: rgba(153,0,204,0.25); box-shadow: 0 0 20px rgba(153,0,204,0.08) !important; }

/* ── Light-theme nav-tabs (admin settings) ───────────────────────────────  */
[data-theme="light"] .nav-tabs               { border-color: var(--border-color); }
[data-theme="light"] .nav-tabs .nav-link      { color: var(--text-muted); background: transparent; }
[data-theme="light"] .nav-tabs .nav-link:hover { color: var(--text-secondary); background: var(--bg-secondary); }
[data-theme="light"] .nav-tabs .nav-link.active {
  background: #ffffff;
  border-color: var(--border-color) var(--border-color) #ffffff;
  color: var(--text-primary);
}

/* ── Light-theme admin buttons override (keep purple in light) ───────────  */
[data-theme="light"] .admin-content .btn-primary,
[data-theme="light"] .admin-topbar  .btn-primary   { background: var(--c-purple); border-color: var(--c-purple); color: #fff; }
[data-theme="light"] .admin-content .btn-outline-primary,
[data-theme="light"] .admin-topbar  .btn-outline-primary { color: var(--c-purple); border-color: var(--c-purple); }

/* ── Light-theme pagination ──────────────────────────────────────────────  */
[data-theme="light"] .page-link            { background: #fff; border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="light"] .page-link:hover      { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-bright); }
[data-theme="light"] .page-item.active .page-link { background: var(--c-purple); border-color: var(--c-purple); color: #fff; }
[data-theme="light"] .page-item.disabled .page-link { background: #fff; opacity: 0.4; }

/* ── Light-theme admin modal ─────────────────────────────────────────────  */
[data-theme="light"] .admin-content .modal-content {
  background: #fff;
  border-color: rgba(153,0,204,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 40px rgba(153,0,204,0.06);
}

/* ── Light-theme notif / nav badges ──────────────────────────────────────  */
[data-theme="light"] .notif-dropdown {
  background: #fff !important;
  border-color: var(--border-bright) !important;
}

/* ── Light-theme footer — always stays dark ──────────────────────────────  */
[data-theme="light"] .prolio-footer {
  background: #0a0a0a !important;
}

/* ── Smooth theme transition for all themed elements ─────────────────────  */
html { transition: background-color 0.25s ease, color 0.25s ease; }
body, .portal-sidebar, .admin-sidebar, .portal-topbar, .admin-topbar,
.prolio-nav, .card, .dropdown-menu, .metric-card, .investment-card,
.doc-card, .admin-kpi-card, .report-type-card, .schedule-timeline,
.modal-content, .accordion-button, .form-control, .form-select {
  transition: background 0.25s ease, background-color 0.25s ease,
              border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* ─── Theme Toggle Button ───────────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-bright);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}
.theme-toggle:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ─── Base Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-primary); }

a { color: var(--color-primary); text-decoration: none !important; }
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; }

/* ─── Typography Utilities ──────────────────────────────────────────────── */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.x-small   { font-size: 0.72rem !important; }
.tracking-wide { letter-spacing: 0.06em; }
.lh-tight  { line-height: 1.2; }
.lh-lg     { line-height: 1.8; }
.ls-1      { letter-spacing: 0.05em; }
.text-muted { color: var(--text-secondary) !important; }

/* ─── Color Utilities ───────────────────────────────────────────────────── */
.text-primary   { color: var(--c-yellow)  !important; }
.text-accent    { color: var(--c-orange)  !important; }
.text-purple    { color: var(--c-purple)  !important; }
.text-success   { color: var(--color-success) !important; }
.text-danger    { color: var(--c-orange)  !important; }
.text-warning   { color: var(--c-yellow)  !important; }
.text-info      { color: var(--c-purple)  !important; }

.bg-primary    { background-color: var(--c-yellow)  !important; color: #000; }
.bg-primary-soft { background-color: var(--primary-soft) !important; }
.bg-orange-soft  { background-color: var(--orange-soft)  !important; }
.bg-purple-soft  { background-color: var(--purple-soft)  !important; }

/* Bootstrap subtle overrides */
.bg-primary-subtle   { background-color: var(--primary-soft) !important; }
.bg-success-subtle   { background-color: var(--success-soft) !important; }
.bg-warning-subtle   { background-color: var(--primary-soft) !important; }
.bg-danger-subtle    { background-color: var(--danger-soft)  !important; }
.bg-info-subtle      { background-color: var(--purple-soft)  !important; }
.bg-secondary-subtle { background-color: rgba(255,255,255,0.05) !important; }
.bg-dark-subtle      { background-color: #111 !important; }

/* ─── Noise texture overlay helper ─────────────────────────────────────── */
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
}

/* ─── Bootstrap Overrides ───────────────────────────────────────────────── */
.btn {
  font-family: var(--font-family);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: #000;
  box-shadow: 0 0 0 0 rgba(255,204,0,0);
}
.btn-primary:hover, .btn-primary:focus {
  background: #ffe033;
  border-color: #ffe033;
  color: #000;
  box-shadow: var(--shadow-glow-y);
  transform: translateY(-1px);
}
.btn-primary:active { background: #e6b800 !important; border-color: #e6b800 !important; color: #000 !important; transform: none; }

.btn-outline-primary {
  color: var(--c-yellow);
  border-color: var(--c-yellow);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: #000;
  box-shadow: var(--shadow-glow-y);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-bright);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-bright);
  color: var(--text-primary);
}

.btn-outline-light {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.btn-light {
  background: var(--c-white);
  border-color: var(--c-white);
  color: #000 !important;
  font-weight: 700;
}
.btn-light:hover {
  background: #f0f0f0;
  border-color: #f0f0f0;
  color: #000 !important;
  box-shadow: 0 0 24px rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

/* Inputs */
.form-control, .form-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
  background: var(--bg-card);
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,0.15);
  color: var(--text-primary);
  outline: none;
}
.form-label { color: var(--text-secondary); font-weight: 500; font-size: 0.85rem; }
.form-select option { background: var(--bg-card); color: var(--text-primary); }

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.card-header, .card-footer {
  background: transparent;
  border-color: var(--border-color);
}

/* Badge */
.badge { font-weight: 600; }

/* Alert */
.alert-danger  { background: var(--danger-soft);  border-color: rgba(255,102,0,0.3);  color: #ff9966; }
.alert-success { background: var(--success-soft); border-color: rgba(0,230,118,0.3); color: #00e676; }
.alert-warning { background: var(--primary-soft); border-color: rgba(255,204,0,0.3);  color: var(--c-yellow); }
.alert-info    { background: var(--purple-soft);  border-color: rgba(153,0,204,0.3); color: #cc66ff; }
.btn-close { filter: invert(1) opacity(0.5); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important; }

/* Accordion */
.accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--border-color) !important; }
.accordion-button {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  font-family: var(--font-family);
  box-shadow: none !important;
}
.accordion-button::after { filter: invert(1) opacity(0.5); }
.accordion-button:not(.collapsed)::after { filter: invert(0.8) sepia(1) saturate(3) hue-rotate(5deg); }
.accordion-body { color: var(--text-secondary); padding-top: 0; }

/* Modals */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
}
.modal-header { border-bottom-color: var(--border-color); }
.modal-footer { border-top-color: var(--border-color); }

/* ─── Navigation ────────────────────────────────────────────────────────── */
.prolio-nav {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 0;
  transition: background var(--transition);
}
.prolio-nav .navbar-brand {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}
.prolio-nav .navbar-brand span { color: var(--c-yellow); }
.prolio-nav .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.4rem 0.7rem !important;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.prolio-nav .nav-link:hover,
.prolio-nav .nav-link.active {
  color: var(--text-primary) !important;
  background: var(--bg-glass-hover);
}
.prolio-nav .navbar-toggler { border-color: var(--border-color); }
.prolio-nav .navbar-toggler-icon { filter: invert(0.8); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero-section {
  background: var(--bg-base);
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Radial glow backdrops */
.hero-section::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 55%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255,204,0,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(153,0,204,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.hero-section h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.hero-section h1 .text-primary { color: var(--c-purple) !important; }

/* ─── Hero Visual: Asset Map / Property Constellation ───────────────────── */
.hero-asset-map {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

.hero-map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  background: #080808;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), var(--shadow-lg), 0 0 80px rgba(153,0,204,0.07);
  overflow: visible;
}

/* Floating notification pills */
.hero-float-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(20,20,20,0.92);
  border: 1px solid var(--border-bright);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.hero-float-pill strong { color: var(--text-primary); }

.hero-float-top {
  top: 12%;
  right: -4%;
  animation: floatY 4s ease-in-out infinite;
}
.hero-float-btm {
  bottom: 14%;
  left: -4%;
  animation: floatY 5s ease-in-out infinite 1.2s;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ─── Problem Section ───────────────────────────────────────────────────── */
.problem-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem !important;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  height: 100%;
}
.problem-card:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-bright);
  transform: translateY(-2px);
}
.problem-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Feature Cards ─────────────────────────────────────────────────────── */
.feature-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.feature-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-glow-y) !important;
  transform: translateY(-4px);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}
.hover-shadow:hover { box-shadow: var(--shadow-md) !important; }
.hover-lift { transition: transform var(--transition); }
.hover-lift:hover { transform: translateY(-3px); }

/* ─── Pricing Cards ─────────────────────────────────────────────────────── */
.pricing-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}
.pricing-featured {
  background: var(--bg-card) !important;
  border-color: var(--c-yellow) !important;
  box-shadow: 0 0 0 1px var(--c-yellow), var(--shadow-glow-y) !important;
}
.pricing-featured:hover {
  box-shadow: 0 0 0 1px var(--c-yellow), 0 20px 60px rgba(255,204,0,0.18) !important;
}

/* ─── Testimonials ──────────────────────────────────────────────────────── */
.testimonial-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  border-color: var(--border-bright) !important;
  transform: translateY(-2px);
}

/* ─── Comparison Table ──────────────────────────────────────────────────── */
.comparison-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
}
.comparison-table thead th {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
  white-space: nowrap;
}
.comparison-table tbody td, .comparison-table tbody th {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.comparison-table .bg-primary-soft td { background: rgba(255,204,0,0.05) !important; }
.comparison-table tr:hover td { background: var(--bg-card) !important; }

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
#faq { background: var(--bg-secondary) !important; }

/* ─── Sections ──────────────────────────────────────────────────────────── */
.bg-light  { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.bg-white  { background: var(--bg-card) !important; }
.bg-dark   { background: var(--bg-base) !important; }
section.bg-primary {
  background: linear-gradient(135deg, #1a0033 0%, #0d0d0d 50%, #1a1000 100%) !important;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
section.bg-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,204,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}
section.bg-primary .text-white { color: var(--text-primary) !important; }
section.bg-primary .opacity-90 { opacity: 0.75 !important; }

/* ─── Contact section ───────────────────────────────────────────────────── */
.contact-method-icon {
  background: var(--primary-soft) !important;
  border-radius: var(--radius-sm);
}

/* ─── Policy pages ──────────────────────────────────────────────────────── */
.policy-body { color: var(--text-secondary); }
.policy-body p, .policy-body li { color: var(--text-secondary); }
.policy-body h5 { color: var(--text-primary); }
.policy-body a { color: var(--c-yellow); }
.policy-body a:hover { color: var(--color-primary-dark); }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.prolio-footer {
  font-family: var(--font-family);
  background: var(--bg-base) !important;
  border-top: 1px solid var(--border-color);
}
.prolio-footer .text-muted-white { color: rgba(255,255,255,0.45) !important; }
.prolio-footer .hover-white:hover { color: var(--c-yellow) !important; transition: color var(--transition); }
.prolio-footer a { color: rgba(255,255,255,0.55); }
.prolio-footer a:hover { color: var(--c-yellow) !important; }

/* ─── Notifications ─────────────────────────────────────────────────────── */
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
}
.toast-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* ─── Loading Spinner ───────────────────────────────────────────────────── */
.page-loading {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,0.07);
  border-top-color: var(--c-yellow);
  border-radius: 50%;
  animation: spinRing 0.75s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ─── Utility ───────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.overflow-y-auto { overflow-y: auto; }
.object-fit-cover { object-fit: cover; }

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,204,0,0.12); }
  50%       { box-shadow: 0 0 28px rgba(255,204,0,0.28); }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

@media (max-width: 575.98px) {
  .hero-section { min-height: auto; padding: 3rem 0; }
  .hero-section h1 { font-size: 2rem; }
  .hero-dashboard-preview .card { transform: none; }
}

/* ─── Logo theme switching ──────────────────────────────────────────────── */
/* Dark theme (default): show white logo, hide colour logo              */
.logo-dark  { display: inline-block; }
.logo-light { display: none; }
/* Light theme: show colour logo, hide white logo                       */
[data-theme="light"] .logo-dark  { display: none; }
[data-theme="light"] .logo-light { display: inline-block; }


[data-theme="light"] .jumbotron{
    background:linear-gradient(135deg,#f0f7ff,#e8f4fd) !important;
}

.jumbotron{
    background: linear-gradient(135deg, #1a0033 0%, #0d0d0d 50%, #1a1000 100%);
}

/* ─── Print ─────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .prolio-nav, .prolio-footer, .portal-sidebar, .portal-topbar,
  .admin-sidebar, .admin-topbar, .btn, [data-bs-toggle], #scrollTopBtn { display: none !important; }
  .portal-main, .admin-main { margin-left: 0 !important; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important; }
}

.card-header{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/*.card-header{
    border-bottom: 1px solid #999;
}

[data-theme="light"] .card-header{
    border-bottom: 1px solid #ccc !important;
}*/