/* Shared responsiveness helpers (used by admin & public pages). */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Admin menu toggle (default hidden, only shown on mobile via media query below). */
.admin-menu-toggle {
    display: none;
}

/* Admin panel: mobile-friendly layout */
@media (max-width: 768px) {
    /* Off-canvas sidebar + top-right kebab menu */
    .admin-layout .admin-content {
        margin-left: 0 !important;
    }

    .admin-layout .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(84vw, 320px);
        overflow-y: auto;
        transform: translateX(-110%);
        transition: transform 180ms ease;
        z-index: 60;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.26);
    }

    body.admin-menu-open .admin-layout .sidebar {
        transform: translateX(0);
    }

    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, 0.18);
        background: rgba(255, 255, 255, 0.92);
        color: #0f172a;
    }

    .admin-menu-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(31, 42, 68, 0.18);
        border-color: rgba(31, 42, 68, 0.45);
    }

    .admin-layout .topbar .max-w-6xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .admin-layout .admin-shell {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .admin-layout .page-shell {
        padding: 16px !important;
    }

    .admin-layout .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-layout .sidebar nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .admin-layout .sidebar-link {
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    .admin-layout .sidebar-link i {
        width: 18px;
        text-align: center;
    }

    .admin-layout .table-shell,
    .admin-layout .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-layout .table-shell table,
    .admin-layout .overflow-x-auto table {
        min-width: 720px;
    }
}