/* =========================================================
   BrioCom Solutions — Modular CSS
   responsive.css
   Refactored from the original Time Tracking Workspace CSS.
   ========================================================= */

/* =========================================================
   36. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1250px) {

    :root {

        --sidebar-width: 235px;

        --quick-tools-width: 300px;
    }


    .workspace-content {

        padding:
            28px 24px;
    }


    .tracking-features {

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


    .time-summary {

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


    .navbar {

        padding:
            0 22px;
    }


    .navbar nav > a,
    .navbar .dropdown-title {

        padding:
            0 11px;

        font-size: 13px;
    }


    .navbar .logo img {

        width: 125px;
    }
}


/* =========================================================


/* =========================================================
   37. RESPONSIVE — SMALL DESKTOP
   ========================================================= */

@media (max-width: 1050px) {

    .freelancer-layout {

        grid-template-columns:
            220px
            minmax(0,1fr);
    }


    .quick-tools-panel {

        position: static;

        grid-column:
            1 / -1;

        height: auto;

        display: grid;

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

        gap: 14px;

        overflow: visible;
    }


    .quick-tasks-section,
    .city-time-search-section,
    .world-clocks-section,
    .time-converter-section,
    .sidebar-currency-converter {

        margin: 0;
    }


    .footer {

        margin-right: 0;
    }
}


/* =========================================================


/* =========================================================
   38. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 780px) {

    .navbar {

        min-height: 62px;

        padding:
            0 15px;
    }


    .navbar .logo img {

        width: 110px;
    }


    .navbar nav {

        display: none;
    }


    .freelancer-layout {

        display: block;

        min-height: auto;
    }


    .freelancer-sidebar {

        position: fixed;

        top: 62px;
        left: 0;

        width:
            min(285px, 88vw);

        height:
            calc(100vh - 62px);

        z-index: 4000;

        transform:
            translateX(-105%);

        transition:
            transform .3s ease;

        box-shadow:
            15px 0 40px rgba(0,0,0,.5);
    }


    .freelancer-sidebar.open {

        transform:
            translateX(0);
    }


    .sidebar-overlay {

        position: fixed;

        inset: 62px 0 0;

        z-index: 3900;

        background:
            rgba(0,0,0,.65);

        backdrop-filter:
            blur(3px);
    }


    .sidebar-overlay.active {

        display: block;
    }


    .mobile-menu {

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .workspace-topbar {

        position: sticky;

        top: 62px;

        min-height: 62px;

        padding:
            8px 14px;
    }


    .workspace-page-title span {

        font-size: 8px;
    }


    .workspace-page-title strong {

        font-size: 17px;
    }


    .workspace-topbar-right {

        gap: 4px;
    }


    .topbar-tool,
    .theme-toggle {

        width: 36px;
        height: 36px;

        font-size: 15px;
    }


    .workspace-content {

        padding:
            24px 15px;
    }


    .time-header h1 {

        font-size: 30px;
    }


    .time-header p {

        font-size: 14px;
    }


    .time-tracker-app {

        padding: 20px 15px;
    }


    .tracker-topbar {

        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 20px;
    }


    .timer-display {

        font-size: 45px;
    }


    .tracker-form {

        grid-template-columns:
            1fr;
    }


    .tracker-field.full-width {

        grid-column:
            auto;
    }


    .timer-controls {

        flex-direction: column;
    }


    .timer-btn {

        width: 100%;
    }


    .current-session {

        grid-template-columns:
            1fr;
    }


    .time-summary {

        grid-template-columns:
            1fr 1fr;
    }


    .time-history {

        padding: 17px;
    }


    .history-header {

        flex-direction: column;
    }


    .tracking-features {

        grid-template-columns:
            1fr;
    }


    .export-buttons {

        flex-direction: column;
    }


    .export-time-btn {

        width: 100%;

        justify-content: center;
    }


    .quick-tools-panel {

        display: block;

        padding: 15px;
    }


    .quick-tasks-section,
    .city-time-search-section,
    .world-clocks-section,
    .time-converter-section,
    .sidebar-currency-converter {

        margin-bottom: 15px;
    }


    .footer {

        margin-left: 0;

        padding:
            28px 18px 18px;
    }


    .footer-container {

        grid-template-columns:
            1fr;

        text-align: center;
    }


    .footer-left,
    .footer-center,
    .footer-right {

        justify-content: center;
    }
}


/* =========================================================


/* =========================================================
   39. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .workspace-topbar-right .topbar-tool {

        display: none;
    }


    .time-summary {

        grid-template-columns:
            1fr;
    }


    .timer-display {

        font-size: 38px;

        letter-spacing: 0;
    }


    .history-table {

        min-width: 700px;
    }


    .selected-city-clock {

        font-size: 21px;
    }


    .world-clock-time {

        font-size: 10px;
    }


    .footer-right {

        gap: 10px;
    }
}


/* =========================================================


/* =========================================================
   40. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {

    outline:
        2px solid var(--red);

    outline-offset:
        2px;
}


/* =========================================================


/* =========================================================
   41. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}