/* 
    STAR SYSTEMS GLOBAL STYLESHEET
    Architecture: Component-Based CSS (Production Ready)
    Lead Architect: Visual Studio 2026 AI Persona
    
    Branding Specification: 
        - Primary Blue (Navy): #1B374D 
        - Secondary Blue:      #364a60
        - Signature Green:     #BACC28 (Lime) / #9ACD32 (Command)
        - Text Palette:        #262626 (Dark) / #ffffff (Light)
*/

:root {
    --star-bg: #f4f7fa;
    --star-bg-secondary: #ffffff;
    --star-lime: #BACC28;
    --star-lime-dark: #9ACD32;
    --star-navy: #1B374D;
    --star-navy-light: #364a60;
    --star-text: #262626;
    --star-text-muted: #6c757d;
    --star-card-bg: #ffffff;
    --star-card-bg-solid: #ffffff;
    --star-card-header-bg: #f8f9fa;
    --star-card-header-text: #1B374D;
    --star-input-bg: #ffffff;
    --star-input-text: #262626;
    --star-input-border: #dee2e6;
    --star-input-label: #6c757d;
    --star-link: #1B374D;
    --star-shadow: rgba(0, 0, 0, 0.05);
    --star-grid-line: rgba(0, 0, 0, 0.03);
    --star-navbar-bg: #ffffff;
    --star-footer-bg: #ffffff;
    --star-nav-link: #495057;
    --star-nav-link-hover: #BACC28;
    --star-border: #edf2f7;
    --star-manage-nav-active: #BACC28;
    --star-manage-nav-active-text: #1B374D;
    --star-stripe: rgba(186, 204, 40, 0.05);
    --star-btn-accent-text: #1B374D;
}

/* --- 1. GLOBAL & RESET STYLES --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* Architectural Note: Padding-bottom is critical to prevent the 
       fixed footer from obscuring content at the bottom of the scroll range. */
    margin-bottom: 90px;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    background-color: var(--star-bg);
    color: var(--star-text);
}

/* Force container to 90% width for the wide, modern 'Enterprise' feel */
.container {
    min-width: 90% !important;
}

/* --- 2. BOOTSTRAP COMPONENT OVERRIDES --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(154, 205, 50, 0.5);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

/* --- 3. COMPONENT: CIRCUIT OVERLAY (ARCHITECTURE LAYER) --- */
/* This pattern creates the white 'blueprint' lines seen in the main banner */
.ss-circuit-overlay {
    position: relative;
    overflow: hidden;
}

    .ss-circuit-overlay::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* High-performance inline SVG: 45-degree PCB traces and junction nodes */
        background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 L20 100 L40 80 L100 80 L120 60' stroke='white' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Cpath d='M20 0 L20 20 L40 40 L80 40' stroke='white' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3Ccircle cx='40' cy='80' r='1.5' fill='white' opacity='0.2'/%3E%3Ccircle cx='100' cy='80' r='1.5' fill='white' opacity='0.2'/%3E%3C/svg%3E");
        background-size: 180px 180px;
        pointer-events: none;
        z-index: 0;
    }

    /* Ensure child content stays above the circuit lines */
    .ss-circuit-overlay > * {
        position: relative;
        z-index: 1;
    }

/* --- 4. COMPONENT: NAVIGATION BAR --- */
.navbar {
    /* Brand Gradient with Circuit Pattern */
    background: linear-gradient(186deg, #1B374D, #364a60cf) !important;
    border-bottom: 1px solid rgba(186, 204, 40, 0.3);
    padding: 0.8rem 0;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}
/* --- 10. COMPONENT: HUD NAVIGATION BUTTONS --- */
.ss-nav-button {
    background: rgba(255, 255, 255, 0.05); /* Very subtle glass fill */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Geometry: Only Top-Left curved, others sharp */
    border-radius: 15px 0 0 0;
    margin: 0 5px;
    padding: 8px 18px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8) !important;
}

    /* Hover Effect: Lights up the border and background */
    .ss-nav-button:hover {
        background: rgba(186, 204, 40, 0.1) !important; /* Subtle Lime glow */
        border-color: #BACC28;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: -3px -3px 10px rgba(186, 204, 40, 0.2);
    }

    /* Active State: When the user is on the current page */
    .ss-nav-button.active {
        background: #BACC28 !important;
        border-color: #BACC28;
        color: #1B374D !important; /* Dark text on lime button */
    }

/* Specific styling for the Toggler in mobile view */
.navbar-toggler {
    border-radius: 8px 0 0 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* --- 5. COMPONENT: PRODUCT GRID --- */
.product-grid {
    display: grid;
    /* Flexible grid system: min 290px for 4-item layouts, auto-scales to 320px+ */
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
    padding: 40px 0;
    justify-content: center;
}

/* --- 6. COMPONENT: UIVERSE ANIMATED CARDS --- */
.card {
    display: block;
    position: relative;
    max-width: 450px;
    max-height: 350px;
    border-radius: 12px;
    padding: 2.5em 1.5em;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #f0f7f9, #ffffff);
    border: 1px solid #364a6038;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .card:hover {
        box-shadow: 0 10px 30px rgba(27, 55, 77, 0.1);
    }

    /* Hover Expansion Circle using Brand Blue */
    .card:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: -16px;
        right: -16px;
        background: linear-gradient(135deg, #1B374D, #364a60);
        height: 32px;
        width: 32px;
        border-radius: 32px;
        transform: scale(1);
        transform-origin: 50% 50%;
        transition: transform 0.45s ease-in-out;
    }

    .card:hover:before {
        transform: scale(35);
    }

    .card:hover .small-desc {
        color: rgba(255, 255, 255, 0.85);
    }

    .card:hover .card-title {
        color: #ffffff;
    }

.card-title {
    color: #1B374D;
    font-size: 1.6em;
    font-weight: 800;
    margin-bottom: 0.6em;
    transition: color 0.3s ease;
}

.small-desc {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.6em;
    color: #555555;
    transition: color 0.3s ease;
}

/* --- 7. COMPONENT: CARD GO-CORNER --- */
.go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #BACC28, #9ACD32);
    border-radius: 0 12px 0 32px;
}

.go-arrow {
    margin-top: -2px;
    margin-right: -2px;
    color: #1B374D;
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- 8. PAGE SECTION: COMMAND CENTER (Contact) --- */
.command-card {
    background-color: #050505;
    color: #fff;
    border-radius: 12px;
    padding: 45px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 1px solid #1a1a1a;
}

.brand-green {
    color: #BACC28;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}

.info-icon {
    color: #BACC28;
    font-size: 1.6rem;
    margin-right: 20px;
    min-width: 35px;
    text-align: center;
}

.info-text {
    color: #cccccc;
    font-size: 1rem;
    line-height: 1.7;
}

/* --- 9. LAYOUT: FIXED LANDING FOOTER --- */
.landing-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Star Systems Brand Gradient */
    background: linear-gradient(186deg, #1B374D, #364a60cf) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85rem;
    z-index: 9999;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    border-top: 2px solid #BACC28; /* Signature Lime Line */
}

    .landing-footer a {
        color: #ffffff !important;
        text-decoration: none;
        font-weight: 700;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
    }

        .landing-footer a:hover {
            color: #BACC28 !important;
            border-bottom: 1px solid #BACC28;
        }


/* --- 11. CUSTOM IDENTITY & PREMIUM LAYOUT EXTENSIONS --- */

/* Centered authentication layouts wrapper */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 15px;
}

/* Auth card: custom form card avoiding strict card height constraints */
.auth-card {
    background: #ffffff;
    border: 1px solid var(--star-border);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px var(--star-shadow);
    width: 100%;
    max-width: 500px;
    transition: box-shadow 0.3s ease;
}

.auth-card:hover {
    box-shadow: 0 15px 40px rgba(27, 55, 77, 0.08);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header img {
    height: 48px;
    width: auto;
    margin-bottom: 1rem;
}

.auth-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--star-navy);
}

.auth-header p {
    color: var(--star-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Premium Form Elements */
.form-floating .form-control {
    border: 1px solid var(--star-input-border);
    border-radius: 8px;
    background-color: var(--star-input-bg);
    color: var(--star-input-text);
    padding: 1.2rem 0.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-floating .form-control:focus {
    border-color: var(--star-lime);
    box-shadow: 0 0 0 0.25rem rgba(186, 204, 40, 0.25);
    background-color: var(--star-input-bg);
}

.form-floating label {
    color: var(--star-input-label);
    padding: 1rem 0.75rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    color: var(--star-navy-light);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Star Systems Styled Primary Action Buttons */
.btn-star-primary {
    background: linear-gradient(135deg, var(--star-lime), var(--star-lime-dark)) !important;
    color: var(--star-btn-accent-text) !important;
    border: none !important;
    border-radius: 8px 0 8px 0 !important; /* Premium asymmetric Star Systems geometry */
    padding: 12px 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 10px rgba(186, 204, 40, 0.3) !important;
}

.btn-star-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(186, 204, 40, 0.45) !important;
}

.btn-star-primary:active {
    transform: translateY(0) !important;
}

.btn-star-secondary {
    background: rgba(27, 55, 77, 0.05) !important;
    color: var(--star-navy) !important;
    border: 1px solid rgba(27, 55, 77, 0.15) !important;
    border-radius: 8px 0 8px 0 !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
}

.btn-star-secondary:hover {
    background: rgba(27, 55, 77, 0.1) !important;
    border-color: rgba(27, 55, 77, 0.25) !important;
}

/* Styled links and helper utilities */
.star-link {
    color: var(--star-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted var(--star-navy);
    transition: all 0.2s ease;
}

.star-link:hover {
    color: var(--star-lime-dark);
    border-bottom: 1px solid var(--star-lime-dark);
}

.star-card-title-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--star-stripe);
    color: var(--star-lime-dark);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Manage nav override styling */
.manage-nav-pills .nav-link {
    color: var(--star-navy) !important;
    background: #ffffff !important;
    border: 1px solid var(--star-border) !important;
    border-radius: 8px 0 0 0 !important;
    margin-bottom: 8px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.manage-nav-pills .nav-link:hover {
    background: var(--star-stripe) !important;
    border-color: rgba(186, 204, 40, 0.5) !important;
    transform: translateX(3px);
}

.manage-nav-pills .nav-link.active {
    background: var(--star-manage-nav-active) !important;
    color: var(--star-manage-nav-active-text) !important;
    border-color: var(--star-manage-nav-active) !important;
    box-shadow: -3px 3px 10px rgba(186, 204, 40, 0.15);
}