/* =========================================================
   #pace_clock/pc-planner
   ========================================================= */

/* =========================================================
   25.1 WORKOUT CALENDAR
   ========================================================= */

#paceClockApp .calendarWrap{
    display:flex;
    flex-direction:column;
    gap:14px;
}

#paceClockApp .calendarHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

#paceClockApp .calendarTitle{
    font-size:22px;
    font-weight:800;
    text-transform:capitalize;
}

#paceClockApp .calendarGrid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:8px;
}

#paceClockApp .calendarWeekday{
    text-align:center;
    font-size:12px;
    font-weight:800;
    opacity:.7;
    padding:4px;
}

#paceClockApp .calendarCell{
    position:relative;
    min-height:92px;
    border-radius:16px;
    padding:8px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    transition:.15s ease;
}

#paceClockApp .calendarCell.empty{opacity:.18;}

#paceClockApp .calendarCell.hasWorkout{
    cursor:pointer;
    background:rgba(0,136,221,.22);
    border-color:rgba(255,255,255,.18);
}

#paceClockApp .calendarCell.hasWorkout:hover{
    transform:translateY(-2px);
    background:rgba(0,136,221,.34);
}

#paceClockApp .calendarDayNum{
    font-size:14px;
    font-weight:800;
}

#paceClockApp .calendarBadge{
    position:absolute;
    right:8px;
    bottom:8px;
    min-width:26px;
    height:26px;
    border-radius:999px;
    background:#00aaff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
}

@media (max-width:640px){

    #paceClockApp .calendarGrid{gap:5px;}

    #paceClockApp .calendarCell{
        min-height:58px;
        border-radius:12px;
        padding:6px;
    }

    #paceClockApp .calendarTitle{font-size:18px;}

    #paceClockApp .calendarBadge{
        min-width:22px;
        height:22px;
        font-size:11px;
    }
}

#paceClockApp .calendarLayout{
    display:grid;
    grid-template-columns:1.5fr .9fr;
    gap:16px;
    align-items:start;
}

#paceClockApp .calendarDayPanel{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:12px;
    min-height:300px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

#paceClockApp .calendarDayPanelTitle{
    font-size:18px;
    font-weight:800;
    margin-bottom:4px;
}

@media (max-width:760px){
    #paceClockApp .calendarLayout{grid-template-columns:1fr;}

    #paceClockApp .calendarDayPanel{min-height:auto;}
}

/* =========================================================
   33. CALENDAR DRAG & DROP
   ========================================================= */

#paceClockApp .calendarCell.dragOver{
    background:rgba(0,170,255,.35);
    border-color:rgba(255,255,255,.45);
    box-shadow:0 0 0 2px rgba(0,170,255,.35);
    transform:scale(1.02);
    transition:.12s ease;

    outline:2px dashed rgba(255,255,255,.75);
    outline-offset:-4px;
}

#paceClockApp .calendarCell.hasWorkout.dragOver{background:rgba(0,170,255,.45);}

/* =========================================================
   34. PLANNER WEEK VIEW
   ========================================================= */

#paceClockApp .calendarCell.selected,
#paceClockApp .calendarCell.today{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.55);
    box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

#paceClockApp .plannerViewButtons{
    display:flex;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}

#paceClockApp .plannerViewButtons .btn.active{background:#00aaff;}

#paceClockApp .weekPlannerGrid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:10px;
}

#paceClockApp .weekPlannerDay{
    min-height:260px;
    padding:10px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    gap:8px;
}

#paceClockApp .weekPlannerDayTitle{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:13px;
}

#paceClockApp .weekPlannerDayTitle span{
    opacity:.72;
    font-size:12px;
}

#paceClockApp .weekCreateBtn{width:100%;}

#paceClockApp .weekPlannerDay.dragOver{
    outline:2px dashed rgba(255,255,255,.75);
    outline-offset:-4px;
    background:rgba(0,170,255,.28);
}

@media (max-width:1100px){
    #paceClockApp .weekPlannerGrid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:700px){
    #paceClockApp .weekPlannerGrid{grid-template-columns:1fr;}

    #paceClockApp .weekPlannerDay{min-height:auto;}
}

/* =========================================================
   35. YEAR VIEW
   ========================================================= */
#paceClockApp .yearPlannerGrid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}

#paceClockApp .yearMonthCard{
    min-height:120px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    cursor:pointer;
    transition:.15s ease;
}

#paceClockApp .yearMonthCard:hover{
    transform:translateY(-2px);
    background:rgba(0,170,255,.20);
    border-color:rgba(255,255,255,.28);
}

#paceClockApp .yearMonthTitle{
    font-size:18px;
    font-weight:900;
    margin-bottom:10px;
}

#paceClockApp .yearMonthMeta{
    font-size:13px;
    font-weight:700;
    opacity:.75;
    margin-top:4px;
}

@media (max-width:900px){
    #paceClockApp .yearPlannerGrid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:520px){
    #paceClockApp .yearPlannerGrid{grid-template-columns:1fr;}
}

/* =========================================================
   46. MOBILE MOVE MODE
   ========================================================= */

#paceClockApp .weekPlannerDay,
#paceClockApp .calendarCell{touch-action:manipulation;}