/* n360-components.css v1.1 - 3rd Sep 2026 - batch 2 r3: .welcome-chip gets a dark-mode ink  VERIFY-A11YB2-03SEP2026-R6-T2QLD */
/* (was v1.0 - the shared N360 components, moved out of dashboard.css v1.11 verbatim  VERIFY-A11YB1-03SEP2026-R2-P4XNM) */
/* ============================================================================
   N360 SHARED COMPONENTS - the pieces of the V10 dashboard that are components
   rather than page layout, in one sheet so the CMS (and any future page) can
   build on them instead of re-drawing them.

   LOAD ORDER: bootstrap, n360-tokens.css, THIS SHEET, then the page sheet.
   On Index.cshtml it loads immediately before dashboard.css, so the cascade
   is byte-for-byte what it was when these rules lived inside dashboard.css.

   Every rule below was MOVED from dashboard.css v1.11 (r2, 3rd Sep 2026), not
   copied - dashboard.css v1.12 carries a one-line breadcrumb where each block
   was. Values unchanged; only the eight-space page-sheet indent was dropped.
   Reads the tokens (--n360-cyan, --n360-on-cyan, --n360-primary-fill,
   --n360-surface, --bs-*) and nothing else, so it renders the same on any
   page that loads the tokens sheet.

   WHAT IS HERE                      CMS EQUIVALENT (see CMS-DASHBOARD-GUIDE.md)
     .topbar h1 / .welcome-chip        the page header row
     .pill-btn                         the jump nav, view toggles
     .kpi-strip / .kpi-tile family     the KPI tiles (icon disc + value + label)
     .n360-card / .card-eyebrow        every panel card
     .section-title                    every section heading
     .n360-chip / .n360-pill           chips and pills
     .quick-link / .ql-row family      link tiles and link rows
     .btn-view / .btn-modify           the small row action buttons

   NOT here (still page-specific in dashboard.css): the hero search, the
   notice board, the search history rows (.hist-*), the Network Health panel
   tiles (.nh-tile / .nh-value / .nh-change - NOTE the CMS Network Health page
   uses a DIFFERENT .nh-* family; .nh-foot exists in both and collides, see
   the guide), the AI panel and the responsive layout rules.
   ============================================================================ */


/* ── PAGE HEADER ROW + PILL BUTTONS (.topbar h1, .welcome-chip, .pill-btn, .text-cyan) ── */
.topbar h1 { font-size: 1.55rem; font-weight: 700; margin:0; color: var(--bs-body-color); }
.welcome-chip { background: rgba(31,169,122,.12); color:#167756; border:1px solid rgba(31,169,122,.25); border-radius:50px; padding:.3rem .9rem; font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:.5rem; }
[data-bs-theme="dark"] .welcome-chip { color: #5fd3a5; border-color: rgba(95, 211, 165, .35); } /* batch 2 r3: #167756 was 2.6:1 on the dark page; this is 9:1 */
.pill-btn { border:1px solid var(--bs-border-color); background:var(--bs-body-bg); border-radius:50px; padding:.45rem 1rem; font-size:.82rem; font-weight:600; color:var(--bs-body-color); display:inline-flex; align-items:center; gap:.5rem; }
.pill-btn:hover { border-color: var(--n360-cyan); }
.pill-btn .text-cyan, .text-cyan { color: var(--n360-cyan); }


/* ── LIVE PULSE KEYFRAME (used by .kpi-live) ── */
@keyframes live { 0%{box-shadow:0 0 0 0 rgba(220,53,69,.55)} 70%{box-shadow:0 0 0 8px rgba(220,53,69,0)} 100%{box-shadow:0 0 0 0 rgba(220,53,69,0)} }


/* ── KPI TILES (.kpi-strip, .kpi-tile, .kpi-ic, .kpi-num, .kpi-lab, kpi-red / kpi-gold / kpi-live) ── */
/* KPI STRIP - v2: the strips' language (accent left edge, circular
   solid badge, same border/radius/shadow/hover as the rows below).
   Cyan default; kpi-red for Critical alerts, kpi-gold for Networks.
   kpi-live paints the critical tile while the count is above zero. */
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.kpi-tile { background: var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:3px solid var(--n360-cyan); border-radius:12px; padding:.95rem 1.15rem; display:flex; align-items:center; gap:.85rem; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:border-color .15s ease, box-shadow .15s ease; }
/* No hover state: the tiles are informational, not clickable -
   hover feedback invited clicks that do nothing. */
.kpi-ic { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;flex:none;background:var(--n360-cyan);color:var(--n360-on-cyan);box-shadow:0 2px 6px rgba(0,189,231,.35); }
.kpi-tile.kpi-red { border-left-color:#dc3545; }

.kpi-tile.kpi-red .kpi-ic { background:#dc3545; color:#fff; /* white icon on this red = 4.5:1; on-cyan would be navy under the default preset */ box-shadow:0 2px 6px rgba(220,53,69,.35); }
.kpi-tile.kpi-gold { border-left-color:#e0a93b; }

.kpi-tile.kpi-gold .kpi-ic { background:#e0a93b; color:var(--n360-dark); /* navy on gold = 8:1; white was 2.3:1 and on-cyan is white under crisis/blue */ box-shadow:0 2px 6px rgba(224,169,59,.35); }
/* Live state must read URGENT. Any background tint reads as "faded"
   next to three crisp white siblings - so the live tile stays crisp
   and the RED does the work: full-strength border doubled to a 2px
   ring (shadow ring, no layout shift), a resting red glow, the red
   number, and the pulsing badge. */
.kpi-tile.kpi-red.kpi-live { border-color:#dc3545; box-shadow: 0 0 0 1px #dc3545, 0 4px 14px rgba(220,53,69,.22); }
.kpi-tile.kpi-red.kpi-live:hover { border-color:#dc3545; box-shadow: 0 0 0 1px #dc3545, 0 6px 18px rgba(220,53,69,.28); }
.kpi-tile.kpi-red.kpi-live .kpi-num { color:#dc3545; }
.kpi-tile.kpi-red.kpi-live .kpi-ic { animation: live 1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .kpi-tile.kpi-red.kpi-live .kpi-ic { animation: none; } }
.kpi-num { font-family:'Outfit', sans-serif; font-weight:700; font-size:1.5rem; line-height:1; color: var(--bs-body-color); }
.kpi-lab { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bs-secondary-color); font-weight:600; margin-top:4px; }


/* ── CARDS (.n360-card, .card-eyebrow) ── */
/* CARDS - the THEME surface (sand under the Intaworld preset), so
   white fields pop on them exactly like the map page's search panel.
   Dark mode keeps its own tokens via the same variable. */
.n360-card { background: var(--n360-surface, var(--bs-body-bg)); border:1px solid var(--bs-border-color); border-radius:var(--bs-border-radius-xl, 1rem); box-shadow:0 10px 30px rgba(0,0,0,0.05); }
.card-eyebrow { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-secondary-color); font-weight:700; }


/* ── SECTION TITLE (.section-title) ── */
.section-title { font-family:'Outfit', sans-serif; font-weight:700; font-size:1.15rem; color:var(--bs-body-color); margin:0; }

/* Modal headings need the fill token, not the dark-mode link colour. */
.modal-header.bg-primary { background-color: var(--n360-primary-fill) !important; color: var(--n360-on-primary) !important; }


/* ── CHIPS (.n360-chip) ── */
.n360-chip { background:var(--n360-primary-fill); color:var(--n360-on-primary); padding:2px 6px 2px 10px; border-radius:50px; font-size:.74rem; display:inline-flex; align-items:center; gap:6px; margin:2px; font-weight:600; }
.n360-chip .x { cursor:pointer; opacity:.8; border:0; background:transparent; color:inherit; padding:0; line-height:1; }
.n360-chip .x:hover { opacity:1; }


/* ── QUICK LINKS (.quick-link, .ql-title, .ql-sub, .ql-row) ── */
/* QUICK LINKS - v2: the strips' language. Accent left edge, circular
   solid icon badge, same border/radius/shadow/hover as the search and
   notice rows and the KPI tiles. Markup unchanged - the plain <i>
   becomes the badge purely in CSS. */
.quick-link { display:flex; align-items:center; gap:.85rem; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--bs-border-color); border-left:3px solid var(--n360-cyan); background:var(--bs-body-bg); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; height:100%; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.quick-link:hover { border-color:var(--n360-cyan); box-shadow:0 4px 14px rgba(0,189,231,.14); }
.quick-link i { width:28px; height:28px; flex:none; border-radius:50%; background:var(--n360-cyan); color:var(--n360-on-cyan); display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; margin-top:0; text-align:center; box-shadow:0 2px 6px rgba(0,189,231,.35); }
.ql-title { font-weight:700; font-size:.86rem; color:var(--bs-body-color); }
.ql-sub { color:var(--bs-secondary-color); font-size:.74rem; margin-top:2px; line-height:1.4; }
.ql-row { display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; border:1px solid var(--bs-border-color); border-radius:9px; color:var(--bs-body-color); text-decoration:none; font-size:.86rem; font-weight:500; transition:.15s; margin-bottom:.5rem; }
.ql-row:hover { border-color:var(--n360-cyan); background:rgba(0,189,231,.04); }
.ql-row i { color:var(--n360-primary); font-size:.9rem; width:20px; text-align:center; }


/* ── KPI STRIP - single column below 576px ── */
@media (max-width: 575px) { .kpi-strip { grid-template-columns:1fr; } }


/* ── PILLS (.n360-pill, .pill-x) ── */
.n360-pill { background: var(--n360-primary-fill); color: var(--n360-on-primary); padding: 2px 10px; border-radius: 50px; font-size: 0.75rem; display: inline-flex; align-items: center; margin: 2px; font-weight: 600; }
.pill-x { background: none; border: 0; padding: 0; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.pill-x:focus-visible { outline: 2px solid var(--n360-cyan, #00bde7); outline-offset: 2px; border-radius: 4px; }


/* ── HOUSE SMALL BUTTONS (.btn-view, .btn-modify) ── */
.btn-view { background: var(--n360-primary-fill); color: var(--n360-on-primary); border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s ease; }
.btn-view:hover { background: var(--n360-dark); color: #fff; transform: translateY(-1px); }
[data-bs-theme="dark"] .btn-view:hover { background: var(--n360-cyan); color: var(--n360-on-cyan); } /* v1.11: was a literal #2bd9f7 + navy, which ignored the preset */
.btn-modify { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); border-radius: 8px; padding: 5px 9px; font-size: 0.78rem; line-height: 1.35; transition: all 0.15s ease; }
.btn-modify:hover { border-color: var(--n360-cyan); color: var(--n360-primary); transform: translateY(-1px); }

/* Shared titled tooltips: dashboard, provider and search/map results.
   White headings stay readable on the dark surface in every theme. */
.n360-tip { --bs-tooltip-max-width: 290px; --bs-tooltip-opacity: 1; }
.n360-tip .tooltip-inner {
    background: #0d1520;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.n360-tip .tooltip-arrow::before { border-bottom-color: #0d1520 !important; border-top-color: #0d1520 !important; }
.n360-tip .tip-head {
    display: block;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 5px;
}
.n360-tip .tip-head i { margin-right: 6px; }


/* Shared clear action, also used by the shortlist. */
.btn-clear-search {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #495057;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #495057;
    --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-clear-search { --bs-btn-color: #cfd8dd; --bs-btn-border-color: #6c757d; --bs-btn-hover-bg: #cfd8dd; --bs-btn-hover-border-color: #cfd8dd; --bs-btn-hover-color: #0b1114; }

/* Keep field edges legible without fading the whole control and its label. */
:is(#masterSearchForm, #stdSearchForm, #n360-login-form, #n360-preview-login-form) :is(.form-control, .form-select, .pill-field):not(:focus, :focus-visible) {
    box-shadow: 0 2px 5px rgb(18 48 66 / .14);
    border-color: color-mix(in srgb, var(--bs-body-color) 50%, var(--bs-body-bg));
}
:is(#masterSearchForm, #stdSearchForm) .form-floating:has(> :disabled),
:is(#masterSearchForm, #stdSearchForm) .form-floating > :disabled {
    opacity: 1;
}
:is(#masterSearchForm, #stdSearchForm) .form-floating > :disabled {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-color: color-mix(in srgb, var(--bs-body-color) 32%, var(--bs-body-bg));
}
:is(#masterSearchForm, #stdSearchForm) .form-floating > :disabled ~ label {
    color: var(--bs-secondary-color);
}
:is(#masterSearchForm, #stdSearchForm) .form-floating > :disabled ~ label::after {
    background-color: var(--bs-tertiary-bg);
}

        .adv-toggle { border: 1px solid rgba(var(--bs-primary-rgb, 13,110,253), .45); background: var(--bs-body-bg); color: var(--n360-primary); font-weight: 700; font-size: .86rem; padding: .5rem 1.15rem; border-radius: 50rem; display: inline-flex; align-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: color .15s ease, background .15s ease, border-color .15s ease; }
        .adv-toggle:hover { background: rgba(var(--bs-primary-rgb, 13,110,253), .06); border-color: rgba(var(--bs-primary-rgb, 13,110,253), .7); }
        .adv-toggle:hover { color: var(--n360-cyan); }
.adv-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }

.std-panel-head { background:#123e52; color:white; padding:.9rem 1.1rem; }
:is(.std-shell,#smartView) .n360-card, .provider-surface { border:1px solid color-mix(in srgb,var(--bs-border-color) 74%,#507388); box-shadow:0 3px 7px rgb(12 38 56 / .07),0 12px 28px -12px rgb(12 38 56 / .27); }

@media screen and (forced-colors: none) {
    html:not([data-contrast="1"]) body:is(.provider-workspace,:has(#smartView))::before {
        content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
        background:var(--bs-body-color); opacity:.13;
        mask:url("../img/workspace-world.svg") center / 110% auto no-repeat;
    }
}

:where(.signin-fields, #smartView, #standardView) .form-floating > .form-control:focus ~ label, :where(.signin-fields, #smartView, #standardView) .form-floating > .form-control:not(:placeholder-shown) ~ label, :where(.signin-fields, #smartView, #standardView) .form-floating > .form-select ~ label { color: var(--n360-primary); }