/* ===== D&D Sanctum — Responsive Overrides ===== */
/* Mobile-first: base styles zijn mobile. Hier worden tablet/desktop overrides gedaan. */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    :root {
        --header-height: 64px;
    }

    #app-nav {
        /* Move nav to sidebar on tablet+ */
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--space-md);
        gap: var(--space-sm);
        border-top: none;
        border-right: 1px solid var(--border);
    }

    #app-main {
        margin-left: var(--sidebar-width);
        padding-bottom: var(--space-md);
    }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
    #app-main {
        padding: var(--space-xl);
    }
}

/* --- Large Desktop (1440px+) --- */
@media (min-width: 1440px) {
    :root {
        --content-max-width: 1400px;
    }
}

/* --- Touch device adjustments --- */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}