/*
 * Mobile-first Overrides für schmale Displays.
 * Wird nach app.css eingebunden und überschreibt gezielt einzelne Regeln.
 */

@media (max-width: 800px) {
    .app-header {
        padding: 18px 16px;
        gap: 12px;
    }
    .app-header h1 {
        font-size: 1.6rem;
    }
    .app-header .eyebrow {
        font-size: .7rem;
    }
    .app-nav {
        gap: 4px;
    }
    .app-nav-item {
        padding: 6px 10px;
        font-size: .85rem;
    }
    .app-nav-user {
        display: none !important;
    }
    .container {
        padding: 16px 12px;
    }
    .panel {
        padding: 16px;
        border-radius: 12px;
    }
    .panel-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .panel-heading > div {
        min-width: 0;
    }
    .panel-heading .panel-actions,
    .panel-heading .round-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .panel-heading .button,
    .panel-heading a.button {
        flex: 1 1 auto;
        text-align: center;
    }
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .toolbar .input {
        width: 100%;
        min-width: 0;
    }
    .lineup-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .lineup-header .round-controls {
        flex-wrap: wrap;
    }
    .lineup-header .round-controls .button {
        flex: 1 1 auto;
    }
    .players-table th:nth-child(3),
    .players-table td:nth-child(3),
    .players-table th:nth-child(4),
    .players-table td:nth-child(4) {
        display: none;
    }
    .players-table td:last-child {
        white-space: normal;
    }
    .players-table td:last-child .button,
    .players-table td:last-child a.button {
        display: block;
        width: 100%;
        margin: 3px 0;
        text-align: center;
    }
    .variant-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .variant-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .variant-actions .button {
        flex: 1 1 auto;
        text-align: center;
    }
    .settings-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }
    .settings-actions .button {
        width: 100%;
    }
    .dialog {
        width: min(520px, calc(100% - 16px));
    }
    .dialog form {
        padding: 18px;
    }
    .dialog-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .dialog-actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 14px 12px;
    }
    .app-header h1 {
        font-size: 1.4rem;
    }
    .app-nav-item {
        padding: 5px 9px;
        font-size: .8rem;
    }
    .panel {
        padding: 14px;
    }
    .panel-heading h2 {
        font-size: 1.15rem;
    }
    .container {
        padding: 12px 10px;
    }
}