/* =========================================
   SIDEBAR TOGGLE
========================================= */

.sidebar-toggle{

    display:none;

    position:fixed;

    top:16px;

    left:16px;

    width:46px;
    height:46px;

    z-index:2001;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #b8860b,
        #d4af37,
        #f5d76e
    );

    color:#111827;

    font-size:20px;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 10px 25px rgba(212,175,55,.25);

    transition:all .25s ease;
}

/* HOVER */

.sidebar-toggle:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(212,175,55,.32);
}

/* ACTIVE */

.sidebar-toggle:active{

    transform:scale(.96);
}

/* =========================================
   MOBILE FIX
========================================= */

@media(max-width:768px){

    /* LAYOUT */

    .app-layout{

        display:block;

        width:100%;

        min-height:100vh;
    }

    /* TOGGLE */

    .sidebar-toggle{

        display:flex;
    }

    /* SIDEBAR */

    .sidebar{

        position:fixed;

        top:0;
        left:0;

        width:280px;

        max-width:85vw;

        height:100vh;

        z-index:2000;

        background:#ffffff;

        border-right:1px solid rgba(15,23,42,.06);

        padding:80px 1rem 1rem;

        overflow-y:auto;

        transform:translateX(-100%);

        transition:transform .3s ease;

        box-shadow:
            20px 0 40px rgba(15,23,42,.08);

        display:flex;

        flex-direction:column;
    }

    /* OPEN */

    .sidebar.open{

        transform:translateX(0);
    }

    /* NAV */

    .sidebar nav{

        display:flex;

        flex-direction:column;

        gap:.5rem;

        width:100%;

        margin-top:1rem;
    }

    /* LINKS */

    .sidebar nav a{

        width:100%;

        display:flex;

        align-items:center;

        padding:.95rem 1rem;

        border-radius:14px;

        color:#475569;

        font-weight:600;

        text-decoration:none;

        transition:all .2s ease;

        margin-bottom:.2rem;
    }

    /* HOVER */

    .sidebar nav a:hover{

        background:rgba(212,175,55,.10);

        color:#0f172a;
    }

    /* ACTIVE */

    .sidebar nav a.active{

        background:rgba(212,175,55,.14);

        color:#0f172a;

        border:1px solid rgba(212,175,55,.18);
    }

    /* MAIN */

    .main-content{

        width:100%;

        min-width:100%;

        padding:1rem;

        padding-top:90px;

        margin:0;

        overflow-x:hidden;
    }

    /* AUTH CARD */

    .auth-card{

        padding:1.5rem;

        margin:1rem;

        border-radius:22px;
    }

    /* GRIDS */

    .dashboard-grid,
    .courses-grid{

        grid-template-columns:1fr;

        gap:1rem;
    }

    /* NAVBAR */

    .navbar{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:.7rem;
    }

    /* LESSON ACTIONS */

    .lesson-actions{

        flex-direction:column;

        align-items:stretch;
    }

    /* LINK COPY */

    .link-copy-row{

        display:flex;

        flex-direction:column;

        gap:.7rem;
    }

    .link-copy-row input{

        width:100%;
    }

    /* PAYMENT */

    .payment-tabs{

        display:flex;

        flex-direction:column;

        gap:.6rem;
    }

    /* TIMELINE */

    .timeline-module{

        grid-template-columns:36px 1fr;

        gap:.8rem;
    }

    /* CHECKOUT */

    .checkout-card{

        max-width:100%;
    }

    /* TABLE */

    .data-table{

        width:100%;

        display:block;

        overflow-x:auto;

        white-space:nowrap;

        font-size:.82rem;
    }

    .data-table th,
    .data-table td{

        padding:.65rem .5rem;
    }

    /* ADMIN SIDEBAR */

    .admin-sidebar{

        width:280px;
    }

    /* PROFILE CARD */

    .profile-card.card{

        width:100%;

        max-width:100%;

        padding:1.2rem;

        border-radius:20px;
    }

    /* INPUTS */

    .profile-card input,
    .profile-card textarea,
    .profile-card select{

        min-height:52px;

        font-size:16px;
    }
}

/* =========================================
   TABLET
========================================= */

@media(min-width:769px) and (max-width:1024px){

    .sidebar{

        width:220px;
    }

    .dashboard-grid{

        grid-template-columns:
            repeat(2, 1fr);

        gap:1rem;
    }

    .courses-grid{

        grid-template-columns:
            repeat(2, 1fr);

        gap:1rem;
    }
}

/* =========================================
   TABLE FILTER
========================================= */

.table-filter{

    width:100%;

    max-width:320px;

    margin-bottom:1rem;

    padding:.8rem 1rem;

    border-radius:14px;

    border:1px solid #dbe2ea;

    background:#ffffff;

    color:#0f172a;

    font-size:.95rem;

    outline:none;

    transition:all .2s ease;

    box-shadow:
        0 2px 4px rgba(15,23,42,.02);
}

/* FOCUS */

.table-filter:focus{

    border-color:#d4af37;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.12);
}

/* PLACEHOLDER */

.table-filter::placeholder{

    color:#94a3b8;
}

/* =========================================
   SIDEBAR OVERLAY
========================================= */

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(3px);

    z-index:1999;

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;
}

/* VISIBLE */

.sidebar-overlay.visible{

    opacity:1;

    visibility:visible;
}

/* =========================================
   DESKTOP OVERLAY
========================================= */

@media(min-width:769px){

    .sidebar-overlay{

        display:none !important;
    }
}