/* n360-global.css v1.1 - 3rd Sep 2026 - WCAG 2.2 batch 1: tokens moved to n360-tokens.css, primary-fill, on-cyan  VERIFY-A11YB1-03SEP2026-K7WQD */
/* (first header stamp on this sheet) */
/* N360 Global CSS - loaded by Login and AccessDenied only. */
/* N360 DESIGN TOKENS incl. the synonyms this sheet was written against: --n360-accent (= --n360-cyan), --n360-depth (= --n360-dark), --n360-bg-light (= --n360-bg), --n360-card-bg, --n360-card-border - DECLARED IN n360-tokens.css (loaded right after Bootstrap on every page). Do not re-add a :root block here. */
/* v1.1: --n360-accent used to flip to #005a84 in dark mode here (nobody else did that) so that
   white text on it would pass. It is now the same accent in both modes and the rules below that
   put text on it use --n360-on-cyan; the fills use --n360-primary-fill. The --bs-body-bg override
   that lived here is gone too - AccessDenied paints its body with Bootstrap's .bg-light and Login
   sets its own surface in n360-login.css. */

/* Global Transitions */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* N360 Utility Overrides */
.text-n360-primary { color: var(--n360-primary) !important; }
.text-n360-accent { color: var(--n360-accent) !important; }


/* =========================================
   N360 GLOBAL TYPOGRAPHY
   (--n360-danger, --bs-body-font-family, --claude-shadow and --star-gold: see n360-tokens.css)
========================================= */

h1, h2, h3, h4, h5, .nav-link {
    font-family: 'Outfit', sans-serif;
}

/* =========================================
   GLOBAL UTILITIES (Extracted from Inline)
========================================= */
.bg-n360-depth {
    background-color: var(--n360-depth) !important;
}

/* n360-logo-light is shared through n360-tokens.css. */

.header-divider {
    height: 20px;
}

.btn-h42 {
    height: 42px;
}

.badge-micro {
    font-size: 0.6rem;
}

.text-micro {
    font-size: 0.65rem;
    font-weight: 700;
}

.text-line-height-16 {
    line-height: 1.6;
}

.progress-h10 {
    height: 10px;
}

.textarea-h120 {
    height: 120px;
}

/* =========================================
   LAYER CONTROLS & QUICK SEARCH
========================================= */
.layer-header {
    background: var(--n360-depth);
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: filter 0.4s ease;
}

    .layer-header img {
        height: 28px;
    }

.quick-search-wrapper {
    max-width: 650px;
}

.quick-search-country {
    max-width: 160px;
}

.quick-search-input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 6px 12px;
    font-size: 0.85rem;
}

    .quick-search-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

    .quick-search-input:focus {
        background: rgba(255,255,255,0.15);
        border-color: var(--n360-accent);
        color: white;
    }

    .quick-search-input:focus-visible {
        outline: 3px solid #ffbf47;
        outline-offset: 2px;
        box-shadow: 0 0 0 5px #003450;
    }

select.quick-search-input {
    cursor: pointer;
}

    select.quick-search-input option {
        color: #333;
        background: #fff;
    }

[data-bs-theme="dark"] select.quick-search-input option {
    color: #fff;
    background: #1a1a1a;
}

.suggestions-box {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 5000 !important;
    background: var(--bs-body-bg);
    border: 1px solid var(--n360-card-border);
    border-radius: 0 0 12px 12px;
    display: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    overflow: hidden;
}

.suggestion-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--n360-card-border);
    cursor: pointer !important;
    color: var(--bs-body-color);
    font-size: 0.85rem;
}

    .suggestion-item:hover {
        background: var(--n360-accent);
        color: var(--n360-on-cyan);
    }

/* =========================================
   CORE UI COMPONENTS
========================================= */
.n360-card {
    background: var(--n360-card-bg);
    border: 1px solid var(--n360-card-border);
    border-radius: 20px;
    box-shadow: var(--claude-shadow);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.alert-banner {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--n360-danger);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    color: var(--n360-danger);
}

.preferred-badge {
    background: var(--star-gold);
    color: var(--n360-depth);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.action-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--n360-card-border);
    background: var(--n360-card-bg);
    color: var(--n360-primary);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

    .action-btn:hover {
        background: var(--n360-primary-fill);
        color: var(--n360-on-primary);
        border-color: var(--n360-primary-fill);
        transform: translateY(-2px);
    }

[data-bs-theme="dark"] .action-btn {
    color: var(--n360-accent);
}

    [data-bs-theme="dark"] .action-btn:hover {
        background: var(--n360-accent);
        color: var(--n360-on-cyan);
    }

/* VERTICAL NAVIGATION */
.n360-nav-pills .nav-link {
    color: var(--bs-body-color);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    opacity: 0.7;
    border: 1px solid transparent;
    cursor: pointer;
}

    .n360-nav-pills .nav-link i {
        width: 24px;
        font-size: 1.1rem;
        margin-right: 12px;
        color: var(--n360-primary);
        transition: 0.2s;
        --fa-primary-color: var(--n360-primary);
        --fa-secondary-color: var(--n360-accent);
    }

[data-bs-theme="dark"] .n360-nav-pills .nav-link i {
    color: var(--n360-accent);
    --fa-primary-color: var(--n360-accent);
    --fa-secondary-color: var(--n360-primary);
}

.n360-nav-pills .nav-link:hover {
    opacity: 1;
    background: rgba(0, 90, 132, 0.05);
    border-color: var(--n360-card-border);
}

.n360-nav-pills .nav-link.active {
    background: var(--n360-primary-fill);
    color: var(--n360-on-primary);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 90, 132, 0.2);
}

    .n360-nav-pills .nav-link.active i {
        color: white;
        --fa-primary-color: white;
        --fa-secondary-color: rgba(255,255,255,0.7);
    }

/* MODALS & BLUR EFFECTS */
.container-xxl {
    transition: filter 0.4s ease;
}

body.modal-open .layer-header, body.modal-open .container-xxl {
    filter: blur(8px) brightness(0.85);
}

.form-floating > label {
    transition: all 0.25s ease-in-out !important;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transform: scale(0.85) translateY(-30px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.form-control:not(select) {
    cursor: text !important;
}

.form-check-input {
    cursor: pointer;
}

@keyframes n360pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px var(--n360-accent));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px var(--n360-accent));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px var(--n360-accent));
    }
}

.pulse-logo {
    animation: n360pulse 2s infinite ease-in-out;
    height: 40px;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   AI / SMART SEARCH ACCENT
========================================= */
.text-ai-accent { color: #8b5cf6 !important; }

/* =========================================
   TEXT UTILITIES (enhanced)
========================================= */
.text-micro {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge-micro { font-size: 0.6rem; }

/* =========================================
   LIVE STATUS DOT
========================================= */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--bs-danger);
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    animation: pulseDanger 1.5s infinite;
}

@keyframes pulseDanger {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220,53,69,0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(220,53,69,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* =========================================
   FADE-IN UTILITY
========================================= */
@keyframes n360FadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: n360FadeIn 0.3s ease forwards; }

/* =========================================
   FUZZY / SMART SEARCH DROPDOWN
========================================= */
.fuzzy-suggestion-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: var(--bs-body-bg);
    border: 1px solid var(--n360-accent);
    border-radius: 0 0 8px 8px;
    border-top: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none;
    max-height: 250px;
    overflow-y: auto;
}

.fuzzy-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.fuzzy-item:last-child { border-bottom: none; }
.fuzzy-item:hover { background: rgba(0,189,231,0.05); }

.fuzzy-highlight {
    color: var(--n360-primary);
    font-weight: 700;
    background: rgba(0,189,231,0.1);
    padding: 0 2px;
    border-radius: 2px;
}

/* Z-index context for provider search column */
.search-col-provider { z-index: 9999; }

/* =========================================
   CLEAR FIELD BUTTON (inside form-floating)
========================================= */
.clear-field-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--bs-secondary-color);
    display: none;
    z-index: 10;
    font-size: 1.2rem;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.clear-field-btn:hover { color: var(--bs-danger); }

/* Input with right-side clear button — prevents text overlap */
.input-has-clear { padding-right: 45px !important; }

/* =========================================
   GEOLOCATION BUTTON (appended to input-group)
========================================= */
.btn-geolocate {
    min-width: 48px;
    border-radius: 0 8px 8px 0 !important;
    transition: all 0.2s;
    color: var(--n360-primary);
    border-color: var(--bs-border-color);
}

.btn-geolocate:hover {
    background: var(--n360-primary-fill);
    color: var(--n360-on-primary);
    border-color: var(--n360-primary-fill);
}

[data-bs-theme="dark"] .btn-geolocate {
    color: var(--n360-accent);
}

[data-bs-theme="dark"] .btn-geolocate:hover {
    background: var(--n360-accent);
    color: var(--n360-on-cyan);
    border-color: var(--n360-accent);
}

.btn-geolocate.locating i { animation: n360pulse 0.8s infinite ease-in-out; }

/* form-floating inside input-group — prevents min-width collapse */
.input-group > .form-floating { min-width: 0; }
/* N360 shared keyboard focus safety (WCAG 2.2: 2.4.7 / 2.4.11). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #003450 !important;
}