/* ============================================================
   RiskPonse - Main Stylesheet
   Smart Risk Identification & Emergency Response System

   Design direction: "civic dispatch".
   A barangay emergency tool used by a resident in the street on a
   phone and by staff on a laptop. The register is a calm, trustworthy
   operations console: deep civic navy carries trust and structure,
   and a single reserved urgent red is spent only where it means
   "act now" - the Report action, live hotlines, and critical severity.
   Everything else stays quiet so those signals never lose their voice.

   The look is driven through Bootstrap 5.3's own CSS variables so a
   single token change propagates across every page, badge and control
   without touching per-page markup.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    /* Brand - civic trust (a deliberate navy scale, not flat blue) */
    --rp-navy-900: #0b2440;
    --rp-navy-800: #0d2a52;
    --rp-navy-700: #123a68;
    --rp-primary:  #1b4f8a;   /* keeps the existing brand recognisable */
    --rp-primary-600: #24619f;
    --rp-primary-400: #4a90d9; /* focus ring / accents */
    --rp-primary-100: #dce8f5;
    --rp-primary-50:  #eef4fb;
    --rp-primary-dark: var(--rp-navy-700);
    --rp-primary-light: var(--rp-primary-100);

    /* Urgent - reserved: emergency action, live hotlines, critical severity */
    --rp-urgent:      #d92d20;
    --rp-urgent-dark: #b42318;

    /* Signals */
    --rp-warning: #f79009;
    --rp-warning-dark: #b54708;
    --rp-success: #12805c;
    --rp-info:    #0e7490;
    --rp-secondary: #5b6b82;

    /* Surfaces & ink */
    --rp-dark:   var(--rp-navy-900);
    --rp-light:  #f7f9fc;
    --rp-body-bg: #eef1f6;
    --rp-surface: #ffffff;
    --rp-surface-2: #f7f9fc;
    --rp-border: #e3e8ef;
    --rp-ink: #0f172a;
    --rp-ink-muted: #5b6b82;

    /* Elevation - soft, layered, low-contrast */
    --rp-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --rp-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --rp-shadow:    0 6px 18px rgba(15,23,42,.09);
    --rp-shadow-lg: 0 16px 44px rgba(15,23,42,.14);
    /* Legacy names still referenced elsewhere */
    --rp-card-shadow: var(--rp-shadow-sm);
    --rp-card-hover-shadow: var(--rp-shadow);

    /* Radius scale */
    --rp-radius-sm: .5rem;
    --rp-radius:    .75rem;
    --rp-radius-lg: 1.1rem;

    --rp-transition: all 0.25s cubic-bezier(.4,0,.2,1);

    /* ---- Bootstrap 5.3 variable overrides: one place, whole app ---- */
    --bs-primary: var(--rp-primary);
    --bs-primary-rgb: 27, 79, 138;
    --bs-danger: var(--rp-urgent);
    --bs-danger-rgb: 217, 45, 32;
    --bs-dark: var(--rp-navy-900);          /* navbar / footer / CTA bands */
    --bs-dark-rgb: 11, 36, 64;
    --bs-success: var(--rp-success);
    --bs-success-rgb: 18, 128, 92;
    --bs-info: var(--rp-info);
    --bs-info-rgb: 14, 116, 137;
    --bs-warning: var(--rp-warning);
    --bs-warning-rgb: 247, 144, 9;

    --bs-body-bg: var(--rp-body-bg);
    --bs-body-color: var(--rp-ink);
    --bs-secondary-color: rgba(91,107,130,.9);
    --bs-tertiary-color: rgba(91,107,130,.65);
    --bs-border-color: var(--rp-border);

    --bs-link-color: var(--rp-primary);
    --bs-link-color-rgb: 27, 79, 138;
    --bs-link-hover-color: var(--rp-navy-700);
    --bs-link-hover-color-rgb: 18, 58, 104;

    --bs-border-radius: var(--rp-radius);
    --bs-border-radius-sm: var(--rp-radius-sm);
    --bs-border-radius-lg: var(--rp-radius-lg);
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-pill: 50rem;

    --bs-body-font-family: 'Public Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
    --bs-body-line-height: 1.6;
}

/* ---------- Global resets ---------- */
body {
    background-color: var(--bs-body-bg);
    font-family: var(--bs-body-font-family);
    color: var(--rp-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main { flex: 1; }

/* Display / headings carry the personality: Space Grotesk gives a quiet
   control-room, technical character while Public Sans keeps body copy at
   government-service legibility for a stressed reader. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
    font-family: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
    letter-spacing: -0.02em;
}

a {
    color: var(--rp-primary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--rp-navy-700); }

::selection { background: rgba(27,79,138,.15); }

/* Accessible, consistent focus ring across interactive elements. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(74,144,217,.55);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Navigation ----------
   The real navbar is <nav class="navbar navbar-dark bg-dark">. It picks up
   the navy chrome automatically via the --bs-dark override; the rules below
   add the branded polish. */
.navbar.bg-dark {
    background-image: linear-gradient(120deg, var(--rp-navy-900), var(--rp-navy-800));
    box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(11,36,64,.25);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.82);
    font-weight: 500;
    border-radius: var(--rp-radius-sm);
    transition: background-color .2s ease, color .2s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
.navbar-dark .navbar-nav .nav-link.active {
    box-shadow: inset 0 -2px 0 var(--rp-primary-400);
}
.dropdown-menu {
    border: 1px solid var(--rp-border);
    box-shadow: var(--rp-shadow);
    border-radius: var(--rp-radius);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--rp-radius-sm); }

/* Notification badge */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.65rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: var(--rp-warning);
    color: #241a00;
    font-weight: 700;
}

/* ---------- Hero ----------
   The hero opens on the operational truth of the product: a live map of the
   barangay with the two public actions beside it. The Report action is the
   one place the urgent red is spent, so it reads instantly against the navy. */
.hero-section {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(74,144,217,.35), transparent 60%),
        linear-gradient(135deg, var(--rp-navy-900) 0%, var(--rp-navy-800) 45%, var(--rp-primary) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Faint dot grid - a dispatch-console texture, kept low so it never competes. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: -50%;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
/* Soft floor so the section settles into the page instead of a hard edge. */
.hero-section::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent, rgba(11,36,64,.35));
    pointer-events: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 400px at 20% 120%, rgba(255,255,255,.06), transparent 70%);
    pointer-events: none;
}
.hero-section .container { z-index: 1; }
.hero-section h1 {
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.hero-section .lead { font-size: 1.2rem; opacity: 0.95; }

/* min-vh-50 is used in the hero markup but is not a Bootstrap utility. */
.min-vh-50 { min-height: 50vh; }

.hero-stat {
    padding-left: .9rem;
    border-left: 2px solid rgba(255,255,255,.22);
}
.hero-map-preview {
    background: rgba(11,36,64,.45) !important;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--rp-shadow-lg);
}

/* ---------- Emergency / hotline bars ---------- */
.emergency-bar {
    background: var(--rp-navy-900);
    color: #fff;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    overflow: hidden;
}
.emergency-bar .marquee {
    display: flex;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.emergency-bar .hotline-item {
    padding: 0 2rem;
    color: #ffd76a;
    font-weight: 600;
}
/* The red hotline band is intentional urgency - give it a subtle top hairline
   so it reads as a distinct alert strip, not just a coloured row. */
.hotline-bar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hotline-bar a { transition: background-color .15s ease; border-radius: .4rem; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-sm);
    transition: var(--rp-transition);
    background: var(--rp-surface);
}
.card:hover { box-shadow: var(--rp-shadow); }
.card-header {
    background: var(--rp-surface-2);
    border-bottom: 1px solid var(--rp-border);
    font-weight: 600;
}

/* Stat cards */
.stat-card {
    border-left: 4px solid var(--rp-primary);
    border-radius: var(--rp-radius);
}
.stat-card .stat-number {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rp-ink-muted);
}
.stat-card.stat-danger  { border-left-color: var(--rp-urgent); }
.stat-card.stat-warning { border-left-color: var(--rp-warning); }
.stat-card.stat-success { border-left-color: var(--rp-success); }
.stat-card.stat-info    { border-left-color: var(--rp-info); }
.stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: 0.12;
    position: absolute;
    right: 15px;
    top: 15px;
}

/* Feature cards - the coloured icon tiles come from Bootstrap
   background and text utilities in the markup. Here we only own
   the size, shape, and hover behaviour. */
.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--rp-radius);
    transition: var(--rp-transition);
    cursor: default;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--rp-shadow); }
.feature-card .feature-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;               /* squircle tile reads more modern than a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.6rem;
    transition: var(--rp-transition);
}
.feature-card:hover .feature-icon { transform: scale(1.06) rotate(-2deg); }

/* ---------- Severity & status badges (reserved colour lives here) ---------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; }
.severity-critical { background: var(--rp-urgent); color: #fff; }
.severity-high     { background: var(--rp-warning); color: #241a00; }
.severity-medium   { background: #fbbf24; color: #241a00; }
.severity-low      { background: var(--rp-success); color: #fff; }

.status-reported    { background: #2563a8; color: #fff; }
.status-verified    { background: #6941c6; color: #fff; }
.status-responding  { background: var(--rp-warning); color: #241a00; }
.status-resolved    { background: var(--rp-success); color: #fff; }
.status-closed      { background: #667085; color: #fff; }
.status-false_alarm { background: #cbd5e1; color: #1e293b; }

/* ---------- Map styles ---------- */
.map-container {
    border-radius: var(--rp-radius);
    overflow: hidden;
    box-shadow: var(--rp-shadow-sm);
    border: 1px solid var(--rp-border);
}
.map-container .leaflet-container { border-radius: var(--rp-radius); }

.marker-critical {
    background: var(--rp-urgent);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 16px; height: 16px;
    box-shadow: 0 0 8px rgba(217,45,32,0.6);
    animation: pulse-marker 1.5s infinite;
}
.marker-high {
    background: var(--rp-warning);
    border: 2px solid #fff; border-radius: 50%;
    width: 14px; height: 14px;
    box-shadow: 0 0 6px rgba(247,144,9,0.5);
}
.marker-medium {
    background: #fbbf24;
    border: 2px solid #fff; border-radius: 50%;
    width: 12px; height: 12px;
}
.marker-low {
    background: var(--rp-success);
    border: 2px solid #fff; border-radius: 50%;
    width: 10px; height: 10px;
}
@keyframes pulse-marker {
    0%, 100% { box-shadow: 0 0 8px rgba(217,45,32,0.6); }
    50%      { box-shadow: 0 0 16px rgba(217,45,32,0.9); }
}

.leaflet-popup-content-wrapper {
    border-radius: var(--rp-radius) !important;
    box-shadow: var(--rp-shadow) !important;
}
.leaflet-popup-content { margin: 12px 16px !important; font-size: 0.9rem; }
.popup-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.popup-category { color: var(--rp-ink-muted); font-size: 0.8rem; }

/* ---------- Chatbot widget ---------- */
.chatbot-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rp-navy-700), var(--rp-primary));
    color: #fff;
    border: none;
    box-shadow: 0 8px 22px rgba(11,36,64,0.4);
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    z-index: 1050;
    transition: var(--rp-transition);
    cursor: pointer;
}
.chatbot-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 28px rgba(11,36,64,0.5);
    color: #fff;
}
.chatbot-panel {
    position: fixed;
    bottom: 90px; right: 24px;
    width: 380px;
    max-height: 550px;
    background: #fff;
    border-radius: var(--rp-radius-lg);
    box-shadow: var(--rp-shadow-lg);
    z-index: 1049;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    border: 1px solid var(--rp-border);
}
.chatbot-panel.active { display: flex; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chatbot-header {
    background: linear-gradient(135deg, var(--rp-navy-800), var(--rp-primary));
    color: #fff;
    padding: 1rem;
    display: flex; justify-content: space-between; align-items: center;
}
.chatbot-header h6 { margin: 0; font-weight: 700; }
.chatbot-header .btn-close-chat {
    background: none; border: none; color: #fff;
    font-size: 1.2rem; cursor: pointer; opacity: 0.7;
    transition: opacity 0.2s;
}
.chatbot-header .btn-close-chat:hover { opacity: 1; }
.chatbot-messages {
    flex: 1; overflow-y: auto;
    padding: 1rem;
    background: var(--rp-surface-2);
    max-height: 350px;
}
.chatbot-input {
    padding: 0.75rem;
    border-top: 1px solid var(--rp-border);
    display: flex; gap: 0.5rem;
}
.chatbot-input input {
    flex: 1;
    border: 1px solid var(--rp-border);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow .2s;
}
.chatbot-input input:focus {
    border-color: var(--rp-primary);
    box-shadow: 0 0 0 3px rgba(27,79,138,.12);
}
.chatbot-input button {
    background: var(--rp-primary);
    color: #fff; border: none; border-radius: 50%;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--rp-transition);
}
.chatbot-input button:hover { background: var(--rp-navy-700); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 10px; top: 0; bottom: 0;
    width: 2px;
    background: var(--rp-border);
}
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -24px; top: 4px;
    width: 12px; height: 12px;
    background: var(--rp-primary);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--rp-primary);
}
.timeline-item.success::before { background: var(--rp-success); box-shadow: 0 0 0 2px var(--rp-success); }
.timeline-item.warning::before { background: var(--rp-warning); box-shadow: 0 0 0 2px var(--rp-warning); }
.timeline-item.info::before    { background: var(--rp-info); box-shadow: 0 0 0 2px var(--rp-info); }
.timeline-time { font-size: 0.75rem; color: var(--rp-ink-muted); }

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--rp-radius-sm);
    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-lg { border-radius: var(--rp-radius); }
.btn:active { transform: translateY(1px); }

/* The primary action colour = civic navy (Bootstrap's btn-primary). */
.btn-primary {
    --bs-btn-bg: var(--rp-primary);
    --bs-btn-border-color: var(--rp-primary);
    --bs-btn-hover-bg: var(--rp-navy-700);
    --bs-btn-hover-border-color: var(--rp-navy-700);
    --bs-btn-active-bg: var(--rp-navy-800);
    --bs-btn-active-border-color: var(--rp-navy-800);
}

/* btn-danger IS the emergency action - spend the reserved red here so the
   "Report an Incident" CTA stands out sharply against the navy hero and
   reads as "act now". This restores red's meaning across the app. */
.btn-danger {
    --bs-btn-bg: var(--rp-urgent);
    --bs-btn-border-color: var(--rp-urgent);
    --bs-btn-hover-bg: var(--rp-urgent-dark);
    --bs-btn-hover-border-color: var(--rp-urgent-dark);
    --bs-btn-active-bg: var(--rp-urgent-dark);
    --bs-btn-active-border-color: var(--rp-urgent-dark);
    box-shadow: 0 6px 16px rgba(217,45,32,.28);
}
.btn-danger:hover { box-shadow: 0 8px 22px rgba(217,45,32,.34); }
.btn-outline-danger {
    --bs-btn-color: var(--rp-urgent);
    --bs-btn-border-color: var(--rp-urgent);
    --bs-btn-hover-bg: var(--rp-urgent);
    --bs-btn-hover-border-color: var(--rp-urgent);
    --bs-btn-active-bg: var(--rp-urgent-dark);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-color: var(--rp-border);
    border-radius: var(--rp-radius-sm);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--rp-primary);
    box-shadow: 0 0 0 0.2rem rgba(27,79,138,0.15);
}
.form-label { font-weight: 600; color: #1e293b; }

/* ---------- Auth pages ---------- */
.auth-container {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(800px 400px at 100% 0%, rgba(74,144,217,.18), transparent 60%),
        linear-gradient(135deg, #eef1f6 0%, #e4e9f2 100%);
}
.auth-card {
    width: 100%;
    max-width: 450px;
    border-radius: var(--rp-radius-lg);
    box-shadow: var(--rp-shadow-lg);
    border: 1px solid var(--rp-border);
}
.auth-header {
    background: linear-gradient(135deg, var(--rp-navy-800), var(--rp-primary));
    color: #fff;
    padding: 2rem;
    border-radius: var(--rp-radius-lg) var(--rp-radius-lg) 0 0;
    text-align: center;
}
.auth-header h4 { font-weight: 700; margin-bottom: 0.25rem; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: rgba(27,79,138,0.04); }
.table > thead {
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .05em;
    color: var(--rp-ink-muted);
}
.table-hover tbody tr { transition: background-color .15s ease; }

/* ---------- Footer ----------
   The real footer is <footer class="footer bg-dark"> - navy via --bs-dark. */
footer.footer {
    border-top: 3px solid var(--rp-primary);
}
footer.footer h6 { color: #fff; font-weight: 600; }
.footer-section {
    background: var(--rp-navy-900);
    color: rgba(255,255,255,0.7);
    padding: 2rem 0 1rem;
}
.footer-section a { color: rgba(255,255,255,0.7); }
.footer-section a:hover { color: #fff; }

/* Hotline rows read "icon LABEL: number" on one line. In a narrow column the
   longest label ("BSJ Fire & Rescue:") leaves no room for the number, which then
   wraps. The hanging indent puts that wrapped line under the LABEL rather than
   back at the icon column, so it still reads as belonging to that hotline.
   1.6rem = the fixed icon width below plus its me-2 margin. */
.footer-hotlines li {
    padding-left: 1.6rem;
    text-indent: -1.6rem;
}
/* text-indent inherits, and the number link is its own block container (inline-flex
   for the 44px tap target), so without this reset it drags its own text 1.6rem left
   and prints on top of the label. */
.footer-hotlines li > a {
    text-indent: 0;
}
/* Font Awesome glyphs vary in width; a fixed box keeps every label starting at
   the same x and keeps the hanging indent above honest. */
.footer-hotlines li > i {
    width: 1.1rem;
    text-align: center;
}

/* ---------- Utilities ---------- */
.text-gradient {
    background: linear-gradient(135deg, var(--rp-primary), var(--rp-primary-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-danger {
    background: linear-gradient(135deg, var(--rp-navy-800), var(--rp-primary)) !important;
}

.loading-spinner {
    display: inline-block;
    width: 1.5rem; height: 1.5rem;
    border: 3px solid rgba(27,79,138,0.3);
    border-radius: 50%;
    border-top-color: var(--rp-primary);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}
.fade-in { animation: fadeIn 0.5s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Print ---------- */
@media print {
    .navbar, .chatbot-fab, .chatbot-panel, .footer, .footer-section, .btn { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #dee2e6; }
}