/* ==========================================
   Southbound — My Clients
   ========================================== */

/* Every other page in the app gives its own <main class="X-page">
   this width/margin/padding rule (see programs.css, settings.css,
   habits.css) -- it's what keeps text off the screen edges. This
   page never got one, so its content ran edge-to-edge with no side
   gutter at all. */
.clients-page{
    width:min(900px,94%);
    margin:0 auto;
    padding:28px 0 100px;
}

/* Several elements here set their own display (flex rows, the modal
   overlay) and an author display rule always outranks the browser's
   native [hidden]{display:none} at equal specificity/origin -- one
   blanket rule instead of chasing it per element. */
.clients-page [hidden],
#planEditorOverlay[hidden]{
    display:none !important;
}

.clients-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    color:var(--text-secondary);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:40px 20px;
}

.clients-tabs{
    display:flex;
    width:max-content;
    max-width:100%;
    margin:0 0 22px;
    gap:4px;
    padding:4px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
}
.clients-tab{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--text-secondary);
    padding:9px 20px;
    border-radius:999px;
    font:700 13px/1 var(--font-body);
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.clients-tab:hover{color:var(--text);}
.clients-tab.active{background:var(--primary);color:#0f2019;}
.clients-tab-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    margin-left:6px;
    border-radius:999px;
    background:var(--red);
    color:var(--on-primary);
    font-size:11px;
    font-weight:800;
}

.clients-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:24px;
}
.clients-card h2{
    font-size:16px;
    margin:0 0 6px;
}
.clients-card-note{
    color:var(--text-secondary);
    font-size:13px;
    line-height:1.5;
    margin:0 0 14px;
}

.clients-redeem-row{
    display:flex;
    gap:10px;
}
.clients-redeem-row input{
    flex:1;
    min-width:0;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    padding:11px 14px;
    font-size:15px;
    font-family:var(--font-mono);
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* The search box shares the invite-code row, but names aren't codes. */
.clients-redeem-row #assignSearchInput{
    font-family:var(--font-body);
    letter-spacing:normal;
    text-transform:none;
}
.clients-assign-row{
    align-items:center;
    padding-right:10px;
}
.clients-assign-row .clients-btn-primary{
    flex-shrink:0;
}
.clients-secondary-card{
    margin-top:0;
}
.clients-secondary-card > summary{
    cursor:pointer;
    color:var(--text);
    font-size:14px;
    font-weight:800;
    list-style-position:inside;
}
.clients-secondary-card[open] > summary{
    margin-bottom:12px;
}
.clients-secondary-card > summary::marker{
    color:var(--muted);
}

.clients-btn-primary,
.clients-btn-secondary,
.clients-btn-icon{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:var(--radius-pill);
    padding:11px 18px;
    font:700 13px/1 var(--font-body);
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;
    min-height:var(--control-height);
}
.clients-btn-primary{
    background:var(--primary);
    color:var(--on-primary);
    border:1px solid var(--primary);
    box-shadow:0 6px 18px rgba(201,173,132,.25);
}
.clients-btn-primary:hover{transform:translateY(-1px);}
.clients-btn-primary:disabled{opacity:.6;cursor:default;transform:none;}
.clients-btn-secondary{
    background:var(--surface-light);
    color:var(--text-secondary);
    border:1px solid var(--border);
}
.clients-btn-secondary:hover{border-color:var(--primary);color:var(--text);}
.clients-btn-secondary.copied{border-color:var(--green);color:var(--green);}
.clients-btn-icon{
    padding:9px;
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
}
.clients-btn-icon:hover{border-color:var(--red);color:var(--red);}

.clients-msg{
    display:block;
    margin-top:10px;
    font-size:13px;
    color:var(--green);
}
.clients-msg-error{color:var(--red);}

.clients-code-display{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding:12px 14px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
}
#codeValue{
    flex:1;
    font-family:var(--font-mono);
    font-size:20px;
    font-weight:800;
    letter-spacing:.15em;
    color:var(--primary);
}

.clients-section-title{
    font-size:14px;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    margin:0 0 12px;
}

.clients-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.clients-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
}
.clients-row-avatar{
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#0f2019;
    font-weight:800;
}
.clients-row-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.clients-row-info strong{
    font-size:14.5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.clients-row-info span{
    font-size:12px;
    color:var(--text-secondary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---- Pending accounts ---- */

/* A pending row's info column can wrap across several lines (name,
   email, a whole checkbox list of services) -- .clients-row's own
   align-items:center would center the avatar and action buttons
   against that tall block instead of the top, the same layout bug
   fixed in schedule.css's .sched-request-row. Applying the fix here
   from the start instead of shipping the bug again. */
.clients-pending-row{
    align-items:flex-start;
    flex-wrap:wrap;
}
.clients-pending-row .clients-row-info span,
.clients-pending-row .clients-row-info strong{
    white-space:normal;
}
.clients-service-note{
    font-size:12.5px;
    color:var(--text-secondary);
    margin-top:6px;
    line-height:1.5;
}
/* The application they sent from apply.html (js/applicationForm.js). */
.clients-app{
    margin-top:10px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    background:var(--surface-light);
}
.clients-app-head{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--primary);
}
.clients-app-lines{
    margin:6px 0 0;
    padding:0;
    list-style:none;
    font-size:13px;
    line-height:1.5;
    color:var(--text);
    overflow-wrap:anywhere;
}
.clients-app-link{
    appearance:none;
    background:none;
    border:0;
    padding:6px 0 0;
    color:var(--text-secondary);
    font:600 12.5px/1.3 var(--font-body);
    text-decoration:underline;
    cursor:pointer;
}
.clients-app-match{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
    font-size:12.5px;
    color:var(--text-secondary);
}
.clients-app-match select{max-width:100%;min-height:40px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-light);color:var(--text);font-size:14px;}
.clients-service-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:8px;
}
.clients-service-check{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    color:var(--text);
    cursor:pointer;
}
.clients-pending-actions{
    flex-shrink:0;
    display:flex;
    gap:8px;
    margin-left:auto;
}
@media(max-width:560px){
    .clients-pending-actions{
        width:100%;
        margin-left:0;
        justify-content:flex-end;
    }
}

/* ---- Plan editor overlay ---- */

#planEditorOverlay{
    position:fixed;
    inset:0;
    /* Above the site's own chrome -- the sticky navbar sits at
       z-index:1000 and the mobile search overlay at 4500, both of
       which would otherwise render on top of (and intercept clicks
       on) this modal near the top of the page. */
    z-index:5000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(5,13,9,.72);
    backdrop-filter:blur(2px);
    padding:0;
}
.clients-editor{
    width:100%;
    max-width:680px;
    max-height:92vh;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:22px 22px 0 0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
@media(min-width:720px){
    #planEditorOverlay{align-items:center;padding:20px;}
    .clients-editor{border-radius:22px;max-height:88vh;}
}

.clients-editor-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:20px 20px 14px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.clients-editor-client{
    font-size:12px;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
    margin-bottom:4px;
}
.clients-editor-head h2{
    font-size:19px;
    margin:0;
}
.clients-editor-close{
    appearance:none;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:50%;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    cursor:pointer;
    flex-shrink:0;
}
.clients-editor-close:hover{color:var(--text);}

.clients-editor-body{
    overflow-y:auto;
    padding:18px 20px 24px;
}

.clients-plan-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}
.clients-plan-tab{
    appearance:none;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-secondary);
    padding:8px 14px;
    border-radius:999px;
    font:700 12.5px/1 var(--font-body);
    cursor:pointer;
}
.clients-plan-tab.active{background:var(--primary);color:#0f2019;border-color:var(--primary);}

.clients-weeks{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:24px;
}
.clients-week{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
}
.clients-week-head{
    font-size:12.5px;
    font-weight:800;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:10px;
}
.clients-days{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.clients-day-row{
    display:grid;
    grid-template-columns:38px 84px 64px 1fr;
    gap:8px;
    align-items:center;
}
.clients-day-label{
    font-size:11.5px;
    font-weight:800;
    color:var(--muted);
}
.clients-day-type,
.clients-day-miles,
.clients-day-session{
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--text);
    padding:7px 8px;
    font-size:12.5px;
    min-width:0;
}
.clients-day-type{cursor:pointer;}

.clients-notes-section{
    border-top:1px solid var(--border);
    padding-top:18px;
    margin-bottom:18px;
}
.clients-notes-section h3{
    font-size:14px;
    margin:0 0 12px;
}
.clients-notes-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
}
.clients-note{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
}
.clients-note-author{
    font-size:12px;
    font-weight:800;
    color:var(--primary);
    margin-right:8px;
}
.clients-note-time{
    font-size:11px;
    color:var(--muted);
}
.clients-note p{
    margin:6px 0 0;
    font-size:13.5px;
    line-height:1.45;
}
.clients-note-form{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.clients-note-form textarea{
    resize:vertical;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    padding:10px 12px;
    font:13.5px/1.4 var(--font-body);
}
.clients-note-form button{align-self:flex-end;}

.clients-editor-actions{
    display:flex;
    align-items:center;
    gap:14px;
    border-top:1px solid var(--border);
    padding-top:18px;
}

@media(max-width:560px){
    /* At narrow widths there isn't room for type + miles + session
       text side by side without truncating -- a <select> can't
       ellipsis its own text, so a cramped column just clips it
       mid-word ("Workout" -> "Worko"). Give the type dropdown and
       miles field their own row and let the session-notes field
       take the full width on a second row instead. */
    .clients-day-row{
        grid-template-columns:34px 1fr 60px;
        grid-template-areas:
            "label type miles"
            "session session session";
        row-gap:6px;
    }
    .clients-day-label{grid-area:label;}
    .clients-day-type{grid-area:type;}
    .clients-day-miles{grid-area:miles;}
    .clients-day-session{grid-area:session;}
}

/* ---- Client list: search, filters, rows that open the Client Hub ---- */

.clients-search{
    width:100%;
    margin:0 0 10px;
    padding:11px 14px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font:14px var(--font-body);
}
.clients-search:focus{ outline:none; border-color:var(--primary); }

.clients-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-bottom:4px;
    margin-bottom:12px;
    scrollbar-width:none;
}
.clients-filters::-webkit-scrollbar{ display:none; }
.clients-filter{
    flex-shrink:0;
    min-height:36px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:transparent;
    color:var(--text-secondary);
    font:600 13px/1 var(--font-body);
    cursor:pointer;
    white-space:nowrap;
}
.clients-filter.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.clients-filter-count{ opacity:.7; margin-left:3px; }

.clients-client-row{ padding:0 10px 0 0; }
.clients-client-link{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 4px 12px 14px;
    color:inherit;
    text-decoration:none;
}
.clients-client-link .clients-row-info{ flex:1; min-width:0; }
.clients-client-meta{ color:var(--muted); font-size:12.5px; }
.clients-client-chevron{ color:var(--muted); flex-shrink:0; }
.clients-client-row:hover{ border-color:rgba(201,173,132,.35); }
.clients-attn-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    margin-left:6px;
    border-radius:999px;
    background:var(--red);
    color:var(--on-primary);
    font-size:11px;
    font-weight:700;
    vertical-align:2px;
}

/* ---- Inline plan editor (js/planEditor.js) ---- */

.clients-plan-name{ margin:0 0 10px; font-size:17px; }
.clients-week.is-current{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.clients-week-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.clients-week-now{
    padding:2px 8px;
    border-radius:999px;
    background:var(--primary);
    color:var(--on-primary);
    font-size:11px;
    font-weight:700;
}
.clients-week-done{ margin-left:auto; color:var(--muted); font-size:12px; font-weight:600; }
.clients-day-row.is-done .clients-day-label{ color:var(--green); }
.clients-day-check{ font-weight:700; }
.clients-client-athlete{ color:var(--text-secondary); font-weight:500; font-size:13px; }

/* ---- Strength planned vs actual (js/strengthSession.js: client workout page + coach hub) ---- */

.st-table{ display:flex; flex-direction:column; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.st-row{ display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:8px; padding:9px 12px; border-top:1px solid var(--border); color:var(--text); font-size:14px; }
.st-row b{ color:var(--primary); }
.st-row-head{ border-top:0; background:var(--surface-light); color:var(--muted); font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.st-row.is-heavier span:last-child{ color:var(--success); font-weight:700; }
.st-row.is-lighter span:last-child{ color:var(--warning); }
.st-row.is-missed span:last-child{ color:var(--muted); }
.st-row .ui-icon{ width:13px; height:13px; vertical-align:-1px; }
@media (max-width:480px){
    .st-row{ grid-template-columns:1fr 1fr; }
    .st-row span:first-child{ grid-column:1 / -1; font-weight:700; }
    .st-row-head span:first-child{ display:none; }
}

/* ---- A check-in's details (js/checkinView.js: check-in page + coach hub) ---- */

.ck-week{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; padding:0; list-style:none; }
.ck-week li{ padding:5px 10px; border-radius:999px; background:var(--surface-light); color:var(--text); font-size:13px; font-weight:600; }
.ck-scores{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.ck-score{ padding:4px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); font-size:13px; }
.ck-score b{ color:var(--text); }
.ck-score.is-low{ border-color:color-mix(in srgb, var(--amber) 60%, transparent); background:var(--warning-bg); }
.ck-score.is-low b{ color:var(--warning); }
.ck-pain{ display:flex; align-items:flex-start; gap:8px; margin:8px 0; padding:9px 12px; background:var(--warning-bg); border-radius:12px; color:var(--text); font-size:14px; }
.ck-pain .ui-icon{ color:var(--warning); margin-top:2px; }
.ck-said{ margin:8px 0 0; }
.ck-said span{ color:var(--muted); font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.ck-said p{ margin:2px 0 0; color:var(--text); font-size:14.5px; line-height:1.5; white-space:pre-wrap; }

/* ---- Change requests (js/changeRequestDialog.js, coach hub) ---- */

.cr-dialog{ width:min(500px, calc(100vw - 24px)); }
.cr-reasons{ display:flex; flex-wrap:wrap; gap:8px; }
.cr-reasons input{ position:absolute; opacity:0; pointer-events:none; }
.cr-reasons span{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    background:var(--surface-light);
    color:var(--text-secondary);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}
.cr-reasons input:checked + span{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.cr-reasons input:focus-visible + span{ box-shadow:var(--focus-ring); }
.cr-list{ display:flex; flex-direction:column; gap:10px; }
.cr-item{ padding:12px 14px; border:1px solid var(--border); border-radius:14px; }
.cr-item.is-open{ border-color:rgba(201,173,132,.45); }
.cr-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cr-item-head strong{ color:var(--text); font-size:15px; }
.cr-status{ color:var(--muted); font-size:12.5px; font-weight:700; }
.cr-item.is-open .cr-status{ color:var(--primary); }
.cr-message{ margin:6px 0 0; color:var(--text-secondary); font-size:14.5px; line-height:1.5; font-style:italic; white-space:pre-line; }
.cr-reply{ margin:10px 0 0; }
.cr-withdraw{ margin-top:6px; padding-left:0; }
.wo-reply{ margin:0 0 12px; padding:12px 14px; background:rgba(201,173,132,.1); border-left:3px solid var(--primary); border-radius:0 12px 12px 0; }
.wo-reply span{ display:flex; align-items:center; gap:6px; color:var(--primary); font-size:12.5px; font-weight:800; }
.wo-reply p{ margin:4px 0 0; color:var(--text); font-size:15px; line-height:1.55; }
.cr-dialog [hidden], .cr-list [hidden]{ display:none !important; }

/* ==========================================================
   PREMIUM, THE CLIENT-SIDE PAGES BUILT ON THIS FILE (2026-10-17): Check-in,
   Sessions, Messages and From Your Coach share these pieces, so they share
   the premium recipe (css/style.css → PREMIUM SURFACES): cards are dark
   bubbles with plain headings, tabs an inset track with a lit lens, the main
   button the lens, the others glass, fields dark insets. Each page joins the
   list below in its own commit; Coach a Client (clients.html) isn't in it yet.
========================================================== */
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .eos-today-eyebrow{ display:none; }
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .eos-today-hero::before{ display:none; }

:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-card{
    padding:18px;
    margin-bottom:16px;
    border-radius:26px;
    background:var(--sb-bubble-dark-bg);
    border:1px solid var(--sb-bubble-dark-border);
    box-shadow:var(--sb-bubble-dark-shadow);
}
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-card h2{ font:650 18px/1.25 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text); margin:0 0 6px; }
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-card-note{ font-size:14px; color:var(--text-secondary); }
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-section-title{ margin:28px 0 12px; font:650 18px/1.25 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text); }
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-empty{
    border-radius:26px;
    background:var(--sb-bubble-dark-bg);
    border:1px dashed var(--sb-glass-border);
    box-shadow:none;
}

:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-tabs{
    padding:4px;
    gap:2px;
    background:var(--sb-inset-bg);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-tab{ min-height:44px; padding:0 18px; border-radius:14px; font:650 14px/1 var(--font-body); }
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-tab.active{ background:var(--sb-lens-bg); color:var(--on-primary); box-shadow:var(--sb-lens-shadow); }

:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-btn-primary{
    min-height:48px;
    padding:0 22px;
    border:0;
    border-radius:999px;
    background:var(--sb-lens-bg);
    box-shadow:var(--sb-lens-shadow);
    color:var(--on-primary);
    font:700 15px/1 var(--font-body);
}
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-btn-secondary{
    min-height:44px;
    border-radius:999px;
    background:var(--sb-glass-bg);
    border:1px solid var(--sb-glass-border);
    box-shadow:var(--sb-glass-shadow);
    color:var(--text);
    font:650 14px/1 var(--font-body);
}
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) .clients-btn-secondary:hover{ border-color:rgba(214,185,142,.45); }

:is(.checkin-page, .schedule-page, .messages-page, .updates-page) textarea,
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) select,
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) input[type="text"],
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) input[type="date"],
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) input[type="time"],
:is(.checkin-page, .schedule-page, .messages-page, .updates-page) input[type="number"]{
    border-radius:16px;
    background:var(--sb-inset-bg);
    border:1px solid var(--sb-inset-border);
    box-shadow:var(--sb-inset-shadow);
    color:var(--text);
    font-size:16px;
}

/* ==========================================================
   MY CLIENTS as a table (2026-10-17, "Command board"): the daily list
   comes first, with plan, check-in, next session and last seen on one
   line per athlete. Adding a client moved under the list.
========================================================== */
.clients-list-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.clients-list-head .clients-section-title{ margin:0; }
.clients-add-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; min-height:40px; }
#clientFilters .clients-filter{ border-radius:var(--radius-sm); }
#clientFilters .clients-filter.active{ background:var(--sb-glass-bg); border-color:var(--sb-glass-border); color:var(--text); }
#clientFilters .clients-filter-count{ color:var(--primary); font-family:var(--font-mono); font-size:11px; opacity:1; }

.clients-table{
    gap:0;
    background:var(--sb-bubble-raised-bg);
    border:1px solid var(--sb-bubble-raised-border);
    box-shadow:var(--sb-bubble-raised-shadow);
    border-radius:var(--radius);
    overflow:hidden;
}
.clients-table:empty{ display:none; }
.clients-table .clients-client-row{ background:transparent; border:0; border-top:1px solid var(--border); border-radius:0; padding:0 10px 0 0; display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; }
.clients-table .clients-client-row:first-child{ border-top:0; }
.clients-table .clients-client-row:hover{ background:color-mix(in srgb, var(--primary) 5%, transparent); border-color:var(--border); }
.clients-table .clients-client-row:first-child:hover{ border-top:0; }
.clients-thead, .clients-table .clients-client-link{
    display:grid;
    grid-template-columns:44px minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 20px;
    column-gap:14px;
    align-items:center;
}
.clients-thead{ padding:0 58px 8px 14px; margin-top:6px; font:600 10.5px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.clients-thead span:first-child{ grid-column:1 / 3; }
.clients-thead[hidden]{ display:none; }
.clients-table .clients-client-link{ padding:14px 4px 14px 14px; }
.clients-cell{ font-size:14px; color:var(--text); min-width:0; display:flex; flex-direction:column; gap:2px; }
.clients-cell-sub, .clients-cell-quiet{ color:var(--muted); font-size:13px; }
.clients-cell-who > span{ color:var(--text-secondary); font-size:13px; }
.clients-tag{ align-self:flex-start; padding:3px 7px; border-radius:4px; border:1px solid var(--border); font:600 10.5px/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.clients-tag.is-bad{ color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); }
.clients-tag.is-warn{ color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, transparent); }
.clients-table .clients-btn-icon{ opacity:.6; }
.clients-table .clients-client-row:hover .clients-btn-icon, .clients-table .clients-btn-icon:focus-visible{ opacity:1; }

.clients-add{ margin-top:28px; }
.clients-add > summary{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-weight:700; color:var(--text); list-style:none; }
.clients-add > summary::-webkit-details-marker{ display:none; }
.clients-add[open] > summary{ margin-bottom:14px; border-color:var(--sb-glass-border); background:var(--sb-glass-bg); }
.clients-add .clients-card:first-of-type{ margin-top:0; }

@media (max-width:820px){
    .clients-thead{ display:none; }
    .clients-table .clients-client-link{ grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 20px; row-gap:10px; column-gap:12px; align-items:start; }
    .clients-table .clients-row-avatar{ grid-row:1; }
    .clients-table .clients-cell-who{ grid-column:2 / 4; grid-row:1; }
    .clients-table .clients-client-chevron{ grid-column:4; grid-row:1; align-self:center; }
    .clients-table .clients-cell{ grid-column:2; }
    .clients-table .clients-cell:nth-of-type(even){ grid-column:3; }
    .clients-cell::before{ content:attr(data-label); font:600 10px/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
}

/* Session plans: the coach's Schedule button and the attach dialog */
.sched-plan{ display:block; width:100%; margin-top:6px; min-height:36px; padding:0 8px; border-radius:6px; border:1px dashed rgba(236,230,212,.3); background:none; color:var(--primary); font:600 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-align:left; }
.sched-plan.has{ border-style:solid; border-color:var(--primary); }
.sp-dialog{ width:min(480px, calc(100vw - 24px)); }
.sp-lbl{ font:600 11px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); }
.sp-sub,.sp-hint{ font-size:13px; color:var(--text-secondary); margin:0; }
.sp-seg{ display:flex; gap:6px; }
.sp-seg button{ flex:1; min-height:44px; border-radius:6px; border:1px solid rgba(236,230,212,.16); background:none; color:var(--text); font:600 13px var(--font-body); cursor:pointer; }
.sp-seg button.on{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.sp-lines{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.sp-lines li{ display:grid; grid-template-columns:72px 1fr auto; gap:8px; font-size:14px; padding:6px 0; border-top:1px solid rgba(236,230,212,.1); }
.sp-lines li span{ color:var(--text-secondary); font-size:12px; }
.sp-err{ color:var(--red); font-size:14px; margin:0; }
.sp-dialog [hidden]{ display:none !important; }