/* ---- Admin login modal overlay ---- */

.admin-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s;
}

.admin-login-overlay.visible {
    background: rgba(0, 0, 0, 0.55);
}

.admin-login-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-xl, 2rem);
    width: min(360px, calc(100vw - 2rem));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.admin-login-overlay.visible .admin-login-modal {
    transform: translateY(0);
    opacity: 1;
}

.admin-login-modal-title {
    font-size: var(--fs-135);
    font-weight: 700;
    margin-bottom: var(--space-lg, 1.5rem);
    color: var(--color-text);
}

/* ---- Self-contained form styles ----
   admin.css (.form-group / .btn) is NOT loaded on public pages, so the login
   modal must style its own inputs, labels and button. All colors use theme
   tokens, so the modal adapts to every theme automatically. */

.admin-login-modal .form-group {
    margin-bottom: var(--space-md);
}

.admin-login-modal label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-size: var(--fs-090); /* matches the League Settings card's .form-group label */
    color: var(--color-text-secondary);
}

.admin-login-modal input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--fs-095); /* matches the League Settings card's .form-group input — fluid, proportional */
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-login-modal input::placeholder {
    color: var(--color-text-muted);
}

.admin-login-modal input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.admin-login-modal .btn {
    display: block;
    width: 100%;
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--fs-095); /* matches the input cells — uniform, fluid CTA */
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
}

.admin-login-modal .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.admin-login-modal .btn:not(:disabled):active {
    transform: translateY(0);
}

.admin-login-modal .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Login feedback message (admin.css not loaded on public pages) ---- */
.admin-login-modal .admin-msg {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: var(--fs-095);
}

.admin-login-modal .admin-msg-error {
    background: var(--color-accent-light);
    color: var(--color-loss);
    border: 1px solid var(--color-loss);
}

.admin-login-modal .admin-msg-success {
    background: var(--color-running-bg);
    color: var(--color-running);
    border: 1px solid var(--color-running);
}

.admin-login-modal .admin-msg-info {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* ---- Admin floating button (mirrors theme-picker) ---- */

.admin-button {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: calc(20px + env(safe-area-inset-left));
    z-index: 1000;
}

.admin-button-toggle {
    width: clamp(32px, calc(1.43vw + 27px), 44px);
    height: clamp(32px, calc(1.43vw + 27px), 44px);
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--fs-120);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

.admin-button-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* ---- Shared tooltip for floating buttons ---- */

.floating-btn-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: var(--color-bg);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--fs-075);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    font-family: var(--font-main);
}

.admin-button:hover .floating-btn-tooltip,
.theme-picker:hover .floating-btn-tooltip {
    opacity: 1;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .admin-button {
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: calc(12px + env(safe-area-inset-left));
    }

    .admin-button-toggle {
        /* width/height/font-size handled by clamp() in base rule */
    }
}