/**
 * Path: /css/style.css
 * SHORT: Central stylesheet defining global variables, layout rules, and component styles.
 * LONG: The universal styling blueprint enforcing visual synchronization, dark mode colors, and technical HUD layouts across all screens.
 */
:root {
    --blueprint-blue: #001326;
    --blueprint-grid: #003a6d;
    --blueprint-accent: #00f2ff;
    --blueprint-inactive: #4a5568;
}

body {
    background-color: var(--blueprint-blue);
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    margin: 0;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* MODULE: BACKGROUND & OVERLAYS */
.blueprint-bg {
    background-image:
        linear-gradient(var(--blueprint-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3;
}

.blueprint-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 19, 38, 0.9) 100%);
    z-index: -1;
}

/* MODULE: COMPONENTS */
.technical-card {
    background: rgba(0, 25, 50, 0.4);
    border: 1px solid var(--blueprint-grid);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.technical-card:hover {
    border-color: var(--blueprint-accent);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

.status-active { color: var(--blueprint-accent); border-color: var(--blueprint-accent); }
.status-inactive { color: var(--blueprint-inactive); border-color: var(--blueprint-inactive); opacity: 0.6; }

.cursor-ring {
    width: 40px;
    height: 40px;
    border: 1px solid var(--blueprint-accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.3s;
}

canvas { display: block; }

.render-hint {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--blueprint-accent);
    font-size: 10px;
    letter-spacing: 2px;
    animation: pulse 2s infinite;
    z-index: 30;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.3; transform: translateX(5px); }
}

.glitch-text:hover { text-shadow: 2px 0 var(--blueprint-accent), -2px 0 #ff00ff; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--blueprint-blue); }
::-webkit-scrollbar-thumb { background: var(--blueprint-grid); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blueprint-accent); }

/* Mobile Menu Module */
#mobile-menu {
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

#mobile-menu.hidden-menu {
    transform: translateX(100%);
}

/* Ensure uninterrupted close access on all mobile devices */
@media (max-width: 768px) {
    [id^="close-"] {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 9999 !important;
        background: rgba(0, 19, 38, 0.95) !important;
        border: 1px solid var(--blueprint-accent) !important;
        padding: 0.5rem 1rem !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 242, 255, 0.2) !important;
        backdrop-filter: blur(10px);
    }
}

/* Header Scroll Effects */
#header-root {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
}

nav {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


.scrolled-header {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background-color: rgba(0, 19, 38, 0.95) !important;
    border-color: rgba(0, 242, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Cookie Disclaimer Extras */

.full-box-highlight {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    border-color: var(--blueprint-accent) !important;
}

.scanner-line {
    animation: scan 3s linear infinite;
    box-shadow: 0 0 10px var(--blueprint-accent);
}

#cookie-disclaimer .technical-card {
    border: 1px solid var(--blueprint-accent);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.15);
}

#cookie-policy-overlay .technical-card [id^="policy-box-"] {
    cursor: pointer;
}

@keyframes scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Leaflet Popup overrides for premium dark-mode blueprint theme */
.leaflet-popup-content-wrapper {
    background: #001326 !important;
    color: #fff !important;
    border: 1px solid var(--blueprint-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.15) !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.leaflet-popup-tip {
    background: #001326 !important;
    border-left: 1px solid var(--blueprint-accent) !important;
    border-bottom: 1px solid var(--blueprint-accent) !important;
    box-shadow: none !important;
}

/* --- BLUEPRINT DESIGN ENHANCEMENTS --- */
.blueprint-panel {
    background: rgba(0, 19, 38, 0.75);
    border: 1px solid var(--blueprint-grid);
    box-shadow: inset 0 0 25px rgba(0, 242, 255, 0.03), 0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    border-radius: 4px;
}

/* Blueprint corner ticks */
.blueprint-corners::before, .blueprint-corners::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: var(--blueprint-accent);
    border-style: solid;
    pointer-events: none;
    z-index: 5;
}
.blueprint-corners::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}
.blueprint-corners::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* Glowing text indicators */
.blueprint-glow {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
}

.blueprint-border-glow {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.15);
}

/* Subtle dot coordinate indicator */
.blueprint-coord::after {
    content: '[X-' attr(data-x) ' Y-' attr(data-y) ']';
    position: absolute;
    top: 6px;
    right: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: var(--blueprint-accent);
    opacity: 0.3;
}

/* Oscilloscope line styling */
.telemetry-wave {
    stroke-dasharray: 4;
    animation: wave-dash 15s linear infinite;
}
@keyframes wave-dash {
    to { stroke-dashoffset: -100; }
}

/* App transition effects */
.app-pane {
    animation: pane-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes pane-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- UNTITLED UI STYLED GRID & SIDEBAR --- */
.sidebar-panel {
    background: rgba(0, 15, 30, 0.85);
    border-right: 1px solid var(--blueprint-grid);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
}

.kpi-card {
    background: rgba(0, 25, 50, 0.35);
    border: 1px solid var(--blueprint-grid);
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.02), 0 4px 12px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.kpi-card:hover {
    border-color: var(--blueprint-accent);
    box-shadow: inset 0 0 20px rgba(0, 242, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.kpi-sparkline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-sparkline 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw-sparkline {
    to { stroke-dashoffset: 0; }
}

.blueprint-table {
    border-collapse: separate;
    border-spacing: 0;
}
.blueprint-table th {
    background: rgba(0, 15, 30, 0.6);
    border-bottom: 1px solid var(--blueprint-grid);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.blueprint-table td {
    border-bottom: 1px solid rgba(0, 58, 109, 0.2);
}
.blueprint-table tr:hover td {
    background: rgba(0, 242, 255, 0.03);
}

/* Sidebar navigation links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}
.sidebar-link:hover, .sidebar-link.active {
    color: var(--blueprint-accent);
    background: rgba(0, 242, 255, 0.05);
}
.sidebar-link svg {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.sidebar-link:hover svg, .sidebar-link.active svg {
    opacity: 1;
}

/* Collapsible Sidebar animations & Faint Blueprint BG */
.sidebar-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-blueprint-bg {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 242, 255, 0.04) 0%, transparent 60%),
        linear-gradient(rgba(0, 58, 109, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 58, 109, 0.12) 1px, transparent 1px);
    background-size: 100% 100%, 25px 25px, 25px 25px;
}

#sidebar-wrapper.collapsed {
    width: 5rem !important;
}

#sidebar-wrapper.collapsed .sidebar-hide-on-collapsed {
    display: none !important;
}

/* PREMIUM MODERN GLASS CARDS & INTERACTIVES */
.glass-card {
    background: rgba(0, 19, 38, 0.6);
    backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(0, 242, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 1rem; /* rounded-2xl */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(0, 242, 255, 0.45);
    box-shadow: 0 8px 32px 0 rgba(0, 242, 255, 0.08), inset 0 0 15px rgba(0, 242, 255, 0.05);
    transform: translateY(-2px);
}

.premium-btn {
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}
.premium-btn:active {
    transform: scale(0.98);
}

.premium-input {
    background: rgba(0, 10, 20, 0.6);
    border: 1px solid rgba(0, 58, 109, 0.5);
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.25s ease;
}
.premium-input:focus {
    border-color: var(--blueprint-accent);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.15);
}

/* Sliding Drawer for Outlived Helper Details */
.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 95vw;
    background: rgba(0, 13, 26, 0.98);
    border-left: 1px solid var(--blueprint-grid);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8);
}

.drawer-panel.open {
    transform: translateX(0);
}

/* --- CMS DASHBOARD MODERN LIGHT/DARK THEME OVERRIDES --- */
#dashboard-overlay {
    /* Dark Mode Defaults */
    --dash-bg: #0b0f19;
    --dash-sidebar-bg: #111827;
    --dash-border: #1f2937;
    --dash-card-bg: #1f2937;
    --dash-text: #f9fafb;
    --dash-text-muted: #9ca3af;
    --dash-accent: #10b981; /* Emerald/Green */
    --dash-accent-hover: #059669;
    --dash-input-bg: #111827;
    --dash-input-border: #374151;
    --dash-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    background-color: var(--dash-bg) !important;
    color: var(--dash-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#dashboard-overlay.light-mode {
    /* Light Mode Overrides */
    --dash-bg: #f9fafb;
    --dash-sidebar-bg: #ffffff;
    --dash-border: #e5e7eb;
    --dash-card-bg: #ffffff;
    --dash-text: #1f2937;
    --dash-text-muted: #4b5563;
    --dash-accent: #0f766e; /* Teal Theme */
    --dash-accent-hover: #0d9488;
    --dash-input-bg: #ffffff;
    --dash-input-border: #d1d5db;
    --dash-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

/* Strip Blueprint patterns in dashboard */
#dashboard-overlay .blueprint-bg,
#dashboard-overlay .blueprint-overlay {
    display: none !important;
}

/* Sidebar Styling */
#dashboard-overlay #sidebar-wrapper {
    background-color: var(--dash-sidebar-bg) !important;
    border-color: var(--dash-border) !important;
    box-shadow: var(--dash-shadow) !important;
}

#dashboard-overlay #sidebar-wrapper .border-b,
#dashboard-overlay #sidebar-wrapper .border-t {
    border-color: var(--dash-border) !important;
}

/* Navigation Links */
#dashboard-overlay .sidebar-link {
    color: var(--dash-text-muted) !important;
    font-weight: 500;
}

#dashboard-overlay .sidebar-link:hover,
#dashboard-overlay .sidebar-link.active {
    color: var(--dash-accent) !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}

#dashboard-overlay.light-mode .sidebar-link:hover,
#dashboard-overlay.light-mode .sidebar-link.active {
    color: var(--dash-accent) !important;
    background-color: rgba(15, 118, 110, 0.08) !important;
}

#dashboard-overlay .sidebar-link svg {
    color: inherit !important;
}

/* Header / Topbar */
#dashboard-overlay .h-16 {
    background-color: var(--dash-sidebar-bg) !important;
    border-color: var(--dash-border) !important;
}

#dashboard-overlay #workspace-title {
    color: var(--dash-text) !important;
}

/* Inputs & Form Elements */
#dashboard-overlay input,
#dashboard-overlay select,
#dashboard-overlay textarea {
    background-color: var(--dash-input-bg) !important;
    border-color: var(--dash-input-border) !important;
    color: var(--dash-text) !important;
}

#dashboard-overlay input:focus,
#dashboard-overlay select:focus,
#dashboard-overlay textarea:focus {
    border-color: var(--dash-accent) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Cards & App Panes */
#dashboard-overlay .app-pane > div,
#dashboard-overlay .border,
#dashboard-overlay .technical-card {
    background-color: var(--dash-card-bg) !important;
    border-color: var(--dash-border) !important;
    color: var(--dash-text) !important;
    box-shadow: var(--dash-shadow) !important;
}

/* Reset hover glow for technical cards inside dashboard */
#dashboard-overlay .technical-card:hover {
    border-color: var(--dash-accent) !important;
    box-shadow: var(--dash-shadow) !important;
}

/* Table overrides */
#dashboard-overlay table {
    color: var(--dash-text) !important;
}

#dashboard-overlay th {
    background-color: var(--dash-bg) !important;
    color: var(--dash-text-muted) !important;
    border-color: var(--dash-border) !important;
}

#dashboard-overlay td {
    border-color: var(--dash-border) !important;
    color: var(--dash-text) !important;
}

/* Typography elements */
#dashboard-overlay .text-white,
#dashboard-overlay h2,
#dashboard-overlay h3,
#dashboard-overlay h4 {
    color: var(--dash-text) !important;
}

#dashboard-overlay .text-white\/50,
#dashboard-overlay .opacity-40,
#dashboard-overlay .opacity-50,
#dashboard-overlay .mono.text-[10px]:not(.blueprint-glow) {
    color: var(--dash-text-muted) !important;
    opacity: 0.8 !important;
}

#dashboard-overlay .blueprint-glow {
    text-shadow: none !important;
    color: var(--dash-accent) !important;
}

/* Switch & Toggles */
.theme-switch-btn {
    color: var(--dash-text-muted);
}
.theme-switch-btn:hover {
    color: var(--dash-text);
}

#subdomain-logs-feed {
    color: var(--dash-accent) !important;
}
#dashboard-overlay.light-mode #subdomain-logs-feed {
    color: var(--dash-accent) !important;
}





/* ===========================================================================
   LOWEFORD LEGAL EMBED — style hooks for loweford-legal.js
   Central legal documents render into [data-legal-doc] placeholders inside
   the four legal dossier overlays (TOS, Privacy, Cookies, DPA).
   Blueprint theme: matches the overlays' mono/accent treatment.
   =========================================================================== */
.ll-legal__meta {
    color: var(--blueprint-accent);
    opacity: .7;
    font-style: italic;
    font-size: 11px;
    margin: 0 0 2rem;
}
.ll-legal__section { margin: 0 0 3rem; }
.ll-legal__heading {
    color: var(--blueprint-accent);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    font-size: 12px;
    margin: 0 0 1rem;
}
.ll-legal__text {
    opacity: .8;
    font-size: 11px;
    line-height: 1.8;
    margin: 0 0 .9em;
}
.ll-legal__list { margin: 0 0 .9em; padding-left: 1.4em; }
.ll-legal__list li {
    opacity: .8;
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: .4em;
}