/* ==========================================================================
   NAR 3.0 — HIGH-READABILITY ERGONOMIC DESIGN SYSTEM & NATIVE MOBILE UX (v2.0)
   Developed by jsadsAI | Jose Santamaria
   Modes:
     - data-nar-theme="light"   (Default: Crisp Judicial Daylight, High Contrast)
     - data-nar-theme="reading" (Warm Archival Paper, Anti-Fatigue Typography)
     - data-nar-theme="dark"    (Tactical Cyber-Forensic Dark Deck)
   Features:
     - Complete Light/Reading Coverage (Chat, Support, Guide Dock, Forensics, VASP)
     - Strict Box Containment & Zero Text Overflow (Desktop, iPad & Mobile)
     - Dynamic Font Scaling (--nar-font-scale: 0.88 .. 1.32)
     - Native Mobile App Bottom Navigation Bar & Smooth View Transitions
   ========================================================================== */

@view-transition {
    navigation: auto;
}

:root {
    --nar-font-scale: 1;
    --nar-line-height-scale: 1;
    --nar-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --nar-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    font-size: calc(16px * var(--nar-font-scale, 1)) !important;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==========================================================================
   1. LIGHT MODE (DEFAULT — JUDICIAL DAYLIGHT HIGH-READABILITY PALETTE)
   ========================================================================== */
html:not([data-nar-theme="dark"]):not([data-nar-theme="reading"]),
html[data-nar-theme="light"] {
    color-scheme: light;

    /* NAR 2.0 / 3.0 Core Tokens */
    --nar-bg-base:             #F3F6FC;
    --nar-bg-surface:          #FFFFFF;
    --nar-bg-surface-elevated: #F8FAFC;
    --nar-bg-surface-hover:    #EDF2FA;
    --nar-bg-surface-active:   #E0EAFA;

    --nar-border-subtle:       #D8E2F0;
    --nar-border-medium:       #B9C8DF;
    --nar-border-focus:        #1D4ED8;
    --nar-border-accent:       #0284C7;

    --nar-text-primary:        #0B172A;
    --nar-text-secondary:      #1E293B;
    --nar-text-muted:          #475569;
    --nar-text-accent:         #1D4ED8;
    --nar-text-code:           #0369A1;

    --nar-accent-legal:        #1D4ED8;
    --nar-accent-forensic:     #0284C7;
    --nar-status-success:      #047857;
    --nar-status-warning:      #B45309;
    --nar-status-danger:       #B91C1C;
    --nar-status-info:         #0369A1;

    /* Brand Tokens */
    --brand-dark:              #0B172A;
    --brand-primary:           #0F2547;
    --brand-primary-strong:    #09152B;
    --brand-primary-soft:      #1E3A8A;
    --brand-secondary:         #334155;
    --brand-bg:                #F3F6FC;
    --brand-surface:           #FFFFFF;
    --brand-surface-alt:       #EDF2FA;
    --brand-border:            #D8E2F0;
    --brand-text-strong:       #0B172A;
    --brand-text:              #1E293B;
    --brand-text-soft:         #334155;
    --brand-text-mute:         #475569;
    --brand-accent:            #1D4ED8;
    --brand-accent-soft:       #DBEAFE;

    /* Cyber Deck Tokens */
    --cyber-black:             #EBF1FA;
    --cyber-void:              #F3F6FC;
    --cyber-surface:           rgba(255, 255, 255, 0.98);
    --cyber-surface-hover:     #F8FAFC;
    --cyber-surface-active:    #EFF6FF;
    --cyber-border:            rgba(29, 78, 216, 0.18);
    --cyber-border-glow:       rgba(29, 78, 216, 0.35);
    --cyber-cyan:              #0369A1;
    --cyber-cyan-electric:     #0284C7;
    --cyber-cyan-deep:         #1D4ED8;
    --cyber-emerald:           #047857;
    --cyber-gold:              #B45309;
    --cyber-gold-bright:       #B45309;
    --cyber-crimson:           #B91C1C;
    --cyber-purple:            #6D28D9;

    /* Guide & Support System Tokens (--ng-*) */
    --ng-bg-canvas:            #F3F6FC;
    --ng-bg-surface:           #FFFFFF;
    --ng-bg-overlay:           #F8FAFC;
    --ng-bg-subtle:            #EDF2FA;
    --ng-bg-hover:             #E2E8F0;
    --ng-border:               #CBD5E1;
    --ng-border-subtle:        #E2E8F0;
    --ng-text-primary:         #0B172A;
    --ng-text-secondary:       #1E293B;
    --ng-text-muted:           #475569;
    --ng-text-inverse:         #FFFFFF;
    --ng-accent:               #1D4ED8;
    --ng-accent-hover:         #1E40AF;
}

/* ==========================================================================
   2. READING MODE (MODO LECTURA / PAPEL JUDICIAL ANTIFATIGA)
   ========================================================================== */
html[data-nar-theme="reading"] {
    color-scheme: light;

    --nar-bg-base:             #F8F4EA;
    --nar-bg-surface:          #FFFDF7;
    --nar-bg-surface-elevated: #F3EDE0;
    --nar-bg-surface-hover:    #ECE4D3;
    --nar-bg-surface-active:   #E3D8C2;

    --nar-border-subtle:       #DDD3BE;
    --nar-border-medium:       #C8B99E;
    --nar-border-focus:        #1E40AF;
    --nar-border-accent:       #0369A1;

    --nar-text-primary:        #1C1917;
    --nar-text-secondary:      #292524;
    --nar-text-muted:          #57534E;
    --nar-text-accent:         #1E3A8A;
    --nar-text-code:           #0F4C81;

    --nar-accent-legal:        #1E3A8A;
    --nar-accent-forensic:     #0369A1;
    --nar-status-success:      #065F46;
    --nar-status-warning:      #92400E;
    --nar-status-danger:       #991B1B;
    --nar-status-info:         #1E40AF;

    --brand-dark:              #1C1917;
    --brand-primary:           #1E293B;
    --brand-primary-strong:    #0F172A;
    --brand-primary-soft:      #334155;
    --brand-secondary:         #44403C;
    --brand-bg:                #F8F4EA;
    --brand-surface:           #FFFDF7;
    --brand-surface-alt:       #F3EDE0;
    --brand-border:            #DDD3BE;
    --brand-text-strong:       #1C1917;
    --brand-text:              #292524;
    --brand-text-soft:         #44403C;
    --brand-text-mute:         #57534E;
    --brand-accent:            #1E3A8A;
    --brand-accent-soft:       #E0E7FF;

    --cyber-black:             #F2ECE1;
    --cyber-void:              #F8F4EA;
    --cyber-surface:           rgba(255, 253, 247, 0.98);
    --cyber-surface-hover:     #F3EDE0;
    --cyber-surface-active:    #ECE4D3;
    --cyber-border:            rgba(120, 100, 70, 0.24);
    --cyber-border-glow:       rgba(30, 58, 138, 0.32);
    --cyber-cyan:              #0369A1;
    --cyber-cyan-electric:     #0369A1;
    --cyber-cyan-deep:         #1E3A8A;
    --cyber-emerald:           #065F46;
    --cyber-gold:              #92400E;
    --cyber-gold-bright:       #92400E;
    --cyber-crimson:           #991B1B;
    --cyber-purple:            #5B21B6;

    /* Guide & Support System Tokens (--ng-*) */
    --ng-bg-canvas:            #F8F4EA;
    --ng-bg-surface:           #FFFDF7;
    --ng-bg-overlay:           #F3EDE0;
    --ng-bg-subtle:            #ECE4D3;
    --ng-bg-hover:             #E3D8C2;
    --ng-border:               #C8B99E;
    --ng-border-subtle:        #DDD3BE;
    --ng-text-primary:         #1C1917;
    --ng-text-secondary:       #292524;
    --ng-text-muted:           #57534E;
    --ng-text-inverse:         #FFFDF7;
    --ng-accent:               #1E3A8A;
    --ng-accent-hover:         #1E40AF;
}

/* Reading Mode Editorial Comfort Enhancements */
html[data-nar-theme="reading"] body,
html[data-nar-theme="reading"] p,
html[data-nar-theme="reading"] li,
html[data-nar-theme="reading"] td,
html[data-nar-theme="reading"] dd,
html[data-nar-theme="reading"] .card__body,
html[data-nar-theme="reading"] textarea {
    line-height: 1.76 !important;
    letter-spacing: 0.01em !important;
}

/* ==========================================================================
   3. GLOBAL BOX CONTAINMENT & ANTI-OVERFLOW SYSTEM (DESKTOP, IPAD & MOBILE)
   ========================================================================== */
.admin-shell,
.admin-main,
.admin-content,
.admin-container,
.admin-page-container,
.cyber-deck-page,
.sc-deck-root,
.ca-shell,
.ca-main {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.admin-main,
.admin-content,
.cyber-deck-page {
    overflow-x: hidden !important;
}

/* Force Flex & Grid children to respect container boundaries (min-width: 0) */
.admin-main div,
.admin-main section,
.admin-main article,
.admin-main form,
.cyber-deck-page div,
.cyber-deck-page section,
.cyber-deck-page article,
.ca-main div,
.ca-main section {
    min-width: 0;
    box-sizing: border-box;
}

/* Prevent Long Strings, Hashes, Wallets, Base64, URLs & Emails from overflowing boxes */
.admin-main p,
.admin-main span,
.admin-main a,
.admin-main li,
.admin-main h1,
.admin-main h2,
.admin-main h3,
.admin-main h4,
.admin-main dd,
.admin-main dt,
.admin-main label,
.cyber-deck-page p,
.cyber-deck-page span,
.cyber-deck-page a,
.cyber-deck-page li,
.cyber-deck-page h1,
.cyber-deck-page h2,
.cyber-deck-page h3,
.cyber-deck-page h4,
.ca-main p,
.ca-main span,
.ca-main a,
.dftk-card,
.dftk-card *,
.dftk-badge,
.intel-news-item,
.intel-news-item * {
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.admin-main td,
.admin-main th,
.ca-main td,
.ca-main th,
table td,
table th {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.admin-main td code,
.admin-main td .mono,
.admin-main td [style*="monospace"],
table td code,
table td .mono {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

html:not([data-nar-theme="dark"]) #pleadingContainer {
    color: #0F172A !important;
}

html:not([data-nar-theme="dark"]) dt {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Pre & Code blocks (Forensic ExifTool / FLOSS / Base64 / Hashes) */
pre,
code,
.dftk-card pre,
.dftk-card code {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* KPI & Velocity large numbers: scale fluidly so they never overflow narrow cards */
.kpi__value,
.velocity-value,
.ca-stat__val {
    font-size: clamp(1.15rem, 1.75vw, 1.6rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Breadcrumbs & Topbar containment */
.admin-breadcrumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.admin-breadcrumbs__item,
.admin-breadcrumbs__item.is-current {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

.admin-quicksearch-trigger {
    white-space: nowrap !important;
    min-width: 240px !important;
    flex-shrink: 0 !important;
}

/* Public Commercial Header Navigation Containment */
.site-header .container.site-header__inner {
    max-width: 1400px !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 14px !important;
    box-sizing: border-box !important;
}

.site-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    max-width: 100% !important;
}

.site-nav__link {
    font-size: 0.76rem !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
}

.site-nav__cta {
    font-size: 0.75rem !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}

/* Guide Deck, Support Center Tabs & Dossier Tabs Containment (Zero Viewport Overflow) */
#admin-page-guide,
.nar-guide-deck,
.nar-guide-deck__header,
.nar-guide-deck__header-main,
.nar-guide-deck__meta-row,
.nar-guide-deck__actions,
.nar-guide-tabs-bar,
.sc-tabs-bar,
.sc-tabs-track,
.sc-toc-pill-wrap {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}

.nar-guide-deck__header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.nar-guide-deck__header-main {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

.nar-guide-deck__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.nar-guide-deck__actions .btn-cyber,
.nar-guide-deck__actions button,
.nar-guide-deck__actions a,
.nar-guide-tab-btn,
.sc-tab-btn,
.dossier-tab {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 7px 12px !important;
    text-align: left !important;
}

.nar-guide-tabs-bar,
.sc-tabs-track {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow-x: visible !important;
}

/* Off-canvas Help Drawer (#ng-drawer): hide completely when closed so it never causes horizontal scroll */
.ng-drawer:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Data Tables Containment & Responsive Wrapping */
.table-wrap,
.table-responsive,
.cyber-table-wrap,
.nar-vasp-directory,
.nar-table-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

table,
table.table,
table.data-table,
table.cyber-table,
table#mulesMasterTable {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
}

table th,
table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 9px 10px !important;
    font-size: 0.82rem !important;
    vertical-align: top !important;
}

/* ==========================================================================
   4. HIGH-CONTRAST OVERRIDES FOR LIGHT & READING MODES (ALL ZONES & TOOLS)
   ========================================================================== */
html:not([data-nar-theme="dark"]) body,
html:not([data-nar-theme="dark"]) body.layout-admin,
html:not([data-nar-theme="dark"]) body.layout-cyber-deck,
html:not([data-nar-theme="dark"]) body.client-app,
html:not([data-nar-theme="dark"]) body.layout-client,
html:not([data-nar-theme="dark"]) body.layout-auth {
    background-color: var(--nar-bg-base) !important;
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) h1,
html:not([data-nar-theme="dark"]) h2,
html:not([data-nar-theme="dark"]) h3,
html:not([data-nar-theme="dark"]) h4,
html:not([data-nar-theme="dark"]) h5,
html:not([data-nar-theme="dark"]) h6 {
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) p,
html:not([data-nar-theme="dark"]) li {
    color: var(--nar-text-secondary);
}

html:not([data-nar-theme="dark"]) .muted,
html:not([data-nar-theme="dark"]) .muted-note {
    color: var(--nar-text-muted) !important;
}

/* Admin Sidebar & Topbar in Light / Reading Mode */
html:not([data-nar-theme="dark"]) .admin-sidebar {
    background: var(--nar-bg-surface) !important;
    border-right: 1px solid var(--nar-border-subtle) !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__header,
html:not([data-nar-theme="dark"]) .admin-sidebar__footer {
    background: var(--nar-bg-surface-elevated) !important;
    border-color: var(--nar-border-subtle) !important;
    color: var(--nar-text-muted) !important;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__brand-name,
html:not([data-nar-theme="dark"]) .admin-user-name {
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__brand-sub,
html:not([data-nar-theme="dark"]) .admin-sidebar__section,
html:not([data-nar-theme="dark"]) .admin-user-sub {
    color: var(--nar-text-muted) !important;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__link {
    color: var(--nar-text-secondary) !important;
    font-weight: 500;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__link:hover {
    background: var(--nar-bg-surface-hover) !important;
    color: var(--nar-accent-legal) !important;
}

html:not([data-nar-theme="dark"]) .admin-sidebar__link.is-active {
    background: var(--nar-bg-surface-active) !important;
    color: var(--nar-accent-legal) !important;
    border-left-color: var(--nar-accent-legal) !important;
    font-weight: 700 !important;
}

html:not([data-nar-theme="dark"]) .admin-topbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--nar-border-subtle) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html[data-nar-theme="reading"] .admin-topbar {
    background: rgba(255, 253, 247, 0.96) !important;
}

html:not([data-nar-theme="dark"]) .admin-quicksearch-trigger {
    background: var(--nar-bg-surface-elevated) !important;
    border: 1px solid var(--nar-border-medium) !important;
    color: var(--nar-text-secondary) !important;
}

html:not([data-nar-theme="dark"]) .admin-quicksearch-trigger kbd {
    background: var(--nar-bg-surface) !important;
    color: var(--nar-text-primary) !important;
    border: 1px solid var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .admin-logout-btn {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border: 1px solid #FECACA !important;
}

/* ==========================================================================
   5. TACTICAL SUPPORT CHAT & CHAT MODAL IN LIGHT / READING MODE
   ========================================================================== */
html:not([data-nar-theme="dark"]) .nar-chat-container,
html:not([data-nar-theme="dark"]) .nar-chat-sidebar,
html:not([data-nar-theme="dark"]) .nar-chat-main {
    background: var(--nar-bg-surface) !important;
    border: 1px solid var(--nar-border-medium) !important;
    color: var(--nar-text-primary) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-sidebar__header,
html:not([data-nar-theme="dark"]) .nar-chat-main__header,
html:not([data-nar-theme="dark"]) .nar-chat-input-bar {
    background: var(--nar-bg-surface-elevated) !important;
    border-color: var(--nar-border-subtle) !important;
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-sidebar__title,
html:not([data-nar-theme="dark"]) .nar-chat-target-role,
html:not([data-nar-theme="dark"]) .nar-chat-conv-role {
    color: var(--nar-accent-legal) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-conv-name,
html:not([data-nar-theme="dark"]) .nar-chat-target-name {
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-conv-preview,
html:not([data-nar-theme="dark"]) .nar-chat-meta {
    color: var(--nar-text-muted) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-conv-item {
    border-bottom: 1px solid var(--nar-border-subtle) !important;
    background: transparent !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-conv-item:hover {
    background: var(--nar-bg-surface-hover) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-conv-item.is-active {
    background: var(--nar-bg-surface-active) !important;
    border-left-color: var(--nar-accent-legal) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-thread {
    background: var(--nar-bg-base) !important;
    border: 1px solid var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-msg--in .nar-chat-bubble {
    background: var(--nar-bg-surface) !important;
    border: 1px solid var(--nar-border-medium) !important;
    color: var(--nar-text-primary) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-msg--admin .nar-chat-bubble {
    background: #FFFBEB !important;
    border: 1px solid #F59E0B !important;
    color: #1C1917 !important;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.08) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-msg--out .nar-chat-bubble {
    background: linear-gradient(135deg, #1D4ED8 0%, #0284C7 100%) !important;
    border: 1px solid #1E40AF !important;
    color: #FFFFFF !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-msg--out .nar-chat-bubble p,
html:not([data-nar-theme="dark"]) .nar-chat-msg--out .nar-chat-bubble span,
html:not([data-nar-theme="dark"]) .nar-chat-msg--out .nar-chat-meta {
    color: #FFFFFF !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-bubble-author--admin {
    color: #B45309 !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-bubble-author--user {
    color: #1D4ED8 !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-msg--out .nar-chat-bubble-author--user {
    color: #E0F2FE !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-input-field {
    background: #FFFFFF !important;
    border: 1px solid var(--nar-border-medium) !important;
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-notice-card {
    background: #EFF6FF !important;
    border: 1px solid #93C5FD !important;
    color: #1E3A8A !important;
}

html:not([data-nar-theme="dark"]) .nar-chat-notice-card p,
html:not([data-nar-theme="dark"]) .nar-chat-notice-card strong {
    color: #1E3A8A !important;
}

/* ==========================================================================
   6. GUIDE DECK, SUPPORT CENTER & FORENSIC / VASP / WORKSPACE TOOLS
   ========================================================================== */
html:not([data-nar-theme="dark"]) .ng-drawer,
html:not([data-nar-theme="dark"]) .ng-drawer__header,
html:not([data-nar-theme="dark"]) .ng-drawer__body,
html:not([data-nar-theme="dark"]) .ng-role-bar,
html:not([data-nar-theme="dark"]) .ng-depth-tabs,
html:not([data-nar-theme="dark"]) .ng-search-modal,
html:not([data-nar-theme="dark"]) .ng-peek-popover,
html:not([data-nar-theme="dark"]) .nar-help-modal,
html:not([data-nar-theme="dark"]) .nar-help-modal__header,
html:not([data-nar-theme="dark"]) .nar-help-modal__body {
    background: var(--nar-bg-surface) !important;
    color: var(--nar-text-primary) !important;
    border-color: var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .ng-callout,
html:not([data-nar-theme="dark"]) .ng-role-tip {
    background: #EFF6FF !important;
    color: #0F172A !important;
    border-color: #93C5FD !important;
}

html:not([data-nar-theme="dark"]) .ng-role-tip * {
    color: #0F172A !important;
}

html:not([data-nar-theme="dark"]) .ng-dock__trigger {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #93C5FD !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14) !important;
}

html:not([data-nar-theme="dark"]) .nar-guide-deck,
html:not([data-nar-theme="dark"]) .nar-guide-deck__header,
html:not([data-nar-theme="dark"]) .nar-guide-deck__body,
html:not([data-nar-theme="dark"]) .nar-guide-deck__footer,
html:not([data-nar-theme="dark"]) .nar-guide-bento-card,
html:not([data-nar-theme="dark"]) .nar-guide-role-card,
html:not([data-nar-theme="dark"]) .nar-sop-link-card,
html:not([data-nar-theme="dark"]) .nar-legal-box,
html:not([data-nar-theme="dark"]) .nar-rule-card,
html:not([data-nar-theme="dark"]) .nar-guide-pipeline-step {
    background: var(--nar-bg-surface) !important;
    color: var(--nar-text-primary) !important;
    border-color: var(--nar-border-subtle) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html:not([data-nar-theme="dark"]) .nar-guide-tabs-bar,
html:not([data-nar-theme="dark"]) .sc-tabs-bar {
    background: var(--nar-bg-surface-elevated) !important;
    border-color: var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .nar-guide-tab-btn,
html:not([data-nar-theme="dark"]) .sc-tab-btn {
    background: var(--nar-bg-surface) !important;
    color: var(--nar-text-secondary) !important;
    border: 1px solid var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .nar-guide-tab-btn.is-active,
html:not([data-nar-theme="dark"]) .sc-tab-btn.is-active {
    background: var(--nar-accent-legal) !important;
    color: #FFFFFF !important;
    border-color: var(--nar-accent-legal) !important;
}

html:not([data-nar-theme="dark"]) .nar-guide-tab-btn.is-active span,
html:not([data-nar-theme="dark"]) .sc-tab-btn.is-active span {
    color: #FFFFFF !important;
}

/* Support Center, Forensic Toolkit, Radar, Investigator Workspace, VASP & Tables */
html:not([data-nar-theme="dark"]) .sc-deck-root,
html:not([data-nar-theme="dark"]) .cyber-deck-page,
html:not([data-nar-theme="dark"]) .cyber-deck-page.sc-deck-root {
    background: var(--nar-bg-base) !important;
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .card,
html:not([data-nar-theme="dark"]) .admin-block,
html:not([data-nar-theme="dark"]) .kpi,
html:not([data-nar-theme="dark"]) .case-command-header,
html:not([data-nar-theme="dark"]) .attention-block,
html:not([data-nar-theme="dark"]) .attention-item,
html:not([data-nar-theme="dark"]) .nar-query-card,
html:not([data-nar-theme="dark"]) .ca-card,
html:not([data-nar-theme="dark"]) .ca-stat,
html:not([data-nar-theme="dark"]) .dftk-card,
html:not([data-nar-theme="dark"]) .radar-card,
html:not([data-nar-theme="dark"]) .table-wrap,
html:not([data-nar-theme="dark"]) .cyber-table-wrap,
html:not([data-nar-theme="dark"]) .onb-illustrations__item,
html:not([data-nar-theme="dark"]) #panel-workspace-playbooks,
html:not([data-nar-theme="dark"]) #panel-workspace-gaps,
html:not([data-nar-theme="dark"]) #panel-workspace-actions,
html:not([data-nar-theme="dark"]) #panel-workspace-decisions,
html:not([data-nar-theme="dark"]) #panel-workspace-cases,
html:not([data-nar-theme="dark"]) #panel-workspace-connectors,
html:not([data-nar-theme="dark"]) #panel-workspace-audit,
html:not([data-nar-theme="dark"]) .cyber-callout,
html:not([data-nar-theme="dark"]) .intel-news-item,
html:not([data-nar-theme="dark"]) .cyber-terminal-window,
html:not([data-nar-theme="dark"]) .showcase-img-wrap,
html:not([data-nar-theme="dark"]) .radar-canvas-wrap,
html:not([data-nar-theme="dark"]) .radar-canvas-hud-overlay,
html:not([data-nar-theme="dark"]) .site-footer__ip-box,
html:not([data-nar-theme="dark"]) .site-footer__brand-badge {
    background: var(--nar-bg-surface) !important;
    border-color: var(--nar-border-subtle) !important;
    color: var(--nar-text-primary) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
}

/* Buttons in Light / Reading Mode */
html:not([data-nar-theme="dark"]) .btn-cyber,
html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-cyan {
    background: #EFF6FF !important;
    border: 1px solid #93C5FD !important;
    color: #1D4ED8 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-cyan:hover,
html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-cyan.is-active {
    background: #1D4ED8 !important;
    border-color: #1E40AF !important;
    color: #FFFFFF !important;
}

html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-cyan.is-active span,
html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-cyan:hover span {
    color: #FFFFFF !important;
}

html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-gold {
    background: #FFFBEB !important;
    border: 1px solid #FCD34D !important;
    color: #92400E !important;
}

html:not([data-nar-theme="dark"]) .btn-cyber.btn-cyber-purple {
    background: #F5F3FF !important;
    border: 1px solid #C4B5FD !important;
    color: #5B21B6 !important;
}

html:not([data-nar-theme="dark"]) .btn--primary {
    background: #1D4ED8 !important;
    border-color: #1E40AF !important;
    color: #FFFFFF !important;
}

/* Tables */
html:not([data-nar-theme="dark"]) table,
html:not([data-nar-theme="dark"]) .table,
html:not([data-nar-theme="dark"]) table.data-table,
html:not([data-nar-theme="dark"]) .cyber-table {
    color: var(--nar-text-primary) !important;
    background: var(--nar-bg-surface) !important;
}

html:not([data-nar-theme="dark"]) thead tr,
html:not([data-nar-theme="dark"]) thead th,
html:not([data-nar-theme="dark"]) .table th {
    background: var(--nar-bg-surface-elevated) !important;
    color: #0F172A !important;
    border-bottom: 2px solid var(--nar-border-medium) !important;
    font-weight: 700 !important;
}

html:not([data-nar-theme="dark"]) tbody tr,
html:not([data-nar-theme="dark"]) tbody td,
html:not([data-nar-theme="dark"]) .table td {
    background: transparent !important;
    border-bottom: 1px solid var(--nar-border-subtle) !important;
    color: var(--nar-text-secondary) !important;
}

html:not([data-nar-theme="dark"]) tbody tr:hover td {
    background: var(--nar-bg-surface-hover) !important;
}

/* Inputs, Selects, Textareas */
html:not([data-nar-theme="dark"]) label,
html:not([data-nar-theme="dark"]) .field__label {
    color: var(--nar-text-primary) !important;
    font-weight: 600;
}

html:not([data-nar-theme="dark"]) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html:not([data-nar-theme="dark"]) select,
html:not([data-nar-theme="dark"]) textarea {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[data-nar-theme="reading"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-nar-theme="reading"] select,
html[data-nar-theme="reading"] textarea {
    background-color: #FFFDF9 !important;
    border-color: #C8B99E !important;
    color: #1C1917 !important;
}

/* Public Hero & Sections */
html:not([data-nar-theme="dark"]) .cyber-telemetry-bar {
    background: #EEF3FA !important;
    border-bottom: 1px solid #D5E0EE !important;
    color: #334155 !important;
}

html:not([data-nar-theme="dark"]) .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--nar-border-subtle) !important;
}

html:not([data-nar-theme="dark"]) .site-nav__link {
    color: #1E293B !important;
}

html:not([data-nar-theme="dark"]) .wm-logo__prefix {
    color: #0B172A !important;
}

html:not([data-nar-theme="dark"]) .wm-logo__suffix {
    color: #1D4ED8 !important;
}

.site-header .brand__zone-tag {
    border-radius: 6px !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    font-size: 0.68rem !important;
}

html:not([data-nar-theme="dark"]) .site-header .brand__zone-tag {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
}

html:not([data-nar-theme="dark"]) .cyber-hero,
html:not([data-nar-theme="dark"]) .cyber-page-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF3FC 55%, var(--nar-bg-base) 100%) !important;
    border-bottom: 1px solid var(--nar-border-subtle) !important;
}

html[data-nar-theme="reading"] .cyber-hero,
html[data-nar-theme="reading"] .cyber-page-hero {
    background: linear-gradient(180deg, #FFFDF8 0%, #F4EFE2 55%, #F8F4EA 100%) !important;
}

html:not([data-nar-theme="dark"]) .cyber-hero__video-bg,
html:not([data-nar-theme="dark"]) .cyber-hero__scanlines {
    display: none !important;
}

html:not([data-nar-theme="dark"]) .cyber-hero__radial-glow {
    background: radial-gradient(circle at 50% 32%, rgba(29, 78, 216, 0.07) 0%, rgba(243, 246, 252, 0.65) 75%) !important;
}

html:not([data-nar-theme="dark"]) .cyber-badge-classified {
    background: #EFF6FF !important;
    border: 1px solid #93C5FD !important;
    color: #1E3A8A !important;
}

html:not([data-nar-theme="dark"]) .cyber-text-gradient-cyan {
    background: linear-gradient(90deg, #1E3A8A 0%, #0284C7 55%, #0369A1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    text-shadow: none !important;
}

html:not([data-nar-theme="dark"]) .cyber-text-gradient-gold {
    background: linear-gradient(90deg, #92400E 0%, #B45309 50%, #D97706 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    text-shadow: none !important;
}

html:not([data-nar-theme="dark"]) .cyber-velocity-section,
html:not([data-nar-theme="dark"]) .threat-radar-section,
html:not([data-nar-theme="dark"]) .global-nodes-section,
html:not([data-nar-theme="dark"]) .cyber-architecture-section,
html:not([data-nar-theme="dark"]) .cyber-ai-law-arsenal-section,
html:not([data-nar-theme="dark"]) .cyber-showcase-section,
html:not([data-nar-theme="dark"]) .cyber-terminal-section,
html:not([data-nar-theme="dark"]) .cyber-plans-section,
html:not([data-nar-theme="dark"]) .cyber-legal-deck {
    background: var(--nar-bg-base) !important;
    color: var(--nar-text-primary) !important;
}

html:not([data-nar-theme="dark"]) .cyber-velocity-card,
html:not([data-nar-theme="dark"]) .node-card,
html:not([data-nar-theme="dark"]) .threat-intel-box,
html:not([data-nar-theme="dark"]) .vertical-card,
html:not([data-nar-theme="dark"]) .showcase-card,
html:not([data-nar-theme="dark"]) .plan-card,
html:not([data-nar-theme="dark"]) .legal-badge-card,
html:not([data-nar-theme="dark"]) .cyber-box,
html:not([data-nar-theme="dark"]) .arsenal-card,
html:not([data-nar-theme="dark"]) .arsenal-sandbox-console,
html:not([data-nar-theme="dark"]) .radar-dossier-panel,
html:not([data-nar-theme="dark"]) .radar-deck-container {
    background: var(--nar-bg-surface) !important;
    border-color: var(--nar-border-subtle) !important;
    color: var(--nar-text-primary) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

html:not([data-nar-theme="dark"]) .site-footer {
    background: #E8EEF7 !important;
    border-top: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
}

/* ==========================================================================
   7. ERGONOMIC READING & THEME TOOLBAR (.nar-ergo-widget)
   ========================================================================== */
.nar-ergo-widget {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 2147483645 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(29, 78, 216, 0.32);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    user-select: none;
    pointer-events: auto !important;
}

html[data-nar-theme="dark"] .nar-ergo-widget {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

html[data-nar-theme="reading"] .nar-ergo-widget {
    background: rgba(255, 253, 247, 0.97);
    border-color: rgba(146, 64, 14, 0.32);
}

.nar-ergo-widget__group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(241, 245, 249, 0.9);
    padding: 3px;
    border-radius: 999px;
}

html[data-nar-theme="dark"] .nar-ergo-widget__group {
    background: rgba(30, 41, 59, 0.9);
}

html[data-nar-theme="reading"] .nar-ergo-widget__group {
    background: rgba(243, 237, 224, 0.95);
}

.nar-ergo-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
}

html[data-nar-theme="dark"] .nar-ergo-btn {
    color: #CBD5E1;
}

.nar-ergo-btn.is-active {
    background: #1D4ED8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35);
}

html[data-nar-theme="reading"] .nar-ergo-btn.is-active {
    background: #92400E !important;
    color: #FFFFFF !important;
}

html[data-nar-theme="dark"] .nar-ergo-btn.is-active {
    background: #0284C7 !important;
    color: #FFFFFF !important;
}

.nar-ergo-scale-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 800;
    color: #0F172A;
    min-width: 38px;
    text-align: center;
    padding: 0 4px;
}

html[data-nar-theme="dark"] .nar-ergo-scale-label {
    color: #F8FAFC;
}

.nar-ergo-divider {
    width: 1px;
    height: 18px;
    background: rgba(148, 163, 184, 0.35);
    margin: 0 2px;
}

/* ==========================================================================
   8. RESPONSIVE TABLET & MOBILE NATIVE APP ARCHITECTURE
   ========================================================================== */
.nar-mobile-appbar {
    display: none;
}

@media (max-width: 1100px) {
    /* Collapse public desktop nav cleanly on tablet/mobile */
    .site-nav {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 1024px) {
    /* Collapse multi-column grids on Tablet & Mobile so cards never squish or overflow */
    .admin-main [style*="grid-template-columns"],
    .cyber-deck-page [style*="grid-template-columns"],
    .ca-main [style*="grid-template-columns"],
    .arsenal-bento-grid,
    .plans-pricing-grid,
    .nar-guide-bento-grid,
    .nar-guide-rules-grid,
    .nar-guide-roles-grid,
    .nar-chat-two-col {
        grid-template-columns: 1fr !important;
    }

    /* Ensure containers and cards fit 100% of mobile viewport */
    .admin-content,
    .admin-container,
    .admin-page-container,
    .cyber-deck-page,
    .global-nodes-container,
    .arsenal-container,
    .cyber-plans-container,
    .threat-intel-box,
    .intel-news-list,
    .intel-news-item {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .intel-news-meta {
        flex-wrap: wrap !important;
    }

    /* Chat input bar responsive fit on Mobile */
    .nar-chat-input-bar {
        flex-wrap: nowrap !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        max-width: 100% !important;
    }

    .nar-chat-input-field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 9px 12px !important;
    }

    .nar-chat-send-btn,
    button#page-chat-send-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 9px 14px !important;
    }

    /* Native App Bottom Bar for Mobile & Tablet */
    .nar-mobile-appbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9980;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid rgba(203, 213, 225, 0.85);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
    }

    html[data-nar-theme="dark"] .nar-mobile-appbar {
        background: rgba(10, 17, 40, 0.95);
        border-top-color: rgba(56, 189, 248, 0.22);
    }

    html[data-nar-theme="reading"] .nar-mobile-appbar {
        background: rgba(255, 253, 247, 0.96);
        border-top-color: rgba(200, 185, 158, 0.7);
    }

    body.client-app .nar-mobile-appbar {
        display: none !important;
    }

    .nar-mobile-appbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 46px;
        padding: 4px 6px;
        border-radius: 12px;
        text-decoration: none;
        color: #475569;
        font-size: 10.5px;
        font-weight: 700;
    }

    .nar-mobile-appbar__item.is-active {
        color: #1D4ED8;
        background: rgba(29, 78, 216, 0.09);
    }

    .nar-mobile-appbar__icon {
        font-size: 17px;
        line-height: 1;
    }

    .nar-ergo-widget {
        bottom: 72px;
        left: 12px;
        max-width: calc(100vw - 24px);
        padding: 5px 8px;
    }

    body.layout-admin .admin-content,
    body.layout-public main {
        padding-bottom: 130px !important;
    }
}

@media (max-width: 640px) {
    .nar-ergo-btn span.nar-ergo-btn__txt {
        display: none;
    }
    .nar-ergo-btn.is-active span.nar-ergo-btn__txt {
        display: inline;
    }
    .admin-quicksearch-trigger {
        min-width: 0 !important;
        max-width: 170px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ==========================================================================
   9. TOPBAR FLEX BALANCE & MOBILE FLEX-WRAP / TABLE CONTAINMENT REFINEMENTS
   ========================================================================== */
.admin-topbar__left {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.admin-topbar__center {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.admin-topbar__right {
    flex: 0 0 auto !important;
}

.leaflet-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 1024px) {
    .admin-main [style*="display: flex"],
    .admin-main [style*="display:flex"],
    .cyber-deck-page [style*="display: flex"],
    .cyber-deck-page [style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    .admin-main select,
    .admin-main .nar-modal-select,
    .cyber-deck-page select,
    .cyber-deck-page .nar-modal-select {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    table th,
    table td {
        padding: 6px 6px !important;
        font-size: 0.74rem !important;
    }
}

/* ============================================================================
   FIX-26: INLINE CODE PILLS & TOPBAR BREADCRUMB CONTAINMENT (DESKTOP + MOBILE)
   ============================================================================ */
html:not([data-nar-theme="dark"]) code,
html:not([data-nar-theme="dark"]) pre {
    background: #EFF6FF !important;
    color: #0369A1 !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
}
html[data-nar-theme="reading"] code,
html[data-nar-theme="reading"] pre {
    background: #EFE7D6 !important;
    color: #0F4C81 !important;
    border: 1px solid #D6C7B2 !important;
}
html:not([data-nar-theme="dark"]) .admin-breadcrumbs,
html:not([data-nar-theme="dark"]) .admin-breadcrumbs__item,
html:not([data-nar-theme="dark"]) .admin-breadcrumbs__link,
html:not([data-nar-theme="dark"]) .admin-breadcrumbs__sep {
    color: var(--nar-text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html:not([data-nar-theme="dark"]) .admin-topbar__left {
    flex: 1 1 auto !important;
    min-width: 180px !important;
    overflow: hidden !important;
}
@media (max-width: 900px) {
    .admin-topbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .admin-topbar__left {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        order: 1 !important;
    }
    .admin-topbar__right {
        flex: 1 1 100% !important;
        justify-content: flex-end !important;
        order: 2 !important;
    }
    .admin-topbar__center {
        display: none !important;
    }
}

/* ============================================================================
   FIX-34 & FIX-35: FORM INPUTS (.field__input), CLIENT PORTAL (.ca-hero,
   .client-nav, .ca-stat) & REPORT SHEET PRESERVATION IN LIGHT/READING MODES
   ============================================================================ */
html:not([data-nar-theme="dark"]) .field__input,
html:not([data-nar-theme="dark"]) select.field__input,
html:not([data-nar-theme="dark"]) textarea.field__input,
html:not([data-nar-theme="dark"]) input.field__input,
html:not([data-nar-theme="dark"]) .ca-compose__input {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
}

html[data-nar-theme="reading"] .field__input,
html[data-nar-theme="reading"] select.field__input,
html[data-nar-theme="reading"] textarea.field__input,
html[data-nar-theme="reading"] input.field__input,
html[data-nar-theme="reading"] .ca-compose__input {
    background-color: #FFFDF7 !important;
    color: #1C1917 !important;
    border: 1px solid #C8B99E !important;
}

html:not([data-nar-theme="dark"]) .client-nav {
    background: #FFFFFF !important;
    border: 1px solid #D8E2F0 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
}

html[data-nar-theme="reading"] .client-nav {
    background: #FFFDF7 !important;
    border: 1px solid #DDD3BE !important;
}

html:not([data-nar-theme="dark"]) .client-nav__link {
    color: #1E293B !important;
}

html:not([data-nar-theme="dark"]) .client-nav__link:hover {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
}

html:not([data-nar-theme="dark"]) .client-nav__link.is-active,
html:not([data-nar-theme="dark"]) .client-nav__link.is-active * {
    background: #1D4ED8 !important;
    color: #FFFFFF !important;
}

html:not([data-nar-theme="dark"]) .client-nav__collapse {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
}

html:not([data-nar-theme="dark"]) .ca-hero {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    border: 1px solid #93C5FD !important;
    color: #0B172A !important;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08) !important;
}

html[data-nar-theme="reading"] .ca-hero {
    background: linear-gradient(135deg, #F3EDE0 0%, #E8DFCA 100%) !important;
    border: 1px solid #C8B99E !important;
    color: #1C1917 !important;
}

html:not([data-nar-theme="dark"]) .ca-hero *,
html:not([data-nar-theme="dark"]) .ca-hero__title,
html:not([data-nar-theme="dark"]) .ca-hero__phase,
html:not([data-nar-theme="dark"]) .ca-hero__sub,
html:not([data-nar-theme="dark"]) .ca-hero__eyebrow,
html:not([data-nar-theme="dark"]) .ca-hero__pct-num,
html:not([data-nar-theme="dark"]) .ca-hero__pct-lbl {
    color: #0B172A !important;
}

html:not([data-nar-theme="dark"]) .ca-hero__eyebrow {
    color: #1D4ED8 !important;
    font-weight: 700 !important;
}

.ca-stat__val,
.client-status__value {
    font-size: 1.25rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.client-app__content td,
.client-app__content th {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html:not([data-nar-theme="dark"]) .kpi,
html:not([data-nar-theme="dark"]) .kpi--accent {
    background: #FFFFFF !important;
    border: 1px solid #D8E2F0 !important;
    color: #0B172A !important;
}

html:not([data-nar-theme="dark"]) .kpi__value {
    color: #0B172A !important;
    -webkit-text-fill-color: #0B172A !important;
}

html:not([data-nar-theme="dark"]) .kpi--accent .kpi__value {
    color: #B45309 !important;
    -webkit-text-fill-color: #B45309 !important;
}

html:not([data-nar-theme="dark"]) .kpi__label {
    color: #1E3A8A !important;
}

html:not([data-nar-theme="dark"]) .kpi__hint {
    color: #475569 !important;
}

html:not([data-nar-theme="dark"]) .attention-block {
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%) !important;
    border: 1px solid #F59E0B !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.10) !important;
}

html:not([data-nar-theme="dark"]) .attention-block__title {
    color: #92400E !important;
}

html:not([data-nar-theme="dark"]) .attention-item {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #0B172A !important;
}

html:not([data-nar-theme="dark"]) .attention-item__label {
    color: #0F172A !important;
    font-weight: 600 !important;
}

html:not([data-nar-theme="dark"]) #fases td,
html:not([data-nar-theme="dark"]) #fases td span,
html:not([data-nar-theme="dark"]) #fases td strong {
    color: #0F172A !important;
    opacity: 1 !important;
}