/* ============================================
   WOLF GRID THEME COLORS
   ============================================ */
:root {
    --wolf-primary: #2563eb;
    --wolf-primary-dark: #1e40af;
    --wolf-secondary: #10b981;
    --wolf-dark: #1f2937;
    --wolf-darker: #111827;
    --wolf-light: #f3f4f6;
    --wolf-border: #374151;
    --wolf-hover: #3b82f6;
}

/* ============================================
   SPLASH SCREEN
   ============================================ */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wolf-darker) 0%, var(--wolf-dark) 50%, var(--wolf-darker) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.5s ease-in;
}

#splash-screen.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.splash-content {
    text-align: center;
    animation: slideUp 0.8s ease-out;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.splash-logo {
    max-width: 400px;
    max-height: 300px;
    width: 80%;
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    animation: pulse 2s ease-in-out infinite;
}

.splash-progress {
    width: 300px;
    height: 4px;
    background-color: #2a2a2a;
    border-radius: 2px;
    margin: 0 auto 15px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* [FIX 2026-08-05] The bar used `animation: progressLoad 2.5s ease-out forwards`, which filled
   to 100% in a fixed 2.5s and then stopped. Two problems: it finished long before startup did, so
   it sat at "full" while the viewer was still working and read as hung; and because an animation's
   value beats an inline style, it silently OVERRODE the real width InitManager.updateLoadingProgress
   was already setting. Real progress was computed and then thrown away.

   Now the width is driven purely by JS, with a transition so it moves smoothly. */
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--wolf-primary), var(--wolf-hover));
    width: 0;
    transition: width 0.35s ease-out;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
}

/* Indeterminate state — used while a step is running whose duration we cannot predict.
   It never rests, so the splash cannot look frozen even when no percentage is available. */
.progress-bar.indeterminate {
    width: 35% !important;
    transition: none;
    animation: progressSlide 1.1s ease-in-out infinite;
}

@keyframes progressSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

.splash-memorial {
    color: #888;
    font-size: 13px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    opacity: 0.8;
}

.splash-text {
    color: #aaa;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    min-height: 20px;
    transition: opacity 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    50% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
    }
}

@keyframes progressLoad {
    from { width: 0%; }
    to { width: 100%; }
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
#login-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--wolf-darker);
    display: flex;
    flex-direction: column;
}

/* Top Menu Bar */
#login-menu-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: linear-gradient(to bottom, var(--wolf-dark), var(--wolf-darker));
    border-bottom: 1px solid var(--wolf-primary);
    display: flex;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: 11px;
    z-index: 10;
}

.menu-item {
    position: relative;
    margin-right: 15px;
    cursor: pointer;
}

.menu-label {
    padding: 2px 8px;
    display: inline-block;
    color: var(--wolf-light);
}

.menu-label:hover {
    background-color: var(--wolf-primary);
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 18px;
    left: 0;
    background-color: var(--wolf-dark);
    border: 1px solid var(--wolf-border);
    min-width: 200px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.menu-item:hover .menu-dropdown {
    display: block;
}

.menu-dropdown a {
    display: block;
    padding: 6px 12px;
    color: #ddd;
    text-decoration: none;
    font-size: 11px;
}

.menu-dropdown a:hover {
    background-color: var(--wolf-primary);
}

.menu-dropdown .shortcut {
    float: right;
    color: #888;
    font-size: 10px;
    margin-left: 20px;
}

.menu-separator {
    height: 1px;
    background-color: #444;
    margin: 3px 0;
}

/* Web Browser */
#grid-home-iframe {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    height: calc(100% - 118px);
    border: none;
    background: linear-gradient(to bottom, var(--wolf-darker), #050b16);
    z-index: 1;
}

/* Bottom Widget Bar */
#login-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--wolf-darker), var(--wolf-dark));
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-top: 1px solid var(--wolf-primary);
    z-index: 5;
    font-family: sans-serif;
}

#login-form {
    display: contents;
}

/* Login Panels */
.login-panel {
    height: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--wolf-border);
}

.login-panel:last-child {
    border-right: none;
    flex: 1;
}

/* Panel widths */
#login-panel {
    flex: 2.5;
    min-width: 240px;
}

#start-location-panel {
    flex: 1.2;
    min-width: 130px;
}

#grid-panel {
    flex: 1;
    min-width: 100px;
}

#links-panel {
    flex: 2;
    min-width: 200px;
}

#mode-panel {
    flex: 1;
    min-width: 120px;
}

/* Panel Headers */
.panel-header {
    font-size: 13px;
    font-weight: bold;
    color: var(--wolf-primary);
    margin-bottom: 6px;
    margin-top: 2px;
}

/* Credentials Row */
.credentials-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.field-label {
    font-size: 10px;
    color: #ffffff;
    margin-bottom: 2px;
    font-weight: 500;
}

.field-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Input Styling */
.text-input,
.combo-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--wolf-border);
    color: #ffffff;
    padding: 3px 6px;
    font-size: 11px;
    height: 22px;
    box-sizing: border-box;
    font-family: sans-serif;
}

.text-input:focus,
.combo-input:focus {
    outline: none;
    border-color: var(--wolf-primary);
    background-color: rgba(255, 255, 255, 0.15);
}

#username {
    width: 178px;
}

.password-input {
    width: 128px;
}

#start-location {
    width: 165px;
}

#grid-selector {
    width: 135px;
}

/* Remove Username Button */
.remove-btn {
    width: 18px;
    height: 18px;
    background-color: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #ef4444;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.remove-btn:hover {
    background-color: #ef4444;
    color: white;
}

/* Emphasis Links */
.emphasis-link {
    display: block;
    font-size: 10px;
    color: var(--wolf-secondary);
    text-decoration: none;
    margin-bottom: 4px;
}

.emphasis-link:hover {
    text-decoration: underline;
    color: var(--wolf-hover);
}

/* Action Row */
.action-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
    gap: 12px;
}

/* Login Button */
.login-button {
    background: linear-gradient(135deg, var(--wolf-primary), var(--wolf-primary-dark));
    border: 1px solid var(--wolf-primary-dark);
    color: white;
    padding: 0 20px;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-button:hover {
    background: linear-gradient(135deg, var(--wolf-hover), var(--wolf-primary));
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.2);
}

.login-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.login-button:disabled {
    background: linear-gradient(135deg, #4b5563, #374151);
    border-color: #374151;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.login-button:disabled:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: none;
    box-shadow: none;
}

/* Checkbox Styling */
.checkbox-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.checkbox-label:hover {
    color: var(--wolf-hover);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--wolf-border);
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0 6px 0 0;
    position: relative;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: var(--wolf-primary);
    border-color: var(--wolf-primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

/* Status Message */
#status-message {
    position: absolute;
    bottom: 105px;
    width: 100%;
    text-align: center;
    color: var(--wolf-secondary);
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 6;
}

/* Utilities */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-grow {
    flex-grow: 1;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mt-2 {
    margin-top: 8px;
}

.w-full {
    width: 100%;
}

.text-xs {
    font-size: 10px;
}

.text-sm {
    font-size: 11px;
}

.text-white {
    color: white;
}

.text-gray {
    color: #b8b8b8;
}

.font-bold {
    font-weight: bold;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 900px) {
    #login-bottom-bar {
        height: auto;
        min-height: 100px;
        flex-wrap: wrap;
        padding-bottom: 10px;
        background: var(--wolf-darker);
    }
    
    .login-panel {
        min-width: 50% !important;
        flex: 1 1 50% !important;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

@media (max-width: 600px) {
    #login-screen {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #login-menu-bar {
        position: relative;
        height: auto;
        min-height: 30px;
        flex-wrap: wrap;
        padding: 8px;
    }

    #grid-home-iframe {
        display: none; /* Hide background site on mobile to prioritize login form */
    }

    /* Change the flex direction of the main panel container */
    #login-form > .flex {
        flex-direction: column !important;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    #login-bottom-bar {
        position: relative;
        flex-direction: column;
        height: auto;
        min-height: 100vh; /* Fill the screen */
        justify-content: flex-start; /* Start from top */
        padding-top: 20px;
        border-top: none;
        background: var(--wolf-darker);
    }

    .login-panel {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important;
        border-right: none;
        border-bottom: none; /* Cleaner look */
        padding: 5px 20px;
    }

    #login-panel {
        order: 1;
        background: transparent;
        margin-bottom: 5px;
    }
    
    #links-panel {
        order: 2; /* Move Buttons UP below credentials */
        padding-bottom: 20px;
        margin-top: 5px;
    }
    
    #start-location-panel {
        order: 3; /* Move Location DOWN as it's secondary */
        opacity: 0.8;
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 20px;
        margin-top: 10px;
    }
    
    #grid-panel {
        display: none !important;
        order: 5;
    }

    /* Adjust inputs for mobile */
    .flex-row.gap-2 {
        flex-direction: column;
        gap: 15px; /* More gap */
    }
    
    .flex-col.flex-1 {
        width: 100%;
    }

    .text-input, .combo-input, #username, .password-input {
        width: 100%;
        height: 48px; /* Even bigger */
        font-size: 16px; /* Prevents auto-zoom on iOS */
        padding: 0 12px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.08); /* Lighter background */
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .field-label {
        font-size: 12px;
        margin-bottom: 6px;
        color: #ddd;
    }
    
    .remove-btn {
        width: 48px;
        height: 48px;
        display: flex; /* Centering */
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border-radius: 4px;
        margin-left: 5px;
    }

    .action-row {
        flex-direction: column-reverse; /* Button on top of checkboxes */
        align-items: stretch;
        gap: 25px;
        margin-top: 25px;
    }

    .login-button {
        width: 100%;
        height: 54px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 0 6px 12px rgba(0,0,0,0.4);
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .checkbox-stack {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 0 5px;
    }
    
    .checkbox-label {
        font-size: 14px; /* Readable on mobile */
        padding: 8px;
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
        flex: 1;
        margin: 0 5px;
        display: flex;
        justify-content: center;
    }
    
    .checkbox-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    
    /* Make links centered and bigger */
    #links-panel .emphasis-link {
        text-align: center;
        font-size: 14px;
        padding: 8px 0;
        display: block;
    }
    
    #mode-panel {
        display: none;
    }
}

/* ── Start-location combobox ─────────────────────────────────────────────────
   [LOGIN 2026-08-17] Replaces a bare <input list> + <datalist>, whose options
   Chrome only reveals via a tiny built-in arrow — the remembered-regions list
   was undiscoverable. Firestorm's start-location is a combo_box with a visible
   dropdown (panel_login.xml:97-104); this restores that affordance while
   keeping the field freely typable. */
.combo-wrap {
    position: relative;
    display: block;
}
/* Leave room for the caret so long region names never sit under it. */
.combo-wrap .combo-input {
    width: 100%;
    padding-right: 20px;
}
.combo-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    /* Explicit near-white on the dark field: >= 4.5:1 contrast (WCAG 1.4.3). */
    color: #e8e8e8;
    font-size: 10px;
    line-height: 20px;
    cursor: pointer;
}
.combo-toggle:hover { color: #ffffff; }
.combo-toggle:focus-visible { outline: 1px solid var(--wolf-primary); outline-offset: -1px; }

.combo-list {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0 0;
    padding: 2px 0;
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
    background-color: #1d2430;          /* opaque: must not show world/page through it */
    border: 1px solid var(--wolf-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.combo-list[hidden] { display: none; }
.combo-list li {
    padding: 3px 6px;
    font-size: 11px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Hover AND keyboard-active share one style so arrow keys are as legible as the mouse. */
.combo-list li:hover,
.combo-list li[aria-selected="true"] {
    background-color: var(--wolf-primary);
    color: #ffffff;
}
/* Separator under the two fixed entries, before remembered regions. */
.combo-list li.combo-sep-after {
    border-bottom: 1px solid var(--wolf-border);
    margin-bottom: 2px;
    padding-bottom: 4px;
}
.combo-list li.combo-empty {
    color: #b9c0cc;
    cursor: default;
    font-style: italic;
}
.combo-list li.combo-empty:hover { background: transparent; color: #b9c0cc; }
/* Flip the list above the field when the login panel sits at the bottom of the window
   (added by login_manager.setupStartLocationCombo when space below is insufficient). */
.combo-list.combo-list-up {
    top: auto;
    bottom: 100%;
    margin: 0 0 2px 0;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}