/* =========================================================
   ANALYSISSWIM — PACE CLOCK PLANNER
   Template: pace_clock/pc-planner
   Version: 3 — original compact design + source counts
   ========================================================= */

/* =========================================================
   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;}

/* =========================================================
   47. COMPACT WORKOUT SOURCE COUNTS
   ========================================================= */

#paceClockApp .calendarSourceCounts{
    position:absolute;
    right:8px;
    bottom:8px;
    display:flex;
    max-width:calc(100% - 16px);
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:4px;
}

#paceClockApp .calendarSourceCount{
    display:inline-flex;
    width:26px;
    height:26px;
    align-items:center;
    justify-content:center;
    flex:0 0 26px;
    background:var(--source-accent,#64748b);
    border:1px solid rgba(255,255,255,.64);
    border-radius:999px;
    box-shadow:0 2px 7px rgba(0,0,0,.16);
    color:#fff;
    font-size:12px;
    font-weight:900;
    line-height:1;
}

#paceClockApp .sourceOwn{
    --source-accent:#0b8fd8;
    --source-surface:rgba(11,143,216,.15);
}

#paceClockApp .sourceAssignedGroup{
    --source-accent:#e6a817;
    --source-surface:rgba(230,168,23,.17);
}

#paceClockApp .sourceAssignedDirect{
    --source-accent:#7c3aed;
    --source-surface:rgba(124,58,237,.15);
}

#paceClockApp .sourceSharedClub{
    --source-accent:#0f9f91;
    --source-surface:rgba(15,159,145,.15);
}

#paceClockApp .sourcePublic{
    --source-accent:#64748b;
    --source-surface:rgba(100,116,139,.15);
}

#paceClockApp .calendarDayWorkoutList{
    display:grid;
    gap:8px;
}

#paceClockApp .workoutCard.sourceOwn,
#paceClockApp .workoutCard.sourceAssignedGroup,
#paceClockApp .workoutCard.sourceAssignedDirect,
#paceClockApp .workoutCard.sourceSharedClub,
#paceClockApp .workoutCard.sourcePublic{
    background:var(--source-surface);
    border-color:var(--source-accent);
    border-inline-start:4px solid var(--source-accent);
}

#paceClockApp .workoutSourceBadge,
#paceClockApp .workoutStatusBadge{
    display:inline-flex;
    min-height:22px;
    align-items:center;
    justify-content:center;
    padding:3px 7px;
    border:1px solid currentColor;
    border-radius:999px;
    color:var(--source-accent,#64748b);
    font-size:9px;
    font-weight:900;
    letter-spacing:.05em;
    line-height:1;
}

#paceClockApp .workoutStatusBadge[hidden]{display:none !important;}
#paceClockApp .workoutStatusBadge.isDone{color:#37b96f;}
#paceClockApp .workoutStatusBadge.isProgress{color:#4c9fe1;}
#paceClockApp .workoutStatusBadge.isViewed{color:#94a3b8;}
#paceClockApp .workoutStatusBadge.isNew{color:#e6a817;}

#paceClockApp .workoutSourceLegend{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 10px;
}

#paceClockApp .workoutSourceLegend:empty{display:none;}

#paceClockApp .workoutSourceLegendItem{
    display:inline-flex;
    align-items:center;
    padding:4px 7px;
    background:var(--source-surface);
    border:1px solid var(--source-accent);
    border-radius:999px;
    color:inherit;
    font-size:10px;
    font-weight:800;
}

#paceClockApp .unscheduledAssignments{
    display:grid;
    grid-template-columns:minmax(150px,auto) repeat(auto-fit,minmax(180px,1fr));
    gap:8px;
    align-items:center;
    margin-bottom:12px;
    padding:10px;
    background:rgba(230,168,23,.12);
    border:1px solid rgba(230,168,23,.52);
    border-radius:12px;
}

#paceClockApp .calendarMiniCard{
    display:block;
    width:100%;
    min-width:0;
    padding:7px 9px;
    overflow:hidden;
    background:var(--source-surface);
    border:1px solid var(--source-accent);
    border-inline-start:4px solid var(--source-accent);
    border-radius:9px;
    color:inherit;
    font:inherit;
    font-size:11px;
    font-weight:800;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}

#paceClockApp .libraryActions{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));}

@media (max-width:640px){
    #paceClockApp .calendarSourceCounts{
        right:5px;
        bottom:5px;
        max-width:calc(100% - 10px);
        gap:2px;
    }

    #paceClockApp .calendarSourceCount{
        width:20px;
        height:20px;
        flex-basis:20px;
        font-size:10px;
    }
}

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