/**
 * LCARS Global Stylesheet
 * 
 * Provides consistent LCARS styling across all sub-pages
 * Ensures navigation, footer, and panels match homepage design
 * 
 * Version: 1.0
 * Last Updated: 2025-01-XX
 */

/* LCARS Color Palette - Consistent across all pages */
:root {
    --lcars-orange: #ff9900;
    --lcars-gold: #ffcc00;
    --lcars-blue: #99ccff;
    --lcars-pink: #cc99cc;
    --lcars-bg: #000000;
    --alert-color: var(--lcars-blue);
    --alert-bg: rgba(0, 0, 0, 0);
}

/* Header Banner - Fixed Height */
.header-banner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-banner img {
    width: 100%;
    max-width: 1920px;
    height: 300px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* LCARS Panel - Unified border styling (fixes double-bar issue) */
.lcars-panel {
    background: 
        linear-gradient(rgba(153, 204, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(153, 204, 255, 0.02) 1px, transparent 1px),
        rgba(255, 255, 255, 0.03) !important;
    background-size: 20px 20px;
    position: relative;
    overflow: visible; /* To allow elbows to show */
    border-top: 15px solid var(--lcars-orange) !important;
    border-left: 15px solid var(--lcars-orange) !important;
    border-radius: 40px 0 0 0 !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

/* Create the iconic LCARS elbow on the top-left of each panel */
.lcars-panel::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 60px;
    height: 30px;
    background: var(--lcars-orange); /* Default orange, will be overridden by border-color */
    border-radius: 25px 0 0 0;
    z-index: -1;
}

/* Override elbow color based on panel border color */
.lcars-panel[style*="border-color: var(--lcars-blue)"]::before {
    background: var(--lcars-blue) !important;
}

.lcars-panel[style*="border-color: var(--lcars-pink)"]::before {
    background: var(--lcars-pink) !important;
}

/* Override border color for specific panels */
.lcars-panel[style*="border-color: var(--lcars-blue)"] {
    border-left: 15px solid var(--lcars-blue) !important;
    border-top: 15px solid var(--lcars-blue) !important;
}

.lcars-panel[style*="border-color: var(--lcars-pink)"] {
    border-left: 15px solid var(--lcars-pink) !important;
    border-top: 15px solid var(--lcars-pink) !important;
}

.lcars-panel h1,
.lcars-panel h2 {
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    color: var(--lcars-gold);
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--lcars-blue);
    padding-bottom: 5px;
    letter-spacing: 1px;
}

/* 3-Column LCARS Info Grid - Homepage Layout */
.lcars-info-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
}

@media (max-width: 1024px) {
    .lcars-info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Desktop Navigation - Default State */
.lcars-nav {
    display: flex !important; /* Default for desktop */
}

/* Mobile Navigation (The Hamburger) - Hidden by default */
.mobile-nav-container {
    display: none; /* Hide on desktop */
}

/* Responsive Design */
@media (max-width: 1024px) {
    /* Show Mobile Menu, Hide Desktop Nav */
    .mobile-nav-container {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
    }
    
    /* Ensure narrative-header is not overlapped by mobile menu */
    .narrative-header {
        margin-top: 0;
        padding-top: 10px;
    }
    
    .diag-code {
        position: relative;
        z-index: 1;
    }
    
    /* Hide Desktop Navigation on mobile */
    header .lcars-nav,
    .lcars-nav {
        display: none !important;
    }
    
    /* Mobile Hamburger Button */
    .nav-button {
        background: var(--lcars-orange);
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        cursor: pointer;
        font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 3px solid var(--lcars-orange);
        user-select: none;
    }
    
    .nav-icon {
        width: 30px;
        height: 3px;
        background: #000;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .nav-icon::before,
    .nav-icon::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 3px;
        background: #000;
        transition: all 0.3s ease;
    }
    
    .nav-icon::before {
        top: -10px;
    }
    
    .nav-icon::after {
        bottom: -10px;
    }
    
    /* Hamburger to X animation */
    .nav-toggle:checked ~ .nav-button .nav-icon {
        background: transparent;
    }
    
    .nav-toggle:checked ~ .nav-button .nav-icon::before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .nav-toggle:checked ~ .nav-button .nav-icon::after {
        transform: rotate(-45deg);
        bottom: 0;
    }
    
    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        background: #000;
        border-top: 3px solid var(--lcars-orange);
        padding: 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-toggle:checked ~ .mobile-menu-overlay {
        display: block;
        max-height: 1000px;
    }
    
    .menu-header {
        color: var(--lcars-gold);
        font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--lcars-blue);
    }
    
    .nav-group-mobile {
        margin-bottom: 25px;
    }
    
    .nav-group-mobile .nav-item {
        display: block;
        padding: 12px 15px;
        margin: 5px 0;
        color: #000;
        text-decoration: none;
        font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 4px;
        transition: background 0.2s ease;
    }
    
    .nav-group-mobile.command .nav-item {
        background: var(--lcars-orange);
    }
    
    .nav-group-mobile.science .nav-item {
        background: var(--lcars-blue);
    }
    
    .nav-group-mobile.operations .nav-item {
        background: var(--lcars-gold);
    }
    
    .nav-group-mobile .nav-item.highlight {
        background: var(--lcars-pink) !important;
        border-radius: 20px;
    }
    
    .nav-group-mobile .nav-item:hover,
    .nav-group-mobile .nav-item:focus {
        background: #fff;
        color: #000;
    }
}

/* Grouping Logic */
.nav-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Base Item Styling */
.nav-item {
    color: #000 !important;
    padding: 8px 20px;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    transition: background 0.2s ease, filter 0.2s ease;
    border-radius: 4px; /* Standard block */
    display: inline-block;
    border: none;
}

/* Iconic LCARS Pill Shaping */
.nav-group .nav-item:first-of-type {
    border-radius: 20px 4px 4px 20px; /* Rounds the left edge of each group */
}

.nav-group .nav-item:last-of-type:not(.highlight) {
    border-radius: 4px 20px 20px 4px; /* Rounds the right edge of each group */
}

/* Departmental Color-Coding */
.command .nav-item {
    background-color: var(--lcars-orange);
}

.science .nav-item {
    background-color: var(--lcars-blue);
}

.operations .nav-item:not(.highlight) {
    background-color: var(--lcars-gold);
}

.operations .nav-item.highlight {
    background-color: var(--lcars-pink) !important;
    border-radius: 20px !important; /* Full pill shape */
    margin-left: 10px;
}

.nav-item:hover,
.nav-item:focus {
    background: #fff !important;
    color: #000 !important;
    filter: brightness(1.1);
}

.nav-item.external::after {
    content: ' ↗';
    font-size: 0.9em;
}

/* LCARS Footer - Function Bar */
.lcars-footer {
    background: #000;
    border-top: 15px solid var(--lcars-orange);
    border-radius: 40px 0 0 0;
    padding: 20px;
    margin-top: 40px;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
}

.footer-bar {
    height: 8px;
    background: var(--lcars-orange);
    border-radius: 0 8px 0 0;
    margin-bottom: 20px;
}

.footer-content {
    color: var(--lcars-blue);
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--lcars-gold);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--lcars-pink);
}

.footer-status {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid var(--lcars-blue);
    color: var(--lcars-pink);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

/* Single Column Layout for Sub-Pages */
.lcars-single-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Narrative Terminal Structure */
.narrative-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--lcars-blue);
}

.diag-code {
    color: var(--lcars-pink);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

.narrative-title {
    color: var(--lcars-gold);
    font-size: 1.4rem;
    margin: 5px 0;
    border-bottom: 3px solid var(--lcars-pink);
    padding-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Body styled as a data entry node */
.narrative-body {
    padding-left: 0;
    position: relative;
}

.narrative-content {
    position: relative;
}

.mission-image {
    float: right;
    max-width: 200px;
    width: auto;
    height: auto;
    margin: 0 0 15px 20px;
    border-radius: 4px;
    border: 2px solid var(--lcars-blue);
}

/* Scan Frame Overlay for Recruitment Images */
.scan-frame {
    position: relative;
    border: 2px solid var(--lcars-blue);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
    background: #000;
}

.recruitment-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.8) contrast(1.2);
    opacity: 0.9;
}

/* Academy Banner Image Size Fix */
.scan-frame .recruitment-img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(153, 204, 255, 0.6);
    box-shadow: 0 0 12px var(--lcars-blue);
    animation: scan-loop 5s linear infinite;
}

@keyframes scan-loop {
    0% { top: 0; }
    100% { top: 100%; }
}

/* Recruitment Terminal Container */
.recruitment-terminal {
    width: 100%;
}

/* Terminal Diagnostic Text (Center Bar) */
.terminal-diag {
    color: var(--lcars-blue);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    padding: 12px 15px;
    margin: 15px 0;
    background: rgba(153, 204, 255, 0.05);
    border-left: 10px solid var(--lcars-blue);
    border-radius: 0 10px 0 0;
    font-weight: bold;
}

/* Enlistment Group (Button Pillar) */
.enlistment-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 15px solid var(--lcars-orange);
    padding-left: 10px;
    margin: 20px 0;
}

.enlist-btn {
    text-decoration: none !important;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    padding: 10px 15px;
    color: #000 !important;
    text-align: left;
    transition: all 0.1s ease;
    text-transform: uppercase;
    display: block;
    border: none;
    border-right: 15px solid rgba(0, 0, 0, 0.3); /* The "button depth" effect */
    position: relative;
}

.enlist-btn.primary {
    background: var(--lcars-gold);
    border-radius: 0 20px 0 0;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.enlist-btn.secondary {
    background: var(--lcars-blue);
    font-size: 0.95rem;
}

.enlistment-group .enlist-btn:last-of-type {
    border-radius: 0 0 20px 0;
}

.enlist-btn:hover,
.enlist-btn:active,
.enlist-btn:focus {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none !important;
    outline: none;
    filter: brightness(1.3);
    border-right-width: 5px; /* Simulates the button being pressed in */
    transform: translateX(2px);
}

/* Quick Links Terminal */
.quick-links-terminal {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--lcars-blue);
}

.readout-header {
    color: var(--lcars-pink);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: bold;
}

.readout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.readout-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.readout-col .label {
    color: var(--lcars-gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.readout-col a {
    color: var(--lcars-blue);
    text-decoration: none !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.readout-col a:hover {
    color: var(--lcars-gold);
    text-decoration: underline !important;
}

.mission-text {
    color: var(--lcars-blue);
    line-height: 1.6;
    font-size: 1.05rem;
    text-transform: none; /* Keep mission text readable */
    font-family: 'Verdana', 'Arial', sans-serif; /* Standard Starfleet readout font */
    margin-bottom: 20px;
}

.mission-text p {
    margin-bottom: 15px;
}

/* Attribution Footer */
.narrative-attribution {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 2px solid var(--lcars-blue);
    display: flex;
    align-items: center;
    gap: 15px;
}

.attr-stem {
    background: var(--lcars-pink);
    border-radius: 0 0 0 15px; /* The elbow curve connecting back to the sidebar */
    flex-shrink: 0;
    width: 8px;
    height: 60px;
}

.attr-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.attr-rank {
    color: var(--lcars-gold);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.attr-name {
    color: var(--lcars-blue);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.attr-post {
    color: var(--lcars-gold) !important;
}

.attr-contact a:hover {
    color: var(--lcars-gold) !important;
}

/* Responsive Narrative Terminal */
@media (max-width: 768px) {
    .mission-image {
        float: none;
        display: block;
        margin: 0 auto 15px auto;
        max-width: 100%;
    }
    
    .narrative-body {
        padding-left: 0;
    }
    
    .narrative-title {
        font-size: 1.1rem;
    }
}

/* Academy Sub-Navigation */
.academy-sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(153, 204, 255, 0.05);
    border-left: 10px solid var(--lcars-gold);
    border-radius: 0 10px 0 0;
}

.academy-nav-link {
    padding: 8px 15px;
    background: var(--lcars-blue);
    color: #000;
    text-decoration: none;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-size: 0.9rem;
}

.academy-nav-link:hover,
.academy-nav-link:focus {
    background: var(--lcars-gold);
    color: #000;
}

.academy-nav-link.active {
    background: var(--lcars-pink);
    color: #000;
}

/* Fleet Sub-Navigation */
.fleet-republic-sub-nav,
.fleet-hades-sub-nav,
.fleet-freedom-sub-nav,
.fleet-hub-sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(153, 204, 255, 0.05);
    border-left: 10px solid var(--lcars-blue);
    border-radius: 0 10px 0 0;
}

.fleet-republic-nav-link,
.fleet-hades-nav-link,
.fleet-freedom-nav-link,
.fleet-hub-nav-link {
    padding: 8px 15px;
    background: var(--lcars-blue);
    color: #000;
    text-decoration: none;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-size: 0.9rem;
}

.fleet-republic-nav-link:hover,
.fleet-hades-nav-link:hover,
.fleet-freedom-nav-link:hover,
.fleet-hub-nav-link:hover,
.fleet-republic-nav-link:focus,
.fleet-hades-nav-link:focus,
.fleet-freedom-nav-link:focus,
.fleet-hub-nav-link:focus {
    background: var(--lcars-gold);
    color: #000;
}

.fleet-republic-nav-link.active,
.fleet-hades-nav-link.active,
.fleet-freedom-nav-link.active,
.fleet-hub-nav-link.active {
    background: var(--lcars-pink);
    color: #000;
}

/* Flagship Republic Gold Accent */
.fleet-republic-sub-nav {
    border-left-color: var(--lcars-gold);
}

.fleet-republic-nav-link {
    background: var(--lcars-gold);
}

.fleet-republic-nav-link:hover,
.fleet-republic-nav-link:focus {
    background: var(--lcars-orange);
}

.fleet-republic-nav-link.active {
    background: var(--lcars-pink);
}

/* Academy Usage Tags (for guides) */
blockquote p em {
    display: block;
    background: rgba(153, 204, 255, 0.1);
    border-left: 3px solid var(--lcars-blue);
    font-size: 0.9rem !important; /* Prevent "zoomed-in" look */
    font-style: normal !important; /* Remove italic styling */
    padding: 10px;
    margin: 5px 0;
    color: var(--lcars-blue);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    letter-spacing: 1px;
    font-style: normal;
}

/* Deckplan Row Styling */
.deckplan-header {
    display: grid;
    grid-template-columns: 100px 20px 1fr 100px 150px;
    gap: 10px;
    padding: 12px;
    background: rgba(153, 204, 255, 0.1);
    border-left: 10px solid var(--lcars-blue);
    border-radius: 0 10px 0 0;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--lcars-gold);
    margin-bottom: 2px;
}

.deckplan-row {
    border-left: 10px solid var(--lcars-blue);
    display: grid;
    grid-template-columns: 100px 20px 1fr 100px 150px;
    gap: 10px;
    padding: 10px;
    background: rgba(153, 204, 255, 0.03);
    margin-bottom: 2px;
    transition: background 0.2s ease;
}

.deckplan-row:hover {
    background: rgba(153, 204, 255, 0.08);
}

.deckplan-number {
    color: var(--lcars-gold);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

.deckplan-description {
    color: var(--lcars-blue);
    font-family: 'Verdana', 'Arial', sans-serif;
}

/* Support Craft Row Styling */
.support-header {
    display: grid;
    grid-template-columns: 150px 20px 1fr;
    gap: 10px;
    padding: 12px;
    background: rgba(153, 204, 255, 0.1);
    border-left: 10px solid var(--lcars-blue);
    border-radius: 0 10px 0 0;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--lcars-gold);
    margin-bottom: 2px;
}

.support-row {
    border-left: 10px solid var(--lcars-blue);
    display: grid;
    grid-template-columns: 150px 20px 1fr;
    gap: 10px;
    padding: 10px;
    background: rgba(153, 204, 255, 0.03);
    margin-bottom: 2px;
    transition: background 0.2s ease;
}

.support-row:hover {
    background: rgba(153, 204, 255, 0.08);
}

.support-type {
    color: var(--lcars-gold);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

.support-description {
    color: var(--lcars-blue);
    font-family: 'Verdana', 'Arial', sans-serif;
}

/* Flagship Data Stream Styling */
.deckplan-row[style*="border-left-color: var(--lcars-gold)"],
.support-row[style*="border-left-color: var(--lcars-gold)"] {
    border-left-color: var(--lcars-gold) !important;
}

.deckplan-number[style*="color: var(--lcars-gold)"],
.support-type[style*="color: var(--lcars-gold)"] {
    color: var(--lcars-gold) !important;
}

/* Roster Tactical ID Cards */
.roster-department {
    margin-bottom: 30px;
}

.roster-department-header {
    background: var(--lcars-blue);
    color: #000;
    padding: 12px 20px;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    border-bottom: 3px solid var(--lcars-blue);
    border-radius: 0 10px 0 0;
}

.roster-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.roster-tactical-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--lcars-blue);
    border-radius: 10px;
    padding: 15px;
    text-decoration: none;
    color: var(--lcars-blue);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roster-tactical-card:hover {
    background: rgba(153, 204, 255, 0.1);
    border-color: var(--lcars-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(153, 204, 255, 0.2);
}

.roster-tactical-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.roster-tactical-card .card-name {
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--lcars-gold);
    flex: 1;
}

.roster-tactical-card-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
}

.roster-tactical-card-type.pc {
    background: var(--lcars-blue);
    color: #000;
}

.roster-tactical-card-type.spc {
    background: var(--lcars-pink);
    color: #000;
    border: 2px solid var(--lcars-pink);
}

.card-rank-insignia {
    width: 30px;
    height: auto;
    flex-shrink: 0;
}

.roster-tactical-card .card-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 15px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.roster-tactical-card .grid-label {
    color: var(--lcars-pink);
    font-weight: bold;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.roster-tactical-card .grid-value {
    color: var(--lcars-blue);
    font-family: 'Verdana', 'Arial', sans-serif;
}

.roster-tactical-card .card-player {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(153, 204, 255, 0.2);
    color: var(--lcars-blue);
    font-size: 0.85rem;
    font-style: italic;
}

/* Flagship Republic Gold Accent for Roster Cards */
.roster-tactical-card[style*="border-top-color: var(--lcars-gold)"] {
    border-top-color: var(--lcars-gold) !important;
    border-top-width: 4px !important;
}

.roster-tactical-card[style*="border-top-color: var(--lcars-gold)"]::before {
    content: 'FLAGSHIP';
    position: absolute;
    top: -8px;
    right: 15px;
    background: var(--lcars-gold);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    text-transform: uppercase;
}

/* Command Status Marker for Admirals */
.command-status-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--lcars-pink);
    border-radius: 50%;
    margin-left: 8px;
    animation: pulse-pink 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--lcars-pink);
}

@keyframes pulse-pink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* Aquarius Node Highlight */
.aquarius-node {
    background: rgba(255, 204, 0, 0.1) !important;
    border-left: 10px solid var(--lcars-gold) !important;
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 10px 0 0;
}

.aquarius-node h3 {
    color: var(--lcars-gold);
    font-family: 'Antonio', 'Verdana', 'Arial', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Mobile Roster Optimization */
@media (max-width: 800px) {
    .roster-grid-container {
        grid-template-columns: 1fr;
    }
    
    .roster-tactical-card {
        border-top-width: 4px;
    }
    
    .card-rank-insignia {
        width: 45px; /* 1.5x size for mobile */
    }
    
    .roster-tactical-card .card-name {
        font-size: 1.2rem; /* Larger touch target */
    }
    
    .roster-tactical-card .card-player {
        font-size: 0.9rem; /* Ensure legibility */
    }
}

@media (min-width: 801px) {
    /* Hide tactical cards on desktop */
    .roster-tactical-card {
        display: none;
    }
}

/* ============================================
   FORCE SCALE NORMALIZATION - Anti-Zoom Patch
   ============================================ */
:root {
    font-size: 14px !important; /* Prevents "Massive Text" on high-res monitors */
}

@media (max-width: 768px) {
    :root { 
        font-size: 13px !important; 
    }
    
    /* Ensure no horizontal overflow causes zoom-out */
    .site-container, body, html {
        overflow-x: hidden !important;
        width: 100vw;
        max-width: 100vw;
    }

    /* Force panels to fit the phone width */
    .lcars-panel {
        margin: 10px 5px !important;
        width: calc(100% - 10px) !important;
        max-width: calc(100vw - 10px) !important;
    }
}

/* Mobile Grid Normalization - Force single column for 5-column grids */
@media (max-width: 800px) {
    /* Deckplan and Support Craft grids - Force single column on mobile */
    .deckplan-header,
    .deckplan-row,
    .support-header,
    .support-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Hide separator column on mobile */
    .deckplan-header > :nth-child(2),
    .deckplan-row > :nth-child(2),
    .support-header > :nth-child(2),
    .support-row > :nth-child(2) {
        display: none;
    }
    
    /* Stack grid items vertically on mobile */
    .deckplan-number,
    .deckplan-description,
    .support-type,
    .support-description {
        display: block;
        width: 100%;
    }
}