/* Responsive Breakpoints */

/* PC BREAKPOINT */
@media (max-width: 90rem) {
    /* Main Content */
    .main-content {
        padding: 0 clamp(1.5rem, 5vw, 6.875rem);
    }

    /* Main Container */
    .main-info-container {
        padding: 0 clamp(1.5rem, 5vw, 6.875rem);
    }

    /* User Profile */ 
    .pfp-container {
        left: 4.375rem;
    }

    /* User Buttons */
    .cover-btn,
    .cover-option,
    .theme-switch {
        right: 4.375rem;
    }
}

/* LARGE LAPTOP BREAKPOINT */
@media (max-width: 76.25rem) {
    .toggle-sidebar.active-toggle {
        left: 12rem;
    }

    /* ============ AUTHENTICATION ============ */
    /* Layout Fixed */
    .auth-layout {
        width: 90%;
        margin: 0 auto;
    }
}

/* LAPTOP BREAKPOINT */
@media (max-width: 64rem) {
    /* Expanded Sidebar */
    .sidebar.expanded {
        width: 13.75rem;
    }

    .toggle-sidebar.active-toggle {
        left: 11.25rem;
    }

    .nav-title,
    .nav-label,
    .user-quick-info {
        max-width: 8.125rem;
    }

    .main-content {
        padding: 0 clamp(1rem, 4vw, 4.375rem);
    }

    /* User Profile */
    .pfp-container {
        left: 2.8125rem;
    }

    /* User Buttons */
    .cover-btn,
    .cover-option,
    .theme-switch {
        right: 2.8125rem;
    }

    /* ============ AUTHENTICATION ============ */
}

/* TABLET BREAKPOINT */
@media (max-width: 54.25rem) {
    /* Sidebar */
    .sidebar {
        position: fixed;
        height: 100vh;
        z-index: 200;
    }

    .sidebar.expanded {
        width: 13.125rem;
    }

    .sidebar.collapsed {
        width: 0;
    }

    .sidebar.collapsed .nav-wrapper {
        opacity: 0;
        pointer-events: none;
    }

    /* Sidebar Toggle Btn */
    .toggle-sidebar {
        top: 4.0625rem;
    }

    .toggle-sidebar.active-toggle {
        left: 12.1875rem;
    }

    .toggle-sidebar.deactive-toggle {
        left: 1rem;
        top: 1rem;
    }

    /* Header Layout */
    .main-info-container {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        margin-top: 5.3125rem;
        margin-bottom: .8125rem;
    }

    .username h1 {
        font-size: 36.8px;
    }

    /* Profile */
    .pfp-container {
        width: 6.5625rem;
        height: 6.5625rem;
        top: 8.125rem;
        left: 1rem;
    }

    .user-icon {
        padding: .75rem;
    }

    .username {
        align-items: center;
    }

    /* Buttons */
    .cover-btn {
        top: 1rem;
        right: 1rem;
        font-size: .875rem;
        padding: .5rem .625rem;
    }

    .pfp-btn {
        padding: .125rem;
        top: 4.375rem;
    }

    .pfp-btn span {
        font-size: 1.4375rem;
    }

    .cover-option,
    .pfp-option {
        width: 11.25rem;
    }

    .cover-option {
        top: 3.75rem;
        right: 1rem;
    }

    .pfp-option {
        top: 6.5625rem;
        left: 1rem;
    }

    /* Theme Switch */
    .theme-switch {
        right: 1rem;
    }

    .main-content {
        padding: 0 1rem;
        height: auto;
    }

    /* ============ DASHBOARD ============ */

    /* Main Dash */
    .dashboard {
        flex-wrap: wrap;
        align-items: stretch;
        padding: 1rem;
        min-height: unset;
    }

    /* Left Content */
    .left-dash {
        flex: 1;
    }

    .left-dash p {
        width: auto;
    }

    /* Right Content */
    .right-dash {
        align-items: flex-end;
    }

    /* Random Quote Box */
    .random-quote {
        padding: .3125rem .625rem;
        height: auto;
        white-space: normal;
        flex-wrap: wrap;
        line-height: 1.4;
    }

    .random-quote blockquote {
        font-size: .875rem;
    }

    /* ============ AUTHENTICATION ============ */
    /* Authentication Form */
    .auth-form {
        flex-direction: column;
        height: 100%;
        border-width: .625rem;
    }

    /* None Display Design */
    .design-form {
        display: none;
    }

    .auth-login {
        width: 100%;
    }
}

/* Medium TABLET BREAKPOINT */
@media (max-width: 40.625rem) {
    /* ============ DASHBOARD ============ */
    /* Left Content */
    .left-dash {
        position: static;
    }

    /* ============ AUTHENTICATION ============ */
    .auth-header {
        white-space: wrap;
    }
}

/* SMALL TABLET BREAKPOINT */
@media (max-width: 34.375rem) {
    /* ============ DASHBOARD ============ */
    /* Main */
    .dashboard {
        flex-direction: column;
        gap: .875rem;
    }

    /* Left Content */
    .left-dash {
        width: 100%;
        gap: .375rem;
    }

    /* Right Content */
    .right-dash {
        width: 100%;
        align-items: flex-start !important;
    }

    /* No Display for paragraph */
    .left-dash p,
    .right-dash p {
        display: none;
    }

    /* Fix Overview Boxes */
    .overview-stats {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Box Config */
    .overview-box {
        height: auto;
        padding: .375rem .625rem;
        font-size: .8125rem;
    }

    /* ============ TASKS ============ */
    /* Main */
    .tasks {
        gap: .9375rem !important;
    }

    /* Task Header */
    .task-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem !important;
    }

    /* No display for h2 */
    .right-task h2 {
        display: none;
    }

    /* ============ AUTHENTICATION ============ */
    /* Auth Layout */
    .auth-layout {
        padding-top: .625rem;
    }

    /* Auth Header */
    .auth-header-wrapper {
        margin: .625rem 0;
    }

    /* Auth Form */
    .auth-form {
        min-height: auto;
        overflow: visible;
    }

    /* Auth Login */
    .auth-login {
        padding: 2rem 1.25rem;
        min-width: unset;
    }

    /* Auth Inputs */
    .auth-input-box input {
        display: flex;
        white-space: normal;
        flex-wrap: wrap;
    }

    /* Option Buttons Group */
    .auth-option-buttons-group {
        justify-content: center;
        gap: .625rem;
    }

    /* Option Buttons */
    .auth-option-buttons-group button {
        width: 2.5rem;
        height: 2.5rem;
        padding: .375rem;
    }

    /* No Display For Label */
    .auth-option-buttons-group button span {
        display: none;
    }
}

/* LARGE MOBILE BREAKPOINT */
@media (max-width: 26.5625rem) {
    /* Sidebar */
    .sidebar.expanded {
        width: 11.25rem;
    }

    /* Mini Profile */
    .user-wrapper {
        justify-content: center;
    }

    .user-img-container {
        width: 2.1875rem;
        height: 2.1875rem;
    }

    .mini-icon {
        padding: .125rem;
        font-size: 1.875rem;
    }

    .user-log {
        justify-content: center;
    }

    /* Sidebar Button */
    .toggle-sidebar.active-toggle {
        left: 10.3125rem;
    }

    .nav-title,
    .nav-label,
    .user-quick-info {
        font-size: .8125rem;
        max-width: 6.875rem;
    }

    /* Profile */
    .pfp-container {
        width: 6.25rem;
        height: 6.25rem;
        top: 8.75rem;
    }

    .username h1 {
        font-size: 30.4px;
    }

    .current-date {
        font-size: 14.4px;
    }

    /* Buttons */
    .cover-btn {
        font-size: .8125rem;
        padding: .375rem .5rem;
    }

    .pfp-btn {
        top: 3.75rem;
    }

    .cover-option,
    .pfp-option {
        width: 10rem;
    }

    .cover-option {
        top: 3.4375rem;
    }

    .pfp-option {
        top: 5.9375rem;
    }

    /* ============ TASK ============ */
    .task-input,
    .input-wrapper label {
        font-size: .8125rem !important;
    }

     /* ============ AUTHENTICATION ============ */
    /* Auth Head */
    .auth-header {
        white-space: nowrap;
    }

    /* Middle Title */
    .auth-header-wrapper a {
        display: flex;
        justify-content: center;
    }

    /* Title Config */
    .text-content span {
        font-size: clamp(1.5rem, 5vw, 1.8125rem);
    }

    /* None Display On Logo */
    .text-content img {
        display: none;
    }
}