/* =========================================================
   ANALYSISSWIM — PACE CLOCK MODALS
   Template: pace_clock/pc-modals
   Type: CSS
   Version: 3

   Purpose:
   - common Pace Clock modal windows;
   - Workout Library cards and actions;
   - login-required dialog;
   - AI Workout dialog;
   - workout assignment dialog for coaches.

   Loaded in:
   pace_clock/index
   <link rel="stylesheet" href="/pace_clock/pc-modals?v=3">

   Related JavaScript:
   - /paceclock/pc-workout-library.js
   - /paceclock/pc-workout-ai.js
   - /paceclock/pc-workout-assign.js

   Important:
   Keep the existing class names and element IDs because
   Pace Clock JavaScript uses them to open and update dialogs.

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

   1. WORKOUT MODALS
       Base overlay and modal card
       Workout Library list, cards and actions

   2. LOGIN REQUIRED MODAL
       Guest Login / Register dialog
       Guest and Member account actions

   3. AI WORKOUT MODAL
       AI workout form and three-column grid
       Mobile one-column layout

   4. WORKOUT ASSIGNMENT MODAL
       Assign button in Workout Library
       Workout, athlete/group and date fields
       Information, success and error messages
       Mobile one-column layout

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

/* =========================================================
   1. WORKOUT MODALS
   ========================================================= */

#paceClockApp .pcModal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

#paceClockApp .pcModalCard{
    width:min(920px, 100%);
    max-height:85vh;
    max-height:85dvh;
    overflow:auto;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:18px;
}

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

#paceClockApp .pcModalTitle{
    min-width:0;
    font-size:20px;
    font-weight:700;
    overflow-wrap:anywhere;
}

#paceClockApp .workoutLibraryList{
    display:flex;
    flex-direction:column;
    gap:10px;
}

#paceClockApp .workoutCard{
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:12px;
    background:#171717;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

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

#paceClockApp .workoutTitle{
    font-size:16px;
    font-weight:700;
}

#paceClockApp .workoutMeta{
    font-size:12px;
    opacity:.7;
    margin-top:4px;
}

#paceClockApp .workoutActions{
    display:flex;
    gap:8px;
}

/* =========================================================
   2. LOGIN REQUIRED MODAL
   ========================================================= */

.pcLoginOverlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
}

.pcLoginModal{
    background:#0f2f46;
    color:#fff;
    padding:22px;
    border-radius:16px;
    width:min(360px, calc(100vw - 32px));
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    text-align:center;
}

.pcLoginTitle{
    font-weight:700;
    margin-bottom:16px;
}

.pcLoginBtns{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.pcLoginModal .btn{
    appearance:none !important;
    border:1px solid rgba(255,255,255,.25) !important;
    padding:9px 14px !important;
    border-radius:8px !important;
    font-size:14px !important;
    cursor:pointer !important;
    opacity:1 !important;
    filter:none !important;
    visibility:visible !important;
}

body .pcLoginModal button.loginBtn{
    color:#fff !important;
    background:#0088dd !important;
}

body .pcLoginModal button.loginBtn:hover{
    background:#0077cc !important;
}

body .pcLoginModal button.registerBtn,
body .pcLoginModal button.cancelBtn{
    color:#111 !important;
    background:#fff !important;
    border-color:#d7e8f7 !important;
}

body .pcLoginModal button.registerBtn:hover,
body .pcLoginModal button.cancelBtn:hover{
    background:#eaf6ff !important;
}

#paceClockApp #guestAccountActions,
#paceClockApp #memberAccountActions{
    display:grid;
    gap:8px;
}

#paceClockApp #guestAccountActions[hidden],
#paceClockApp #memberAccountActions[hidden]{
    display:none !important;
}

#paceClockApp #guestAccountActions .btn,
#paceClockApp #memberAccountActions .btn{width:100%;}

/* =========================================================
   3. AI WORKOUT MODAL
   ========================================================= */

#paceClockApp #aiWorkoutModal .pcModalCard{
    width:min(760px, 100%);
    background:#102f46;
}

#paceClockApp #aiWorkoutModal label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,.92);
}

#paceClockApp #aiWorkoutModal label select,
#paceClockApp #aiWorkoutModal label input,
#paceClockApp #aiWorkoutModal label textarea{margin-top:6px;}

#paceClockApp #aiWorkoutModal .grid3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
}

#paceClockApp #generateAiWorkoutBtn{
    min-width:150px;
    font-weight:800;
}

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

    #paceClockApp #aiWorkoutModal .pcModalCard{max-height:90vh;}

    #paceClockApp #generateAiWorkoutBtn{width:100%;}
}

/* =========================================================
   4. WORKOUT ASSIGNMENT MODAL
   ========================================================= */

#paceClockApp .pcAssignModal{z-index:10020;}

#paceClockApp .pcAssignModalCard{
    width:min(760px, 100%);
    background:#102f46;
}

#paceClockApp #workoutLibraryModal .pcModalHeader{gap:10px;}

#paceClockApp #workoutLibraryModal .pcModalTitle{margin-right:auto;}

#paceClockApp .pcAssignLaunchBtn{
    flex:0 0 auto;
}

#paceClockApp .pcAssignIntro{
    margin:0 0 16px;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.5;
}

#paceClockApp .pcAssignGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

#paceClockApp .pcAssignField{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    color:#fff;
    font-size:14px;
    font-weight:700;
}

#paceClockApp .pcAssignField[hidden]{
    display:none !important;
}

#paceClockApp .pcAssignField select,
#paceClockApp .pcAssignField input{
    min-height:44px;
    color:#fff;
    background:rgba(255,255,255,.12);
}

#paceClockApp .pcAssignField option{
    color:#111;
    background:#fff;
}

#paceClockApp .pcAssignField .is-invalid{
    border-color:#ff8f96 !important;
    box-shadow:0 0 0 3px rgba(255,80,90,.18);
}

#paceClockApp .pcAssignMessage{
    margin-top:16px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.08);
    font-size:14px;
    line-height:1.45;
}

#paceClockApp .pcAssignMessage.is-info{
    border-color:rgba(116,199,255,.45);
    background:rgba(0,136,221,.16);
}

#paceClockApp .pcAssignMessage.is-success{
    border-color:rgba(84,211,126,.5);
    background:rgba(42,175,87,.16);
    color:#d9ffe5;
}

#paceClockApp .pcAssignMessage.is-error{
    border-color:rgba(255,113,124,.5);
    background:rgba(210,55,68,.16);
    color:#ffe1e4;
}

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

body.pcAssignModalOpen{overflow:hidden;}

@media (max-width:640px){
    #paceClockApp .pcAssignModal{padding:10px;}

    #paceClockApp .pcAssignModalCard{
        max-height:92vh;
        max-height:92dvh;
        padding:15px;
    }

    #paceClockApp .pcAssignGrid{
        grid-template-columns:1fr;
        gap:12px;
    }

    #paceClockApp .pcAssignFooter{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    #paceClockApp .pcAssignFooter .btn{width:100%;}

    #paceClockApp .pcAssignLaunchBtn{
        padding:8px 11px;
    }
}