/* =========================================================
   Pace Clock — RESPONSIVE CSS
   File: pace_clock/pc-responsive

   STRUCTURE
   =========================================================

   01. TABLET / SMALL DESKTOP
   02. TABLET
   03. SMALL TABLET
   04. MOBILE
   05. SMALL MOBILE
   06. FINAL MOBILE ROW FIX
   
   07. MOBILE HEADER + STATUS CLEANUP
         Home / +Set / Workouts / TV / More
   08. VERY SMALL MOBILE
   09. IPAD / TABLET — STATUS CARDS
         Block + Rep
         Round / Workout full width below
   
   ========================================================= */


/* =========================================================
   01. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1024px){

    body:has(#paceClockApp) #paceClockApp .wrap{
        max-width:1400px;
        margin:0 auto;
        padding:10px;
    }

    body:has(#paceClockApp) #paceClockApp .appShell{
        min-height:calc(100vh - 20px);
        min-height:calc(100dvh - 20px);
        margin:10px;
        border-radius:20px;
    }

    #paceClockApp .appHeaderRow{
        display:grid !important;
        grid-template-columns:auto 1fr auto !important;
        align-items:center !important;
        gap:8px !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        min-width:0 !important;
        flex-wrap:nowrap !important;
    }

    #paceClockApp .headerLeft{
        justify-content:flex-start !important;
        overflow-x:auto !important;
        scrollbar-width:none;
    }

    #paceClockApp .headerLeft::-webkit-scrollbar{display:none;}

    #paceClockApp .headerCenter{
        justify-content:center !important;
    }

    #paceClockApp .headerRight{
        justify-content:flex-end !important;
    }

    #paceClockApp .appHeaderRow .btn{
        white-space:nowrap !important;
        flex:0 0 auto !important;
    }

    #paceClockApp .appHeaderRow .btn.small{
        min-height:40px !important;
        padding:8px 10px !important;
        font-size:14px !important;
    }

    body:has(#paceClockApp) #homeTopBtn{display:inline-flex;}

    #homeTopBtn{
        width:40px;
        min-width:40px;
        padding:0 !important;
    }

    #homeTopBtn span{display:none;}

    #paceClockApp .settingsPanel{
        top:calc(var(--siteHeaderH) + 12px);
        right:12px;
        bottom:12px;
        left:12px;
        width:auto;
        max-height:none;
    }

   #paceClockApp .thead,
#paceClockApp .trow{
    grid-template-columns:
        30px
        54px
        68px
        78px
        minmax(90px, 1fr)
        minmax(150px, 2fr)
        34px;

    gap:5px;
}

    #paceClockApp .thead{
        padding:6px;
        font-size:12px;
    }

    #paceClockApp .trow{
        min-height:42px;
        padding:5px 6px;
    }

    #paceClockApp .trow .cell:first-child{font-size:15px;}

    #paceClockApp .trow input[type="number"],
    #paceClockApp .trow input[type="text"]{
        height:36px;
        min-height:36px;
        padding:6px 8px;
        border-radius:12px;
        font-size:14px;
    }

    #paceClockApp .iconbtn{
        width:40px;
        height:40px;
        font-size:18px;
    }

    #paceClockApp .headPlusBtn{
        width:32px;
        height:32px;
        border-radius:10px;
        font-size:18px;
    }

    #paceClockApp #rows{max-height:220px;}

    #paceClockApp #clockCard .startbar{
        position:sticky;
        bottom:0;
        z-index:5;
        padding-top:10px;
        padding-bottom:max(10px, env(safe-area-inset-bottom));
        background:transparent;
        backdrop-filter:none;
    }
}


/* =========================================================
   02. TABLET
   ========================================================= */

@media (max-width:768px){

    body:has(#paceClockApp) #paceClockApp .wrap{padding:6px;}

    body:has(#paceClockApp) #paceClockApp .appShell{
        min-height:100vh;
        min-height:100dvh;
        margin:0;
        border-radius:0;
    }

    #paceClockApp #clockCard{
        max-width:1120px;
        margin-top:12px;
        padding:14px;
    }

    #paceClockApp .metaInputs{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    #paceClockApp .metaInputs input{
        height:42px !important;
        min-height:42px !important;
        padding:8px 10px !important;
        border-radius:12px !important;
        font-size:15px !important;
    }

    #templatesBtn,
    #quickBuilderBtn,
    #aiWorkoutBtn,
    #saveAsNewBtn{display:none;}

    #builderMoreBtn{display:inline-flex;}
}


/* =========================================================
   03. SMALL TABLET
   ========================================================= */

@media (max-width:640px){

    #paceClockApp .settingsInner .grid3,
    #paceClockApp .settingsInner .grid2{grid-template-columns:1fr;}

    #paceClockApp #screenSetList > .row:last-of-type{gap:8px;}

    #paceClockApp #screenSetList > .row:last-of-type .btn{
        flex:1 1 0;
        min-width:0;
    }

    #guideTopBtn{
        padding:8px 9px !important;
        font-size:13px !important;
    }

    #paceClockApp .lapRow{
        grid-template-columns:44px 1fr !important;
        gap:8px !important;
    }

    #paceClockApp .lapCompact{font-size:15px;}
}


/* =========================================================
   04. MOBILE
   ========================================================= */

@media (max-width:520px){

    #paceClockApp #startPauseBtn,
    #paceClockApp #skipBtn{
        width:100%;
        min-width:0;
    }
}


/* =========================================================
   05. SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    #paceClockApp #clockCard{
        margin-top:12px;
        padding:12px;
        border-radius:16px;
    }

    #paceClockApp #rows{max-height:132px;}

    #paceClockApp .thead{
        padding:6px;
        font-size:11px;
    }

    #paceClockApp .trow{
        min-height:40px;
        padding:4px 5px;
    }

    #paceClockApp .trow input[type="number"],
    #paceClockApp .trow input[type="text"]{
        height:34px;
        min-height:34px;
        padding:5px 7px;
        border-radius:10px;
        font-size:13px;
    }

    #paceClockApp .iconbtn{
        width:32px;
        height:32px;
        font-size:15px;
    }

    #paceClockApp #clockCard .time{
        padding:14px 16px;
        border-radius:18px;
        font-size:clamp(52px, 12vw, 72px);
    }

    #paceClockApp #clockCard .status{
        gap:8px;
        margin-top:10px;
    }

    #paceClockApp #clockCard .status .pill{
        min-height:36px;
        padding:8px 10px;
        font-size:13px;
    }

    #paceClockApp #clockCard .startbar{
        gap:12px;
        margin-top:14px;
        padding-top:8px;
        padding-bottom:max(8px, env(safe-area-inset-bottom));
    }

    #paceClockApp #startPauseBtn{
        height:72px;
        min-width:0;
        font-size:24px;
    }

    #paceClockApp #skipBtn{
        height:56px;
        min-width:0;
        font-size:16px;
    }

    #paceClockApp .metaInputs{
        grid-template-columns:1fr 1fr;
        gap:6px;
    }
}


/* =========================================================
   06. FINAL MOBILE ROW FIX
   ========================================================= */

@media (max-width:480px){

    #paceClockApp #rows{
        overflow-x:hidden !important;
        overflow-y:auto !important;
        padding-right:0 !important;
        padding-left:0 !important;
    }

    #paceClockApp .thead,
#paceClockApp .trow{
    grid-template-columns:
        26px
        42px
        54px
        62px
        minmax(58px, .8fr)
        minmax(90px, 1.4fr)
        30px !important;

    gap:3px !important;
    padding-right:3px !important;
    padding-left:3px !important;
}

    #paceClockApp .trow{
        overflow:hidden !important;
    }

    #paceClockApp .cell{
        min-width:0 !important;
    }

    #paceClockApp .trow input[type="number"],
    #paceClockApp .trow input[type="text"]{
        padding:4px 5px !important;
        font-size:12px !important;
    }

   #paceClockApp .trow .cell:last-child{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    justify-content:center !important;
}

    #paceClockApp .trow .cell:last-child .iconbtn,
#paceClockApp .trow .iconbtn{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    padding:0 !important;
    font-size:15px !important;
}

    #paceClockApp .headPlusBtn{
        width:30px !important;
        min-width:30px !important;
        height:30px !important;
        font-size:18px !important;
    }
}

/* =========================================================
   07. MOBILE HEADER + STATUS CLEANUP
   Home / +Set / Workouts / TV / More
   ========================================================= */

@media (max-width:640px){

    /* -----------------------------------------------------
       MOBILE HEADER
       ----------------------------------------------------- */

    #paceClockApp .appHeaderRow{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:6px !important;

        width:100% !important;
        padding:6px !important;
        overflow:hidden !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        display:flex !important;
        align-items:center !important;
        gap:6px !important;

        min-width:0 !important;
        overflow:visible !important;
    }

    #paceClockApp .headerLeft{
        justify-content:flex-start !important;
    }

    #paceClockApp .headerCenter{
        justify-content:center !important;
    }

    #paceClockApp .headerRight{
        justify-content:flex-end !important;
    }


    /* Hide unnecessary mobile buttons */

    #paceClockApp #resetTopBtn,
    #paceClockApp #statsTopBtn,
    #paceClockApp #guideTopBtn,
    #paceClockApp #openSettingsBtn{
        display:none !important;
    }


    /* Keep only:
       Home / +Set / Workouts / TV / More */

    #paceClockApp #homeTopBtn,
    #paceClockApp #setListTopBtn,
    #paceClockApp #myWorkoutsBtn,
    #paceClockApp #fsBtn,
    #paceClockApp #moreTopBtn{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        flex:0 0 auto !important;

        min-height:44px !important;
        height:44px !important;

        margin:0 !important;
        padding:0 10px !important;

        border-radius:13px !important;

        font-size:13px !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }


    /* Home icon only */

    #paceClockApp #homeTopBtn{
        width:44px !important;
        min-width:44px !important;
        padding:0 !important;
    }

    #paceClockApp #homeTopBtn span{
        display:none !important;
    }


    /* +Set */

    #paceClockApp #setListTopBtn{
        min-width:58px !important;
    }


    /* Workouts takes available middle space */

    #paceClockApp #myWorkoutsBtn{
        width:100% !important;
        min-width:76px !important;
        max-width:108px !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }


    /* TV */

    #paceClockApp #fsBtn{
        min-width:48px !important;
    }


    /* More */

    #paceClockApp #moreTopBtn{
        width:44px !important;
        min-width:44px !important;
        padding:0 !important;

        font-size:22px !important;
    }


    /* -----------------------------------------------------
       STATUS CARDS
       Block + Rep
       Round full width below
       ----------------------------------------------------- */

    #paceClockApp #clockCard .status{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px !important;

        width:100% !important;
        min-width:0 !important;

        margin-top:12px !important;
    }

    #paceClockApp #setStatus,
    #paceClockApp #repStatus{
        grid-column:auto !important;

        width:100% !important;
        min-width:0 !important;

        overflow:hidden !important;
    }

    #paceClockApp #roundSlot{
        grid-column:1 / -1 !important;

        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;
    }

    #paceClockApp #roundStatus{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        overflow:hidden !important;
        text-align:center !important;
    }

    #paceClockApp #setStatus,
    #paceClockApp #repStatus,
    #paceClockApp #roundStatus{
        min-height:58px !important;
        padding:10px 12px !important;

        font-size:15px !important;
        line-height:1.15 !important;

        white-space:normal !important;
        text-overflow:clip !important;
    }
}


/* =========================================================
   08. VERY SMALL MOBILE
   ========================================================= */

@media (max-width:390px){

    #paceClockApp .appHeaderRow{
        gap:4px !important;
        padding:5px 3px !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        gap:4px !important;
    }

    #paceClockApp #homeTopBtn,
    #paceClockApp #moreTopBtn{
        width:40px !important;
        min-width:40px !important;
    }

    #paceClockApp #setListTopBtn{
        min-width:52px !important;
        padding:0 7px !important;
    }

    #paceClockApp #myWorkoutsBtn{
        min-width:68px !important;
        padding:0 7px !important;
        font-size:12px !important;
    }

    #paceClockApp #fsBtn{
        min-width:42px !important;
        padding:0 7px !important;
    }
}

/* =========================================================
   09. IPAD / TABLET — STATUS CARDS
   Block + Rep
   Round / Workout full width below
   ========================================================= */

@media (min-width:768px) and (max-width:1366px){

    #paceClockApp #clockCard .status{
        display:grid !important;
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap:14px !important;

        width:100% !important;
        min-width:0 !important;

        margin-top:22px !important;
        margin-bottom:18px !important;
    }

    #paceClockApp #phaseStatus{
        grid-column:1 / -1 !important;
        width:100% !important;
        min-width:0 !important;
    }

    #paceClockApp #setStatus,
    #paceClockApp #repStatus{
        grid-column:auto !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        overflow:hidden !important;
    }

    #paceClockApp #roundSlot{
        grid-column:1 / -1 !important;

        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;
    }

    #paceClockApp #roundStatus{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        overflow:hidden !important;
        text-align:center !important;
        white-space:normal !important;
    }
}

/* =========================================================
   TABLET COACH — VERTICAL CENTERING
   ========================================================= */

@media (min-width:768px) and (max-width:1366px){

    #paceClockApp.mode-tv.tv-layout-coach
    #screenClock{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:100vh !important;
        min-height:100dvh !important;

        padding:
            max(18px, env(safe-area-inset-top))
            14px
            max(64px, env(safe-area-inset-bottom)) !important;
    }

    #paceClockApp.mode-tv.tv-layout-coach
    #clockCard{
        width:calc(100vw - 28px) !important;
        max-width:none !important;

        margin:0 auto !important;
    }
}