/**
 * ════════════════════════════════════════════════════════════════════════════
 *
 *   LCARS FRAMES — Structural OKUDAGRAM Frame Components
 *   A.R.C.H.I.E. Platform v5.32.0
 *
 *   Thick elbows, 48px sidebars with segmented color blocks, header/footer
 *   bars with decorative pips. Replaces thin 3px accent lines with real
 *   structural geometry inspired by Star Trek LCARS/OKUDAGRAM panels.
 *
 *   Blueprint: Consciousness module modal frame (consciousness_dashboard.html)
 *   Companion: lcars-panels.css (old thin-accent cards — NOT modified)
 *
 *   i18n NOTE: All visible text rendered inside frame components (titles,
 *   status readouts, stardates, labels) MUST use data-i18n attributes for
 *   internationalization. This CSS file defines structure only.
 *
 * ════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════
   § 1. CSS VARIABLES — Frame Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Primary frame color — override per-module via --frame-color + --frame-rgb */
    --frame-color: #00ff41;
    --frame-rgb: 0, 255, 65;

    /* Geometry */
    --frame-radius: 20px;
    --frame-sidebar-w: 48px;
    --frame-bar-h: 44px;
    --frame-footer-h: 16px;
    --frame-elbow-top-h: 52px;
    --frame-elbow-bottom-h: 36px;
    --frame-seg-h: 28px;
    --frame-seg-gap: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 2. CORE STRUCTURAL COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2.1 Outer Frame Container ────────────────────────────────────────── */
.lcars-frame {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 0;
    position: relative;
}

/* ── 2.2 Left Sidebar Column ─────────────────────────────────────────── */
.lcars-sidebar {
    flex-shrink: 0;
    width: var(--frame-sidebar-w);
    display: flex;
    flex-direction: column;
    gap: var(--frame-seg-gap);
    padding: 0;
    background: transparent;
}

/* ── 2.3 Top Elbow — Sweeping Corner Piece ───────────────────────────── */
.lcars-elbow-top {
    height: var(--frame-elbow-top-h);
    background: var(--frame-color);
    border-radius: var(--frame-radius) 0 0 0;
    position: relative;
    flex-shrink: 0;
}

/* Cutout notch — bottom-right of top elbow */
.lcars-elbow-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: var(--archie-bg-primary, #010409);
    border-radius: 0 10px 0 0;
}

/* ── 2.4 Bottom Elbow — Lower Corner Piece ───────────────────────────── */
.lcars-elbow-bottom {
    height: var(--frame-elbow-bottom-h);
    background: var(--frame-color);
    border-radius: 0 0 0 var(--frame-radius);
    position: relative;
    flex-shrink: 0;
}

/* Cutout notch — top-right of bottom elbow */
.lcars-elbow-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 14px;
    background: var(--archie-bg-primary, #010409);
    border-radius: 0 0 0 10px;
}

/* ── 2.5 Sidebar Segment — Colored Block ─────────────────────────────── */
.lcars-seg {
    height: var(--frame-seg-h);
    border-radius: 0 8px 8px 0;
    background: var(--seg-color, var(--frame-color));
    flex-shrink: 0;
}

/* ── 2.6 Segment Indicator Light ─────────────────────────────────────── */
.lcars-seg-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 2px auto;
    flex-shrink: 0;
    background: var(--seg-color, var(--frame-color));
    box-shadow: 0 0 8px var(--seg-color, var(--frame-color));
    animation: lcarsFramePulse 3s ease-in-out infinite;
}

/* ── 2.7 Segment Fill Spacer ─────────────────────────────────────────── */
.lcars-seg-fill {
    flex: 1;
    background: rgba(var(--frame-rgb), 0.2);
    border-radius: 0 8px 8px 0;
    min-height: 20px;
}

/* ── 2.8 Right Content Column ────────────────────────────────────────── */
.lcars-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    min-width: 0;
    overflow: hidden;
}

/* ── 2.9 Header Bar ──────────────────────────────────────────────────── */
.lcars-bar {
    height: var(--frame-bar-h);
    background: var(--frame-color);
    border-radius: 0 var(--frame-radius) var(--frame-radius) 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    flex-shrink: 0;
}

/* ── 2.10 Bar Title ──────────────────────────────────────────────────── */
.lcars-bar-title {
    font-family: 'Antonio', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--archie-bg-primary, #010409);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2.11 Bar Spacer ─────────────────────────────────────────────────── */
.lcars-bar-spacer {
    flex: 1;
}

/* ── 2.12 Decorative Pips ────────────────────────────────────────────── */
.lcars-pips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── 2.13 Individual Pip ─────────────────────────────────────────────── */
.lcars-pip {
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    /* Width set inline via style="width:..." for varied pip sizes */
}

/* ── 2.14 Bar Status Readout ─────────────────────────────────────────── */
.lcars-bar-status {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--archie-bg-primary, #010409);
    white-space: nowrap;
}

/* ── 2.15 Content Body ───────────────────────────────────────────────── */
.lcars-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;

    /* Themed scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--frame-rgb), 0.25) transparent;
}

.lcars-body::-webkit-scrollbar {
    width: 6px;
}

.lcars-body::-webkit-scrollbar-track {
    background: transparent;
}

.lcars-body::-webkit-scrollbar-thumb {
    background: rgba(var(--frame-rgb), 0.25);
    border-radius: 3px;
}

.lcars-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--frame-rgb), 0.45);
}

/* ── 2.16 Footer Bar ─────────────────────────────────────────────────── */
.lcars-footer-bar {
    height: var(--frame-footer-h);
    background: var(--frame-color);
    border-radius: 0 var(--frame-radius) var(--frame-radius) 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    flex-shrink: 0;
}

/* ── 2.17 Footer Stardate Text ───────────────────────────────────────── */
.lcars-footer-stardate {
    display: none;
}

/* ── 2.18 Footer Dots Container ──────────────────────────────────────── */
.lcars-footer-dots {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* ── 2.19 Footer Dot ─────────────────────────────────────────────────── */
.lcars-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 3. VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 Compact — No bottom elbow, no footer, no seg-fill ───────────── */
.lcars-frame--compact .lcars-elbow-bottom,
.lcars-frame--compact .lcars-footer-bar,
.lcars-frame--compact .lcars-seg-fill {
    display: none;
}

.lcars-frame--compact .lcars-bar {
    height: 40px;
}

/* ── 3.2 Collapsed — Sidebar segs, body, footer hidden ──────────────── */
.lcars-frame--collapsed .lcars-seg,
.lcars-frame--collapsed .lcars-seg-light,
.lcars-frame--collapsed .lcars-seg-fill,
.lcars-frame--collapsed .lcars-body,
.lcars-frame--collapsed .lcars-footer-bar,
.lcars-frame--collapsed .lcars-elbow-bottom {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.lcars-frame--collapsed .lcars-elbow-top,
.lcars-frame--collapsed .lcars-bar {
    transition: all 0.3s ease;
}

/* ── 3.3 Tablet — Centered layout for login/signup ───────────────────── */
.lcars-frame--tablet {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 4. ANIMATIONS — Keyframes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4.1 Breathing Glow ──────────────────────────────────────────────── */
@keyframes lcarsFramePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--seg-color, var(--frame-color));
    }
    40% {
        opacity: 0.3;
        box-shadow: 0 0 3px var(--seg-color, var(--frame-color));
    }
    60% {
        opacity: 0.3;
        box-shadow: 0 0 3px var(--seg-color, var(--frame-color));
    }
}

/* ── 4.2 Elbow Sweep — scales from left ──────────────────────────────── */
@keyframes lcarsElbowSweep {
    0% {
        transform: scaleX(0);
        transform-origin: left center;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

/* ── 4.3 Bar Extend — expands from left to right ─────────────────────── */
@keyframes lcarsBarExtend {
    0% {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        max-width: 2000px;
        overflow: visible;
        opacity: 1;
    }
}

/* ── 4.4 Segment Fill — scales up with fade ──────────────────────────── */
@keyframes lcarsSegFill {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top center;
    }
}

/* ── 4.5 Content Fade ────────────────────────────────────────────────── */
@keyframes lcarsContentFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 5. FRAME-BUILD ANIMATION CLASSES
   Play the LCARS "power-up" sequence when .frame-build is on the container.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Top Elbow Sweep ─────────────────────────────────────────────── */
.frame-build .lcars-elbow-top {
    animation: lcarsElbowSweep 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* ── 5.2 Header Bar Extend ───────────────────────────────────────────── */
.frame-build .lcars-bar {
    animation: lcarsBarExtend 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s both;
}

/* ── 5.3 Segment Fill with Stagger ───────────────────────────────────── */
.frame-build .lcars-seg {
    animation: lcarsSegFill 0.35s ease-out both;
}

.frame-build .lcars-seg:nth-child(1) { animation-delay: 0.2s; }
.frame-build .lcars-seg:nth-child(2) { animation-delay: 0.3s; }
.frame-build .lcars-seg:nth-child(3) { animation-delay: 0.4s; }
.frame-build .lcars-seg:nth-child(4) { animation-delay: 0.5s; }
.frame-build .lcars-seg:nth-child(5) { animation-delay: 0.6s; }
.frame-build .lcars-seg:nth-child(6) { animation-delay: 0.7s; }
.frame-build .lcars-seg:nth-child(7) { animation-delay: 0.8s; }
.frame-build .lcars-seg:nth-child(8) { animation-delay: 0.9s; }

/* ── 5.4 Segment Light Pulse ─────────────────────────────────────────── */
.frame-build .lcars-seg-light {
    animation: lcarsFramePulse 3s ease-in-out infinite;
}

/* Stagger light animation starts */
.frame-build .lcars-seg-light:nth-child(1) { animation-delay: 0.0s; }
.frame-build .lcars-seg-light:nth-child(2) { animation-delay: 0.7s; }
.frame-build .lcars-seg-light:nth-child(3) { animation-delay: 1.4s; }

/* ── 5.5 Body Content Fade ───────────────────────────────────────────── */
.frame-build .lcars-body {
    animation: lcarsContentFade 0.5s ease-out 0.4s both;
}

/* ── 5.6 Bottom Elbow Sweep ──────────────────────────────────────────── */
.frame-build .lcars-elbow-bottom {
    animation: lcarsElbowSweep 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s both;
}

/* ── 5.7 Footer Bar Extend ───────────────────────────────────────────── */
.frame-build .lcars-footer-bar {
    animation: lcarsBarExtend 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.6s both;
}

/* ── 5.8 Boot Hidden — initial state before animation ────────────────── */
.boot-hidden {
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 6. LIGHT MODE OVERRIDES
   Desaturated, flat, no glows — readable on white backgrounds.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .lcars-elbow-top,
body.light-mode .lcars-elbow-top,
[data-theme="light"] .lcars-elbow-bottom,
body.light-mode .lcars-elbow-bottom {
    filter: saturate(0.3) brightness(1.1);
}

[data-theme="light"] .lcars-elbow-top::after,
body.light-mode .lcars-elbow-top::after,
[data-theme="light"] .lcars-elbow-bottom::after,
body.light-mode .lcars-elbow-bottom::after {
    background: #ffffff;
}

[data-theme="light"] .lcars-seg,
body.light-mode .lcars-seg {
    opacity: 0.2;
    border: 1px solid rgba(var(--frame-rgb), 0.3);
}

[data-theme="light"] .lcars-seg-light,
body.light-mode .lcars-seg-light {
    box-shadow: none;
    animation: none;
    opacity: 0.5;
}

[data-theme="light"] .lcars-seg-fill,
body.light-mode .lcars-seg-fill {
    background: rgba(var(--frame-rgb), 0.08);
    border: 1px solid rgba(var(--frame-rgb), 0.15);
}

[data-theme="light"] .lcars-bar,
body.light-mode .lcars-bar {
    background: rgba(var(--frame-rgb), 0.1);
    border: 1px solid rgba(var(--frame-rgb), 0.3);
}

[data-theme="light"] .lcars-bar-title,
body.light-mode .lcars-bar-title {
    color: var(--frame-color);
}

[data-theme="light"] .lcars-bar-status,
body.light-mode .lcars-bar-status {
    color: rgba(var(--frame-rgb), 0.7);
}

[data-theme="light"] .lcars-pip,
body.light-mode .lcars-pip {
    background: rgba(var(--frame-rgb), 0.2);
}

[data-theme="light"] .lcars-body,
body.light-mode .lcars-body {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: none;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .lcars-body::-webkit-scrollbar-thumb,
body.light-mode .lcars-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .lcars-body::-webkit-scrollbar-thumb:hover,
body.light-mode .lcars-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .lcars-footer-bar,
body.light-mode .lcars-footer-bar {
    background: var(--frame-color);
    border: none;
}

[data-theme="light"] .lcars-footer-stardate,
body.light-mode .lcars-footer-stardate {
    color: rgba(var(--frame-rgb), 0.6);
}

[data-theme="light"] .lcars-footer-dot,
body.light-mode .lcars-footer-dot {
    background: rgba(var(--frame-rgb), 0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   § 7. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Tablet / Small Laptop — max-width: 1279px ──────────────────── */
@media (max-width: 1279px) {
    .lcars-frame {
        --frame-sidebar-w: 32px;
        --frame-seg-h: 20px;
        --frame-radius: 14px;
    }

    .lcars-pips {
        display: none;
    }

    .lcars-elbow-top::after {
        width: 14px;
        height: 14px;
    }

    .lcars-elbow-bottom::after {
        width: 14px;
        height: 10px;
    }

    .lcars-bar-title {
        font-size: 0.78rem;
        letter-spacing: 1.5px;
    }

    .lcars-body {
        padding: 12px;
    }
}

/* ── 7.2 Mobile Landscape / Small Tablet — max-width: 767px ─────────── */
@media (max-width: 767px) {
    .lcars-frame {
        --frame-sidebar-w: 24px;
        --frame-seg-h: 12px;
        --frame-seg-gap: 2px;
        --frame-radius: 8px;
        --frame-bar-h: 36px;
        --frame-elbow-top-h: 36px;
        --frame-elbow-bottom-h: 24px;
    }

    .lcars-seg-light {
        display: none;
    }

    .lcars-footer-bar {
        display: none;
    }

    .lcars-elbow-top::after {
        width: 10px;
        height: 10px;
    }

    .lcars-elbow-bottom::after {
        width: 10px;
        height: 8px;
    }

    .lcars-content {
        margin-left: 4px;
    }

    .lcars-bar {
        gap: 8px;
        padding: 0 10px;
    }

    .lcars-bar-title {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    .lcars-bar-status {
        font-size: 0.58rem;
    }

    .lcars-body {
        padding: 10px;
    }
}

/* ── 7.3 Small Phone — max-width: 479px ──────────────────────────────── */
@media (max-width: 479px) {
    .lcars-frame {
        --frame-sidebar-w: 16px;
        --frame-radius: 4px;
        --frame-seg-gap: 0px;
        --frame-elbow-top-h: 28px;
        --frame-elbow-bottom-h: 20px;
    }

    /* Collapse individual segs into a single colored strip */
    .lcars-seg,
    .lcars-seg-light {
        display: none;
    }

    .lcars-seg-fill {
        border-radius: 0 4px 4px 0;
    }

    .lcars-elbow-top::after,
    .lcars-elbow-bottom::after {
        width: 6px;
        height: 6px;
    }

    .lcars-content {
        margin-left: 3px;
    }

    .lcars-bar {
        gap: 6px;
        padding: 0 8px;
    }

    .lcars-bar-title {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }

    .lcars-bar-status {
        font-size: 0.55rem;
    }

    .lcars-body {
        padding: 8px;
    }

    /* Tablet variant: sidebar hidden, becomes top-bar mode */
    .lcars-frame--tablet .lcars-sidebar {
        display: none;
    }

    .lcars-frame--tablet .lcars-content {
        margin-left: 0;
    }

    .lcars-frame--tablet .lcars-bar {
        border-radius: var(--frame-radius);
    }
}

/* ── 7.4 Reduced Motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lcars-seg-light {
        animation: none;
    }

    .frame-build .lcars-elbow-top,
    .frame-build .lcars-elbow-bottom {
        animation: none;
    }

    .frame-build .lcars-bar,
    .frame-build .lcars-footer-bar {
        animation: none;
    }

    .frame-build .lcars-seg {
        animation: none;
    }

    .frame-build .lcars-body {
        animation: none;
    }

    .frame-build .lcars-seg-light {
        animation: none;
    }

    .boot-hidden {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   EOF — LCARS Frames v1.0.0
   ═══════════════════════════════════════════════════════════════════════════ */