/* =========================================================
   SoftVide - Responsive Layout
   File: assets/css/responsive.css
   ========================================================= */


/* ---------- Large Desktop ---------- */

@media (min-width: 1400px) {

    :root {
        --sv-sidebar-width: 240px;
    }

    .content {
        padding-left: 30px;
        padding-right: 30px;
    }

    .video-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


/* ---------- Desktop ---------- */

@media (max-width: 1200px) {

    .brand {
        margin-right: 20px;
    }

    .search-form {
        max-width: 560px;
    }

    .header-actions {
        margin-left: 15px;
    }

    .create-action .action-text {
        display: none;
    }
}


/* ---------- Tablet ---------- */

@media (max-width: 1000px) {

    :root {
        --sv-sidebar-width: 84px;
    }

    .sidebar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar-item {
        flex-direction: column;

        justify-content: center;

        gap: 4px;

        min-height: 64px;

        padding: 8px 4px;

        text-align: center;

        font-size: 11px;
    }

    .sidebar-icon {
        width: 100%;
        min-width: 0;

        font-size: 20px;
    }

    .sidebar-section h3 {
        margin-left: 0;
        margin-right: 0;

        text-align: center;

        font-size: 11px;
    }

    .subscription-list:empty::after {
        display: none;
    }

    .sidebar-divider {
        width: 100%;
        margin: 8px 0;
    }

    .brand {
        margin-right: 12px;
    }

    .brand-text {
        display: none;
    }

    .search-form {
        max-width: none;
    }

    .profile-text {
        display: none;
    }

    .profile-button {
        padding: 0;
    }
}


/* ---------- Small Tablet ---------- */

@media (max-width: 800px) {

    :root {
        --sv-sidebar-width: 72px;
    }

    .topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .menu-button {
        margin-right: 4px;
    }

    .brand {
        margin-right: 8px;
    }

    .search-input {
        padding-left: 14px;
        padding-right: 14px;
    }

    .search-button {
        width: 48px;
    }

    .header-actions {
        margin-left: 8px;
        gap: 2px;
    }

    .header-action {
        padding-left: 6px;
        padding-right: 6px;
    }

    .content {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 600px) {

    :root {
        --sv-header-height: 56px;
    }

    .topbar {
        height: var(--sv-header-height);

        padding-left: 8px;
        padding-right: 8px;
    }

    .menu-button {
        width: 38px;
        height: 38px;
    }

    .brand {
        gap: 5px;
        margin-right: 8px;
    }

    .brand-mark {
        width: 29px;
        height: 29px;

        font-size: 16px;
    }

    .search-form {
        min-width: 0;
    }

    .search-input {
        height: 36px;

        padding-left: 12px;

        font-size: 13px;
    }

    .search-button {
        width: 42px;
        height: 36px;
    }

    .header-actions {
        margin-left: 4px;
    }

    .create-action {
        display: none;
    }

    .header-action[aria-label="Notifications"] {
        display: none;
    }

    .profile-avatar {
        width: 30px;
        height: 30px;
    }

    .app-shell {
        min-height: calc(100vh - var(--sv-header-height));
    }

    .sidebar {
        position: fixed;

        top: var(--sv-header-height);
        left: 0;

        z-index: 900;

        width: 0;
        min-width: 0;

        padding: 0;

        border-right: 0;

        overflow: hidden;

        transform: translateX(-100%);

        transition:
            width 0.2s ease,
            transform 0.2s ease;
    }

    .content {
        width: 100%;

        padding:
            14px
            12px
            40px;
    }

    .video-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }
}


/* ---------- Very Small Mobile ---------- */

@media (max-width: 420px) {

    .brand-mark {
        width: 27px;
        height: 27px;
    }

    .search-input {
        font-size: 12px;
    }

    .search-button {
        width: 38px;
    }

    .profile-avatar {
        width: 28px;
        height: 28px;
    }

    .chips {
        gap: 8px;
    }

    .chip {
        padding-left: 12px;
        padding-right: 12px;
    }
}