/* LCARS - Library Computer Access/Retrieval System
   Star Trek: The Next Generation inspired interface

   CSS-only theme overlay on the existing base.html DOM.
   Activate: Ctrl+Shift+L or click CSIDS logo 7 times
   Red Alert: Ctrl+Shift+R (while in LCARS mode)
*/

/* ============================================================================
   LCARS COLOR PALETTE
   ============================================================================ */
:root {
    --lcars-black: #000000;
    --lcars-orange: #ff9900;
    --lcars-peach: #ffcc99;
    --lcars-tan: #cc9966;
    --lcars-purple: #cc99cc;
    --lcars-lavender: #9999ff;
    --lcars-blue: #9999cc;
    --lcars-sky: #6699cc;
    --lcars-red: #cc4444;
    --lcars-text: #ff9900;
    --lcars-text-dark: #000000;
}

/* ============================================================================
   LCARS GLOBAL
   ============================================================================ */
html.lcars {
    background: var(--lcars-black) !important;
}

html.lcars body {
    background: var(--lcars-black) !important;
    font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   LCARS CUI BANNERS
   ============================================================================ */
html.lcars #cui-banner-top,
html.lcars #cui-banner-bottom {
    background: var(--lcars-tan) !important;
    border-color: var(--lcars-orange) !important;
    color: var(--lcars-text-dark) !important;
}

html.lcars #cui-banner-top div,
html.lcars #cui-banner-bottom div {
    color: var(--lcars-text-dark) !important;
    letter-spacing: 4px;
}

/* ============================================================================
   LCARS TOP NAV RESKIN
   ============================================================================ */
html.lcars #top-nav {
    background: var(--lcars-lavender) !important;
    border-bottom: 4px solid var(--lcars-black) !important;
    height: 60px !important;
}

/* Logo area — becomes the orange "elbow" */
html.lcars #top-nav a[href="/"] {
    background: var(--lcars-orange);
    border-radius: 0 0 0 30px;
    padding: 0 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 80px;
}

html.lcars #top-nav a[href="/"] img {
    filter: brightness(0);
}

/* Desktop nav links — LCARS colored pills */
html.lcars #top-nav .hidden.md\:flex a {
    background: var(--lcars-peach);
    color: var(--lcars-text-dark) !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 20px;
    padding: 6px 16px;
    margin: 0 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    height: auto;
    min-height: 0;
    line-height: 1.4;
}

/* Rotating pill colors */
html.lcars #top-nav .hidden.md\:flex a:nth-child(5n+1) { background: var(--lcars-peach); }
html.lcars #top-nav .hidden.md\:flex a:nth-child(5n+2) { background: var(--lcars-purple); }
html.lcars #top-nav .hidden.md\:flex a:nth-child(5n+3) { background: var(--lcars-sky); }
html.lcars #top-nav .hidden.md\:flex a:nth-child(5n+4) { background: var(--lcars-tan); }
html.lcars #top-nav .hidden.md\:flex a:nth-child(5n+5) { background: var(--lcars-lavender); }

/* Active nav link */
html.lcars #top-nav .hidden.md\:flex a[class*="border-\[#5b9bd5\]"] {
    background: var(--lcars-orange) !important;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
}

html.lcars #top-nav .hidden.md\:flex a:hover {
    filter: brightness(1.15);
}

/* Right controls area */
html.lcars #top-nav .flex.items-center.space-x-2 {
    background: var(--lcars-lavender);
}

html.lcars #top-nav .flex.items-center.space-x-2 button,
html.lcars #top-nav .flex.items-center.space-x-2 a {
    color: var(--lcars-text-dark) !important;
}

/* Search input */
html.lcars #top-nav input[name="q"] {
    background: var(--lcars-black) !important;
    border: 2px solid var(--lcars-orange) !important;
    color: var(--lcars-text) !important;
    border-radius: 20px !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
}

html.lcars #top-nav input[name="q"]::placeholder {
    color: var(--lcars-tan);
}

/* User dropdown */
html.lcars #user-dropdown {
    background: #0a0a14 !important;
    border: 2px solid var(--lcars-tan) !important;
    border-radius: 0 0 20px 20px !important;
}

html.lcars #user-dropdown a,
html.lcars #user-dropdown button,
html.lcars #user-dropdown div {
    color: var(--lcars-peach) !important;
}

html.lcars #user-dropdown a:hover,
html.lcars #user-dropdown button:hover {
    background: var(--lcars-tan) !important;
    color: var(--lcars-text-dark) !important;
}

/* ============================================================================
   LCARS MOBILE NAV PANEL
   ============================================================================ */
html.lcars #mobile-nav-panel {
    background: #0a0a14 !important;
    border-color: var(--lcars-tan) !important;
}

html.lcars #mobile-nav-panel a {
    color: var(--lcars-text-dark) !important;
    background: var(--lcars-peach);
    border-radius: 20px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 4px;
}

html.lcars #mobile-nav-panel a:nth-child(5n+1) { background: var(--lcars-peach); }
html.lcars #mobile-nav-panel a:nth-child(5n+2) { background: var(--lcars-purple); }
html.lcars #mobile-nav-panel a:nth-child(5n+3) { background: var(--lcars-sky); }
html.lcars #mobile-nav-panel a:nth-child(5n+4) { background: var(--lcars-tan); }
html.lcars #mobile-nav-panel a:nth-child(5n+5) { background: var(--lcars-lavender); }

html.lcars #mobile-nav-panel a[class*="bg-gray-100"],
html.lcars #mobile-nav-panel a[class*="text-\[#5b9bd5\]"] {
    background: var(--lcars-orange) !important;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
}

html.lcars #mobile-nav-panel input[name="q"] {
    background: var(--lcars-black) !important;
    border: 2px solid var(--lcars-orange) !important;
    color: var(--lcars-text) !important;
    border-radius: 20px !important;
}

/* ============================================================================
   LCARS PAGE CONTENT AREA
   ============================================================================ */
html.lcars #page-wrapper {
    background: var(--lcars-black);
}

html.lcars #page-main {
    background: var(--lcars-black);
    border-left: 4px solid var(--lcars-tan);
    padding-left: 20px;
}

html.lcars #page-main > h1 {
    color: var(--lcars-orange) !important;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ============================================================================
   LCARS BOTTOM STATUS BAR (injected by JS)
   ============================================================================ */
#lcars-status-bar {
    display: none;
}

html.lcars #lcars-status-bar {
    display: flex;
    height: 50px;
    min-height: 50px;
    z-index: 55;
}

.lcars-status-elbow {
    width: 120px;
    min-width: 120px;
    background: var(--lcars-tan);
    border-radius: 0 40px 0 0;
}

.lcars-status-spacer {
    width: 8px;
    background: var(--lcars-black);
}

.lcars-status-main {
    flex: 1;
    background: var(--lcars-peach);
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 30px 0 0 0;
}

.lcars-status-main .lcars-blink {
    width: 12px;
    height: 12px;
    background: var(--lcars-orange);
    border-radius: 50%;
    margin-right: 15px;
    animation: lcars-blink 1s ease-in-out infinite;
}

.lcars-status {
    color: var(--lcars-text-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lcars-status-end {
    width: 200px;
    min-width: 200px;
    background: var(--lcars-sky);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lcars-stardate {
    color: var(--lcars-text-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ============================================================================
   LCARS CONTENT ELEMENT OVERRIDES
   ============================================================================ */

/* --- Text colors --- */
html.lcars h1, html.lcars h2, html.lcars h3, html.lcars h4 {
    color: var(--lcars-orange) !important;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

html.lcars p, html.lcars span:not(.lcars-status):not(.lcars-stardate),
html.lcars td, html.lcars li, html.lcars label {
    color: var(--lcars-peach);
}

html.lcars a:not(#top-nav a):not(#mobile-nav-panel a) {
    color: var(--lcars-lavender);
}

html.lcars a:not(#top-nav a):not(#mobile-nav-panel a):hover {
    color: var(--lcars-orange);
}

html.lcars .text-gray-900, html.lcars .text-gray-800,
html.lcars .text-gray-700, html.lcars .dark\:text-white {
    color: var(--lcars-text) !important;
}

html.lcars .text-gray-500, html.lcars .text-gray-600,
html.lcars .text-gray-400, html.lcars .dark\:text-gray-400 {
    color: var(--lcars-peach) !important;
}

html.lcars .text-red-600, html.lcars .text-red-700 {
    color: var(--lcars-red) !important;
}

html.lcars .text-green-600, html.lcars .text-green-700 {
    color: #44cc88 !important;
}

html.lcars .text-3xl, html.lcars .text-2xl {
    color: var(--lcars-text) !important;
    font-weight: 900 !important;
}

/* --- Cards --- */
html.lcars .bg-white,
html.lcars .dark\:bg-gray-800,
html.lcars .shadow {
    background: #0a0a14 !important;
    border: 2px solid var(--lcars-tan) !important;
    border-left: 10px solid var(--lcars-tan) !important;
    border-radius: 0 20px 20px 0 !important;
}

/* --- Tables --- */
html.lcars table {
    border-collapse: separate;
    border-spacing: 0 4px;
}

html.lcars thead th {
    background: var(--lcars-purple) !important;
    color: var(--lcars-text-dark) !important;
    font-weight: 900;
    text-transform: uppercase;
    padding: 10px 15px;
}

html.lcars thead th:first-child { border-radius: 20px 0 0 20px; }
html.lcars thead th:last-child { border-radius: 0 20px 20px 0; }

html.lcars tbody td {
    background: #0a0a14 !important;
    color: var(--lcars-text) !important;
    padding: 12px 15px;
    border-top: 2px solid var(--lcars-tan);
    border-bottom: 2px solid var(--lcars-tan);
}

html.lcars tbody tr td:first-child {
    border-left: 2px solid var(--lcars-tan);
    border-radius: 15px 0 0 15px;
}

html.lcars tbody tr td:last-child {
    border-right: 2px solid var(--lcars-tan);
    border-radius: 0 15px 15px 0;
}

/* --- Buttons --- */
html.lcars #page-main button,
html.lcars #page-main .btn,
html.lcars #page-main a.inline-flex {
    background: var(--lcars-lavender) !important;
    color: var(--lcars-text-dark) !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

html.lcars #page-main button:hover,
html.lcars #page-main a.inline-flex:hover {
    background: var(--lcars-orange) !important;
}

/* --- Form inputs --- */
html.lcars input:not([type="checkbox"]):not([type="radio"]):not(#top-nav input),
html.lcars select,
html.lcars textarea {
    background: var(--lcars-black) !important;
    border: 2px solid var(--lcars-tan) !important;
    color: var(--lcars-text) !important;
    border-radius: 15px !important;
}

html.lcars input:focus, html.lcars select:focus, html.lcars textarea:focus {
    border-color: var(--lcars-orange) !important;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.4) !important;
    outline: none !important;
}

/* --- Badges --- */
html.lcars .rounded-full, html.lcars [class*="rounded-full"] {
    border-radius: 20px !important;
}

html.lcars [class*="bg-green"] { background: #44cc88 !important; color: var(--lcars-text-dark) !important; }
html.lcars [class*="bg-red"]:not(#cui-banner-top):not(#cui-banner-bottom) { background: var(--lcars-red) !important; color: white !important; }
html.lcars [class*="bg-yellow"] { background: var(--lcars-peach) !important; color: var(--lcars-text-dark) !important; }
html.lcars [class*="bg-blue"] { background: var(--lcars-lavender) !important; color: var(--lcars-text-dark) !important; }

/* --- Flash messages --- */
html.lcars .bg-red-50, html.lcars .dark\:bg-red-900 {
    background: #1a0a0a !important;
    border: 2px solid var(--lcars-red) !important;
    border-radius: 20px !important;
}

html.lcars .bg-green-50, html.lcars .dark\:bg-green-900 {
    background: #0a1a0a !important;
    border: 2px solid #44cc88 !important;
    border-radius: 20px !important;
}

/* ============================================================================
   LCARS ANIMATIONS
   ============================================================================ */
@keyframes lcars-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================================================
   LCARS RED ALERT
   ============================================================================ */
html.lcars.red-alert #top-nav {
    animation: red-alert-flash 0.5s ease-in-out infinite;
}

html.lcars.red-alert .lcars-status-elbow {
    background: #ff0000;
    animation: red-alert-flash 0.5s ease-in-out infinite;
}

html.lcars.red-alert .lcars-blink {
    background: #ff0000;
    animation: lcars-blink 0.2s ease-in-out infinite;
}

html.lcars.red-alert .lcars-stardate::before {
    content: 'RED ALERT - ';
    color: #ff0000;
}

@keyframes red-alert-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(0.6); }
}

/* ============================================================================
   LCARS SCROLLBAR
   ============================================================================ */
html.lcars #page-main::-webkit-scrollbar { width: 12px; }
html.lcars #page-main::-webkit-scrollbar-track { background: var(--lcars-black); }
html.lcars #page-main::-webkit-scrollbar-thumb { background: var(--lcars-tan); border-radius: 6px; }
html.lcars #page-main::-webkit-scrollbar-thumb:hover { background: var(--lcars-orange); }

/* ============================================================================
   LCARS RESPONSIVE
   ============================================================================ */
@media (max-width: 767px) {
    html.lcars #top-nav {
        height: auto !important;
        min-height: 50px;
    }

    html.lcars #top-nav a[href="/"] {
        border-radius: 0;
        min-width: auto;
        padding: 0 8px;
    }

    html.lcars #page-main {
        border-left: none;
        padding-left: 12px;
    }

    html.lcars #lcars-status-bar {
        height: 36px;
        min-height: 36px;
    }

    .lcars-status-elbow {
        width: 60px;
        min-width: 60px;
    }

    .lcars-status-end {
        width: 120px;
        min-width: 120px;
    }
}