/**
 * SnarkyType - Responsive Design Utilities
 * Common responsive breakpoints and mobile optimizations
 */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
    body {
        padding: 15px;
    }

    .container,
    .max-w-6xl,
    .max-w-5xl {
        max-width: 95% !important;
    }

    #topbar,
    .topnav {
        max-width: 95% !important;
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    #topbar,
    .topnav,
    .navbar {
        padding: 15px 20px !important;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid layouts become single column */
    .grid,
    .md\\:grid-cols-3,
    .lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Column spans become full width */
    .col-span-1,
    .col-span-2,
    .col-span-3,
    .lg\\:w-1\\/3 {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    /* Flex layouts stack vertically */
    .flex.gap-2,
    .lg\\:flex-row {
        flex-direction: column !important;
    }

    /* Cards and panels get smaller padding */
    .card,
    .panel {
        padding: 16px !important;
    }

    /* Stat boxes */
    .stat-box {
        padding: 12px !important;
    }

    /* Modals */
    .modal-content {
        width: 90% !important;
        margin: 10% auto !important;
        padding: 20px !important;
    }

    /* Canvas/Test container */
    #canvasContainer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }

    /* Settings nav */
    .settings-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #1e293b;
    }

    .settings-container {
        flex-direction: column;
        padding: 20px;
    }

    /* Tables */
    table {
        font-size: 0.85em;
    }

    /* Brand adjustments */
    .brand {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Small mobile - 480px and below */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }

    #topbar,
    .topnav,
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
    }

    .brand-title,
    .topnav-brand,
    .navbar-brand {
        font-size: 1.2em !important;
    }

    h1 {
        font-size: 1.5em !important;
    }

    .text-2xl {
        font-size: 1.3em !important;
    }

    .text-xl {
        font-size: 1.1em !important;
    }

    .card,
    .panel {
        padding: 12px !important;
    }

    .modal-content {
        width: 95% !important;
        padding: 15px !important;
    }

    table {
        font-size: 0.75em !important;
    }

    .alpha-badge {
        font-size: 0.8em;
    }

    /* Profile and settings headers */
    .profile-card {
        padding: 15px !important;
        margin-top: 20px !important;
    }
}