/* ADG Shared Responsive Utilities */

/* ===== Tablet (≤1024px) ===== */
@media (max-width: 1024px) {
    /* Dashboard layouts → stack vertically */
    .dashboard,
    .command-dashboard,
    .app-layout,
    .main-area {
        flex-direction: column !important;
    }
    /* Panels → full width */
    .panel,
    .glass-card,
    .config-panel,
    .canvas-panel,
    .quote-panel,
    .cue-panel,
    .terminal-panel,
    .action-panel {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    /* Headers → compact */
    .topbar,
    .glass-header,
    header {
        padding-left: 56px !important; /* Space for home button */
    }
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {
    .topbar,
    .glass-header {
        flex-wrap: wrap;
        padding: 8px 8px 8px 52px !important;
        gap: 4px;
    }
    .topbar h1,
    .game-title,
    .event-info h1,
    .glitch-text {
        font-size: 0.9rem !important;
    }
    .topbar-center {
        order: 3;
        width: 100%;
        text-align: center;
    }
    /* Form elements */
    .form-grid,
    .radio-tiles {
        grid-template-columns: 1fr !important;
    }
    .input-group,
    .form-group {
        min-width: 100% !important;
    }
    /* Tables */
    .bom-table,
    table {
        font-size: 0.8rem;
    }
    .bom-table th,
    .bom-table td {
        padding: 6px 4px;
    }
    /* Buttons */
    .btn,
    button {
        font-size: 0.85rem;
    }
    /* General */
    body {
        font-size: 14px;
    }
}

/* ===== Small Phone (≤480px) ===== */
@media (max-width: 480px) {
    .panel,
    .glass-card {
        padding: 8px !important;
        border-radius: 8px !important;
    }
    .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .topbar h1,
    .game-title {
        font-size: 0.75rem !important;
    }
    .status-badge,
    .version-tag {
        display: none !important;
    }
}